Gary_L_Matthews

Member

Forum Replies Created

  • In reply to: Different colours for widgets on different pages

    #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.

    In reply to: Different colours for widgets on different pages

    #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

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