1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

I want change styling buttons to jpg

Discussion in 'Styling and Customization Questions' started by wichern.k, Nov 19, 2012.

  1. wichern.k

    wichern.k Member

    I want change styling buttons post reply, buttons upload a file and buttons more options
    321.jpg
    to

    postreply.jpg
    uploadfile.jpg
    moreoption.jpg
    Thank you
     
  2. Shelley

    Shelley Well-Known Member

    An example (below) you can paste that in your Extra.css template or go the SP route which would be more of a global change. style to your preference.

    Code:
    .message .button {
        background: path to custom  image;
        color: white; }
    
     
    Jake Bunce likes this.
  3. wichern.k

    wichern.k Member

    Code:
    .message .button {
        box-shadow: none;
        color: #102d7e !important;
        font: normal 9px/9px;
        font-family: Tahoma;
        background: url('./styles/default/xenforo/icons/button.jpg');
        border-radius: 3px;
        padding:7px 10px 7px 10px;
        border-color: #CCCCCC !important; }
    
    Result
    be.jpg
    I want to change all buttons style and all font position?
     
  4. Shelley

    Shelley Well-Known Member

    You don't really have to attach an image/background.

    The following going by your screenshot should do it by adding the following in extra.css.

    Code:
    .message .button {
        box-shadow: none;
        color: #102d7e !important;
        font: normal 9px/9px;
        font-family: Tahoma;
        background-color: #eeeeee;
        border-radius: 3px;
        padding: 3px 5px;
        border-color: #CCCCCC !important; }
    
     
    Jake Bunce likes this.
  5. wichern.k

    wichern.k Member

    How to fix the Display problems.
    Google chrom
    be1.jpg
    Firefox
    be.jpg

    I want set the height to box text, I want set all buttons style in website.
    I attach file jpg all buttons. I want insert buttons default xenforo style.
    edit.jpg
    ip.jpg
    like.jpg
    postreply.jpg
    reply.jpg
    Reply-Thread.jpg
    report.jpg
    spam.jpg
    unlike.jpg
    uploadafile.jpg
     
  6. Shelley

    Shelley Well-Known Member

    Add a height in to the css I provided height: 30px;

    As for those buttons you'll have to use a background: image #color; and set a padding-left depending on the image size. Isn't difficult to accomplish.
     
    Jake Bunce likes this.
  7. Shelley

    Shelley Well-Known Member

    On your other buttons with the image here is a quick example.


    Code:
    .message .edit{
       background: url("@imagePath/xenforo/icons/glasses.png") no-repeat scroll left #b2b2b2 !important;  
        padding: 3px 5px 3px 27px !important;
        border-radius: 3px;
        border: 1px solid #8b8b8b;
        color: #e3e3e3; 
        text-shadow: 0 0 2px #000;
        font-weight: bold;}
    
    the output on that code is this (screenshot below) you would alter the padding pending on the size of the icons you use for each button and of course style the colours /font to your preference.

    button.png

    here's the rest of the link classes to use in that area

    .message .report, .message .ip, .message .delete, .message .warn, .message .ReplyQuote
     
    Jake Bunce likes this.
  8. wichern.k

    wichern.k Member

    Thank you very much.
    Code:
    .message .report, .message .ip, .message .delete, .message .warn, .message .ReplyQuote, .message .edit {
      background: url("@imagePath/xenforo/icons/glasses.png") no-repeat scroll left #b2b2b2 !important; 
        padding: 3px 5px 3px 27px !important;
        border-radius: 3px;
        border: 1px solid #8b8b8b;
        color: #e3e3e3;
        text-shadow: 0 0 2px #000;
        font-weight: bold;}
    what is buttons ?
    • post new thread
    • post reply
    • upload a file
    • more options
    • reply to thread
    • preview
    I not .message ........, you help me please.
     
  9. Shelley

    Shelley Well-Known Member

    hmmmmm let me go check that out when time permits and I'll get back to you on this. Just so I know, your wanting to place an icon on the left hand side of those buttons?
     
    Jake Bunce likes this.
  10. russoroni

    russoroni Active Member

    How do I change the thumbnail/full image buttons? All I'm really trying to do is remove the border radius from all the buttons.

    ScreenHunter_04 Dec. 15 18.06.jpg
     
  11. Shelley

    Shelley Well-Known Member

    Replace the image in the following directory and overwrite it with your custom image. /widgets/image-attachments.png

    Edit: Think I mis-read what you meant by changing the images

    With regards to the buttons and removing the radius, adding the following into extra.css template will remove this.

    Code:
    .button.smallButton { border-radius: 0 ;}
     
  12. russoroni

    russoroni Active Member

    Thanks @Shelley but what I ended up doing was killing all the border radius for the whole site by using this...

    * {
    border-radius: 0 0 0 0 !important;
    }


    I like clean sharp edges.
     
    Shelley likes this.

Share This Page