The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Buttons style

View previous topic View next topic Go down

In progress Buttons style

Post by BrennanSupport on June 5th 2014, 1:41 am

Hello,

So I was given this codeto restyle my buttons on the forum
Code:
input.button2 {
/*Properties here*/
}

I then searched on google for button CSS codes to add in, and want to have it as this code
http://www.bestcssbuttongenerator.com/#/sMS6wtjhiQ




Code:
.Send {
 -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
 -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
 box-shadow:inset 0px 1px 0px 0px #54a3f7;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
 background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
 background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
 background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
 background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
 background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
 background-color:#007dc1;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;
 border:1px solid #124d77;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:Arial;
 font-size:11px;
 padding:5px 6px;
 text-decoration:none;
 text-shadow:0px 1px 0px #154682;
}
.Send:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
 background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
 background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
 background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
 background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
 background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
 background-color:#0061a7;
}
.Send:active {
 position:relative;
 top:1px;
}

Is there any way someone could help me for this for a 'Send' button using these sources above ^^

Thanks in advanced.

BrennanSupport
Forumember

Male Posts : 31
Reputation : 2
Language : English

http://officialssforum.com

Back to top Go down

In progress Re: Buttons style

Post by Ange Tuteur on June 5th 2014, 2:08 am

Hello Brennan,

You need only change the selectors :
Code:
.button1, .button2 {
 -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
 -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
 box-shadow:inset 0px 1px 0px 0px #54a3f7;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
 background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
 background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
 background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
 background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
 background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
 background-color:#007dc1 !important;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;
 border:1px solid #124d77 !important;
 display:inline-block;
 cursor:pointer;
 color:#ffffff !important;
 font-family:Arial;
 font-size:11px;
 padding:5px 6px;
 text-decoration:none;
 text-shadow:0px 1px 0px #154682;
}
.button1:hover, .button2:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
 background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
 background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
 background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
 background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
 background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
 background-color:#0061a7 !important;
}
.button1:active, .button2:active {
 position:relative;
 top:1px;
}

You may need make some declarations important with the !important keyword.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Buttons style

Post by BrennanSupport on June 5th 2014, 2:49 am

Hello, so would this be correct?..

Code:
.send, .preview {
 -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
 -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
 box-shadow:inset 0px 1px 0px 0px #54a3f7;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
 background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
 background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
 background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
 background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
 background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
 background-color:#007dc1 !important;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;
 border:1px solid #124d77 !important;
 display:inline-block;
 cursor:pointer;
 color:#ffffff !important;
 font-family:Arial;
 font-size:11px;
 padding:5px 6px;
 text-decoration:none;
 text-shadow:0px 1px 0px #154682;
}
.send:hove, .preview:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
 background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
 background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
 background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
 background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
 background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
 background-color:#0061a7 !important;
}
.send:active, .preview:active {
 position:relative;
 top:1px;
}

BrennanSupport
Forumember

Male Posts : 31
Reputation : 2
Language : English

http://officialssforum.com

Back to top Go down

In progress Re: Buttons style

Post by Ange Tuteur on June 5th 2014, 2:52 am

Unfortunately no. The send and preview buttons usually have the following class : .button1, or .button2. I would use the code in my previous post, unless you have modified your templates ?

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Buttons style

Post by BrennanSupport on June 5th 2014, 2:55 am

Yes, my template is modified

BrennanSupport
Forumember

Male Posts : 31
Reputation : 2
Language : English

http://officialssforum.com

Back to top Go down

In progress Re: Buttons style

Post by Ange Tuteur on June 5th 2014, 2:59 am

Are those the classnames of your buttons ?

ex :
<tagname class="myclassname">innerhtml</tagname>

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Buttons style

Post by BrennanSupport on June 6th 2014, 2:46 am

Hi,

I believe so because this DID work in the notifications area, but not in others.

BrennanSupport
Forumember

Male Posts : 31
Reputation : 2
Language : English

http://officialssforum.com

Back to top Go down

In progress Re: Buttons style

Post by Ange Tuteur on June 6th 2014, 4:20 am

Then try adding the following selectors to the rule :
Code:
.button1
.button2

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Buttons style

Post by BrennanSupport on June 6th 2014, 5:05 am

@Ange Tuteur wrote:Then try adding the following selectors to the rule :
Code:
.button1
.button2

Where should I add?

BrennanSupport
Forumember

Male Posts : 31
Reputation : 2
Language : English

http://officialssforum.com

Back to top Go down

In progress Re: Buttons style

Post by Ange Tuteur on June 6th 2014, 5:48 am

I will provide you with a quick lesson on selectors and CSS rules so you know how to modify them.

Selectors is a term used in CSS to describe the element you're selecting. A selector can be a classname, id, or tagname.

Classname : .myClass (an element which contains the class attribute : class="myClass")
Id : #myId (an element which contains the id attribute : id="myId")
tagname : div (the tagname of an element : <div>)

A CSS rule contains one or more selectors and a declaration block which consists of two curly braces (opening and closing).

ex :
Code:
div { declarations }

You can have multiple selectors in a CSS rule by separating each one by a comma :
Code:
div, .classname, .classname2, #id, table { color:yellow; }

So, you need only add the selectors I mentioned in my previous post to your current button rule. Wink

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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