Styling sidebar widgets like front page widgets

  • Resolved CaptRobovski

    (@captrobovski)


    11 years, 8 months ago

    Hi Ahortin,

    As I liked how the Front Page Widgets were styled I’ve left them as is in my child theme. I’ve added some standard text widgets to the sidebar area in the WP admin to create a side navigation of sorts.

    Could you let me know how I can style the sidebar so that it has the same rounded corner box style that the Front Page Widgets have? I can’t work out which bit I’d need to restyle in the stylesheet – Firefox inspector brings these areas up as asides, but I thought that was a blog post style?

    Cheers,

    Rob

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    The html5 spec allows for aside to contain secondary content.

    Around line 708 in style.css is where the homepage widgets are styled with rounded corners, border etc.. You simply need to apply these styles to the sidebar widgets as well, if you want them to look the same. You can do that by specifying their their classes when you define the style.

    #secondary .widget,
#maincontentcontainer .home-sidebar .widget {
    Thread Starter CaptRobovski

    (@captrobovski)

    Thanks for replying.

    Cool, thanks for that. Will take a look and let you know how I get on.

    Rob

    Thread Starter CaptRobovski

    (@captrobovski)

    Hi Ahortin,

    Sorry for not being able to reply sooner – I haven’t been able to look at anything to do with the website for the past fortnight.

    I’ve managed to apply the CSS to the widget area, thanks for that. However, as the widgets are using 4 columns (out of the 12 column grid), it’s looking a bit wide as it is, and there’s not a huge gap between the main content area and the side widgets.

    As far as I can work out I could either:

    A. Create new rules specifically for the #secondary .widget class and adding a margin.
    B. Change the side widgets to use 3 columns and add a ‘gutter’ column of 1 column width in between.

    I’ve tested option B by adding a <div> containing a non breaking space in the sidebar.php file and whilst it works, I can’t help but think it’s not very clean! It also means there’s a big gap between the main content and the widgets when viewing on a mobile.

    Could you let me know the best approach?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Styling sidebar widgets like front page widgets’ is closed to new replies.