Button Styles Code

Go down

Solved Button Styles Code

Post by yumm on November 6th 2018, 1:04 pm

Hi everybody, its me again! Smile

I want to change the button styles of my website. Smile

Please help me about this, thank you!! ouou


Last edited by yumm on December 6th 2018, 7:16 pm; edited 1 time in total
yumm
yumm
Forumember

Female Posts : 69
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on November 6th 2018, 1:59 pm

hello

you can make a request in our graphic request section
be sure to read first the rules
skouliki
skouliki
Manager
Manager

Female Posts : 6349
Reputation : 970
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by SLGray on November 6th 2018, 7:50 pm

Which buttons are you referring to:  forum icons, new post, send, etc.?


Button Styles Code Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 45897
Reputation : 3239
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on November 10th 2018, 11:59 am

@SLGray wrote:Which buttons are you referring to:  forum icons, new post, send, etc.?

I need to forum icons button for my homepage, I want to change all of button dsigns and want to smart and soft pagewiew... Smile
yumm
yumm
Forumember

Female Posts : 69
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by APE on November 10th 2018, 4:51 pm

we have hundreds of buttons here >> Buttons maybe you can find something you like there or you can tell us what will match with a little change.

Sadly we can't read minds so you will have to show us some more info about colours and shape and how big also

What buttons do you want changed also a screen shot will help us more,


Button Styles Code Left1212Button Styles Code Center11Button Styles Code Right112
Button Styles Code Ape_b110
Button Styles Code Ape1010
APE
APE
Administrator
Administrator

Male Posts : 14521
Reputation : 1585
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on November 24th 2018, 11:21 pm

@APE wrote:we have hundreds of buttons here >> Buttons maybe you can find something you like there or you can tell us what will match with a little change.

Sadly we can't read minds so you will have to show us some more info about colours and shape and how big also

What buttons do you want changed also a screen shot will help us more,

Oh, if you help me clearly I'll be really thankful to you, I have premium package but forum view style is not good for me... Sad
I need to really soft and basic style... Button Styles Code Oops
This is my forum adress; http://www.superjuniorturkey.com/

I want to change categories icon size and style but forum size is always minimized all of my categories icons that...

Button Styles Code Screen14

And I want to change all of click button styles, where can I find all of buttons setting codes?
yumm
yumm
Forumember

Female Posts : 69
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on December 1st 2018, 6:33 pm

@yumm wrote:
@APE wrote:we have hundreds of buttons here >> Buttons maybe you can find something you like there or you can tell us what will match with a little change.

Sadly we can't read minds so you will have to show us some more info about colours and shape and how big also

What buttons do you want changed also a screen shot will help us more,

Oh, if you help me clearly I'll be really thankful to you, I have premium package but forum view style is not good for me... Sad
I need to really soft and basic style... Button Styles Code Oops
This is my forum adress; http://www.superjuniorturkey.com/

I want to change categories icon size and style but forum size is always minimized all of my categories icons that...

Button Styles Code Screen14

And I want to change all of click button styles, where can I find all of buttons setting codes?

Oh, I'm sorry but this problem did'nt solved me yet. I want to only ask how can I sized categories icon size? Because its minimized and be low quality every time...
yumm
yumm
Forumember

Female Posts : 69
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on December 1st 2018, 7:04 pm

try 

Code:

ul.forums li.row dl {
  background-size: Xpx Xpx!important;
}

replace X with a number --> 20px
skouliki
skouliki
Manager
Manager

Female Posts : 6349
Reputation : 970
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on December 1st 2018, 7:51 pm

@skouliki wrote:try 

Code:

ul.forums li.row dl {
  background-size: Xpx Xpx!important;
}

replace X with a number --> 20px

Thank you, very useful! Very good

Lastly I want to change button hover efects... ^^ For example, more soft and slowly button hover effects like forumotion buttons'... The buttons are like this in my forum... Smile You can check my current button styles from modernBB forum's new topic button... Button Styles Code Mouais

Button Styles Code Screen12
yumm
yumm
Forumember

Female Posts : 69
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on December 1st 2018, 7:59 pm

i dont have access as a guest to view the new topic button
can you post a link that guests can see at least one button
skouliki
skouliki
Manager
Manager

Female Posts : 6349
Reputation : 970
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on December 1st 2018, 8:05 pm

@skouliki wrote:i dont have access as a guest to view the new topic button
can you post a link that guests can see at least one button

Oh, I'm sorry, here... ^^

http://www.superjuniorturkey.com/f5-elf-fan-calsmalar
yumm
yumm
Forumember

Female Posts : 69
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by APE on December 1st 2018, 8:28 pm

Code:
.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #d31141;
box-shadow: 0 1px 9px rgba(0,0,0,0.6);
transition: 300ms;
}

Change this to the colour you want.
Code:
background-color: #d31141;

and this part to speed it up or slow it down on hover
Code:
transition: 300ms;


Button Styles Code Left1212Button Styles Code Center11Button Styles Code Right112
Button Styles Code Ape_b110
Button Styles Code Ape1010
APE
APE
Administrator
Administrator

Male Posts : 14521
Reputation : 1585
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on December 1st 2018, 9:38 pm

@APE wrote:
Code:
.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #d31141;
box-shadow: 0 1px 9px rgba(0,0,0,0.6);
transition: 300ms;
}

Change this to the colour you want.
Code:
background-color: #d31141;

and this part to speed it up or slow it down on hover
Code:
transition: 300ms;

Oh, thank you this is really useful code too... Very good

Can we change to hover style like this link? https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_fade

And I want to change this effects too... Rolling Eyes

Button Styles Code Nn36bg

Button Styles Code K9A3YJ
yumm
yumm
Forumember

Female Posts : 69
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on December 1st 2018, 10:47 pm

The images you put are not visible upload them with servimg better
skouliki
skouliki
Manager
Manager

Female Posts : 6349
Reputation : 970
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on December 1st 2018, 11:03 pm

@skouliki wrote:The images you put are not visible upload them with servimg better

Oh really? But I thought servimg did'nt upload to gifs... Sad

Button Styles Code Baalks10

Button Styles Code Baalks11
yumm
yumm
Forumember

Female Posts : 69
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by SLGray on December 2nd 2018, 12:33 am

So you want to change the hover color from light blue ro light gray?


Button Styles Code Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 45897
Reputation : 3239
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on December 2nd 2018, 1:56 am

@SLGray wrote:So you want to change the hover color from light blue ro light gray?

Color is not important, I want to only hover style, because when I'll change to theme color, it will change too... ^^
yumm
yumm
Forumember

Female Posts : 69
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on December 2nd 2018, 10:14 am

try replacing this

Code:

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #d31141;
box-shadow: 0 1px 9px rgba(0,0,0,0.6);
transition: 300ms;
}

with this
Code:

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {opacity: 1}

skouliki
skouliki
Manager
Manager

Female Posts : 6349
Reputation : 970
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on December 2nd 2018, 5:58 pm

@skouliki wrote:try replacing this

Code:

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #d31141;
box-shadow: 0 1px 9px rgba(0,0,0,0.6);
transition: 300ms;
}

with this
Code:

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {opacity: 1}


Sorry, its look like this... Sad

Button Styles Code Baalks12
yumm
yumm
Forumember

Female Posts : 69
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on December 2nd 2018, 9:01 pm

replace this
Code:

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #d31141;
box-shadow: 0 1px 9px rgba(0,0,0,0.6);
transition: 300ms;
}
with this
Code:
.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #4065A1;
    box-shadow: 0 1px 9px rgba(0,0,0,0.6);
    transition: 0.3s;
    opacity: 0.6;
cursor: pointer;
}
skouliki
skouliki
Manager
Manager

Female Posts : 6349
Reputation : 970
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on December 2nd 2018, 10:03 pm

@skouliki wrote:replace this
Code:

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #d31141;
box-shadow: 0 1px 9px rgba(0,0,0,0.6);
transition: 300ms;
}
with this
Code:
.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #4065A1;
    box-shadow: 0 1px 9px rgba(0,0,0,0.6);
    transition: 0.3s;
    opacity: 0.6;
cursor: pointer;
}

Thank you so much, but its same like current button... Sad
yumm
yumm
Forumember

Female Posts : 69
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on December 2nd 2018, 11:43 pm

the blue changes with opacity like the one you show us
You result do you want when you hover the button? Cause the link you provide shows this fade effect
If you want the button not to fade but change color thats diffrent
skouliki
skouliki
Manager
Manager

Female Posts : 6349
Reputation : 970
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on December 6th 2018, 7:16 pm

@skouliki wrote:the blue changes with opacity like the one you show us
You result do you want when you hover the button? Cause the link you provide shows this fade effect
If you want the button not to fade but change color thats diffrent

Oh, okay there is no problem, this problem solved for me, thank you so much. Hello
yumm
yumm
Forumember

Female Posts : 69
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by SLGray on December 6th 2018, 8:18 pm

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules


Button Styles Code Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 45897
Reputation : 3239
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

Back to top


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