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.

Hover on Buttons

View previous topic View next topic Go down

Solved Hover on Buttons

Post by Ellianna17 on July 6th 2015, 12:20 pm

I would like to ask for codes that enables every button used in topics and forums to have a hover effect, like here in FM. (The effect is the button appear to be darker, or the button is a bit translucent.)
Forum Version: phpBB2
Forum Link: http://www.winxclub.site-forums.com/


Last edited by Titania on July 11th 2015, 12:02 pm; edited 3 times in total

Ellianna17
Forumember

Female Posts : 539
Reputation : 124
Language : English, Filipino, and Basic Spanish

http://winxclub.site-forums.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Ange Tuteur on July 6th 2015, 2:06 pm

Hi @Titania,

Add the following rules to your stylesheet :
Display > Colors > CSS stylesheet
Code:
/* buttons */
input.mainoption, input.liteoption {
  color:#FFF !important;
  font-weight:bold;
  background:#8C5;
  border:none !important;
  border-radius:3px;
  padding:5px 10px !important;
  margin:3px;
  -webkit-transition:300ms;
          transition:300ms;
}

input.mainoption:hover, input.liteoption:hover { background-color:#7B4 }
input.mainoption:focus, input.liteoption:focus { background-color:#333 }

After that you only need to change the colors to what you want. Smile

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Castellana on July 7th 2015, 12:09 am

Even though I'm not the topic starter, I'm interested in this enhancement, so I tried the code on my forum, which is also phpBB2. After adding the code to the CSS, I saw no difference on the forum. Just wondering how it worked for Titania.

Castellana
Forumember

Female Posts : 282
Reputation : 5
Language : english

http://cvas.forumotion.com/portal

Back to top Go down

Solved Re: Hover on Buttons

Post by Ellianna17 on July 7th 2015, 6:36 am

It did not work on my forum, too. How about the translucent effect?

Ellianna17
Forumember

Female Posts : 539
Reputation : 124
Language : English, Filipino, and Basic Spanish

http://winxclub.site-forums.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Sir Chivas™ on July 7th 2015, 8:03 am

Did you both customized the color to your likings?



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Hover on Buttons

Post by Ange Tuteur on July 7th 2015, 10:22 am

I don't see it in both your stylesheets, have you removed it ? If so, try re-adding it to the top of your stylesheet.

The only reasons I can think for it not working are :

1. An error in the sheet, in which case the code should go to the very top

2. Another rule is overriding it, in which case the code should go to the very bottom

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Ellianna17 on July 7th 2015, 12:09 pm

It still didn't work. :/ Does this code changes the appearance of the buttons?

Ellianna17
Forumember

Female Posts : 539
Reputation : 124
Language : English, Filipino, and Basic Spanish

http://winxclub.site-forums.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Ange Tuteur on July 7th 2015, 12:29 pm

Of course ! Wink

Try clearing your browser cache, as I can see the buttons are changed in my view ( Fx39.0 ) :

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Ellianna17 on July 8th 2015, 6:29 am

I see.... Maybe it's because I'm using my iPad to do forum-ing. How about the hover effect on buttons like "Post Reply," "Quote," "Edit," and such found in posts and topics?

Ellianna17
Forumember

Female Posts : 539
Reputation : 124
Language : English, Filipino, and Basic Spanish

http://winxclub.site-forums.com

Back to top Go down

Solved Re: Hover on Buttons

Post by SLGray on July 8th 2015, 7:02 am

Can guests post on your forum? If no, we can not see those buttons.


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


SLGray
Administrator
Administrator

Male Posts : 36751
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Hover on Buttons

Post by Ange Tuteur on July 8th 2015, 10:31 am

Titania wrote:I see.... Maybe it's because I'm using my iPad to do forum-ing. How about the hover effect on buttons like "Post Reply," "Quote," "Edit," and such found in posts and topics?
That may be the case. I know that some browsers tend to have their own style for buttons, such as the PSP browser from way back in the day. Razz If you want, you can try applyng !important to a majority of the properties to see if they override the native style.

Code:
/* buttons */
input.mainoption, input.liteoption {
  color:#FFF !important;
  font-weight:bold !important;
  background:#8C5 !important;
  border:none !important;
  border-radius:3px !important;
  padding:5px 10px !important;
  margin:3px !important;
  -webkit-transition:300ms;
          transition:300ms;
}

input.mainoption:hover, input.liteoption:hover { background-color:#7B4 !important }
input.mainoption:focus, input.liteoption:focus { background-color:#333 !important }

If that doesn't work, you could also always post a screenshot to see if I can figure anything out.

For the transparency hover effect, you can use these two rules for phpbb2 :
Code:
.post-options img, .messaging img, .nav img {
  opacity:0.7;
  -webkit-transition:300ms;
          transition:300ms;
}

.post-options img:hover, .messaging img:hover, .nav img:hover { opacity:1 }

The first one sets the image to 0.7 ( or 70% ) transparency. The second one sets it to 100% on hover. You can swap these two if you want it to fade when you hover over the images.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Ellianna17 on July 8th 2015, 11:47 am

It worked perfectly!!^^ Thank you so much for your help, @Ange Tuteur!

Edit: I'd like to ask for the codes for the button "New PM," so it would have the same effects as the "New Topic" button. Also, the icon "Online" is translucent too, and I'd like if I can change it to its original opactity.

Ellianna17
Forumember

Female Posts : 539
Reputation : 124
Language : English, Filipino, and Basic Spanish

http://winxclub.site-forums.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Castellana on July 8th 2015, 5:40 pm

After I saw no difference in the buttons, I removed the code. That is why you did not see it, @Ange Tuteur.

However, I tried the second code that you wrote for Titania, which contained the "important" tags, and this worked. I changed the colors to the ones I want.

The only buttons that are affected are the Preview, Send, and Go buttons on posts and the Go button on forums. Is this correct? Or are there more?

I did not try the transparency effect code, yet.

@Titania, thanks for being a good sport about letting me butt into this topic. I think it will save resources this way. Smile

Castellana
Forumember

Female Posts : 282
Reputation : 5
Language : english

http://cvas.forumotion.com/portal

Back to top Go down

Solved Re: Hover on Buttons

Post by Ange Tuteur on July 8th 2015, 7:04 pm

@Titania, no problem, I hadn't thought of those two icons. I added another rule which will set the online icon opacity to 1. I also added in a class selector -- .i_msg_newpost -- for the new PM image.
Code:
.post-options img, .messaging img, .nav img, .i_msg_newpost {
  opacity:0.7;
  -webkit-transition:300ms;
          transition:300ms;
}

img.i_icon_online { opacity:1 }
.post-options img:hover, .messaging img:hover, .nav img:hover, .i_msg_newpost:hover { opacity:1 }

@Castellana Perhaps all properties needed to be overridden for phpbb2. It's been awhile so I wasn't 100% sure. Thanks for confirming Mr. Green

All normal buttons for the forum are affected, namely the ones you mentioned. If you want other buttons on the forum to have the same style let me know. Wink

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Castellana on July 8th 2015, 8:50 pm

Thanks!

I added the opacity effect to my forum and set it to .8, as that worked better with my existing buttons. It works great. Very Happy However, two buttons seem unaffected, they are:
The "new post" button in private messaging and the "new topic" button at the top of the topics list on forums. Can you make a rule for both of them? (I see you made one of them for Titania but I need the two.)

Castellana
Forumember

Female Posts : 282
Reputation : 5
Language : english

http://cvas.forumotion.com/portal

Back to top Go down

Solved Re: Hover on Buttons

Post by Ellianna17 on July 9th 2015, 12:48 am

It's definitely working now! However, the "New Topic" button in the topic list of the forum seems to be unaffected by the code you gave me; the buttons in the list of members, moderating buttons, and the buttons in the list of group members has still its original opacity and it seems to be unaffected by the code.

Ellianna17
Forumember

Female Posts : 539
Reputation : 124
Language : English, Filipino, and Basic Spanish

http://winxclub.site-forums.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Ellianna17 on July 10th 2015, 2:38 pm

Bumpity bump!~

Ellianna17
Forumember

Female Posts : 539
Reputation : 124
Language : English, Filipino, and Basic Spanish

http://winxclub.site-forums.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Ange Tuteur on July 10th 2015, 3:33 pm

I'm sorry, I must've missed this topic somehow yesterday. Shocked

Anyway, try replacing the last CSS I gave you with this :
Code:
.post-options img, .messaging img, .nav img, .i_msg_newpost, a[href^="/privmsg?mode=reply"] img, a[href^="/modcp?mode="] img, a[href^="/merge?t="] img, #i_post, #i_post1, .i_icon_pm, a[title="Visit poster's website"] img {
  opacity:0.7;
  -webkit-transition:300ms;
          transition:300ms;
}

img.i_icon_online { opacity:1 }
.post-options img:hover, .messaging img:hover, .nav img:hover, .i_msg_newpost:hover, a[href^="/privmsg?mode=reply"] img:hover, a[href^="/modcp?mode="] img:hover, a[href^="/merge?t="] img:hover, #i_post:hover, #i_post1:hover, .i_icon_pm:hover, a[title="Visit poster's website"] img:hover { opacity:1 }

I had to add in quite a few selectors due to phpbb2 being so sporadic with it's classes, ids, etc.. groar

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Castellana on July 10th 2015, 8:34 pm

In my case, your code of July 8 at 2:04 pm works fine for the opacity of my "newpost" button in Private Messaging. Very Happy

All of my hover effect buttons (including all the buttons Titania listed) are working fine with the code you already gave so I'm not going to make changes.

So, the only button I need now is opacity for the "new topic" button at the top of the topics list on forums. Is there a way to add it to your code that I'm using?

Here is what I'm using:
AngeTuteur's code:
.post-options img, .messaging img, .nav img, .i_msg_newpost {
opacity:0.8;
-webkit-transition:300ms;
transition:300ms;
}

img.i_icon_online { opacity:1 }
.post-options img:hover, .messaging img:hover, .nav img:hover, .i_msg_newpost:hover { opacity:1 }

Castellana
Forumember

Female Posts : 282
Reputation : 5
Language : english

http://cvas.forumotion.com/portal

Back to top Go down

Solved Re: Hover on Buttons

Post by Ange Tuteur on July 10th 2015, 10:30 pm

@Castellana wrote:In my case, your code of July 8 at 2:04 pm works fine for the opacity of my "newpost" button in Private Messaging. Very Happy

All of my hover effect buttons (including all the buttons Titania listed) are working fine with the code you already gave so I'm not going to make changes.

So, the only button I need now is opacity for the "new topic" button at the top of the topics list on forums. Is there a way to add it to your code that I'm using?

Here is what I'm using:
AngeTuteur's code:
.post-options img, .messaging img, .nav img, .i_msg_newpost {
opacity:0.8;
-webkit-transition:300ms;
transition:300ms;
}

img.i_icon_online { opacity:1 }
.post-options img:hover, .messaging img:hover, .nav img:hover, .i_msg_newpost:hover { opacity:1 }
You would need #i_post and #i_post1
Code:
.post-options img, .messaging img, .nav img, .i_msg_newpost, #i_post, #i_post1 {
opacity:0.8;
-webkit-transition:300ms;
transition:300ms;
}

img.i_icon_online { opacity:1 }
.post-options img:hover, .messaging img:hover, .nav img:hover, .i_msg_newpost:hover, #i_post:hover, #i_post1:hover { opacity:1 }

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Ellianna17 on July 11th 2015, 1:25 am

Thank you for the code! The only button that seems unaffected is the "Website" button in the listing of group members.

Ellianna17
Forumember

Female Posts : 539
Reputation : 124
Language : English, Filipino, and Basic Spanish

http://winxclub.site-forums.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Castellana on July 11th 2015, 2:38 am

Thank you, Ange Tuteur ! That code is working great Very good and that completes all of the buttons I was concerned with. I see what Titania is saying, but I'm not going to bother with "www" and "mp" in the members list. My important buttons are done! So my part of this is solved.

Castellana
Forumember

Female Posts : 282
Reputation : 5
Language : english

http://cvas.forumotion.com/portal

Back to top Go down

Solved Re: Hover on Buttons

Post by Ange Tuteur on July 11th 2015, 11:17 am

Titania wrote:Thank you for the code! The only button that seems unaffected is the "Website" button in the listing of group members.
I think I got the list one.. give it a shot Razz
Code:
.post-options img, .messaging img, .nav img, .i_msg_newpost, a[href^="/privmsg?mode=reply"] img, a[href^="/modcp?mode="] img, a[href^="/merge?t="] img, #i_post, #i_post1, .i_icon_pm, a[title="Visit poster's website"] img, #i_icon_www {
  opacity:0.7;
  -webkit-transition:300ms;
          transition:300ms;
}

img.i_icon_online { opacity:1 }
.post-options img:hover, .messaging img:hover, .nav img:hover, .i_msg_newpost:hover, a[href^="/privmsg?mode=reply"] img:hover, a[href^="/modcp?mode="] img:hover, a[href^="/merge?t="] img:hover, #i_post:hover, #i_post1:hover, .i_icon_pm:hover, a[title="Visit poster's website"] img:hover, #i_icon_www:hover { opacity:1 }

Apparently the memberlist didn't have an Id for the website icon, but the group list DOES. ( i_icon_www ) I swear the person who made phpbb2 forgot their coffee one morning, the inconsistencies are amazing... blackeye

@Castellana wrote:Thank you, Ange Tuteur ! That code is working great Very good and that completes all of the buttons I was concerned with. I see what Titania is saying, but I'm not going to bother with "www" and "mp" in the members list. My important buttons are done! So my part of this is solved.
No problem Wink

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover on Buttons

Post by Ellianna17 on July 11th 2015, 12:00 pm

Thank you! It worked, and all the buttons I want to have the hover effect is now affected by the code you gave me. Thank you again!

Ellianna17
Forumember

Female Posts : 539
Reputation : 124
Language : English, Filipino, and Basic Spanish

http://winxclub.site-forums.com

Back to top Go down

Solved Re: Hover on Buttons

Post by SLGray on July 12th 2015, 3:49 am

Topic solved and archived


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


SLGray
Administrator
Administrator

Male Posts : 36751
Reputation : 2449
Language : English
Location : United States

http://ztwds.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