Support » Themes and Templates » Sidebar Styling

  • Hey Guys,

    I am using the twentyten theme for my blog. I have many pages and I have used Sidebar Generator plugin to replace the default sidebar with a custom sidebar for each page. I have not changed any of the default styling of the theme for the sidebar. I wish to style each sidebar specifically with colors that match the color scheme I have created for each individual page (background, text, etc.). How can I accomplish this?

    I am mostly interested in changing the widget title to include a different background behind the text using images if possible. Any tips on this would be appreciated as well.

    Thanks so much guys!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Michael


    Forum Moderator

    TwentyTen uses body_class() so each page will have a set of specific classes added to the body tag.

    how do you style each page in a certain color scheme?
    this could be probably similar adapted to the sidebar.

    a link to your site would help to illustrate your issue.

    without a link, there is not much more anyone can help you with (apart from a clairvoyant psychic, perhaps) 😉

    For the link below, the style sheet reads:
    ` {
    background-image: url(; background-attachment: fixed;

    As for my website, I’m in the very beginning stages but for an example page:

    If you click on any other page, the sidebar specific to the page that I provided isn’t seen because when I assign a custom sidebar, it replaces the default sidebar that shows on any page I haven’t assigned a custom sidebar to. I inserted some content into the sidebar so that you have a visual.



    Forum Moderator

    the css id for the sidebar are #primary and #secondary

    so a special style for the sidebar in page 24 could be:
    .page-id-24 #primary { background: #123456; }

    unfortunately, the design of TwentyTen did not include a lot of padding in #primary and #secondary (i.e. none at all), so that the background is very close to the edge of the sidebar content.

    you probably need to edit these two and a few more styles in general to increase the sidebar area to allow for a decent design.

    or you could use a page dependent background image in #main (horizontal strip image, repeat-y) (as in faux css columns) as the background for the sidebar area.

    Thank you so much, you have been a great help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Sidebar Styling’ is closed to new replies.