Results 1 to 9 of 9
  1. #1
    Join Date
    Jan 2011
    Location
    Adelaide, Australia
    Posts
    1,442
    Plugin Contributions
    1

    Default CSS stylesheet help please

    1.5.5f php 7.1

    in navigation menu at top of page when enabled the gap between categories is determined in stylesheet.css this line
    Code:
    #navCatTabs ul li a {text-decoration: none;padding: 0em 0.5em;margin: 0;color: #2277f7;white-space: nowrap;}
    I would like to change [white-space: nowrap;] to be a vertical 'pipe' line [space|space] like this; category a | category b | category c - with the ability to modify color of that pipe.

    So looking for some help please for some code.

    cheers, Mike

  2. #2
    Join Date
    Jan 2019
    Location
    New Zealand
    Posts
    30
    Plugin Contributions
    0

    Default Re: CSS stylesheet help please

    Hi Mike,
    Try adding
    HTML Code:
    #navCatTabs ul li a {border-right:1px solid #000;}#navCatTabs ul li:last-child a {border:none;}
    Change color and border size as needed.
    Regards raptar

  3. #3
    Join Date
    Jan 2011
    Location
    Adelaide, Australia
    Posts
    1,442
    Plugin Contributions
    1

    Default Re: CSS stylesheet help please

    Quote Originally Posted by raptar View Post
    Hi Mike,
    Try adding
    HTML Code:
    #navCatTabs ul li a {border-right:1px solid #000;}#navCatTabs ul li:last-child a {border:none;}
    Change color and border size as needed.
    Regards raptar
    Thanks mate - worked a treat!! ..... I am getting this though .... category [space|spacespace] ... an extra space to the right of the pipe - so this is the section relating to #navCatTabs ul ... ;

    HTML Code:
    #navCatTabs ul  {margin: 0;padding:  0.5em 0em;list-style-type: none;text-align: center;line-height: 1.5em;}
    #navCatTabs ul li {display: inline;}
    #navCatTabs ul li a {text-decoration: none;padding: 0em 0.5em;margin: 0;color: #2277f7;white-space: nowrap;}
    #navCatTabs ul li a {border-right:1px solid #000;}#navCatTabs ul li:last-child a {border:none;}
    cheers, Mike

  4. #4
    Join Date
    Jan 2019
    Location
    New Zealand
    Posts
    30
    Plugin Contributions
    0

    Default Re: CSS stylesheet help please

    That is the nature of a list, a gap between words to make it readable, try adding
    HTML Code:
    margin-left:-5px;
    to #navCatTabs ul li a. This will remove that space.

  5. #5
    Join Date
    Jan 2019
    Location
    New Zealand
    Posts
    30
    Plugin Contributions
    0

    Default Re: CSS stylesheet help please

    That will probably compress your menu too tight and spread it to the edge of your page, so add a margin to the unordered-list to contain it.
    HTML Code:
    #navCatTabs ul{margin:0 20px;

  6. #6
    Join Date
    Jan 2011
    Location
    Adelaide, Australia
    Posts
    1,442
    Plugin Contributions
    1

    Default Re: CSS stylesheet help please

    Quote Originally Posted by raptar View Post
    That will probably compress your menu too tight and spread it to the edge of your page, so add a margin to the unordered-list to contain it.
    HTML Code:
    #navCatTabs ul{margin:0 20px;
    Hi raptar - I have decided to leave it as is - it isn't that bad

    So can I get some further help from you - how can I make the first word (or few words in some cases) of the menu category a different colour to the rest. Going to my site clip on earrings you will see the menu across the top and how each category lacks definition - so where a category appears in all blue like this Sterling Silver Clip On Earrings I'd really love it to look like this:

    Sterling Silver Clip On Earrings so that the 'type' is black ...... the words Clip On Earrings are somewhat superfluous as they are the same in very instance but they are required for SEO.

    Is this do-able?

    cheers,
    Mike
    Last edited by shags38; 18 Jan 2020 at 12:59 AM.

  7. #7
    Join Date
    Jan 2019
    Location
    New Zealand
    Posts
    30
    Plugin Contributions
    0

    Default Re: CSS stylesheet help please

    Hi Mike,
    I don't know how to do what you require. At best I know how to target the first letter of a link with css, so you could change font size, font weight, color etc. You would need to use javascript for what you want, if its even possible. Or add more style to your links, they are very basic.

  8. #8
    Join Date
    Jan 2011
    Location
    Adelaide, Australia
    Posts
    1,442
    Plugin Contributions
    1

    Default Re: CSS stylesheet help please

    Quote Originally Posted by raptar View Post
    Hi Mike,
    I don't know how to do what you require. At best I know how to target the first letter of a link with css, so you could change font size, font weight, color etc. You would need to use javascript for what you want, if its even possible. Or add more style to your links, they are very basic.
    Thank you for your response and the suggestions which I will look into.

    cheers,
    Mike

  9. #9
    Join Date
    Jan 2019
    Location
    New Zealand
    Posts
    30
    Plugin Contributions
    0

    Default Re: CSS stylesheet help please

    Hey Mike,
    First word is real easy to do with this
    HTML Code:
    <script>
    $('#navCatTabs li a').each(function(){
        var text = $(this)
        .text().split(' ');
        if(text.length < 2)
            return;
        text[0] = '<span class="firstWord">'+text[0]+'</span>';
        $(this).html( text.join(' ') );
    });
    </script>
    and some css to start with
    HTML Code:
    .firstWord{color:#000;font-weight:600;}

 

 

Similar Threads

  1. Please help - Erased my custom css stylesheet.
    By kelly14 in forum Templates, Stylesheets, Page Layout
    Replies: 16
    Last Post: 14 Sep 2012, 02:36 PM
  2. v150 CSS Stylesheet help!
    By dochsa in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 6 Sep 2012, 08:49 AM
  3. stylesheet.css help
    By rfresh in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 7 Jul 2009, 04:08 PM
  4. Help finding my stylesheet.css files please
    By angelicdezigns in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 30 Jun 2006, 10:46 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