Change more text to an image

  • Ian Walters

    #4648

    I’m trying to jazz up my Read More buttons so that they are styled like my widget headers.

    The text should go to the top and bottom edges and the colors/gradient match.

    Ideally I’d like to do it in my child theme CSS but if I have to use an image that is also OK.

    I’m guessing that the solution lies in the following CSS code but not sure what I need to change.

    .block-button,
    .block-button:visited,
    .Button,
    .button,
    #commentform #submit {
    background: url(images/bg-block-button.png) left bottom repeat-x #1C5FA5;
    background: -moz-linear-gradient(#2982C5, #1C5FA5);
    background: -webkit-linear-gradient(#2982C5, #1C5FA5);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2982C5', EndColorStr='#1C5FA5')";
    background: linear-gradient(#2982C5, #1C5FA5);

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    -moz-box-shadow: 0 0 5px #555;
    -webkit-box-shadow: 0 0 5px #555;
    box-shadow: 0 0 5px #555;

    border: 1px solid #1C5FA5;
    color: #fff;
    cursor: pointer;
    display: block;
    float: right;
    font: bold 12px arial;
    margin: 0 0px 0px;
    padding: 0px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 0 #16497E;
    }
    Mod

    Kenneth John Odle

    #28788

    Install Firebug.

    Then, you can play around with existing code on the fly until you get it styled the way you want. Then copy the code out of Firebug and paste it into your child theme CSS.

    It really is the easiest and fastest way to accomplish this sort of thing.

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

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!