Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Rows & Columns Inside Content Page (No Table) Rate Topic   - - - - -

 
  • Catrinau
  • Newbie
  • Trial users
  • Join Date: 14-May 15
  • 10 posts

Posted 04 June 2015 - 03:36 PM #1

Hi there. I'm new to CS Cart. We're moving from opencart to CS cart and I have a question about how the grid/blocks, etc of bootstrap work within the content of the page. I know we can change the layout with the bootstrap grid layout thing that cscart offers, but what about within the content description of a content page?
In our old site we'd go into source code for the page editor and write something like:
<div class="row LeftIn">
<div class="col-sm-6 MB10">
<h2><strong>Masonry Fireplaces</strong></h2></div>
<div class="col-sm-6 MB10">Zero Clearance Fireplaces </div>
</div>

But that doesn't seem to work for Cs Cart. I know we can use tables, but I really do not want to use tables on the site as they should really be phased out. I know I can "float" an image, but I really like the structured look of the columns.

Any help would be appreciated.

Here are some examples of how we had it set up with opencart.

Attached Thumbnails

  • faqshow.JPG
  • faq2show.JPG


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18673 posts

Posted 05 June 2015 - 09:49 AM #2

Try the following code:

<div class="grid-list">
  <div class="ty-column2"></div>
  <div class="ty-column2"></div>
</div>

or

<div class="grid-list">
  <div class="ty-column3"></div>
  <div class="ty-column3"></div>
  <div class="ty-column3"></div>
</div>

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • Catrinau
  • Newbie
  • Trial users
  • Join Date: 14-May 15
  • 10 posts

Posted 05 June 2015 - 02:23 PM #3

Thank you for your quick reply. Unfortunately, neither one of those seems to be working. :(

 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18673 posts

Posted 08 June 2015 - 08:32 AM #4

What theme and CS-Cart version do you use?

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • Catrinau
  • Newbie
  • Trial users
  • Join Date: 14-May 15
  • 10 posts

Posted 08 June 2015 - 02:49 PM #5

I'm using 4.3.1 and Responsive Theme: Modern

 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18673 posts

Posted 09 June 2015 - 08:53 AM #6

We have just tested it and it works on the demo website. Do not forget to switch the WYSIWYG editor to the "source" mode.

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • fbranjo
  • Advanced Member
  • Trial users
  • Join Date: 28-Dec 17
  • 107 posts

Posted 10 November 2018 - 05:48 AM #7

Try the following code:
 

<div class="grid-list">
  <div class="ty-column2"></div>
  <div class="ty-column2"></div>
</div>
or

<div class="grid-list">
  <div class="ty-column3"></div>
  <div class="ty-column3"></div>
  <div class="ty-column3"></div>
</div>

 

When using the above and create 5 table rows 3 columns there's a space between each rows. How can you eliminate the space between rows?



 
  • imago
  • Senior Member
  • Members
  • Join Date: 18-Oct 18
  • 237 posts

Posted 10 November 2018 - 11:21 AM #8

Hi there. I'm new to CS Cart. We're moving from opencart to CS cart and I have a question about how the grid/blocks, etc of bootstrap work within the content of the page. I know we can change the layout with the bootstrap grid layout thing that cscart offers, but what about within the content description of a content page?

 

Change your WYSIWYG editor. Redactor and Redactor II are screwing up the tables and the alignments, or have not enough instruments to define all parameters of a table/row/cell. From Settings > Appearance, change the editor to Tinymce. It's a little bit ugly but works well.

 

You should also allow it in the config.local.php



 
  • fbranjo
  • Advanced Member
  • Trial users
  • Join Date: 28-Dec 17
  • 107 posts

Posted 10 November 2018 - 08:35 PM #9

Change your WYSIWYG editor. Redactor and Redactor II are screwing up the tables and the alignments, or have not enough instruments to define all parameters of a table/row/cell. From Settings > Appearance, change the editor to Tinymce. It's a little bit ugly but works well.

 

You should also allow it in the config.local.php

 

Tinymce is currently my WYSIWYG editor and still getting space in between rows of the table.



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18673 posts

Posted 12 November 2018 - 06:08 AM #10

Please add the following code to the CSS section of the Theme editor

.ty-wysiwyg-content .grid-list .ty-column3 {
     margin-bottom: 0px;
}

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • fbranjo
  • Advanced Member
  • Trial users
  • Join Date: 28-Dec 17
  • 107 posts

Posted 12 November 2018 - 07:30 AM #11

 

Please add the following code to the CSS section of the Theme edito

.ty-wysiwyg-content .grid-list .ty-column3 {
     margin-bottom: 0px;
}

thanks eComLabs i will try it..



 
  • fbranjo
  • Advanced Member
  • Trial users
  • Join Date: 28-Dec 17
  • 107 posts

Posted 13 November 2018 - 10:53 PM #12

 

<div class="ty-list-container">
       <div class="ty-column3" style="background: #baf234; border: 1px solid #cccccc; padding: 5px 20px; ">
            <h2 class="ty-list__item"><span style="color: #ff6600;">Category</span></h2>
       </div>
       <div class="ty-column3" style="background: #baf234; border: 1px solid #cccccc; padding: 5px 20px; ">
            <h2 class="ty-list__item"><span style="color: #ff6600;">Sub-Category</span></h2>
       </div>
       <div class="ty-column3" style="background: #baf234; border: 1px solid #cccccc; padding: 5px 20px; ">
            <h2 class="ty-list__item"><span style="color: #ff6600;">Commission</span></h2>
       </div>
       <div class="ty-column3" style="border: 1px solid #cccccc; padding: 5px 20px; ">
            <div class="ty-list-text big"><span style="font-size: 12pt;">All</span></div>
       </div>
       <div class="ty-column3" style="border: 1px solid #cccccc; padding: 5px 20px; ">
            <div class="ty-list-text big"><span style="font-size: 12pt;">All</span></div>
       </div>
       <div class="ty-column3" style="border: 1px solid #cccccc; padding: 5px 20px; ">
            <div class="ty-list-text big"><span style="font-size: 12pt;">5%</span></div>
       </div>
</div>

 

The above is the code in the page but still having a space in between rows even after adding the below codes you provided in the CSS Section. Is there any missing part?

 

Here is the link of the screenshot https://snag.gy/KUd5zr.jpg

 

 

Please add the following code to the CSS section of the Theme editor

.ty-wysiwyg-content .grid-list .ty-column3 {
     margin-bottom: 0px;
}


 
  • imago
  • Senior Member
  • Members
  • Join Date: 18-Oct 18
  • 237 posts

Posted 14 November 2018 - 05:10 AM #13

You still have 25 px padding between the rows.



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18673 posts

Posted 14 November 2018 - 06:00 AM #14

The above is the code in the page but still having a space in between rows even after adding the below codes you provided in the CSS Section. Is there any missing part?

 

Here is the link of the screenshot https://snag.gy/KUd5zr.jpg

 

Please try

 

.ty-wysiwyg-content .ty-list-container .ty-column3 {
     margin-bottom: 0px;
}

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • fbranjo
  • Advanced Member
  • Trial users
  • Join Date: 28-Dec 17
  • 107 posts

Posted 14 November 2018 - 08:14 AM #15

 

Please try

 

.ty-wysiwyg-content .ty-list-container .ty-column3 {
     margin-bottom: 0px;
}

 

Thank you... you are brilliant.. it work..

But is there any way i can make it responsive so if it will be viewed in small screen or mobile device it will not break?



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18673 posts

Posted 14 November 2018 - 02:00 PM #16

Try

@media (max-width: 767px) {     
    .ty-wysiwyg-content .ty-list-container .ty-column3 {
         margin-bottom: 0px;
    }
}

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.