Change CSS for widget on single page?

[keithmoore43]

Playing with the Genesis framework, I created a Genesis Featured Page widget to go into the primary sidebar, so now it shows up on all the pages I've set for two or more columns. But on many pages the widget isn't lined up with the content field, and I'd like to edit that along with other CSS of this widget on a particular page.

Using Firebug, I see this widget has the same CSS info on each page, the same class and id. I right-click the widget (blank space near the edge--no image or text), inspect with Firebug and this code is highlighted: <section id="featured-page-2" class="widget featured-content featuredpage">

I've seen some articles online, along with an awesome Studiopress tech who said I should create a class based on the page itself. At the top of each page is a class "page-id-21", the number different on each page. I've played with that to change features on the page, but the widget remains unchanged.

Any advice on how to change a widget on one page? I'm thinking it's a combo of the section id above with the class of the "page-id-21", but I haven't figured it out yet.

Really cool advice on this board--thanks.

[Erik D. Slater]

I wouldn't use the page-id class directly. If you ever decide to move things around and that identifier changes, you will be an unhappy bunny 🙂

Instead, add a class to the Custom Body Class field in the Layout Settings of your page, e.g. km-groovy-page ... then you can access any CSS selector for that page, for example:
.km-groovy-page .widget-title
or
.km-groovy-page #featured-page-2

Beyond that, provide us with a link so that we helpful folk can get you sorted out 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Author]

Posts