Page 1 of 2 12 LastLast
Results 1 to 10 of 13
  1. #1
    Join Date
    Jul 2005
    Location
    Tennessee, USA
    Posts
    14
    Plugin Contributions
    2

    Idea or Suggestion |_ Ugly Categories Separator - Change to image

    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 -->
    Attached Images Attached Images  

  2. #2
    Join Date
    Dec 2020
    Location
    Colorado
    Posts
    11
    Plugin Contributions
    0

    Default Re: |_ Ugly Categories Separator - Change to image

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

  3. #3
    Join Date
    Apr 2006
    Location
    Ohio
    Posts
    6,162
    Plugin Contributions
    0

    Default Re: |_ Ugly Categories Separator - Change to image

    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

  4. #4
    Join Date
    Dec 2020
    Location
    Colorado
    Posts
    11
    Plugin Contributions
    0

    Default Re: |_ Ugly Categories Separator - Change to image

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

  5. #5
    Join Date
    Dec 2007
    Location
    Payson, AZ
    Posts
    1,076
    Plugin Contributions
    15

    Default Re: |_ Ugly Categories Separator - Change to image

    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
    Code:
    &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
    Code:
    <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
    Name:  arrows.png
Views: 484
Size:  4.5 KB
    Dave
    Always forward thinking... Lost my mind!

  6. #6
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    9,108
    Plugin Contributions
    11

    Default Re: |_ Ugly Categories Separator - Change to image

    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
    Code:
    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
    Code:
    &nbsp;&nbsp<i class="fa fa-chevron-circle-right fa-lg"></i>
    or
    Code:
    &nbsp;&nbsp;<i class="fas fa-angle-right fa-lg"></i>
    For the arrow in admin and use
    Code:
    i.fa.fa-chevron-circle-right.fa-lg{font-size:1.333333em;line-height:.75em;color:#000000;vertical-align:-15%;}
    or
    Code:
    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.


  7. #7
    Join Date
    Dec 2020
    Location
    Colorado
    Posts
    11
    Plugin Contributions
    0

    Default Re: |_ Ugly Categories Separator - Change to image

    Thanks Dave! This worked perfect!

  8. #8
    Join Date
    Feb 2011
    Location
    Lumberton, TX
    Posts
    506
    Plugin Contributions
    0

    Default Re: |_ Ugly Categories Separator - Change to image

    Quote Originally Posted by dbltoe View Post
    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
    Code:
    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
    Code:
    &nbsp;&nbsp<i class="fa fa-chevron-circle-right fa-lg"></i>
    or
    Code:
    &nbsp;&nbsp;<i class="fas fa-angle-right fa-lg"></i>
    For the arrow in admin and use
    Code:
    i.fa.fa-chevron-circle-right.fa-lg{font-size:1.333333em;line-height:.75em;color:#000000;vertical-align:-15%;}
    or
    Code:
    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

    Code:
    &nbsp;&nbsp<i class="fas fa-chevron-right" aria-hidden="true"></i>
    it comes out after updating it to

    Code:
    &nbsp;&nbsp<i class="fas fa-chevron-right" aria-hiddetrue"></i>
    The string is being modified...sorry but this is confusing behavior.

    Thanks
    Chris

  9. #9
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    9,108
    Plugin Contributions
    11

    Default Re: |_ Ugly Categories Separator - Change to image

    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.

  10. #10
    Join Date
    Feb 2011
    Location
    Lumberton, TX
    Posts
    506
    Plugin Contributions
    0

    Default Re: |_ Ugly Categories Separator - Change to image

    Quote Originally Posted by dbltoe View Post
    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.

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 3
    Last Post: 14 Dec 2008, 07:38 AM
  2. Replace breadcrumbs separator with an image?
    By Alex Clarke in forum General Questions
    Replies: 2
    Last Post: 20 Aug 2006, 08:35 PM
  3. How to change the ezpages separator
    By ShannonL in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 7 Jun 2006, 08:52 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR