Allocate a different colour to each widget & remove the gap between them

  • Unknown's avatar
    tbelloy · Member ·

    Hello,

    I’ve been trying to give a different colour to each widget to really make them pop individually. This seems to be a bit difficult for me and making my CSS section very messy.

    The look/style I’m trying to achieve for my widget section is similar to this website https://deliciouslyella.com/philosophy/bookshelf-resources/
    This means there shouldn’t be a colour gap between each widget. if you look at the first 2 widgets on my blog there is a gap which does not look right.

    at the moment I’ve highlighted the whole widget section with the below CSS so until I get them done seperately, the widget section is not white:
    #secondary {
    padding: .333em 2.5em 10px 10px !important;
    background: lightgrey;
    }

    Below are the different widgets that I would like to change or add the colour and try and remove the gap between widgets:

    – Social Media icons:
    aside.widget_wpcom_social_media_icons_widget {
    background: #47C7FF !important;
    background-color: #47C7FF;
    padding: 15px !important;
    width: 100% !important;
    }

    aside#wpcom_social_media_icons_widget-9 {
    padding-left: 15px !important;
    margin-right: 0 !important;
    width: 309px !important;
    padding-right: 0 !important;
    margin-left: -10px !important;
    margin-top: -5px !important;
    }

    and there is a gap with the next widget “subscription” which I’d like to remove

    aside.widget_blog_subscription {
    background: #718BF7 !important;
    background-color: #718BF7;
    padding: 15px;
    width: 294px !important;
    margin-left: -10px !important;
    margin-top: 0 !important;
    }

    The other widgets I would like to change are:

    – Instagram
    – Top posts & pages
    – Facebook Page Plugin
    – Twitter feed
    – Image

    Sorry for the long and tedious message, however once my widget section is complete with the CSS I need, I can move back to contents and so forth.

    Thanks in advance.
    Thomas

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

  • kathrynwp · Staff ·

    Looks like you’ve been able to make some CSS tweaks to your widgets widgets, are you all set or did you want to change anything else?

    p.s. in future, please post in the CSS Customization forum for a quicker reply. If you need staff help outside of that forum, please add the modlook tag to the tags area and we’ll be glad to lend a hand.

  • The topic ‘Allocate a different colour to each widget & remove the gap between them’ is closed to new replies.