WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to style a particular widget? (7 posts)

  1. David Robinson
    Member
    Posted 9 months ago #

    Now I know the theory of it which is that you find the ID and use that to style the CSS. However, the site im working on, the widgets dont seem to have any IDs. http://thelazytrader.com/articles/learn-to-trade/whats-so-great-about-end-of-day-trading/ is the page and the top widget with the flash animation is the one I want to style (to get rid of the grey border) but it has no ID.

    Can someone shed some light on this for me please.

  2. martcol
    Member
    Posted 9 months ago #

    You are not limited to using id as a the selector for CSS rules, you can also use the class which needs a period rather than a hash.

    class="myStyle"
    
    .myStyle {
    padding: 5px;
    }
    
    id="uniqueIdentifier"
    
    #uniqueIdentifier {
    margin: 20px;
    }

    The border on the element you want to change is applied with this rule:

    .contentBlock1 .textwidget {
        border: 1px solid #D5D5D5;
        margin: 0 0 10px;
        padding: 10px;
    }

    It's quite easy to edit that but I can't work out how to only remove the border on the one element.

  3. David Robinson
    Member
    Posted 9 months ago #

    Hi Martcol,

    Thanks for replying. Yes, I need to edit that particular widget that has the flash animation in it. This is normally done with an ID that WordPress asigns to each individual widget. However, I cant see any IDs for any of the widgets on that page. This is what I need help with. Is it possible that the original developer has overriden the WordPress system so that they are not being assigned IDs?

  4. martcol
    Member
    Posted 9 months ago #

    I think that this is a theme thing and I guess the point I was making is that the trend seems to be to move towards using class rather than id for CSS.

    If you added:

    .contentBlock1 .textwidget {
        border: none;
    }

    That would remove the border on the element you want but the problem is it also removes the border on the element below it.

    There might be a way to add in an ID to each of your widgets but I couldn't do that.

  5. martcol
    Member
    Posted 9 months ago #

    .sideBar .contentBlock1:nth-child(1) .textwidget {
    border: medium none;
    }

  6. David Robinson
    Member
    Posted 9 months ago #

    Hi Martcol,

    Thanks for the reply. I just fixed it myself by using a plugin that adds classes to widgets.

  7. martcol
    Member
    Posted 9 months ago #

    Glad you got it sorted.

    I learned a bit about complex CSS selectors!

Reply

You must log in to post.

About this Topic

Tags