different styling for parent and children pages

  • Resolved curtisblackwell

    (@curtisblackwell)


    15 years, 9 months ago

    I’m pretty new to WordPress and I’m trying to set up my sidebar so that the CSS for parent and children pages are different. I want all parent and children pages to show at all times. I would also like to have a break between the final child and the next parent.

    The different page levels have the following CSS:

    #parentPages a {
    color: #f7c96d;
    text-transform: uppercase;
    }

#childPages a {
    color: #ffffff;
    font-size: 14px;
    text-transform: lowercase;
    }

    so the sidebar will look something like this:

    ABOUT US
    staff
    philosophy

    EVENTS
    announcements
    calendar

    I don’t really know php, but it seems to me that there must be a php file that generates the list that I could throw some divs in to achieve this; however, I can’t find one.

    Any help is appreciated.

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

  • Hi

    Take a look at this page
    https://codex.www.ads-software.com/Template_Tags/wp_list_pages

    Look closely at the different settings that are available.

    Thread Starter curtisblackwell

    (@curtisblackwell)

    stvwlf,

    Thanks, but I’ve tried looking through that and have tried all that I thought should work, and it just didn’t.

    It seems I should be able to accomplish the styling with:

    .pagenav { ... }
.page_item { ... }
.current_page_item { ... }
.current_page_parent { ... }

    but it didn’t work.

    You may need to make your selectors more specific. In other words, if your sidebar code exists within a div with id of sidebar, try it like this
    #sidebar pagenav { ... }

    Don’t copy sidebar just because I wrote it that way – check your code and see what the id of the Div your sidebar is contained by is, and use that ID.

    Its useful if you post a URL as then someone can see what is not working. Otherwise its theoretical

    Thread Starter curtisblackwell

    (@curtisblackwell)

    Thanks, you were right about making the selectors more specific, but not all of them are working.

    Here’s a mockup of what I’m trying to accomplish.

    Here’s what I have so far.

    I’m working live with Coda, so it will likely look different when you see it, so here is a screenshot of a parent page; and here is a screenshot of a child page.

    The CSS looks like this:

    /*
	SIDEBAR
*/

ul#sidebar {
	float: left;
	font-family: "Century Gothic", Arial;
	list-style: none;
	text-align: right;
	width: 150px;
	}

ul#sidebar .page_item .current_page_item a {
	color: #900000;
	}

ul#sidebar .page_item .current_page_parent a {
	color: #ffffff;
	}

ul#sidebar .page_item a {
	color: #f7c96d;
	text-transform: uppercase;
	}

    .pagenav { … } wouldn’t do anything for me, and neither is .current_page_parent { … }.

    .current_page_item { … } is only working for child pages, not the parents.

    Thread Starter curtisblackwell

    (@curtisblackwell)

    Thought I should add that I do need to use wp_list_pages bceause the church I am doing this for needs to be able to update the content without assistance.

    Thread Starter curtisblackwell

    (@curtisblackwell)

    I found a friend who knew what to do:

    ul#sidebar {
	float: left;
	font-family: "Century Gothic", Arial;
	list-style: none;
	text-align: right;
	width: 150px;
	}

ul#sidebar li a {
	color: #f7c96d;
	text-transform: uppercase;
	}

ul#sidebar li ul li a {
	color: #ffffff;
	font-size: 13px;
	text-transform: lowercase;
	}

ul#sidebar li ul { padding-bottom: 20px; }

    I was overthinking it. Thanks for your assistance stvwlf.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘different styling for parent and children pages’ is closed to new replies.