Text Box Widget Color
Support Area › Forums › Responsive Visual › Text Box Widget Color
- This topic has 1 reply, 2 voices, and was last updated 10 years, 2 months ago by Bill Robbins.
-
AuthorPosts
-
January 2, 2014 at 11:06 #15922Judy GaudinParticipant
I would like to change the color of widget boxes, side and top bar colors. Is this possible?
Thank you,
Judy
TeamHOPEMissions.comJanuary 2, 2014 at 11:39 #15927Bill RobbinsModeratorThat can be done, though it is a bit tricky because Internet Explorer 8 does not support that without using a background image. Other browsers and later versions of Internet Explorer can do that with just a color code that has transparency built into it (rgba colors). IE 8 does not have that ability so you’ll need to use a photo editing program like Photoshop to create a new background image file that matches your new color.
What I would do is find the color and transparency you’d like to use first. Here’s how you can change it:
- Go to the Theme Options page and select the Styling tab.
- Scroll down to the Custom CSS box and paste this:
#home-sidebar, #nav-bar, #nav-bar ul li ul, #panel, #content p.time, #panel ul.podcast-details, h3.widget-title, .lower-sidebar, ul.podcast-list li.podcast, li.staff-entry, body .nano .pane, body .nano .pane .slider { background-color: rgba(0, 0, 0, .75); }
In the snippet above the rgba(255, 255, 255, .75) sets the color. The first three numbers set the actual hue and the last one sets the transparency on a scale of 0 (transparent) to 1 (completely opaque). You can adjust that to find the color and transparency level that you'd like to have. There's a quick color picker at http://www.colorpicker.com/ that can help if you need it. It doesn't include the transparency, but it can select the first three.
- Update your settings.
Once you have the color selected, you can create a new background image using Photoshop or a similar tool. Then you'll need to upload it to your WordPress media library and copy the URL to your file like we did with the Instagram icon. Then go back to the Custom CSS box and paste this:
.ie7 #home-sidebar, .ie8 #home-sidebar, .ie7 #nav-bar, .ie8 #nav-bar, .ie7 #nav-bar ul li ul, .ie8 #nav-bar ul li ul, .ie7 #panel, .ie8 #panel, .ie7 #content p.time, .ie8 #content p.time, .ie7 #panel ul.podcast-details, .ie8 #panel ul.podcast-details, .ie7 h3.widget-title, .ie8 h3.widget-title, .ie7 .lower-sidebar, .ie8 .lower-sidebar, .ie7 ul.podcast-list li.podcast, .ie8 ul.podcast-list li.podcast, .ie7 li.staff-entry, .ie8 li.staff-entry, html.ie7 .nano .pane, html.ie8 .nano .pane, html.ie7 .nano .pane .slider, html.ie8 .nano .pane .slider { background: url(https://yoursite.com/image.png) repeat; }
Just replace the
http://yoursite.com/image.png
with the URL to your image. Then update your settings.I wish I had an easier option for you. Until IE 8 heads out to pasture, we're a bit stuck with this.
If I can help, just let me know,
Bill -
AuthorPosts
- The topic ‘Text Box Widget Color’ is closed to new replies.