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.

Button Modification

View previous topic View next topic Go down

Solved Button Modification

Post by Rhino.Freak on January 18th 2014, 1:19 pm

its been a while since I last posted stuff so Greetz to all!

I see the new design has been applied (came here after long I guess?)
and its AWESOME!

I wanna ask how to modify the "preview" "send" etc buttons for my forums too?
Thanks in advanced!

The forum I am applying this into is http://onepiecea-edition.yoo7.com (Phpbb3)
~ Rhino'oFreak

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Button Modification

Post by Ange Tuteur on January 18th 2014, 2:25 pm

Hello Rhino.Freak,

You can modify the button styles with the following CSS :
Administration Panel > Display > Pictures and colors > Colors > CSS stylesheet
Code:

.button1, .button2 {
color:#fff !important;
background:#222 !important;
border:1px solid #444 !important;
box-shadow:0px 10px 6px #444 inset;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Button Modification

Post by Rhino.Freak on January 18th 2014, 6:42 pm

Thanx! For Hover effect just adding .button1:hover will work right? Also button 1 and 2 takes care of all buttons like these in forum or there is something else as well?

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Button Modification

Post by Ange Tuteur on January 18th 2014, 8:03 pm

Correct, adding the ::hover pseudo class will allow you to change the style on hover. The classes button1 and button2 should cover all the buttons used on the forum. Also if a style doesn't take effect, you should try adding !important to its property to give it more weight.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Button Modification

Post by Rhino.Freak on January 19th 2014, 8:44 am

Topic Solved! Smile

Wait!

Code:
.button1, .button2 {
color:#eee !important;
background:#360505 !important;
border:1px solid #444 !important;
box-shadow:0px 10px 6px #444 inset !important;
  border-radius: 2px !important;
  -moz-border-radius: 2px !important;
  -webkit-border-radius: 2px !important;
}

.button1:hover, .button2:hover {
color:#fff !important;
background:#7C0F0F !important;
border:1px solid #444 !important;
box-shadow:0px 10px 6px #444 inset !important;
  border-radius: 2px !important;
  -moz-border-radius: 2px !important;
  -webkit-border-radius: 2px !important;
}

This is the code I applied, though for some reason, the buttons appear very small and there's a gradient like design inside which I don't want.. how to remove that? I searched the css to find any other styling of this but couldn't Sad
Just wanna increase the size of the button, too small
here is what it looks like
(1st one is for hover) please help!

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Button Modification

Post by Ange Tuteur on January 19th 2014, 2:43 pm

The gradient is cause from an inset box shadow, you can remove that if you want.
Code:
box-shadow:0px 5px 0px #fff inset;

You can change the size of the button using padding and height :
Code:
.button1, .button2 {
height:30px;
padding:0 10px !important;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Button Modification

Post by Rhino.Freak on January 19th 2014, 3:03 pm

S-S-S-SOLVED! thanks a lot man! +2 likes and a thanks!

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Button Modification

Post by Ange Tuteur on January 19th 2014, 3:06 pm

You're welcome I love you

Topic solved and archived

Have a good day :rose:

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
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