Button Styles Code

Go down

Solved Button Styles Code

Post by yumm on Tue Nov 06 2018, 14:04

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 Thu Dec 06 2018, 20:16; edited 1 time in total
yumm
yumm
Forumember

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

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on Tue Nov 06 2018, 14:59

hello

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

Female Posts : 5693
Reputation : 894
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by SLGray on Tue Nov 06 2018, 20:50

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



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

Male Posts : 45327
Reputation : 3193
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on Sat Nov 10 2018, 12:59

@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 : 68
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by APE on Sat Nov 10 2018, 17:51

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,



APE
APE
Administrator
Administrator

Male Posts : 14049
Reputation : 1493
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 Sun Nov 25 2018, 00:21

@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...
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...



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

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

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on Sat Dec 01 2018, 19:33

@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...
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...



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 : 68
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on Sat Dec 01 2018, 20:04

try 

Code:

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

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

Female Posts : 5693
Reputation : 894
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on Sat Dec 01 2018, 20:51

@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...


yumm
yumm
Forumember

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

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on Sat Dec 01 2018, 20:59

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 : 5693
Reputation : 894
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on Sat Dec 01 2018, 21:05

@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 : 68
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by APE on Sat Dec 01 2018, 21:28

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;



APE
APE
Administrator
Administrator

Male Posts : 14049
Reputation : 1493
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 Sat Dec 01 2018, 22:38

@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



yumm
yumm
Forumember

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

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on Sat Dec 01 2018, 23:47

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

Female Posts : 5693
Reputation : 894
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on Sun Dec 02 2018, 00:03

@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



yumm
yumm
Forumember

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

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by SLGray on Sun Dec 02 2018, 01:33

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



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

Male Posts : 45327
Reputation : 3193
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on Sun Dec 02 2018, 02:56

@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 : 68
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on Sun Dec 02 2018, 11:14

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 : 5693
Reputation : 894
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on Sun Dec 02 2018, 18:58

@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

yumm
yumm
Forumember

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

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on Sun Dec 02 2018, 22:01

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 : 5693
Reputation : 894
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on Sun Dec 02 2018, 23:03

@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 : 68
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by skouliki on Mon Dec 03 2018, 00:43

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 : 5693
Reputation : 894
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Button Styles Code

Post by yumm on Thu Dec 06 2018, 20:16

@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 : 68
Reputation : 3
Language : Turkish / English

http://www.superjuniorturkey.com/

Back to top Go down

Solved Re: Button Styles Code

Post by SLGray on Thu Dec 06 2018, 21:18

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



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

Male Posts : 45327
Reputation : 3193
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