• 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

Shelley

Well-known member
#2
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; }
 
#3
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?
 

Shelley

Well-known member
#4
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
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.

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; }
 
#5
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
 

Shelley

Well-known member
#6
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

Well-known member
#7
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.


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

Shelley

Well-known member
#9
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.
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?
 

Shelley

Well-known member
#11
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 ;}
 

russoroni

Active member
#12
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 ;}
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.