Adding a Border + Moving Widget Title (HELP?!)

[AmberKil]

I feel like I keep running into the same wall here... I've tried multiple methods to get the widget border how I want it (see image) but I can't seem to move the title without it getting cut off or disappearing. I know there has to be a simple solution, I just don't know what it is. Any help would be GREATLY appreciated!!

Hopefully what I'm trying to do is clear. I want the border around the widgets. I want the widget title to overlap the border. I want to add a white background to the widget title so the border doesn't 'run through' it. I've managed to get everything else done, but the stupid title won't cooperate!

The URL is https://withasplashofcolor.com/

Code I'm trying to work with

.front-page .content .widget {
    border: 2px solid #eee;
    padding: 2%;
    position: relative;
    overflow: visible;
    margin: 0 auto 45px;
}

.home-below-content .widget-title { 
	  position:absolute;
    top: -15%;
    left: 3%;
    background: #fff;
}

#home-below-content .featured-content {
    border: 2px solid #eee;
    padding: 2% 2% 2%;
    position: relative;
    overflow: visible;
    margin: 0 auto 45px;
}

https://withasplashofcolor.com/

[AnitaC]

You need more than CSS. The reason why the border will not work is because the title and content is all inside the wrap. You would need a function to pull the title out by itself. And then the title text and the more from this category` would need to have their own class so their backgrounds would have their own background color.

You might get faster help contacting Restored 316 for help with that since that's a third party theme and they provide support and help for their own themes. She has a Facebook group too.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts