Sidebar Titles Outside of their boxes :-)

[Richard Bland]

Tom,

I am going to attempt to bring the sidebar titles outside of the widget boxes. I will let you all know how I get on. This will be good for those wish to style the sidebar titles independently from the widget containers themselves.

Will keep you posted…

[Richard Bland]

Right so I am looking into the functions.php and can see where the titles are generated. I am a little stuckas to how I can generate these titles outside of the <aside> box. Is this possible?

[Richard Bland]

I just tried putting my own version into the child theme functions.php and it broke the theme lol – need to brush up on adding php into the functions file I think.

Any ideas?

[Richard Bland]

For now I have turned off all the styling to the <aside> and have started applying styles to the individual components of the sidebar widgets to make it look like the title is separate. A solid workaround if we can’t change the functions.php file to automatically generate the title separately outside of the <aside> container.

🙂

[bdbrown]

Hi Richard. I came up with this css. Probably not the best solution since it uses a negative margin and may need some tweaking for mobile views:

.sidebar .widget .widget-title {
    margin-top: -45px;
}

.sidebar .widget {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 50px;
}

[Richard Bland]

Thanks bd,

I used the following to unstyle the left sidebar widget:

.inside-left-sidebar .widget { padding: 0!important; background-color: transparent!important; }

That takes care of the padding and the background colour.

Then I went and starting to style the h4 (for your custom widgets) and you will need to look at the class names on the other widget boxes. Make sure you use the .inside-left-sidebar *then the class name* so you only select those elements within the left sidebar. For example:

.menu-company-container, .inside-left-sidebar .textwidget { padding: 40px; background-color: #e5e5e5; }

and then for my titles I used:

.inside-left-sidebar h4 { *your custom code* }

This will work better than the negative margins.

🙂

[Richard Bland]

The same rules can be applied to the right sidebar too which I assume would be .inside-right-sidebar

[Tom]

Both of the above methods would work.

I would almost prefer the negative margin one, as the above would only work with text widgets/whatever widgets you specify. Hard to tell which widgets a user will be using.

[Richard Bland]

True Tom!

For me the method works because I know what widget class names to target when setting it all up. 🙂

[Tom]

Awesome 🙂

[Author]

Posts