Borders Around Widgets w/ Title

  • Resolved hellotherelady

    (@hellotherelady)


    11 years, 3 months ago

    I am using Hemlock theme and have my sidebar with widgets on the right side of my page. I was able to add a border around each widget area however I would like for the title to included within the top border of each widget.

    I would like for it to look similar to this image

    I tried searching and working on my own and thought maybe it had something to do with a Horizontal Rule Header? But not sure how to incorporate that into my stylesheet. If I knew where to put it and what to put in I can make it work.

    Thanks!
    http://www.hellotherelady.com

Viewing 4 replies - 1 through 4 (of 4 total)
  • martcol

    (@hotmale)

    11 years, 3 months ago

    I have been looking at this for half an hour or so now, and I don’t think it is as easy as you might think. Although I would be interested to see how the image you show was achieved in a live site.

    What I tried was to make the containing div position:relative then you can make the title position:absolute, reduce its padding, make the background white, and position it over the border with negative top.

    Does that make sense?

    If you can show me where you saw that picture I’d appreciate that.

    Someone else might have a solution.

    [Edit] The main problem with what I tried is it screws up when you narrow the viewport. i.e. it will break on mobile.

    Michael

    (@alchymyth)

    11 years, 3 months ago

    unfortunately, your currently used theme is not one of the supported themes from https://ww.wp.xz.cn/themes/

    please consider to contact the theme’s developer directly for help with your question;

    http://codex.ww.wp.xz.cn/Forum_Welcome#Commercial_Products

    Thread Starter hellotherelady

    (@hellotherelady)

    11 years, 3 months ago

    I did go to the theme developer and was lead here. There wasn’t much they suggested they could do.

    To answer your question martcol here is the original link where I found the idea.

    Definitely just trying to play around with different ideas and techniques but realize that it’s not that easy but I will try your suggestion of making the containing dv position:relative and making the title position:aboslute and reduce the padding. Not too concerned if it breaks on mobile at this point but more just after the chase of seeing if it can work and how. Thanks for the suggestion!

    Thread Starter hellotherelady

    (@hellotherelady)

    11 years, 3 months ago

    I figured it out! Wasn’t too hard after all. Just had to play around with the widget title a bit, but the position:relative came in handy for that. Just tweaked some padding, margins and the colors and it all worked out so well.

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Borders Around Widgets w/ Title’ is closed to new replies.