|_ Ugly Categories Separator - Change to image

[jeffwebb]

I've always thought the |_ thing for the category separator was the ugliest part of the whole cart. Of course, that just my opinion.

Here's what I used instead. It may take some tweaking to make it work perfectly on your own site (size, color, etc.)

Go to Admin > Layout Settings > Categories Separator between the Category Name and Sub Categories and make/leave the setting empty.

Add a custom css file in 'YOUR_STORE / includes / templates / YOUR_TEMPLATE / css /' named stylesheet_zen_zzz.css or something similar. The naming is a pretty sure way that this style will be used.

Add:
<!-- bof category Separator style -->
.category-subs, .category-products {
background-image: url(/store/images/icons/category-products-arrow.png);
background-repeat: no-repeat;
margin-left: 10px;
padding-left: 10px !important;
}
.category-products {
margin-left: 20px;
}
<!-- eof category separator style -->

[mtate007]

Can anyone confirm this still works in version 1.5.7b? I tried the steps and it is not working for me.

[haredo]

Have you created your image category-products-arrow.png and ftp this .png image in its proper folder
root/images/icons/category-products-arrow.png

[mtate007]

I'm testing this on a localhost wamp server, but yes, the image is there.

[davewest]

Another option if you are using FontAwsome you can replace the |_ with any icon!

Go to Admin > Layout Settings > Categories Separator between the Category Name and Count

&nbsp;<i class="fas fa-long-arrow-alt-right fa-lg"></i>

Go to Admin > Layout Settings > Categories Separator between the Category Name and Sub Categories

<i class="fas fa-share fa-flip-vertical fa-lg"></i>&nbsp;

If you are using FontAwsome 4, replace the fas with fa.

Tested on ZC1.5.7b and FontAwsome 5

[dbltoe]

OOTB 1.5.7b uses 4.5 font-awesome so the fa vs fas will work there.

And, as in most things, you can adjust size, alignment, and color in the CSS using

i.fa.fa-share.fa-flip-vertical.fa-lg{font-size:1.333333em;line-height:.75em;color:#000000;vertical-align:-15%;}

because using .fa-lg could adversely affect other fonts in the store and using the full call overrides the regular stylesheet without having to use !important.

I couldn't get fa-long-arrow-alt-right to work with OOTB 1.5.7b. Using fa-chevron-circle-right or fa-angle-right with an extra &nbsp; doesn't look too bad.

In the Layout Settings, use

&nbsp;&nbsp<i class="fa fa-chevron-circle-right fa-lg"></i>

or

&nbsp;&nbsp;<i class="fas fa-angle-right fa-lg"></i>

For the arrow in admin and use

i.fa.fa-chevron-circle-right.fa-lg{font-size:1.333333em;line-height:.75em;color:#000000;vertical-align:-15%;}

or

i.fa.fa-angle-right.fa-lg{font-size:1.333333em;line-height:.75em;color:#000000;vertical-align:-15%;}

to control the arrow in your CSS.

Adjust the sizes and colors to your choosing.

Last but not least, if you put both CSS calls in includes/templates/your-template/css/stylesheet_zcustom.css, you'll always know where the change was made.

[mtate007]

Thanks Dave! This worked perfect!

[g2ktcf]

OOTB 1.5.7b uses 4.5 font-awesome so the fa vs fas will work there.

And, as in most things, you can adjust size, alignment, and color in the CSS using

i.fa.fa-share.fa-flip-vertical.fa-lg{font-size:1.333333em;line-height:.75em;color:#000000;vertical-align:-15%;}

because using .fa-lg could adversely affect other fonts in the store and using the full call overrides the regular stylesheet without having to use !important.

I couldn't get fa-long-arrow-alt-right to work with OOTB 1.5.7b. Using fa-chevron-circle-right or fa-angle-right with an extra &nbsp; doesn't look too bad.

In the Layout Settings, use

&nbsp;&nbsp<i class="fa fa-chevron-circle-right fa-lg"></i>

or

&nbsp;&nbsp;<i class="fas fa-angle-right fa-lg"></i>

For the arrow in admin and use

i.fa.fa-chevron-circle-right.fa-lg{font-size:1.333333em;line-height:.75em;color:#000000;vertical-align:-15%;}

or

i.fa.fa-angle-right.fa-lg{font-size:1.333333em;line-height:.75em;color:#000000;vertical-align:-15%;}

to control the arrow in your CSS.

Adjust the sizes and colors to your choosing.

Last but not least, if you put both CSS calls in includes/templates/your-template/css/stylesheet_zcustom.css, you'll always know where the change was made.

I am doing this today as I did not like the separators in my template. But when I copy

&nbsp;&nbsp<i class="fas fa-chevron-right" aria-hidden="true"></i>

it comes out after updating it to

&nbsp;&nbsp<i class="fas fa-chevron-right" aria-hiddetrue"></i>

The string is being modified...sorry but this is confusing behavior.

Thanks
Chris

[dbltoe]

Is there really a need for the aria tag in this case? I'm not sure this is defined as a focusable separator. Instead, isn't it a simple

static separator used to help visually divide two groups of menu items in a menu or to provide a horizontal rule between two sections of a page.

If so, accessibility does not require an aria tag.

[g2ktcf]

Is there really a need for the aria tag in this case? I'm not sure this is defined as a focusable separator. Instead, isn't it a simple

If so, accessibility does not require an aria tag.

My ignorance must show at this point. I copied what was listed at the FA website just to see what my options were. I have no clue what an aria tag is or what it does. Is the field I am trying to use character limited? If so, why cut out the middle? Something just does not make sense here.