rounded menu selection buttons

  • Author
    Posts
  • #954518

    Using the Retro-fitted theme – is there a way to alter the look of the “square” menu bar boxes on homepage? i.e., can I make them rounded boxes with shading?

    Thanks,
    cherylmarieknits.com

    The blog I need help with is cherylmarieknits.com.

    #954842

    Add this to the end of any existing custom CSS you have and then you can adjust the 5px values. Note that the CSS tidy thing here at wordpress may strip some of the declarations below out. It has in the past, but hopefully it won’t now.

    #access li, #access a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }
    #954878

    Works perfect – thanks!

    In keeping with that look… I have a Milestone Widget whose title is in a square block as well – is there a similar way in which I can round the borders of that Event Title box?

    cherylmarieknits.com

    #954900

    I’ll offer two for you to try. The first does the border radius and shadow on the blue section only, to match the menu tabs. The second adds radius to the bottom corners of the bottom section.

    .milestone-widget .milestone-header {
    border-radius: 5px 5px 5px 5px;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.3);
    position: relative;
    }
    .milestone-countdown, .milestone-message {
    border-radius: 0 5px 5px 0;
    }
    #954901

    Sorry, change the border-radius declaration values in the second bit of code as follows:

    border-radius: 0 0 5px 5px;

The topic ‘rounded menu selection buttons’ is closed to new replies.