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!
-
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:
`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.
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.
- The topic ‘Sidebar Styling’ is closed to new replies.