Highlight parent but not child pages in sidebar?

  • Resolved whch

    (@whch)


    14 years, 6 months ago

    Can anyone help me with this? I am using WordPress to build a site not primarily for blogging. I would like to highlight the current page on the pages widget in the sidebar. I have inserted

    .current_page_item {
	background: #ccffcc;
}

    which works but:

    1. Ideally I would like to highlight with a text colour rather than background, but color: does not do anything. I assume it clashes with earlier formatting.

    2. This code highlights the child pages in the sidebar when the parent pages are selected. Is there some way of using “.current_page_child” to exclude these from the highlighting, or is something more complex required?

    Thanks

Viewing 6 replies - 1 through 6 (of 6 total)

  • the text that you see are links, for which the style would be:
    .current_page_item a { color: #123456; }

    the whole is also in a nested unordered list;

    the parent is:
    li.current_page_item a { color: #highlight; }
    and the child is:
    li.current_page_item li a { color: #normal; }
    which may need to be reset to the normal link colors.

    you may also need to take into consideration the different pseudo classes :link, :visited, and :hover

    https://www.w3schools.com/CSS/css_pseudo_classes.asp

    if you get stuck with this formatting, posting a link to your live site is the best way to get more help.

    Thread Starter whch

    (@whch)

    Thanks alchymyth – I’m afraid this might be beyond my skills. This is my site (in progress)
    https://www.carverhaggard.com

    it might work to replace the existing:

    /*HIGHLIGHT CURRENT PAGE - TRY TO ADAPT TO EXCLUDE CHILD - OR CHANGE TO HEADINGS*/

.current_page_item {
	background: #ccffcc;
}

    with this extended version:

    /*HIGHLIGHT CURRENT PAGE - TRY TO ADAPT TO EXCLUDE CHILD - OR CHANGE TO HEADINGS*/

.current_page_item a:link, .current_page_item a:visited {
	background: #ccffcc; color: blue;
}
.current_page_item a:hover {
	background: #ccffcc; color: #339900;
}
.current_page_item li a:link, .current_page_item li a:visited {
        background:none; color:#000;
}
.current_page_item li a:hover {
        background:none; color:#339900;
}

    instead of ‘blue’ enter your color choice for the current page;
    also remove the ‘background: …;’ code if not needed.

    Thread Starter whch

    (@whch)

    This wiped out all the formatting when I tried it, which is what has happened a few times when I have experimented with code in this area. Thanks for the suggestion though…

    the suggestion would work;

    however, even css has a few rules;
    https://www.w3schools.com/css/

    in principle you have to respect the structure:

    .class { styles; }

#css_id { styles; }

.class, .class2 { style1; style2; }

    styles have to be separated by semi-colon ;
    and it is a good habit to end each line within the { } with a semicolon, too.

    if you break this, it can result that the follwing lines do not get recognized any more.

    Thread Starter whch

    (@whch)

    You are quite right – not sure what I did wrong last time but it works now. Thanks again for your help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Highlight parent but not child pages in sidebar?’ is closed to new replies.

Tags