Different colours for widgets on different pages

  • dikkiedutton

    #6201

    Hi folks

    First post so treat me kindly!

    I’m building a website that has different colours in the header image that I want to reflect in the widgets headers of those child pages.

    Website here: http://c4780711.myzen.co.uk/

    As you’ll see the header image, on the homepage, has the lilac banner, and on the learners page it changes to yellow (with other colours on other pages). Obviously there are ways to change the colour of the widgets for all pages – however I’d like to have corresponding widget colours.

    Is this possible?

    Forgive me if I’ve repeated myself!

    Cheers

    Dikkie

    Gary_L_Matthews

    #33636

    Dikkie, great question. I’m brand-new here, and fairly new to Graphene and to WordPress itself. Seems like most of what I do know, I’ve learned from Prasanna, Josh, Kenneth, and of course Syahir. The only thing that emboldens me to speak up now, even tentatively, is noticing that no one else has yet addressed your question.

    As you mention, it’s possible to change widget colors (by which I assume you mean, the color of the widget title bar). A number of threads on this forum have previously shown how to do this using CSS, adding it either to the theme’s “Custom CSS” box or to style.css in a child theme. But as you know, doing it this way affects sidebar widgets on every page, and you want different colors for different pages.

    I recently faced a similar problem on a site I’m building, and solved it using a WordPress plug-in that lets you place any code you like — CSS, javascript, etc. — into the header of the page you’re working on. And it’s specific to that page; the code you inject affects only the page where it appears, not the whole site. The plug-in is called HIFI — an acronym for “header inject – footer inject”. (You can use it for footer code, too.)

    So my suggestion is to try that, placing the title-bar CSS not in the theme options or the child theme style-sheet, but in the header of the page where you want it. Then simply change the color for each page: yellow, lilac, or whatnot. You’d place the CSS declarations between a <style> opening tag and a </style> closing tag. In other words, you’ll be creating an internal style-sheet for that page. It will then appear in your page code, just before the page’s closing </head> tag. Being located there, it will override styles from any external stylesheet (all other things being equal, like !important specifications, etc.

    If the above isn’t clear, please ask, and I’ll post actual code that you can cut and paste. Also, I wouldn’t be surprised if our forum moderators have easier and better ways to do this Like without using a plug-in, which is always a last resort. But this HIFI plug-in has thousands of uses.

    Cordial regards,

    Gary Matthews

    dikkiedutton

    #33637

    Hi Gary

    Thanks for your long and concise answer. That’s brilliant. I guessed (and hoped) that there would be an option/plugin for doing that but it’s knowing how. I think I was expecting there to be some hack in the php or an action hook.

    However, after installing the plugin and entering this code in the header:

    <style>
    .sidebar h3 {
    background: rgb(183, 26, 139);
    border-color: rgb(183, 26, 139);
    }
    </style>

    on this page http://c4780711.myzen.co.uk/home/apprenticeships/, it still doesn’t over-ride the inline CSS. Any ideas where I’ve gone wrong?

    Dikkie

    dikkiedutton

    #33638

    Got it…

    Quite simple really, used this:

    <style>
    .sidebar h3 {
    background: rgb(183, 26, 139) !important;
    border-color: rgb(183, 26, 139) !important;
    }
    </style>

    Over-rides everything.

    Thanks for your help – love the plugin.

    Cheers

    Dikkie

    Anonymous

    #33639

    Using that plugin is fine. But, you can also achieve this without any plugins. Each of your pages/posts have unique class for <body> tag. So, you can target widget headers of different pages by it’s unique class names.

    For example in your site, the body class of Schools page is page-id-21. So, if you put,

    .page-id-21 .sidebar h3 {
    background: rgb(183, 26, 139) !important;
    border-color: rgb(183, 26, 139) !important;
    }

    in Custom CSS, (or child-theme style.css) it will change the widget header colour on Schools page only. Likewise you can change widget header colour for other pages/posts as well. It’s a lengthy process, but you’ll get rid of an unnecessary plugin. Moreover, it’ll keep all of your Custom CSS at one place.

    dikkiedutton

    #33640

    Very true. That might be worth a shot. Nice to see we were on the right lines though!

    Love the theme btw!

    Gary_L_Matthews

    #33641

    Prasanna, thanks for your simpler and more elegant solution. As I said, plug-ins are always a last resort. Needless overhead, potential compatibility problems, plus they can be abandoned and go out of date.

    I’m making changes to my sites to take advantage of what you taught me in this post about the way CSS selectors work together.

Viewing 7 posts - 1 through 7 (of 7 total)

  • You must be logged in to reply to this topic.