I want change styling buttons to jpg

[wichern.k]

I want change styling buttons post reply, buttons upload a file and buttons more options

to




Thank you

 

[Shelley]

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.

.message .button {
    background: path to custom  image;
    color: white; }

 

[wichern.k]

.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

I want to change all buttons style and all font position?

 

[Shelley]

.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
View attachment 37103
I want to change all buttons style and all font position?

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.

.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; }

 

[wichern.k]

How to fix the Display problems.
Google chrom

Firefox


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.

 

[Shelley]

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.

 

[Shelley]

How to fix the Display problems.
Google chrom
View attachment 37106
Firefox
View attachment 37104

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.
View attachment 37107
View attachment 37108
View attachment 37109
View attachment 37110
View attachment 37111
View attachment 37112
View attachment 37113
View attachment 37114
View attachment 37115
View attachment 37116

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

.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.



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

.message .report, .message .ip, .message .delete, .message .warn, .message .ReplyQuote

 

[wichern.k]

Thank you very much.

.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.

 

[Shelley]

Thank you very much.

.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.

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?

 

[russoroni]

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.

 

[Shelley]

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.

.button.smallButton { border-radius: 0 ;}

 

[russoroni]

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.

.button.smallButton { border-radius: 0 ;}

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.