Metro Pro Widget Title

Community Forums Forums Design Tips and Tricks Metro Pro Widget Title

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Pixel Frau 1 year ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #65885

    bandj
    Participant
    Post count: 189

    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.


    #69478

    Pixel Frau
    Participant
    Post count: 143

    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;
    }

    Julia
    ===============
    Need help customizing your Genesis child theme? Come visit me at Pixel Frau.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.