Widget Sidebar Background color

[frankjenex]

i am wondering if possible to change the background of a sidebar. This would, ideally, not be a global change to all sidebars, but we would like to change background color on quite of a few of them (see screen shot for example) – we are using Sidebars on product order pages and the background color would help organize the page.

I saw this custom CSS for the Dante theme in a post – not sure if it would work for Neighborhood -and- hoping there is way to apply it to individual sidebars.
Found this on custom CSS on a ‘Dante’ forum post: .sidebar {background: #e5e5e5;}
Thanks. -Frank

[Kyle – SUPPORT]

That would work, do you want to apply the background color for a certain sidebar? Or the same sidebar but on a different page?

– Kyle

[frankjenex]

the color would be for the sidebar in all instances (not just on particular pages). So, for instance, we want the same colored background for Sidebars 4-8. They are all being used on our product pages and all would have the same background on any pages in which they are used. hope that makes sense.

[Kyle – SUPPORT]

Ok if you could provide me with a link to the product page I will provide you with some custom css

– Kyle

[frankjenex]

There are approx. 30 product pages in total – but many of them use the same sidebar. Here are links to the different sidebars that i am using.

Sidebar 5: https://thikit.com/product/special-offer-print-extra-thick-business-cards/
Sidebar 6: https://thikit.com/product/print-thick-postcards/
Sidebar 7: https://thikit.com/product/print-thick-business-cards/
Sidebar 8: https://thikit.com/product/postcards-oversize-thick/

thanks for your help with this.

[Kyle – SUPPORT]

You can add this custom css:

.single-product .sidebar {
  background-color: #f5f5f5;
  padding: 15px;
}

– Kyle

[frankjenex]

Thanks Kyle -i applied the custom css – have a look.
https://thikit.com/product/print-thick-business-cards/

Is there any way to avoid the white behind the widget Titles (see “Helpful Hints” and “Featured Products”). Initially i had wanted the background color to extend to the right edge, but I think it works like this. If possible to remove the white background behind the Titles, that would be great.

[Kyle – SUPPORT]

Add this:

.sidebar .widget-heading h4 span {
  background-color: #f5f5f5;
}

Hope this helps

– Kyle

[frankjenex]

it works and it looks awesome!
Thanks so much Kyle – i really appreciate your help with this. Where to i write a review for you guys – your support is really great! -Frank

[Kyle – SUPPORT]

Great! I’m glad 🙂

You can write comments in the forum feedback section

– Kyle

[frankjenex]

A while back i had asked to change background color for sidebars on Product pages only – but now i would like to add that background color to the Blog. You had sent me this custom css:

.single-product .sidebar {background-color: #f5f5f5; padding: 15px;}
.sidebar .widget-heading h4 span {background-color: #f5f5f5;}

Please let me know how to add this background color to the Blog as well.
Thanks.
-Frank

[Kyle – SUPPORT]

Try this:

.page-id-1305 .sidebar {background-color: #f5f5f5; padding: 15px;}

– Kyle

[frankjenex]

.page-id-1305 did not work – but i changed it to .single-post and it worked.
All blog posts are working – but the main blog page is not showing the blue background – see link:
https://thikit.com/blog/

Is it possible to make put background color on sidebar of main blog page?
—

Also – wondering if we can modify the left margin of the blog – with the “Posted by” with avatar removed. I used this custom css (found in a forum post by Mohammad: JUNE 2, 2014 AT 7:12 AM #79429) to remove the avatar and posted by:

span.standard-post-date{display:none}
ul.blog-items li.blog-item div.row div.standard-post-author div.author-avatar{display:none}
ul.blog-items li.blog-item div.row div.standard-post-author span.standard-post-author-name{display:none}

Is it possible to shift over the left margin – see screen shot.
Thanks very much.
Frank

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

body.page-id-13055 .sidebar {background-color: #f5f5f5; padding: 15px;}
body.page.page-id-13055 div.standard-post-content.span6{width:770px !important;}

Thanks 🙂
With Best Regards
Mohammad

[frankjenex]

The margin moved (thanks for that) but the background color is still not showing up on https://thikit.com/blog/

Perhaps i have set up the blog incorrectly. See two screen shots showing how i have set up blog
I may have repurposed the page https://thikit.com/blog/ from your demo content – and dropped in ‘Blog’ from ‘pre-built pages’. Was always a bit confused by the blog – and had several live pages that were named things like “blog-standard-with-right-sidebar”
thanks for all your help with this – i would love to get it figured out.
-Frank

Attachments:

You must be logged in to view attached files.