Changing the color/appearance of a WP Widget!!! Help!!!

Shadowpeep

Newbie
Joined
Sep 30, 2009
Messages
36
Reaction score
2
Hi guys,

Im busy setting up a website for one of my clients and currently, I am using the Flexx theme blue. I have been going through each and every freakin php file to see where I can change the background of the widget or even the color and I still cant find ANYTHING! If anyone can help me out here and tell me how to change this... I would be more than grateful.

I searched the forum, I searched Google and I still have nothing so after 6 hours straight... Im looking for help!

Thanks in advance....
 
The style is usually in the css. Take a look at the page source. Look for div id/class name for your widget. Find name in css file and modify or add what you want.
 
I checked the CSS but Im not sure what to edit.

The site is
Code:
http://cpotoursandtravel.co.za/

You'll see the widget is kinda grey'ish and thats what I want to change. Below is the CSS and thanks for the help so far!

Code:
/*
Theme Name: FlexxTheme-Blue
Theme URI: http://flexxtheme.com
Author: iThemes
Author URI: http://ithemes.com/
Version: 2.0.2
Description: Flexx is an endlessly extensible, highly configurable blog theme from iThemes.com.
Tags: blog, theme options, multiple layouts, multiple color schemes
All the CSS, XHTML, design, and images are copyrighted. Please don't steal.

Version History
    1.0.0 - 2008-11-12
        Initial Release
    1.0.1 - 2008-11-13
        Updated featured-images.php code to 1.0.7
    1.0.2 - 2008-11-13
        Updated featured-images.php code to 1.0.8
        Updated iThemesFileUtility.php to 1.1.1
        Updated feature-bottom.php and feature-top.php
        Updated flexlayout.php
    1.0.3 - 2008-11-14
        Updated style.css for IE7 fix
        Updated /lib/flexxlayout.php
        Updated functions.php to add PHP4 compatibility
        Updated lib/contact-page-plugin/contact-page-plugin.php to 1.0.2
        Updated lib/featured-images/featured-images.php to 1.0.10
        Updated lib/flexx-layout-editor/flexx-layout-editor.php to 1.0.2
        Updated lib/theme-options/theme-options.php to 1.0.2
        Updated lib/theme-options/theme-options-framework.php to 1.0.3
        Updated lib/tutorials/tutorials.php to 1.0.4
    1.0.4 - 2008-11-24
        Updated lib/theme-options/theme-options.php to 1.0.3
        Standardized the changelog format in style.css
    1.0.5 - 2008-11-24
        No file changes
        Version update to match other releases
    1.0.6 - 2008-11-25
        Updated lib/featured-images/featured-images.php to version 1.0.11
        Updated lib/contact-page-plugin/contact-page-plugin.php to version 1.0.3
        Updated lib/flexx-layout-editor/flexx-layout-editor.php to version 1.0.3
        Updated lib/iThemesFileUtility.php to version 1.1.2
        Updated lib/theme-options/theme-options-framework.php to version 1.0.4
        Updated lib/tutorials/tutorials.php to version 1.0.5
    1.0.7 - 2008-12-02
        Updated lib/tuturials/tutorials.php to version 1.0.6
    1.0.8 - 2008-12-11
        Updated footer.php and functions.php
    1.1.0 - 2008-12-16
        Updated iThemesFileUtility.php to version 1.3.0
        Added lib/billboard folder and files
        Modified functions.php file to add entry code for lib/billboard/billboard.php
    1.1.1 - 2009-01-13
        Updated functions.php to fix the tracking code error
    2.0.0 - 2009-02-17
        Updated #header definition to add support for text overlay
        Updated entire lib/featured-images directory to version 1.1.0
        Updated lib/theme-options/theme-options.php to version 1.1.1
        Updated lib/theme-options/theme-options-framework.php to version 1.0.5
        Updated lib/theme-options/js/theme-options.js.php to add header and favicon uploader code
        Updated lib/billboard/billboard.php to version 1.0.3
        Updated header.php to add text overlay code
        Updated header.php to add custom favicon code
        Updated menu-pages.php to add support for new Site Name option
        Updated lib/iThemeFileUtility.php to version 1.4.0
        Added lib/feedburner-widget directory
        Updated functions.php to include Feedburner Widget code and adjust default Featured Images height
        Replaced screenshot.png and images/random/header.jpg with new images
        Added images/FlexxHeader.psd
    2.0.1 - 2009-02-17
        Updated the /css/reset.css file
        Updated the search.php file to fix a couple of bugs
        Updated style.css to make sure that returned pages never show the "date box"
    2.0.2 - 2009-02-17
        Updated the /lib/feedburner-widget/css/style.css.php file
*/
/*CSS Reset*/
@import url(css/reset.css);
/*Get the grid, baby!*/
@import url(css/grid.css);

body { /* This is where you set many of the universal defaults */
    background: #137bbb url(images/body-bg.jpg) top center repeat-y; 
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
}

/*********************************************
        Universal Link Styles
*********************************************/
a {
    color: #137bbb;
    text-decoration: none;
}
a:hover { 
    color: #000; 
    text-decoration: underline; 
}

/*********************************************
        Universal Text Elements
*********************************************/
p, ul, ol, blockquote {
    color: #333;
}
ol, ul {
    margin: 5px 35px;
}
blockquote {
    margin: 5px 0px 5px 10px; padding: 0px 0px 0px 10px;
    font-style: italic;
}
img { border: 0px; background: none; }
p {
    padding: 10px 0px;
    margin: 0px;
}
/*********************************************
        Header Styles
*********************************************/
/* Use this for universal styles for all header elements
Be sure to uncomment the styles before using */
h1,h2,h3,h4,h5,h6 {
    /*
    font-family: ;
    font-size: ;
    color: px;
    margin: px; padding: px;
    */
}

h1 { /* This style is generally used as title on single posts and pages */
    font-size: 25px;
    line-height: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-family: Arial, Helvetica, Sans-Serif;
}
h2 { /* This style used as a sub-header in post/page content */
    font-size: 18px;
}
h3 { /* This style used as the post titles on homepage/archive */
    clear: both;
    font-size: 25px;
    line-height: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-family: Arial, Helvetica, Sans-Serif;
}
h3 a {
}
h3 a:hover {
}
h4 { /* This style used as title for comments and as the identifying header on archive page  */
    font-size: 18px;
    padding: 0 0 0 15px;
}
h5 {
    font-size: 16px;
}
h6 {
    font-size: 14px;
}

/*********************************************
        The Obligatory WP Styles
*********************************************/
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}
.alignleft {
   float: left;
   margin: 0px 8px 8px 0px;
}
.alignright {
   float: right;
   margin: 0px 0px 8px 8px;
}
.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
}
.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}
.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}
.post img {border: 2px solid #cfcfcf;}

/*********************************************
        Container Div
*********************************************/
#container {
    background: #FFF;
    margin-top: 20px;
    border: 5px solid #FFF;
}

/*********************************************
        Header Styles
*********************************************/
#header {
    clear: both;
    background: #000;
    position: relative;
}
#header #title a {
    display: block;
    overflow: hidden;
}
/*********************************************
        Horizontal Navigaion Styles 
                (with dropdowns)
*********************************************/
#above-header #pagemenu,
#above-header #catmenu {
    border-bottom: 1px solid #FFF;
}
#below-header #pagemenu,
#below-header #catmenu {
    border-top: 1px solid #FFF;
}
#pagemenu,
#catmenu {
    background: #058cc4 url(images/menu-bg.gif) repeat-x;
    float: left;
    font-size: 11px;
    text-transform: uppercase;
    width: 100%; height: 32px;
    margin: 0px; padding: 0px;
}
/* This is the style for the first UL (horizontal) */
#pagemenu ul,
#catmenu ul {
    float: left;
    background: transparent;
    height: 32px; line-height: 32px;
    margin: 0px; padding: 0px;
}

/* This is the style for the top level list items */
#pagemenu ul li,
#catmenu ul li {
    background: none;
    width: auto;
    display: block;
    float: left;
    list-style-type: none;
    height: 32px; line-height: 32px;
    margin: 0px; padding: 0px;
}
#pagemenu ul li.home,
#catmenu ul li.home {
    background: none;
}
/* The style for all links */
#pagemenu a,
#catmenu a {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}
/* The universal hover state colors and background for all LI items and links */
#pagemenu li:hover a,
#pagemenu li.sfhover a,
#pagemenu li a:hover,
#catmenu li:hover a,
#catmenu li.sfhover a,
#catmenu li a:hover {
    color: #000;
    text-decoration: none;
    background: #FFF;
}
/* This is the style for the top level links, if different than the universal */
#pagemenu ul li a,
#catmenu ul li a {
    display: block;
    height: 32px; line-height: 32px;
    margin: 0px; padding: 0px 12px;
    text-decoration: none;
}
/* if you want to set a "current page item" style, do it here */
#pagemenu ul li.current_page_item a,
#catmenu ul li.current_page_item a {
}
/****************************** 
The second-level stuff 
*******************************/
/* This hides the nested UL before you hover */
#pagemenu li ul,
#catmenu li ul {
    clear: both;
    position: absolute;
    width: 180px; /* the width of the dropdown */
    left: -999em;
}
/* This shows the nested UL when you hover */
#pagemenu li:hover ul, 
#pagemenu li.sfhover ul,
#catmenu li:hover ul, 
#catmenu li.sfhover ul {
    left: auto;
    display:  block;
    z-index: 5000;
}

/* This is the style for the nested UL */
#pagemenu li:hover ul,
#pagemenu li.sfhover ul,
#catmenu li:hover ul,
#catmenu li.sfhover ul {
    background: transparent;
    display: block;
    margin: 0px; padding: 0px;
    border-top: 1px solid #FFF;
}
/* This is the style for the LI items within the nested UL */
#pagemenu li:hover ul li,
#pagemenu li.sfhover ul li,
#catmenu li:hover ul li,
#catmenu li.sfhover ul li {
    background: transparent;
    width: 100%;
    display: block;
    padding: 0px; margin: 0px;
    height: 30px; line-height: 30px;
    overflow: hidden;
    text-align: left;
    border: 1px solid #FFF;
    border-top: none;
}
/* This is the style for the links within the LI items within the nested UL */
#pagemenu li:hover ul li a,
#pagemenu li:hover ul li.current_page_item a,
#pagemenu li.sfhover ul li a,
#pagemenu li.sfhover ul li.current_page_item a,
#catmenu li:hover ul li a,
#catmenu li:hover ul li.current_page_item a,
#catmenu li.sfhover ul li a,
#catmenu li.sfhover ul li.current_page_item a {
    background: #1078b7 url(images/menu-bg.gif) repeat-x;
    color: #FFF;
    width: 170px;
    display: block;
    margin: 0px; padding: 0px 5px;
    height: 30px; line-height: 30px;
}
/* This is the style for the hover state on the links within the LI items within the nested UL */
#pagemenu li:hover ul li a:hover, 
#pagemenu li.sfhover ul li a:hover,
#catmenu li:hover ul li a:hover, 
#catmenu li.sfhover ul li a:hover {
    text-decoration: none;
    margin: 0px; padding: 0px 5px;
    height: 30px; line-height: 30px;
    background: #1078b7;
    color: #FFF;
}

/*********************************************
        Feature-Top Div
        Feature-Bottom Div
*********************************************/
.w260,.w260-,.w390,.w390- {display: inline; float: left; margin: 0px 10px; text-align: left; overflow: hidden;}
.w260 {width: 240px;} .w260- {width: 260px; margin: 0px;}
.w390 {width: 370px;} .w390- {width: 390px; margin: 0px;}
#feature-top,
#feature-bottom {
    width: 100%;
    background: #00294a;
    float: left;
    margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
    overflow: hidden;
    border-top: 1px solid #FFF;
}
#feature-top {margin-bottom: 10px;}
#feature-top a {
    color: #FFF;
    text-decoration: none;
}
#feature-top a:hover {
    color: #FFF;
    text-decoration: underline;
}
#feature-bottom {
}
#feature-bottom a {
    color: #FFF;
    text-decoration: none;
}
#feature-bottom a:hover {
    text-decoration: underline;
}
#feature-top .widget,
#feature-bottom .widget {
    padding: 0px 0px 10px 0px;
}
#feature-top h4,
#feature-bottom h4 {
    margin: 0px; padding: 10px 10px 0px 10px;
    color: #FFF;
    font-family: Georgia, Times, Serif;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
    border: 0px solid #FFF;
    border-left: none; border-right: none;
}
#feature-top h4 a,
#feature-bottom h4 a {
    color: #FFF;
    text-decoration: none;
}
#feature-top h4 a:hover,
#feature-bottom h4 a:hover {
    color: #FFF;
    text-decoration: none;
}
#feature-top-left h4,
#feature-top-middle h4,
#feature-bottom-left h4,
#feature-bottom-middle h4 {
    border: none;
}

#feature-top p,
#feature-top ul,
#feature-top ol,
#feature-top img,
#feature-top form,
#feature-top .widget div  {
    color: #FFF;
    padding: 10px;
}
#feature-bottom p,
#feature-bottom ul,
#feature-bottom ol,
#feature-bottom img,
#feature-bottom form,
#feature-bottom .widget div  {
    color: #FFF;
    padding: 10px;
}
#feature-top ul,
#feature-top ol,
#feature-bottom ul,
#feature-bottom ol {
    padding: 10px 0px; margin: 0px 15px 5px 25px;
    list-style-type: square;
}
#feature-top li ul,
#feature-top li ol,
#feature-bottom li ul,
#feature-bottom li ol {
    padding: 0px;
}
#feature-top a.rsswidget img,
#feature-bottom a.rsswidget img {
    display: none;
}
    
/*********************************************
        Content Div
*********************************************/
#content {
    background: #FFF;
    margin-top: 5px;
}

.post {
    padding: 0px 10px 10px 10px;
}
.post .title {
    width: 580px;
}
.page .date {
    display: none;
}
.post .date {
    display: none;
}
.post .post-title {
    float: left;
    width: 500px;
    line-height: 28px;
    padding: 5px 0px 0px 0px;
}
.post .post-title a {
    text-decoration: none;
}
.post .meta-author {
    font-style: italic;
}
/*********************************************
        Post Meta Styles, if needed
*********************************************/
.meta-top {
    clear: both; /* we need this so floats in the post are cleared */
}
.meta-bottom {
    clear: both; /* we need this so floats in the post are cleared */
    border-top: 1px solid #d7d7d7;
    margin: 10px 0px 0px 0px; padding: 10px 0px 0px 0px;
}
.meta-bottom .alignleft {
    width: 70%;
}
.meta-bottom .categories {
    background: url(images/folder.png) 0px 0px no-repeat;
    padding: 0px 0px 0px 18px;
}
.meta-bottom .comments {
    background: url(images/comments.png) 0px 2px no-repeat;
    padding: 0px 0px 0px 18px;
}
.photometa {
    margin: 0px 5px 0px 5px; padding: 0px 0px;
    width: 100%;
}
.EXIF {
    margin: -22px 0px 0px 10px; padding: 0px 0px;
    float: left;
    width: 33%;
}
.photometa h4 {
    border-bottom: 1px solid #666;
    text-align: center;
    margin: 0px; padding: 0px;
}
.photometa ul {
    list-style-type: none;
}

/*********************************************
        Previous/Next Page Navigation
*********************************************/
.paging {
    clear: both; /* To clear any floats */
    margin: 0px; padding: 10px;
}

/*********************************************
        Sidebar
*********************************************/
#sidebar { /* Wide Sidebar */
    background: #FFF;
margin-top: 6px;
}
.sidebar {
    background: #FFF;
}
#sidebar .sidebar {
    background: none;
}
.sidebar a {
    text-decoration: none;
}
.sidebar a:hover {
    text-decoration: underline;
}
.sidebar h4 {
    clear: both;
    background: #666;
    font-size: 15px;
    color: #FFF;
    font-family: Georgia, Arial, Sans-Serif;
    margin: 0px 0px 10px 0px;
    padding: 8px;
    font-weight: normal;
    text-transform: uppercase;
}
.sidebar h4 img {
    padding: 0px;
}
.sidebar h4 a {
    color: #FFF;
    text-decoration: none;
    margin: 0px; padding: 0px;
}
.sidebar .widget {
    clear: both;
    padding: 5px 10px;
}
.sidebar .widget p,
.sidebar .widget ul,
.sidebar .widget ol,
.sidebar .widget img,
.sidebar .widget form,
.sidebar .widget div  {
    padding: 5px 0px;
}
.sidebar p, 
.sidebar .textwidget {
    padding: 5px 0px;
}
.sidebar img {
    text-align: center;
}
.sidebar form {
    margin: 0px; padding: 0px;
}
.sidebar ul {
    list-style-type: none;
    margin: 0px; padding: 0px;
}
.sidebar ul li {
    margin: 0px; padding: 0px 0px 0px 8px;
    line-height: 18px;
    background: url(images/arrow.gif) 0px 4px no-repeat;
}
.sidebar ul li a {
    text-decoration: none;
}
.sidebar ul li a:hover {
    
}
.sidebar ul li ul {
    margin: 0px; padding: 0px;
}
.sidebar ul li ul li {
    margin: 0px; padding: 0px 0px 0px 8px;
}
.sidebar a.rsswidget img {
    display: none;
}

/*********************************************
        Comment Styles
*********************************************/
#comments {
    padding: 10px;
}
#comments h4 {
    padding: 0;
}
#comments .comment {
    margin: 5px 0px 5px 0px; padding: 10px;
    background: #FFFFFF;
    overflow: hidden;
    border: 1px solid #999;
}
#comments .alt {
    margin: 5px 0px 5px 0px; padding: 10px;
    background: #FFFFFF;
    overflow: hidden;
    border: 1px solid #999;
}
#comments .gravatar {
    float: left;
    padding: 0 5px 0 0;
}
#comments .commentmeta {
    
}
#comments .commentmeta a {
    text-decoration: none;
}
#comments .commentmeta a:hover {
    text-decoration: underline;
}
#comments .commenttext {
    
}

#respond {
    padding: 10px;
}
#respond h4 {
    padding: 0;
}
#respond form#commentform {
}
#respond #author {
    
}
#respond #email {
    
}
#respond #url {
    
}
#respond #comment {
    width: 100%;
}
#respond #submit {
    
}

/*********************************************
        Footer Styles
*********************************************/
#footer {
    text-align: left;
    color: #222;
}
#footer .alignleft,
#footer .alignright {
    padding: 10px;
}
#footer .alignright {
    text-align: right;
}
#footer a {
    color: #222;
    text-decoration: none;
}
#footer a:hover {
    text-decoration: underline;
}

/*********************************************
        Contact Form Styles
*********************************************/
.ithemes-contact-page {
    margin: 0 auto;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
.ithemes-contact-page td {
    padding: 5px;
    text-align: left;
}
.ithemes-contact-page td.label {
    text-align: right;
    vertical-align: top;
    font-weight: bold;
}

.ithemes-contact-page input,
.ithemes-contact-page textarea,
.ithemes-contact-page select {
    font-family: Arial, Helvetica, Sans-Serif;
    padding: 3px;
}
.ithemes-contact-page input:hover,
.ithemes-contact-page textarea:hover,
.ithemes-contact-page  select:hover    {
}

.ithemes-contact-page  input:focus,
.ithemes-contact-page  textarea:focus,
.ithemes-contact-page  select:focus    {
}

.ithemes-contact-page textarea,
.ithemes-contact-page input {
}
 
Are you talking about the H4 background color? The gray box around "text" "pages" "categories" etc? That's the only gray I see.

If so, just look for h4 with that gray defined as background color in the css. Change the color to the hex you want.
 
That is the grey im talking about and the one I want to change but I cant find the color. Could you possibly quote the piece that I need to change.

P.S - Thank you so much Crixus for your help so far
 
Code:
.sidebar h4 {
    clear: both;
    background: #666;
    font-size: 15px;
    color: #FFF;
    font-family: Georgia, Arial, Sans-Serif;
    margin: 0px 0px 10px 0px;
    padding: 8px;
    font-weight: normal;
    text-transform: uppercase;
}

third line background color. change it.
 
Dude... if i could give you rep... Trust me I would. Thanks so much for your help. Really really appreciated
 
Back
Top