Support » Fixing WordPress » different styling for parent and children pages

  • Resolved curtisblackwell

    (@curtisblackwell)


    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
    http://codex.wordpress.org/Template_Tags/wp_list_pages

    Look closely at the different settings that are available.

    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

    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.

    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.

    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.