Text Box Widget Color

Support Area Forums Responsive Visual Text Box Widget Color

Viewing 2 posts - 1 through 2 (of 2 total)
URL to the page in question:
  • Author
    Posts
  • #15922
    Judy Gaudin
    Participant

    I would like to change the color of widget boxes, side and top bar colors. Is this possible?
    Thank you,
    Judy
    TeamHOPEMissions.com

    #15927
    Bill Robbins
    Moderator

    That 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:

    1. Go to the Theme Options page and select the Styling tab.
    2. 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.

    3. 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

Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘Text Box Widget Color’ is closed to new replies.