1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'White Hat SEO' started by Shadowpeep, Aug 16, 2010.

  1. Shadowpeep

    Shadowpeep Newbie

    Joined:
    Sep 30, 2009
    Messages:
    36
    Likes Received:
    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....
     
  2. Crixus

    Crixus Regular Member

    Joined:
    Jul 10, 2010
    Messages:
    409
    Likes Received:
    119
    Occupation:
    Jack of all trades, master of a couple.
    Location:
    the ludus
    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.
     
    • Thanks Thanks x 1
  3. Shadowpeep

    Shadowpeep Newbie

    Joined:
    Sep 30, 2009
    Messages:
    36
    Likes Received:
    2
    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 {
    }
    
     
  4. Crixus

    Crixus Regular Member

    Joined:
    Jul 10, 2010
    Messages:
    409
    Likes Received:
    119
    Occupation:
    Jack of all trades, master of a couple.
    Location:
    the ludus
    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.
     
  5. Shadowpeep

    Shadowpeep Newbie

    Joined:
    Sep 30, 2009
    Messages:
    36
    Likes Received:
    2
    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
     
  6. Crixus

    Crixus Regular Member

    Joined:
    Jul 10, 2010
    Messages:
    409
    Likes Received:
    119
    Occupation:
    Jack of all trades, master of a couple.
    Location:
    the ludus
    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.
     
    • Thanks Thanks x 1
  7. Shadowpeep

    Shadowpeep Newbie

    Joined:
    Sep 30, 2009
    Messages:
    36
    Likes Received:
    2
    Dude... if i could give you rep... Trust me I would. Thanks so much for your help. Really really appreciated