Display Different Background Image for list of child pages

  • Resolved webgarden

    (@webgarden)


    15 years, 2 months ago

    Hello, I have successfully modified my theme to display links to child pages and grandchild pages within the parent page. I would like each child link (or grandchild link) to have a different background image. (Example:
    The Parent Page is called “Products, a child page is called “Indoor Plants”. There are 2 grandchild pages “flowering plants” and “tropical plants” I would like each of the grandchild page links to have a different background image ->flowering plants to have the background image floweringPlants.jpg and tropical plants to have the bg image “tropicalPlants.jpg”
    I have tried using css in the style sheet: (see css below) but this has not worked. I would be very grateful is someone could kindly tell me how to accomplish this? Thank you so much!

    .displayChildren .page_item page-item-150 {
background-image:url(images/floweringPlants.jpg);
}

    Here is a link to the site

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter webgarden

    (@webgarden)

    oops link to site: https://webgarden.ca/wordpress/?page_id=48

    Instead of..

    .displayChildren .page_item page-item-150

    Use..

    .displayChildren .page-item-150

    When you have values seperated by a space, like this…

    .page_item page-item-150

    It is then interpreted as page-item-150 being a child of page_item. Also note, a class must be indicated using a period..

    .class

    If you wanted to target an element with 2 classes, you join them like so..

    .page_item.page-item-150

    Note the lack of space between them.

    Wish i could explain it a little better, but i’m not sure how i can expand further without giving a lesson in CSS, which is a little beyond what i’m prepared to do in a reply post… ??

    Thread Starter webgarden

    (@webgarden)

    Hi – thank you for your response! I have tried the solution above by inserting this into my css file:

    .displayChildren .page-item-150{
    background-image: url(images/floweringPlants.jpg);
    background-repeat: no-repeat;}

    Unfortunately this has not worked for me. I know you do not wish to give a whole lesson in css in a post – however – I am hoping you can help me find a solution to this? Thanks so much!

    Works for me like this..

    .displayChildren .page-item-150 {
  background: transparent url('images/floweringPlants.jpg') no-repeat;
}

    I had to test using the full url (hxxp://webgarden.ca/wordpress/wp-content/themes/panorama/images/floweringPlants.jpg), but the image showed just fine..

    Thread Starter webgarden

    (@webgarden)

    Genius! It works! Thank you ever so much!!!!!! ?? If I wish to style other page items I will use the same as above but just replace page-item-150 with the new page item (ie: 148, 152 ect..) Is this correct?

    Yes, that’s correct.. ??

    Hi,

    I am also struggling with this issue.

    where in the css code are you putting the displayChildren line? Also, is displayChildren a wordpress line of code, or is it something that was made by you uniquely for your site.

    Thanks in advance.

    -Romeo

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Display Different Background Image for list of child pages’ is closed to new replies.