Can I put a background image on a sidebar widget?

  • I’m trying to figure out how to put a background on a sidebar widget. What I want to do is have a different Page widget for each page of my site, each with a list of child pages of the page being displayed.

    For example, if the page I’m on is BIO, I want the Page widget on the side to read:

    BIO
    – Photos
    – Scrapbook

    with Photos and Scrapbook being child pages of BIO. I think I can do this with the Widget Logic plugin and by excluding page IDs from the Page sidebar widget.

    But what I’d also like to do is add a different background image on the Page widget depending on which page I’m on. Is this even possible?

    If so, please explain this as plainly as possible, as I’m not a coder.

    Thanks,
    Michael

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

  • But what I’d also like to do is add a different background image on the Page widget depending on which page I’m on. Is this even possible?

    Sure. There is an easy CSS way if your theme is using the body_class() and a harder-but-not-too-hard way if it isn’t. I’d say add the body_class function if it isn’t being used and then go with the easy CSS way. What is your URL?

    Thread Starter Michael K.

    (@mmkurko)

    I’m testing how to build the WordPress site on this domain here.

    You can also see the current HTML site that I’m trying to reproduce in WordPress here.

    Thread Starter Michael K.

    (@mmkurko)

    You still there, apljdi? Let me know if the links I gave you don’t work.

    Yes, the links work.

    Looks like a fairly easy site to build, though I’m not sure that altering an existing theme is the easiest way to go. Maybe you are just playing with the system at this point though?

    Ok, to your question…

    Looks like you are not using the ‘body_class()’ function. I’d say add that. ‘body_class()’ is a new-ish function but you can find a description and instructions on how to insert the function into your code here. Basically, though, ‘body_class()’ will automatically insert into the body tag of your page classes based upon a large list of factors. That means you can target your pages with CSS just by starting a declaration with the appropriate automatically generated class. This, for example…

    body.home * #content-sidebar {background:red}

    … turns my sidebar red but only on the home page. Nifty, yes? You could easily use the same thing to switch background images.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Can I put a background image on a sidebar widget?’ is closed to new replies.