Customizing Widgets

  • Hi! I have three different widgets in my sidebar, Follow Blog, Custom HTML and Text. I’m using CSS to alter the appearance of each one individually. I have two questions:

    1. Is there a way to change the appearance of the different widget titles individually, instead of using .widget-title { }?

    2. I have a poll in my Custom HTML widget. Is there a way to make it fill the widget box, and grow and shrink as the webpage expands and contracts?

    Thank you so much! My site is sheblindedmewithscience.net and here’s the CSS code I have currently:

    .widget {
    margin: 0 0 1em;
    border: 4px solid #A72608;
    padding: 0;
    background: #F0F0EE;
    box-shadow: none;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    }

    .widget-title {
    padding: .5em 0 0 .5em;
    display: block;
    color: #A72608;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
    font-size: 1.25rem;
    }

    .widget-header {
    padding: 0;
    }
    .widget_blog_subscription.widget {
    padding: .5em;
    float: center;
    display: block;
    }

    .widget .textwidget.custom-html-widget {
    margin: 0;
    padding: 0;
    max-width: 100%;
    }

    #PDI_container9946597 .pds-box {
    font-family: Times, Helvetica, sans-serif;
    font-size: 13px;
    text-align: left;
    color: #333;
    width: 380px;
    min-width: 100%;
    max-width: 100%;
    background: #f4edde;
    border: 0;
    margin: 0;
    display: block;
    }

    .widget .textwidget {
    padding: 0 .5em;
    }

    The blog I need help with is: (visible only to logged in users)

  • I fixed the poll in the custom html widget problem! All you have to do change the poll background to the same color as the widget background and get rid of the border. It looks great!

    #PDI_container9946597 .pds-box {
    background: #F0F0EE;
    border: none;
    }

  • The topic ‘Customizing Widgets’ is closed to new replies.