Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2013
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts

    wildcard for active page...with a twist.

    Aloha, I am trying to find a css selector that I can use to find the currant page. My code looks like this.

    Code:
    <li id="menu-item-39" class="About menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-39">
    <a href="http://testprp.placester.net/about/">About</a>
    </li>
    This is how the code looks when the page is not the active one.
    Code:
    <li id="menu-item-39" class="About menu-item menu-item-type-custom menu-item-object-custom menu-item-39">
    <a href="http://testprp.placester.net/about/">About</a>
    </li>
    I can not use things like a:active because placester's code updates the <li> not the <a>.

    Any ideas would help out. Just incase you what to look at the code then below is the link.
    My site

    PS if this can not be done then please just say so that I can stop looking for a reply every 30 minutes.
    Last edited by xris; 03-05-2014 at 12:31 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    .current-menu-item a {}
    or am I missing what you are trying to do?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    Nov 2013
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    This should be simple but for some reason its giving me troubles...basically I want to make it so that when you hover over the menu it makes the background yellow with black text and same for the active page. This is the custom CSS I am using based on what you said above and it does nothing still.

    Code:
    #menu-default-header a{
    color:#F7D73C !important;
    }
    .current-menu-item a:hover {
    background-color:#F7D73C !important;
    color#000000 !important;
    }
    
    .current-menu-item a:active {
    background-color:#F7D73C !important;
    color#000000 !important;
    }
    The tops one works great because the default color for the menu text was white. Its WPs class names that give me issues. Why must they make them so darn long..."menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-260"
    Really do you need a 124 long class name people? They even use "menu" 6 times in the name...can you say redundant...lol.

    I am starting to think WP is hurting HTML more then it is helping it because I can make my own menu system in a matter of and hour, where I been messing with this one for 3 days now.
    Last edited by xris; 03-05-2014 at 01:58 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,687
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello xris,
    If WP will let you give each pages body a unique id, this will work very well.

    I can not use things like a:active because
    I think that may not mean what you think it means. The :active pseudoclass only works on a link that is actively being clicked on. As soon as your viewer lets go of his left mouse button, that anchor is no longer active.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Nov 2013
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I know how to work with id's can class's but if you notice this is a theme and all ids and classes are preset. Notice the OP has the code that I can not change...I only can add custom CSS.

    I could do something like this but I would have to do it for every page and it just makes the code much longer then it needs to be...
    Code:
    .About menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-39 { 
    color: #000;
    }
    There should be some way of doing something like this that way I only need to do this for once for and it would work for all menu items.
    Code:
     li a .*current-menu-item* {
    color: #000
    }
    Though your right I always forget active deals with "when clicked" not "active page"...lol
    Last edited by xris; 03-05-2014 at 05:50 AM.

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    .About menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-39
    that is not one class. It's five.

    .About
    .menu-item .
    menu-item-type-custom
    .menu-item-object-custom
    .current-menu-item menu-item-39

    are all separate.

    So in your case:
    Code:
     li a .*current-menu-item* {
    color: #000
    }
    what you want is:

    Code:
     li a.current-menu-item {
    color: #000
    }
    Notice there is no space between the "a" and the class name. With a space, you are saying any element IN an element with a class of "current-menu-item" IN a list element. without a space, you are saying every "a" with a class "current-menu-item" in a list element. Huge difference.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    xris (03-05-2014)

  • #7
    New Coder
    Join Date
    Nov 2013
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Mahalo for the help I understand what you are saying but it still did not work and I finally go a reply from the tech-support and they used this..
    Code:
    #navigation > ul > li:first-child.current-menu-item > a, #navigation > ul > li:first-child.current-page-ancestor > a, #navigation ul.navigation > li:first-child.current-menu-item > a, #navigation ul.navigation > li:first-child.current-page-ancestor > a {background:#F7D73C !important;}
    
    #navigation > ul > li:first-child.current-menu-item > a, #navigation > ul > li:first-child.current-page-ancestor > a, #navigation ul.navigation > li:first-child.current-menu-item > a, #navigation ul.navigation > li:first-child.current-page-ancestor > a {color:#000000 !important;}
    Is it me or does that just seem nuts that you would have to use something that long just to set the background color...lol. I am going to have to play around with that first just so I can understand what the heck that means and two to try to find a way to shorten it, you should not have the css selector that long...or so I would hope. I think they just used firebug and copied the whole "path".


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •