Aligning Sub-Category Names In A Six Column Layout

I am trying to align sub-category names in a nice 6 column layout.

Where can find the actually holds the category view.tpl file to amend ?

http://prntscr.com/cgivzv

Yours truly,

Try to add the following code to the CSS section of the theme editor:

.ty-subcategories__item {
    width: 14%;
}

Result:

http://prntscr.com/ch0y20

I am trying to align sub-category names in a nice 6 column layout.

Where can find the actually holds the category view.tpl file to amend ?

http://prntscr.com/cgivzv

Yours truly,

Hi

I would go with something like this

.subcategories   {
    margin-top:20px;
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

.ty-subcategories__item {
display: inline-block;
margin: 5px 20px 5px 0;
}

to get his result

2iqelno.png

You can adjust your margins, columns as you wish

Fotis

Fotis

Thank you very very much for this information. I have implemented and toyed with and it is great. Thanks

Anthony

Fotis

Thank you very very much for this information. I have implemented and toyed with and it is great. Thanks

Anthony

I am glad it worked fine for you!

Fotis

Hi to all who are interested in what I did and accomplished with the help of Fotis (dvsgr / cscart.biz)

I have now aligned the sub categories into four columns as seen in this screenshot

[attachment=11635:sub-cat-display-in4columns.jpg]

These sub-categories are not listed when the screen resolution drops below a certain amount of pixels set in the code below

.subcategories   {
    margin-top:20px;
    -moz-column-count:4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

.ty-subcategories__item {
display: inline-block;
margin: 2px 10px 4px 0;
min-width: 200px;
font-size: 17px;
text-transform: uppercase;
font-family: Roboto;
z-index: 200;
border-top: 0;
padding: 2px 2px;
}

@media (max-width: 680px)
{
.ty-subcategories__item
{
display: none;
}
}

PS this can be used in any theme based on the Responsive theme in CS Cart.

I most certainly hope this is of any value to other members here.

Yours truly,

Anthony

sub-cat-display-in4columns.jpg

Hi

I would go with something like this

.subcategories   {
    margin-top:20px;
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

.ty-subcategories__item {
display: inline-block;
margin: 5px 20px 5px 0;
}

to get his result

2iqelno.png

You can adjust your margins, columns as you wish

Fotis

Glad to have found this Thread, so didn't need to start a new one. Am trying to do the exact same thing on my site.

I was unable to find the following section though. In which template file is this located?

.subcategories {
margin-top:20px;
-moz-column-count: 4;
-moz-column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
column-count: 4;
column-gap: 20px;
}

Glad to have found this Thread, so didn't need to start a new one. Am trying to do the exact same thing on my site.

I was unable to find the following section though. In which template file is this located?

Hi Daimion,

if you go to design THemes, and open the vidual editor, you can select the custom css from the dropdown on the top and the code there and save.

Thats it

Fotis

PS more here http://docs.cs-cart.com/4.2.x/themes/styles.html

Hi Daimion,

if you go to design THemes, and open the vidual editor, you can select the custom css from the dropdown on the top and the code there and save.

Thats it

Fotis

PS more here http://docs.cs-cart.com/4.2.x/themes/styles.html

Hi Fotis,

Thanks for this. I managed to find the Custom CSS are in the Visual Editor and tried it out. Had some issues though, so undid the custom CSS back to normal.

This works fine for Categories that have multiple sub-categories, but when I go to a category with just 2 sub-categories, they show up in seperate rows instead of side-by-side. Also in mobile view, the sub-categories start to overlap.

Damian,

This works fine for Categories that have multiple sub-categories, but when I go to a category with just 2 sub-categories, they show up in seperate rows instead of side-by-side. Also in mobile view, the sub-categories start to overlap.

You speak of Categories that have multiple sub-categories, however we noticed that the alignment can even go wrong on Categories that do not have sub-sub-categories.

Look at our example from our store using the suggested css code.

[attachment=12301:Screenshot_categories_incolumns.jpg]

We have parent categories which have just sub categories or child categories depening on how you wish to name them and no "grand children" categories below the sub-categories and all we wanted from the css is this from a competing webstore which uses Magento.

[attachment=12302:Screenshot_ergomax_css-columnstylecategories.jpg]

I have no clue how to achieve that kind of alignment.

Fotis ?

Screenshot_categories_incolumns.jpg

Screenshot_ergomax_css-columnstylecategories.jpg

By the way this piece of custom css

.subcategories {
margin-top:20px;
-moz-column-count:4;
-moz-column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
column-count: 4;
column-gap: 20px;
}


.ty-subcategories__item {
display: inline-block;
margin: 2px 10px 4px 0;
min-width: 200px;
font-size: 17px;
text-transform: uppercase;
font-family: Roboto;
z-index: 200;
border-top: 0;
padding: 2px 2px;
}

[attachment=12303:Screenshot_better-aligned-categories.jpg]

works much better see these results, however not when you go mobile (iPhone 5S / SE)

See below:

[attachment=12304:33172389824_34b7162d13_b.jpg]

While actually I would like to achieve something like this:

[attachment=12305:34015824665_cd64081d0f_b.jpg]

Screenshot_better-aligned-categories.jpg

33172389824_34b7162d13_b.jpg

34015824665_cd64081d0f_b.jpg

By the way this piece of custom css

attachicon.gifScreenshot_better-aligned-categories.jpg

works much better see these results, however not when you go mobile (iPhone 5S / SE)

See below:

attachicon.gif33172389824_34b7162d13_b.jpg

While actually I would like to achieve something like this:

attachicon.gif34015824665_cd64081d0f_b.jpg

Well this is where media queries come in. So basically what you want to do is change the width at a 'breakpoint'. So here is your original code

.subcategories {
   margin-top:20px;
   -moz-column-count:4;
   -moz-column-gap: 20px;
   -webkit-column-count: 4;
   -webkit-column-gap: 20px;
   column-count: 4;
   column-gap: 20px;
}

.ty-subcategories__item {
display: inline-block;
margin: 2px 10px 4px 0;
min-width: 200px;
font-size: 17px;
text-transform: uppercase;
font-family: Roboto;
z-index: 200;
border-top: 0;
padding: 2px 2px;
}

If I were you I would do the following to change the column count (yes this can be done more efficient, but this will do for now).

.subcategories {
   margin-top:20px;
   -moz-column-count: 4;
   -moz-column-gap: 20px;
   -webkit-column-count: 4;
   -webkit-column-gap: 20px;
   column-count: 4;
   column-gap: 20px;
}
// Adjust the max / min width to your needs
@media (max-width: 979px) and (min-width: 768px) {
   .subcategories {
       -moz-column-count: 3;
       -webkit-column-count: 3;
       column-count: 3;
   }
}
// Adjust the max / min width to your needs
@media (max-width: 767px) and (min-width: 520px) {
   .subcategories {
       -moz-column-count: 2;
       -webkit-column-count: 2;
       column-count: 2;
   }
}
// Adjust the max / min width to your needs
@media screen and (max-width: 519px) {
   .subcategories {
       -moz-column-count: 1;
       -webkit-column-count: 1;
       column-count: 1;
   }
}

.ty-subcategories__item {
display: inline-block;
margin: 2px 10px 4px 0;
min-width: 200px;
font-size: 17px;
text-transform: uppercase;
font-family: Roboto;
z-index: 200;
border-top: 0;
padding: 2px 2px;
}

poppedweb thank you for sharing your knowledge. Indeed this works for me and I do hope for others as well.