Simple Sidebars: Styling Individual Sidebars

[jsebold]

Hi,

I'm wondering if there is there a way to apply styles only to specific sidebars. There is one that I'd like to change the margin on so that it aligns with an element on my page, but when I attempt to style it using the widget ID in my css, it doesn't take.

Anyone had a similar experience or gotten this to work?

Thanks!

Jamie

[CleanPageDom]

Hi Jamie

Do you mean like "primary sidebar" and "secondary sidebar", or specific widgets within the sidebar?

You may need to be more specific with your CSS command to get it to work.

Thanks
Dom

---

Let’s build a website together…

[mammothca]

I also have the same question. I am looking to style individual sidebars created with Genesis Simple Sidebars.

So for example I created a services sidebar, with the id services. I have looked online and the consensus is that the id of the sidebar becomes the class of that sidebar, however, when I try to apply css the changes do not take.

Any help would be great!

Thanks
Doug

[CleanPageDom]

Hi Doug

Do you have a link? I'm afraid I'm not very good at visualising! 🙂

If you use Inspect Element (or similar) in your browser, you should be able to find something specific enough to the sidebar to style it individually.

Thanks
Dom

---

Let’s build a website together…

[mammothca]

Hi Dom!

Thanks for responding. I don't have a link, the site is being built on my local development server.

Yes I have inspected the code with FireBug, however the simple sidebar takes the role of (in this case) the .primary-sidebar, and there is no unique class or id for the sidebar specified in the code.

It would be nice to know if and how a unique id or class is assigned to each simple sidebar.

This is an awesome forum, I'm sure someone will have the answer!

Thanks
Doug

[CleanPageDom]

Hi Doug

So if you add .primary-sidebar { } in the CSS, then what happens?

Dom

---

Let’s build a website together…

[mammothca]

Hi Dom!

If you change the css for .primary-sidebar it will change the primary sidebar site wide.

Yes I could apply page specific css in example (.page-id-x .primary-sidebar), but this is not the best solution, because as you apply that simple sidebar to multiple pages you would need to constantly update the css for all the pages that show that simple sidebar.

Yes it is a work around, but ultimately would be a failed attempt, especially when most sites are being handed over to clients.

I appreciate your input, but really I am looking for a "specific" way to target each simple sidebar.

I want to be able to apply css to a single simple sidebar once, and never have to fuss with the css for that sidebar again.

Thanks
Doug

[mammothca]

As a side note, i will reach out to the developers of the plugin, and see if they can add the ability to add a custom class when creating a simple sidebar.

[CleanPageDom]

Sure, OK. I'm not really familiar with the Simple Sidebar plugin. Never have much need for it.

Hope you get a permanent solution. Sorry I couldn't help.

---

Let’s build a website together…

[mammothca]

Hi Dom!

It's quite alright, we are all here to learn. But since you don't use the plugin much, I'll tell you why I use it, it is actually a really powerful tool, and maybe you'll find use for it.

Have you ever heard of a silo for your site architecture? If not read up on it, I think it is really great for seo, and especially site navigation. In simple terms to silo a site is to organize information that is similar and relevant to other information which the reader is presented. Much like all blog posts under a single category.

However WordPress is a bit limited out of the box on how the information and links are presented to the end user, and then comes in Genesis Simple Sidebars.

I'll give you an example... let's say you are building a site on real estate. With the primary and secondary sidebars, it will always be the same information in each sidebar. However with Simple Sidebars you can turbo charge the sidebars.

In this real estate site we have different communities and neighborhoods. Each neighborhood and community has it's own page. We want to only display information for a single community or neighborhood in the sidebar. Without getting into a lot of code, this is where Simple Sidebars shines. You are able to target specific sidebar content for each community and neighborhood; single family subdivisions, condo complexes, properties for sale, etc.

I hope I explained myself well, and maybe on your next project, you'll find a way to incorporate Simple Sidebars into the development of the site.

Cheers!
Doug

[CleanPageDom]

Oh, OK. Thanks for the information. I've not needed such a system yet. For page-specific sidebar widgets I've made do with Widget Logic. Sounds like this would be a much better catch-all solution for larger sites.

Thanks
Dom

---

Let’s build a website together…

[mammothca]

Yes Widget Logic is helpful, but can get a little cramped with lots of widgets in primary and/or secondary sidebar, and you still need to add custom functions for each widget. Simple Sidebars helps organize the widget areas, and the selection is inside the post editor. It is a bit of a hassle to go into each post and select the sidebar on an existing site, but it is easy on new builds, as long as you have the site architecture preplanned for the site.

Happy Thanksgiving!
Doug

[Beezel]

Hi Doug!
I am looking for the exact same thing as you did - to style individual sidebars created with GenesisSimpleSidebars and have the same problem with the IDs - when I try to apply css changes the id is not working. It is also not showing anywhere in the WebInspector and I don't even know where should I look for it. It's been almost a year since your last post in this thread, have you maybe found a solution?

It would be absolutely awesome if you did and even better if you are willing to share it:).

Best greeting and really can't wait for answer:D:D!!
Beezel

[mammothca]

Hey Beezel!

Unfortunately I never did find an answer to this. The css code still targets the primary sidebar, and unfortunately I have not found a way to add a custom css class to each custom sidebar, and the ID of the sidebar is not for targeting css.

I have just commented on some other folks blogs, let's see if they respond.

Thanks for reaching out!
Doug

[Susan]

You mean something like this?

How to Customize a Specific WordPress Widget

[Beezel]

Hi Doug,
Thanks for quick response:)!! Yeah, I've found out too that the ID of the sidebar is not for targeting CSS, such a shame, as the plugin is really fantastic. I finally did that by creating Custom Widget Areas(sidebars?) with conditional tags and then styled each one of them, as they have the valid ID for css (I would'n have done that by myself, only with help of the Dynamik Website Builder Theme). I guess I've assumed too much at the beginning and just waited for the plugin to do everything, haha:D. But it works smoothly with the Dynamik Custom Options, so am happy:).

I'll be checking for news if you find any new ways/answers to it:).
Cheeers!!!
Beezel

[Beezel]

Susan,
Thanks for the link! I spend some time with the WebInspector already, but the ID's are nowhere to be found. There are just classes and text inputs and links. Any css changes are then applied to all of the sidebars. But I guess I am happy with the Custom Widget Areas solution for now.

All the best and thanks for your help!
Beezel

[cdils]

If you're using the Genesis Simple Sidebars plugin, there's no slick way to give each sidebar unique styling as the the markup surrounding the widget area never changes.

You could use any CSS selectors from a post to target the sidebar, for example:

.post .sidebar-primary { .... }

.custom-body-class .sidebar-primary { ... }

But that's really not ideal as that can easily get out of hand depending on how many custom sidebars you have.

If you're comfortable registering those sidebars (a.k.a. widget areas) directly via code, you can mark them up with any selectors you wish.

http://my.studiopress.com/tutorials/register-widget-area/

Cheers,
Carrie

---

Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. 🙂

I host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.

[Beezel]

Ok, I think I get the logic now, thanks :).
So...registering a new sidebar is simply registering a custom widget area with an ID that can be used for custom styling. If I register it in the primary sidebar area can I then style the markup surrounding the widget area? Or is it only possible to register it with other hooks than the sidebar ones?

[cdils]

Hey Beezel,

Think of registering the widget area as "part 1" and telling the widget area where to display as "part 2". Part 3 is styling. 🙂

So, yes, you are not limited to displaying widget areas in the sidebar. Here's a tut that shows that:

http://www.carriedils.com/after-entry-widget/

Cheers,
Carrie

---

Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. 🙂

I host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.

[Author]

Posts