Adjusting Space between Widgets in Adelle

• 

  fluorescentnoise · Member · Jul 2, 2013 at 7:18 pm

  • Copy link
  • Add topic to favorites

  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.

  Thanks!

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

• 

  hobnobnoor · Member · Jul 3, 2013 at 6:12 am

  • Copy link

  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?

• 

  justpi · Member · Jul 3, 2013 at 9:22 am

  • Copy link

  @fluorescentnoise:
  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”.

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

• 

  hobnobnoor · Member · Jul 3, 2013 at 11:14 am

  • Copy link

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

• 

  fluorescentnoise · Member · Jul 3, 2013 at 12:09 pm

  • Copy link

  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: http://geekfairy.co.uk/making-social-media-buttons-for-your-wordpress-site/. Next step – getting rollovers to work on each of them!

• 

  fluorescentnoise · Member · Jul 3, 2013 at 12:13 pm

  • Copy link

  @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!

• 

  justpi · Member · Jul 3, 2013 at 12:33 pm

  • Copy link

  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 />

• 

  hobnobnoor · Member · Jul 4, 2013 at 12:59 pm

  • Copy link

  @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 http://letstrycreating.com/

• 

  justpi · Member · Jul 4, 2013 at 2:27 pm

  • Copy link

  Add this:

  .widget {
      background-image: none;
  }

• 

  hobnobnoor · Member · Jul 6, 2013 at 8:11 am

  • Copy link

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