• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Simple Sidebars: Styling Individual Sidebars

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Simple Sidebars: Styling Individual Sidebars

This topic is: not resolved

Tagged: CSS Simple Sidebars

  • This topic has 23 replies, 8 voices, and was last updated 7 years, 8 months ago by simbasounds.
Viewing 20 posts - 1 through 20 (of 24 total)
1 2 →
  • Author
    Posts
  • November 14, 2014 at 8:32 am #131495
    jsebold
    Member

    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

    November 14, 2014 at 1:42 pm #131547
    CleanPageDom
    Participant

    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…

    November 26, 2014 at 4:46 am #132850
    mammothca
    Participant

    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

    November 26, 2014 at 5:08 am #132852
    CleanPageDom
    Participant

    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…

    November 26, 2014 at 7:46 am #132862
    mammothca
    Participant

    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

    November 26, 2014 at 7:51 am #132863
    CleanPageDom
    Participant

    Hi Doug

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

    Dom


    Let’s build a website together…

    November 26, 2014 at 7:55 pm #132919
    mammothca
    Participant

    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

    November 26, 2014 at 8:26 pm #132923
    mammothca
    Participant

    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.

    November 27, 2014 at 3:20 am #132957
    CleanPageDom
    Participant

    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…

    November 27, 2014 at 4:29 am #132960
    mammothca
    Participant

    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

    November 27, 2014 at 4:37 am #132961
    CleanPageDom
    Participant

    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…

    November 27, 2014 at 7:28 pm #133087
    mammothca
    Participant

    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

    September 2, 2015 at 2:30 am #164303
    Beezel
    Member

    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

    September 2, 2015 at 8:59 pm #164384
    mammothca
    Participant

    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

    September 2, 2015 at 9:15 pm #164386
    Susan
    Moderator

    You mean something like this?

    How to Customize a Specific WordPress Widget

    September 3, 2015 at 1:56 am #164396
    Beezel
    Member

    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

    September 3, 2015 at 2:01 am #164397
    Beezel
    Member

    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

    September 8, 2015 at 10:34 am #164930
    cdils
    Participant

    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.

    September 9, 2015 at 6:54 pm #165067
    Beezel
    Member

    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?

    September 10, 2015 at 8:15 am #165109
    cdils
    Participant

    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
Viewing 20 posts - 1 through 20 (of 24 total)
1 2 →
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble