WordPress.org

Forums

Simpleo
[resolved] Change Sidebar Widget Color (10 posts)

  1. lonnie888
    Member
    Posted 1 year ago #

    I have tried to post several different suggested codes into the style.css sheet with no results. I have luck removing the pencil icon by pasting code into the style.css sheet so I know that some code works in there.

    the color I want is either 9cb97f or white.

  2. Nile Flores
    Member
    Posted 1 year ago #

    Which widget color? The actual sidebar. By default it is white:

    .sidebar .widget {
    margin-bottom: 10%;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 solid #DEDEDE;
    box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    padding: 10%;
    position: relative;
    z-index: 0;
    }

    Or the buttons, or a different element? I had to go to the developer's site to see the full previous as the WordPress.org preview didn't show up right.

  3. lonnie888
    Member
    Posted 1 year ago #

    Thank you for the swift response! The top of the widgets I put in the main side bar have color that doesn't match behind the text. I am under the impression that I can make a change to fix the color of any widget I put in the sidebar. Do I need to change individually? Its the background of the title of the widget. Take a look at the widget here (I just put a menu widget to see);

    http://commutefit.com/about-our-bikes/

    I pasted the above code into my style.css sheet and I get no change. I'm sure there is something more I should be doing as I am pretty new at this. Thank you again for your help.

  4. Nile Flores
    Member
    Posted 1 year ago #

    You want the .widget-title instead to the color you want, BUT you've got

    .widget-title {
    background-color: #8db529!important;
    }

    That's the green that is showing up... and the hexagonal color is what you need to change.

  5. lonnie888
    Member
    Posted 1 year ago #

    Thank you!

    I pasted this into my style.css with the correct color and nothing. I pasted into my main sidebar sheet and the color fixed but the code also shows up on the page. See here:

    http://commutefit.com/about-our-bikes/

    Is there somewhere else I should be pasting this code?

  6. Nile Flores
    Member
    Posted 1 year ago #

    It should only be in your theme's style sheet.

  7. Nile Flores
    Member
    Posted 1 year ago #

    Now, if you're going to change it in the sidebar.css... I'm seeing that file when I inspect the element in Chrome.

    In fact, if you go through that file, you should see a code already there for .widget-title

    add the background-color: #9cb97f!important; to one of them.

  8. lonnie888
    Member
    Posted 1 year ago #

    Thank you! Pasting into the style.css sheet worked! I must've been doing something wrong when I tried last time.

    I have created a call-to-action banner on the side bar that takes visitors to my shop page. How do I prevent the banner from showing up on the shop page as well? It is too redundant to have the banner on the actual page.

    Is there something that I can add to the code in the text widget?

  9. Nile Flores
    Member
    Posted 1 year ago #

    You could try using the plugin called Widget Logic and in the widget put the conditional !is_page('shop'). I normally use it for my site to only show certain widgets on certain pages.

    http://wordpress.org/plugins/widget-logic/

  10. lonnie888
    Member
    Posted 1 year ago #

    Thank you for the help!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic