SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    assigning custom background to multiple pages

    Hi folks,

    I refer to this page.

    I've used the following code to assign a custom background to the page (a 'parent page'), and want to have the same background appear on the child pages:

    body.page-id-318 {
    background: url("http://ppredesign.perthpunk.com/wp-content/uploads/2013/06/Personal-Perspectives-backg.jpg") !important;
    }

    Do I need to repeat the same code as above with each of the child page's id numbers, or can I somehow add those id numbers to the code quoted?

    Cheers

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    As long as you put that class on the body of the child pages your good.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    As long as you put that class on the body of the child pages your good.
    Sorry, PicnicTutorials - not with you. Which class do you mean, and how would I put it on my child pages, please?

    I know I can get that custom background on each of the child pages just by repeating the code with the ID of each child page:
    For example, the background can be applied to the first child page ('Ray De Motte') as follows:

    body.page-id-318 {
    background: url("http://ppredesign.perthpunk.com/wp-content/uploads/2013/06/Personal-Perspectives-backg.jpg") !important;
    }

    Repeating the code like this seems long-winded, and is probably a reflection of my ignorance of a better option. I guess I'm just asking if there is a quicker, more concise way to have this custom background applied to all the child pages under the 'Personal Perspectives' parent. Been messing around, but haven't found a way yet.

    Cheers

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by rolanstein View Post
    I've used the following code to assign a custom background to the page (a 'parent page'), and want to have the same background appear on the child pages
    Could you explain what you mean by 'parent' and 'child' pages? It doesn't mean anything specific in terms of CSS. Do you mean that you want each page in the /personal-perspectives/ section to have the same background?

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Could you explain what you mean by 'parent' and 'child' pages? It doesn't mean anything specific in terms of CSS. Do you mean that you want each page in the /personal-perspectives/ section to have the same background?
    Sorry Ralph - wasn't aware that parent/child page terminology was Wordpress-speak and not generally used. Yes, your interpretation is correct: I want each page in the /personal-perspectives/ section to have the same black-and-white collage background (ie: as the 'Personal Perspectives' page that appears on the nav menu).

    Cheers

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    He's talking about wp themes.

    Do I need to repeat the same code as above with each of the child page's id numbers, or can I somehow add those id numbers to the code quoted?
    in one way or another you will need to add the class to the pages you want to have the bg.

    there are two strategies you can follow.
    1) edit the heather page in the theme ( if you have access to it) and use a general class. something like :

    Code:
    $custom= array (139,139,150)// the page IDs you want to have the bg
    $page_object = get_queried_object();
    $page_id     = get_queried_object_id();
    <body  class="<? if (in_array ($page_id , $custom)) {echo  "customClass";} ?>">
     .customClass{ your rules here...}
    However since you already know you theme is adding the .page-id-xxx to your body tag you could just edit the CSS

    Code:
    body.page-id-318,body.page-id-319,body.page-id-320,body.page-id-321{ your rules...; }
    either one will work.

    hope that helps

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, dresden_phoenix. Your CSS code example is exactly what I was after.

    Cheers!


Bookmarks

Posting Permissions

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