How to do a certain design for a widget title box

steveb78 · #1 Dec 7, 2012, 10:14 AM

I am designing a radio station website, and interested in finding out how to get my widget title box to look like the attachment. Any help would be great!

lmilesw · #2 Dec 7, 2012, 04:15 PM

In a short amount of time I can't give detailed instructions but the following CSS may give you some ideas.

HTML Code:

.widget-title h3 {
    color: white !important;
}
.widget-title {
    background: blue;
    padding: 5px 5px 0;
    margin-left: -20px;
    position: relative;
    margin-top: -20px;
    width: 100px !important;
    border: 2px inset blue;
}

steveb78 · #3 Dec 21, 2012, 08:43 AM

Quote:

Originally Posted by lmilesw

In a short amount of time I can't give detailed instructions but the following CSS may give you some ideas.

HTML Code:

.widget-title h3 {
    color: white !important;
}
.widget-title {
    background: blue;
    padding: 5px 5px 0;
    margin-left: -20px;
    position: relative;
    margin-top: -20px;
    width: 100px !important;
    border: 2px inset blue;
}

Thanks for the info!

arntxee · #4 Dec 21, 2012, 04:49 PM

You can customize widget title box with something like this

Code:

background-color: #DF013A;
height: 25px;

For Widget title

Code:

font-size: 1em;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
margin-left: 10px;
padding-top: 4px;