Sidebar Styling (5 posts)

  1. cafountain
    Posted 5 years ago #

    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!

  2. Michael
    Part-Time Forum Moderator
    Posted 5 years ago #

    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) ;-)

  3. cafountain
    Posted 5 years ago #

    For the link below, the style sheet reads:
    `body.page-id-24 {
    background-image: url(http://allsportsnewsonline.com/wp-content/themes/twentyten/images/billsbackground.jpg); background-attachment: fixed;

    As for my website, I'm in the very beginning stages but for an example page: http://allsportsnewsonline.com/?page_id=24

    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.

  4. Michael
    Part-Time Forum Moderator
    Posted 5 years ago #

    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.

  5. cafountain
    Posted 5 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic