Grow your CSS skills. Land your dream job.

Want to style a specific Widget

  • # November 11, 2009 at 1:21 am

    Hey Guys,

    New here but finding you guys seem to really know your stuff…

    I’m working on a website at http://www.studioworkplace.com and I am having trouble with a single stylesheet entry. I want to be able to remove the underline from the images on the bottom right hand of the screen (the social media icons). That widget is TEXT-11 (for those familiar with WordPress).

    Now, the rest of this page is controlled by the following code…

    Code:
    /************************************************
    * Homepage *
    ************************************************/

    #homepage {
    width: 940px;
    margin: 0px auto 0px;
    padding: 0px 0px 0px 0px;
    }

    #homepage p {
    margin: 0px;
    padding: 0px;
    }

    #homepage a, #homepage a:visited {
    color: #3A87DD;
    text-decoration: none;
    }

    #homepage a:hover {
    color: #3A87DD;
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    }

    #homepage embed, #homepage object {
    width: 280px;
    height: 235px;
    margin: 0px;
    padding: 0px;
    }

    #homepage .widget {
    background: #F7F7F7;
    margin: 0px 0px 10px 0px;
    padding: 5px;
    }

    #homepage #text-5, #text-10, #my-tweets-widget-3, #enews-5, #recent-posts-5 {
    background: #F7F7F7;
    margin: 0px 0px 10px 0px;
    padding: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #333333;
    }

    #homepage #text-11 {
    background: #F7F7F7;
    color: #F7F7F7;
    margin: 0px 0px 10px 0px;
    padding: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #333333;
    }

    #homepage ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }

    #homepage ul li {
    list-style-type: none;
    margin: 0px 0px 5px 0px;
    padding: 0px;
    }

    #homepage ul ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }

    #homepage ul ul ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }

    #homepage ul li li {
    background: url(images/icon.gif) no-repeat top left;
    margin: 0px;
    padding: 0px 0px 0px 18px;
    }

    #homepage ul li ul li {
    background: url(images/icon.gif) no-repeat top left;
    margin: 0px;
    padding: 0px 0px 0px 18px;
    }

    #homepage ul li a, #homepage ul li a:visited {
    color: #222222;
    text-decoration: none;
    border-bottom: 1px solid #F7F7F7;
    }

    #homepage ul li a:hover{
    color: #3A87DD;
    text-decoration: none;
    border-bottom: 1px solid #3A87DD;
    }

    .section {
    background: #F7F7F7;
    margin: 0px 0px 10px 0px;
    padding: 9px;
    border: 1px solid #E6E6E6;
    }

    .hpbottomleft {
    float: left;
    width: 310px;
    margin: 0px;
    padding: 0px;
    }

    .hpbottomright {
    float: right;
    width: 310px;
    margin: 0px;
    padding: 0px;
    }

    .thumbnail {
    float: left;
    margin: 0px 10px 0px 0px;
    }

    For the friggen life of me I cannot figure out what I am missing in order to shut off just this one widget. The stylesheet is, of course, much longer than this but I’ve just included relevant parts.

    Help me Obi-Wan, you’re my only hope!

    Cheers,
    Michael

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".