Send and Preview buttons

Go down

Solved Send and Preview buttons

Post by Kirbs on August 15th 2014, 1:09 am

Hello forumotion!

I'd like to ask how is it possible th change the "Send" and "Preview" buttons for my forum? in the quick reply and reply mode like these ones in forumotion?

http://gyazo.com/d35d0676d36c1410b2de63ca54b6dee9

Thanks in advance!
avatar
Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Send and Preview buttons

Post by APE on August 15th 2014, 1:19 am

link to your forum please


Last edited by APE on August 15th 2014, 6:16 am; edited 1 time in total



avatar
APE
Administrator
Administrator

Male Posts : 12031
Reputation : 1208
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Send and Preview buttons

Post by Kirbs on August 15th 2014, 1:19 am

avatar
Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Send and Preview buttons

Post by Luffy on August 15th 2014, 1:23 am

Hello,

Use the below code in your CSS and change it as wanted.
Code:
 input[type="submit"]{
color:#00fff6;
background-color:#0072ff;
border:double 2px #292129;
border-radius:4px;
text-shadow:-4px 1px 10px #000000;
}
 
input[type="submit"]:hover{
-moz-box-shadow: -4px -3px 70px #000000;
-webkit-box-shadow: -4px -3px 70px #000000;
box-shadow: -4px -3px 70px #000000;
background-color:#2b7ce0;
}

MrMind
avatar
Luffy
Manager
Manager

Male Posts : 5336
Reputation : 573
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Send and Preview buttons

Post by Kirbs on August 15th 2014, 1:28 am

Excellent, It works! just one question.. How do I make the font inside the buttons BOLD and make the buttons a little bigger?
avatar
Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Send and Preview buttons

Post by APE on August 15th 2014, 1:30 am

Give this a try

add it to your CSS at the top Wink


Code:
input.mainoption,input.liteoption,{
background-color: #F5F5F5;
    background-image: url('http://illiweb.com/fa/optimisation_fdf/fr/bg_buttons.png') !important;
    background-repeat: repeat-x;
    border: 1px solid #C3E0F1;
    border-radius: 2px;
    color: #666 !important;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    height: 24px;
    margin: 5px 6px;
    padding: 0px 8px !important;
    text-align: center;
}

input.liteoption:hover,input.mainoption:hover{
background-image: url('http://illiweb.com/fa/optimisation_fdf/fr/bg_buttons.png') !important;
    background-repeat: repeat-x;
  background-position: 0px 100%;
    border: 1px solid #00A5CD !important;
    box-shadow: 1px 1px 5px !important;
    color: #00A5CD !important;
}



avatar
APE
Administrator
Administrator

Male Posts : 12031
Reputation : 1208
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Send and Preview buttons

Post by Kirbs on August 15th 2014, 1:41 am

Should I remove the one MrMind posted?
avatar
Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Send and Preview buttons

Post by Empire_1 on August 15th 2014, 1:50 am

@Kirbs wrote:Should I remove the one MrMind posted?

Yes
avatar
Empire_1
Active Poster

Male Posts : 1391
Reputation : 124
Language : English, Spanish, Mandarin, C++
Location : Summoner's Rift

Back to top Go down

Solved Re: Send and Preview buttons

Post by Kirbs on August 15th 2014, 1:53 am

Okay, That code changes the color of the buttons once the mouse is over them, is there a way to use MrMinds code and APE's code together? like change the shape of the buttons with MrMind's code and still have the hover effect on them with APE's code, but instead of light blue color, with this color #dda939.

Thanks in advance!

EDIT: Never mind! found a way to do it, What's left is only how to make the font inside the buttons BOLD and make the buttons a little bigger.

Thanks in advance!
avatar
Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Send and Preview buttons

Post by APE on August 15th 2014, 6:12 am

to make the font bigger add 
The following codes Font size will make the font bigger and the Weight will make it thicker
or if im right you could go font-weight: bold;
Code:
font-size: 11px;
   

Code:
font-weight: bold;

as for the size of the button add

Code:
width: Add number here px !important;
height:Add number here px !important;



avatar
APE
Administrator
Administrator

Male Posts : 12031
Reputation : 1208
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Send and Preview buttons

Post by Kirbs on August 15th 2014, 6:31 pm

All of the codes didn't work but it's okay Smile thanks for the help! solved.
avatar
Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Send and Preview buttons

Post by APE on August 15th 2014, 6:47 pm

Hello,
please remember...

When your request is Solved, Please mark it as

Click on the yourbutton, select
and click 'Send'.

Respectfully,
APE,
Support Moderator


Please read the section rules: 

Topic solved and archived



avatar
APE
Administrator
Administrator

Male Posts : 12031
Reputation : 1208
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum