WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] different styling for parent and children pages (7 posts)

  1. curtisblackwell
    Member
    Posted 5 years 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.

  2. stvwlf
    Member
    Posted 5 years ago #

    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.

  3. curtisblackwell
    Member
    Posted 5 years ago #

    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.

  4. stvwlf
    Member
    Posted 5 years ago #

    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

  5. curtisblackwell
    Member
    Posted 5 years ago #

    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.

  6. curtisblackwell
    Member
    Posted 5 years ago #

    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.

  7. curtisblackwell
    Member
    Posted 5 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic