Ravens PHP Scripts: Forums
 

 

View next topic
View previous topic
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> RavenNuke(tm) v2.5x
Author Message
ricktido
Worker
Worker



Joined: Nov 09, 2012
Posts: 127

PostPosted: Wed Jan 09, 2013 6:00 pm Reply with quote

How do I get these hover boxes. I made a video demonstrating it on my site, and then another site (TTG), I was able to replicate it, and I can provide my style.css, but can someone please tell me what part of my css is causing this? I know that this happens in the fisubice theme, as well. Which part of my css is creating this effect? because I would like to use the feature in a different theme, but not carry over any other part of the css, just the hover box part.

Thanks


http://www.youtube.com/watch?v=gHcdftf5zzE


And here is my style.css
http://thetechlink.tk/themes/fisubice/style/style.css
 
View user's profile Send private message
nuken
RavenNuke(tm) Development Team



Joined: Mar 11, 2007
Posts: 2024
Location: North Carolina

PostPosted: Wed Jan 09, 2013 6:30 pm Reply with quote

Just use the input part of the css. It would look something like this:

Code:


input {
border-radius: 4px;
}
input:hover {
   border:#d9d9d9 1px solid;border-top-color:#a0a0a0;-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
 }

_________________
Tricked Out News 
View user's profile Send private message Send e-mail Visit poster's website
neralex
Site Admin



Joined: Aug 22, 2007
Posts: 1531

PostPosted: Wed Jan 09, 2013 6:32 pm Reply with quote

Edit: nuken was faster Smile
[ Only registered users can see links on this board! Get registered or login! ]

_________________
Github: RavenNuke 
View user's profile Send private message
rrclansite
Regular
Regular



Joined: Jan 18, 2011
Posts: 86

PostPosted: Thu Jan 10, 2013 4:45 pm Reply with quote

I would like to point out though that if you only intend it to be for input fields, you might have to change a certain bit in the .css files.

If you take real good notice, the hovering effect you're after also displays on the italic text box (see 0:43 - 0:44). In the video you see a moment where you slightly hover over the italic text selection box and it displays the same effect.

Again, if it's only for the input fields, make sure you edit the css files to only have it displayed for input fields. If you want it to be active on the whole editor (buttons and whatnot) aswell. Leave .css as is
 
View user's profile Send private message
ricktido







PostPosted: Thu Jan 10, 2013 6:11 pm Reply with quote

nuken wrote:
Just use the input part of the css. It would look something like this:

Code:


input {
border-radius: 4px;
}
input:hover {
   border:#d9d9d9 1px solid;border-top-color:#a0a0a0;-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
 }


Thanks, that worked, but how do I get the cursor to change to a hand as seen in the video?
 
nuken







PostPosted: Thu Jan 10, 2013 6:19 pm Reply with quote

[ Only registered users can see links on this board! Get registered or login! ]
 
Guardian2003
Site Admin



Joined: Aug 28, 2003
Posts: 6795
Location: Ha Noi, Viet Nam

PostPosted: Thu Jan 10, 2013 6:19 pm Reply with quote

Code:
cursor: hand; cursor: pointer;
 
View user's profile Send private message Send e-mail
ricktido







PostPosted: Thu Jan 10, 2013 7:41 pm Reply with quote

Guardian2003 wrote:
Code:
cursor: hand; cursor: pointer;
Yes, but how would I implement this with the css code for the hover boxes? I would like the the cursor to turn into a hand while hovering over the boxes, while using that css to make the box have 'shadows' as well...
 
nuken







PostPosted: Thu Jan 10, 2013 7:58 pm Reply with quote

This is basic stuff with thousands of example on the internet. Just add

Code:


cursor: pointer;


to the input:hover. It would look like this:
Code:


input:hover {
  cursor: pointer; border:#d9d9d9 1px solid; border-top-color:#a0a0a0; -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1); -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1); box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
 }
 
ricktido







PostPosted: Fri Jan 11, 2013 7:09 am Reply with quote

Ok thanks
 
Display posts from previous:       
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> RavenNuke(tm) v2.5x

View next topic
View previous topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You can attach files in this forum
You can download files in this forum


Powered by phpBB © 2001-2007 phpBB Group
All times are GMT - 6 Hours
 
Forums ©