Sidebar Titles Outside of their boxes :-)

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?

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?

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.

:-)

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;
}

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.

:-)

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

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.

True Tom!

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

Awesome :)