How to replicate a widget header?

Support
#1

Hi, I’m rebuilding an existing WP site and want to replicate the style of the widget header in my build of Pro.
Here is a link to the example https://winkhairsydney.com.au/ Note the ‘Salon Opening Hours’ widget header.
I know that the widget header is a combination of CSS and an image ‘splitter.png’. What I can’t work out is how to put it all together in Pro i.e. how to use Pro Option Global CSS to get the splitter.png to show.
Are you able to give me some direction on this, or suggest a suitable alternative please?
The staging site is here… https://staging3.winkhairsydney.com.au/home-2020/
Thank you.

#2

Hello Paul,

Thanks for writing in!

Do you want something like this?

Screen Shot 2020-10-01 at 9.34.47 AM
Screen Shot 2020-10-01 at 9.34.47 AM2432×1144 254 KB

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use. In the old site, it is using this custom CSS:

.widget {
    padding: 40px 20px 35px 20px;
    background: url(https://winkhairsydney.com.au/wp-content/themes/viewport/images/splitter.png) 19px top no-repeat;
    position: relative;
}

.widget-title {
    background: none repeat scroll 0 0 #DDDDDD;
    color: #000000;
    font-family: "Helvetica Neue",Helvetica,Sans-serif;
    font-size: 11px;
    font-weight: bold;
    left: 19px;
    padding: 1px 7px;
    position: absolute;
    text-transform: uppercase;
    top: 0; 
}

Since in the Pro theme, we do not have .widget-title, you will then check again the live html to get the .h-widget CSS selector of the widget title in Pro theme.

Hope this makes sense. Kindly let us know how it goes.

#3

Hi @ruenel, thank you for that. I’m a lot closer now… but I still can’t get it to look the same. What CSS code is creating the height and width of the white text box and how do I get it to be italics? Sorry, if this is basic. I’m just learning all of this. I know how to use the Google Chrome Developer Toolbar, but I can’t work out where to change the code.

#4

Hello Paul,

Adding width and height CSS property will limit the width/height of the white box or the widget title.
Please check out this links here:

Be advised that this request is deemed as custom development and already beyond the scope of our support.

We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance.

Thank you for your understanding.

#5

Hi @ruenel. I got it! Thank you!

#6

You are most welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.