Sidebar Titles Outside of their boxes :-)

Home Forums Support Sidebar Titles Outside of their boxes :-)

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #135525
    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…

    Kind Regards,

    Richard Bland
    Owner, BhambraBland
    --
    w: www.bhambrabland.co.uk
    e: richard@bhambrabland.co.uk
    --

    #135530
    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?

    Kind Regards,

    Richard Bland
    Owner, BhambraBland
    --
    w: www.bhambrabland.co.uk
    e: richard@bhambrabland.co.uk
    --

    #135533
    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?

    Kind Regards,

    Richard Bland
    Owner, BhambraBland
    --
    w: www.bhambrabland.co.uk
    e: richard@bhambrabland.co.uk
    --

    #135537
    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.

    🙂

    Kind Regards,

    Richard Bland
    Owner, BhambraBland
    --
    w: www.bhambrabland.co.uk
    e: richard@bhambrabland.co.uk
    --

    #135544
    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;
    }
    
    #135553
    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.

    🙂

    Kind Regards,

    Richard Bland
    Owner, BhambraBland
    --
    w: www.bhambrabland.co.uk
    e: richard@bhambrabland.co.uk
    --

    #135555
    Richard Bland

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

    Kind Regards,

    Richard Bland
    Owner, BhambraBland
    --
    w: www.bhambrabland.co.uk
    e: richard@bhambrabland.co.uk
    --

    #135576
    Tom
    Lead Developer
    Lead Developer

    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.

    #135578
    Richard Bland

    True Tom!

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

    Kind Regards,

    Richard Bland
    Owner, BhambraBland
    --
    w: www.bhambrabland.co.uk
    e: richard@bhambrabland.co.uk
    --

    #135585
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.