Metro Pro Widget Title

[bandj]

I would like to make the widget title background a color, but the background goes the whole width of the widget. How would I make the background only be the width of the text, with a little space on each end? My idea is to have a background image along the top of the widget then have a background color for the text to separate it from the background image.

[Pixel Frau]

Look for this section in your CSS:

.title-area {
float: left;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
padding: 12px 0;
padding: 1.2rem 0;
width: 33%;
}

Change the width from 33% to auto. That will get rid of the extra background area that extends beyond the text.

Add background-color: #123456; to change the background color behind the text, replacing 123456 with the hex code for the color you want to use.

Change the padding to padding: 12px 10px; padding: 1.2rem 1rem; so that the background color extends just a bit beyond the text.

Do you need a background image, or do you just want the top to have a border in a different color? The border will be easier to implement. Add border-top: 5px solid #123456;, replacing 123456 with the hex code for the color you want for the top border. Increase/decrease the 5px to make the border larger or smaller.

So your final CSS for that section will look something like this:

.title-area {
float: left;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
padding: 12px 10px;
padding: 1.2rem 1rem;
width: auto;
background-color: #123456;
border-top: 5px solid #123456;
}

[Author]

Posts