Tagged: , , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2602

    Is there an easy way to re-use the “our work” image from the front page as the background image for the “send” button on the contact page?

    I messed around with the css for a bit, but i couldn’t get it to work (4 part button image).

    Thanks!

    #38650

    Hey,

    I’d create a new button class like

    .send_button{
    background: transparent url('../images/skin1/button.png') no-reapeat;
    width:100px;
    height:30px;
    text-align:center;
    font-size: 30px;
    }

    and attach this class to the send button by replacing following line in template_contact.php:

    <input name="Send" type="submit" value="<?php _e('Send','cleancut'); ?>" class="button" id="send" size="16"/></p>

    with:

    <input name="Send" type="submit" value="<?php _e('Send','cleancut'); ?>" class="send_button" id="send" size="16"/></p>

    #38651

    Thanks for the super fast reply.

    I added those lines, but it didn’t pick up the image. Only the button size and font size. And then changed the button graphic to a generic windows button.

    I wanted to use the 4 part button.png.

    It looks like there are about 5 parts to it in style4.css. To offset the image and load it twice, but i’d even be happy with out the roll over effect. I’m using skin4 and changed that part from your original post, just to try and give all information.

    .big_button{ background: transparent url('../images/skin4/button.png') no-repeat left 0px; }

    .big_button strong{
    background: transparent url('../images/skin4/button.png') no-repeat right -60px !important;
    background: transparent url('../images/skin4/button.png') no-repeat right -59px; /*ie6 bugfix*/
    color: #fff;
    }

    .big_button:hover{
    background: transparent url('../images/skin4/button.png') no-repeat left -120px !important;
    background: transparent url('../images/skin4/button.png') no-repeat left 0px; /*ie6 bugfix*/
    }
    .big_button:hover strong{
    background: transparent url('../images/skin4/button.png') no-repeat right -180px !important;
    background: transparent url('../images/skin4/button.png') no-repeat right -60px; /*ie6 bugfix*/
    }

    #38652

    Hey,

    try following:

    .send_button{
    width:100px;
    height:30px;
    text-align:center;
    font-size: 30px;
    }

    (aobviously you need to adjust width/height and font size so that everything fits together with the background) and attach following classes to the send button by replacing following line in template_contact.php:

    <input name="Send" type="submit" value="<?php _e('Send','cleancut'); ?>" class="button" id="send" size="16"/></p>

    with:

    <input name="Send" type="submit" value="<?php _e('Send','cleancut'); ?>" class="send_button big_button" id="send" size="16"/></p>

    If this doesn’t work I think it’s not easily possible to add the button background to the send button. Why? Because the send button was designed to be a link background. Links allow to style the text content with html tags like “strong”, “small”, “h2″, etc. Buttons just allow a button value. As you can see Kriesi uses the strong attribute in his css code and we can’t use it with buttons,,,

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

The topic ‘replace send button with image’ is closed to new replies.