Replace the Send, Preview, and Draft Buttons Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
2 posters

    Replace the Send, Preview, and Draft Buttons

    avatar
    Guest
    Guest


    In progress Replace the Send, Preview, and Draft Buttons

    Post by Guest March 1st 2015, 3:15 am

    Hello,

    I would like to replace the current appearance of the "send," preview," and "draft" buttons on my forum, preferably with images that I can make on my own instead of just color changes. Is this possible?

    My forum version is phpBB3.
    Thank you for your time!
    Leah7
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    In progress Re: Replace the Send, Preview, and Draft Buttons

    Post by _Twisted_Mods_ March 1st 2015, 4:22 am

    acp>display>colors>css tab

    Code:

    .submit-buttons input[name="post"]{
       background-image:url(imageurl);
       width:100px!important;
       height:30px;
       font-size:0px;
    background-color:transparent;
       border:none;
    }
    .submit-buttons input[name="preview"]{
       background-image:url(imageurl);
       width:100px!important;
       height:30px;
       font-size:0px;
    background-color:transparent;
       border:none;
    }
    input[name="draft"]{
       background-image:url(imageurl);
       width:100px!important;
       height:30px;
       font-size:0px;
    background-color:transparent;
       border:none;
    }

    replace imageurl with the url of the image
    if it just a background image with no text remove "font-size:0px" from the code
    set the width and height of the image

    ---------------------
    if its a background image and with no text and its gonna be the same for all three use this

    Code:
    .submit-buttons input[name="post"],.submit-buttons input[name="preview"],input[name="draft"]{
       background-image:url(imageurl);
       width:100px!important;
       height:30px;
    background-color:transparent;
       border:none;
    }
    avatar
    Guest
    Guest


    In progress Re: Replace the Send, Preview, and Draft Buttons

    Post by Guest March 1st 2015, 8:51 am

    Okay! At first, I thought it didn't work, but it did! xD It just works in the full-reply mode and not the quick reply mode.

    Is there a way to have it work in quick reply, as well?
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    In progress Re: Replace the Send, Preview, and Draft Buttons

    Post by _Twisted_Mods_ March 1st 2015, 9:59 am

    remove
    Code:
    .submit-buttons 

    and see if it works
    avatar
    Guest
    Guest


    In progress Re: Replace the Send, Preview, and Draft Buttons

    Post by Guest March 1st 2015, 8:30 pm

    This did fix it, thank you very much! ^.^ However, when I hover over the buttons, there is now a little box that appears around them. Can I remove that?
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    In progress Re: Replace the Send, Preview, and Draft Buttons

    Post by Ange Tuteur March 1st 2015, 9:01 pm

    It sounds like the border. Try replacing border:none; with border:none !important;
    avatar
    Guest
    Guest


    In progress Re: Replace the Send, Preview, and Draft Buttons

    Post by Guest March 1st 2015, 9:45 pm

    Yes, this fixed the issue and now I have the buttons up there that I want--thank you so very much to _twisted_mods_ and Ange Tuteur for helping me with this!!! <3

    Solved!