Adjusting Space between Widgets in Adelle

  • Author
  • #1332432

    Hi there,

    I’ve just switched my blog over to Adelle and love the look of the sidebar except the amount of space between the zigzag divider and the beginning of the widget underneath it. Is there a way to bring each widget up closer to the divider bar on top of it, decreasing the amount of unused space? The amount of space under each widget is generally OK, it’s just above that is disproportionate.


    The blog I need help with is



    Hi Heather,

    I have a similar query regarding my site,I saw your site and it looks very neat.I am using Adelle theme too,can you please help me to understand how did you manage to get those social icon buttons on your side bar?,I am struggling to get those on my sidebar too and also the about area below the social icons on your sidebar is that the about me widget?



    You’ve added this:

    .widget {
        margin-top: 0;

    This has no effect, because the default top margin is already 0. Replace “margin-top” with “padding-top”.

    a) You add those image links by pasting the appropriate URLs in Appearance > Customize > Theme Options.
    b) That’s a Text widget.



    yeaah! I did it…:) thanks a ton @ justpi…keep a close watch I might just knock here again :)


    Thanks @justpi – that works perfectly! Is there a way to not have that take effect on my social media icons widget at the very top? I liked the bit of space it had there and don’t like how it looks with them right against the top of the shaded sidebar quite as much. Under the zigzag lines is perfect now though! What’s the css just to target that Text/HTML widget at the top?

    @hobnobnoor – I wanted to put more/different social media icons in than the theme allowed in Customize > Theme Options, so I used this tutorial and then pasted the HTML into a Text/HTML widget in the sidebar using my own .pngs for the icons: Next step – getting rollovers to work on each of them!


    @justpi – I just put a
    code into the widget’s content for now to shift the icons down, but if there’s a better way to do this in the CSS let me know!

    Thanks again!



    You’re welcome.

    The br tag is used to force a new line of text, not to create blank space. You can add a top margin to the whole sidebar (selector: .site-main .widget-area) or to that particular widget (selector: #text-6).

    By the way, the correct form of the br tag is this:
    <br />



    @fluorescentnoise: Thanks for the tip :)

    @justpi : how do I get rid of the zigzag lines in my sidebar? I am using adelle theme and my werbsite is



    Add this:

    .widget {
        background-image: none;



    Wow! worked…yippee!! thank you once again justpi :)

The topic ‘Adjusting Space between Widgets in Adelle’ is closed to new replies.