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.

Cannot Find Variable Names I Need For Animated Hovering Icons in CSS

View previous topic View next topic Go down

Solved Cannot Find Variable Names I Need For Animated Hovering Icons in CSS

Post by .Luke on November 2nd 2012, 5:00 am

*moved the topic to another forum because I realized I posted it in the wrong one. :#

Anyway, I've read all the different tutorials for creating forum icons that animate when you hover over them in CSS, which are quite informative, but the only thing that changes is the structure of the syntax between all of them. I'm in the middle of skinning my own forum, and I'm pretty close to done outside this one little detail, but I really need certain icons other than the search bar to animate before I can call it a day.

Forum Link encase it's needed : http://tsfp.forumotion.org/ (I made the banner, forum icons and such myself in GIMP/KolourPaint.)

Cutting to the chase, I don't need an animated search bar or anything like that, I want animated "Post Reply" or "New Topic icons" icons, etc, but I have no clue what variable names they're assigned in CSS, so I'm stumbling in the dark trying to figure that out. Does anyone happen to be familar enough with CSS to know the variable names of forum/topic graphics? Or is my approach all wrong to start with? I've scoured the source style sheet and Googled it all day, but it's turned up nothing. #_#

Encase it helps, I'm including my current additions to the CSS style sheet :
Code:

/*Profile Margins in Messages*/
.postprofile{
width: 15% !important;
}
.postbody{
width: 84% !important;
}
td.row1.over:hover {
    background-color: #4163B3;
}
/*Transparent Forum Bodies*/
#wrap{
background: transparent !important;
}
/*Colors for Spoiler Tag and Code Boxes*/
.codebox, code{
        background-color: #490BB5 !important;
          border-color: #490BB5 !important;
          color: #FFFFFF !important;
        }
    .codebox.spoiler, code{
        background-color: #490BB5 !important;
          border-color: #490BB5 !important;
          color: #FFFFFF !important;
}
/*Transparent Body Lines*/
.bodyline {
opacity:0.1;
filter:alpha(opacity=10);
}
/*Bottom Background Image*/
/*body{
background-image:url('http://i43.servimg.com/u/f43/17/53/41/88/scuttl10.png'),url('http://i43.servimg.com/u/f43/17/53/41/88/nights11.png');
background-position:left bottom, right top;
background-repeat:repeat-x,repeat-y;
background-attachment:scroll,scroll;
background-size:auto,auto;
}*/
/*Animated Forum Buttons*/
#img_button_topic_new {
  width:96px;
  height:50px;
  background-image :url("http://i43.servimg.com/u/f43/17/53/41/88/button13.gif");
}
    #img_button_topic_new:hover {
  background-image :url("http://illiweb.com/fa/prosilver/button_topic_locked_en.png");
  width:96px;
  height:50px;
}

See how clueless I am trying to figure out the names the hard way? I was poking and stabbing at it with different icons encase my syntax was somehow wrong. XD Any help here would be much appreciated!


Last edited by .Luke on November 5th 2012, 7:15 am; edited 2 times in total

.Luke
New Member

Male Posts : 19
Reputation : 1
Language : English
Location : United States

http://tsfp.forumotion.org/

Back to top Go down

Solved Re: Cannot Find Variable Names I Need For Animated Hovering Icons in CSS

Post by .Luke on November 3rd 2012, 5:09 pm



24-hour bump! Was I not specific enough or is the answer to my question really that far undocumented? ;__;

Oh, and I forgot to mention I'm using phpBB3, if that helps. Also updated the first post with my updated CSS additions, since I've added more since I posted it originally.

.Luke
New Member

Male Posts : 19
Reputation : 1
Language : English
Location : United States

http://tsfp.forumotion.org/

Back to top Go down

Solved Re: Cannot Find Variable Names I Need For Animated Hovering Icons in CSS

Post by Seranda7 on November 3rd 2012, 6:02 pm

Code:
.post-icon:hover{
background:#ff0000;
border:10px solid #000000;
}


Try putting that in your CSS then hovering over the images? If it works, you'll know.

Seranda7
New Member

Posts : 7
Reputation : 1
Language : English

Back to top Go down

Solved Re: Cannot Find Variable Names I Need For Animated Hovering Icons in CSS

Post by .Luke on November 3rd 2012, 7:40 pm

I can't believe I made that little sense. o_o'

This is what I'm trying to do :



I'm trying to make my topic buttons animate when the mouse hovers over them, I apologize for not being specific enough. ^^' While this is easy to do I have no idea what names those buttons are assigned in CSS, so it's a shot in the dark to find each of them and make this code function as advertised for more than a dozen buttons.

Code:
    #i_icon_mini_register{width:100px; height:30px; background:url("http://img181.imageshack.us/img181/7426/rollover.png") no-repeat 0 0;}
    #i_icon_mini_register:hover{background:url("http://img181.imageshack.us/img181/7426/rollover.png") no-repeat 0 -30px;}

This post and the one below it on my forum list each of the buttons I want to animate, if that helps. (It's a work-in-progress thread so I was posting icons as I made them.)

.Luke
New Member

Male Posts : 19
Reputation : 1
Language : English
Location : United States

http://tsfp.forumotion.org/

Back to top Go down

Solved Re: Cannot Find Variable Names I Need For Animated Hovering Icons in CSS

Post by Seranda7 on November 4th 2012, 8:16 pm

kk. I don't know the names of these, but I can find them easily. I've made an account on your forum so I can see them, would you like to make me an admin so I can work on this?

Seranda7
New Member

Posts : 7
Reputation : 1
Language : English

Back to top Go down

Solved Re: Cannot Find Variable Names I Need For Animated Hovering Icons in CSS

Post by .Luke on November 5th 2012, 5:36 am

@Seranda7 wrote:I've made an account on your forum so I can see them, would you like to make me an admin so I can work on this?



Just speaking from commonsense here, but are you seriously kidding me?

There's only one other guy I trust with the very guts of my forums, and that's my co-founder, or maybe any of the well-established members of the staff here, sorry. I can't make a decision like that without the consent of my own staff and I don't think they'd like the idea one bit anyway, to be honest. My forums aren't exactly new, we've been around for a while.

You don't need administrator privileges anyway when you can take a look at the variables of any stock CSS sheet. (Your profile says you're using phpBB2, so I don't think you can help me either way.) It's pretty much a stock sheet outside the minor edits I've added in the Admin panel, you don't need to look at mine specifically to find them.

The problem is too minor to require outside intervention, so that was unnecessarily forward over a minor visual tweak, to the point it sounded fishy. If I needed someone to help me with the admin panel, I would have asked someone from the staff who I know have knowledge in CSS and phpBB3; I don't know anything about you at all.

I'm terribly sorry, but a random new guy with no avatar and only two posts in this very topic asking for admin privileges just screams fishy. So needless to say, your presumptuous offer comes off as malicious, which made me consider an IP ban of your new account on my forums, but that measure felt unnecessary once I calmed down. Sounds harsh, but I'm just being honest here encase you need the feedback.

Your intentions may be otherwise, but it comes off that way; I'm only thinking about the safety of my boards and the private information of its guests and members, like their IP addresses and emails. I've been running these forums for months now with four other staff members and just now getting it prettied up, I don't need a complete stranger compromising everything and forcing me to start all over from scratch.

Word of Advice : Please, don't scare people in the way you just did with me. Try to be as helpful as you can while letting the other person set the boundaries; you never want to step outside another's comfort zone in any situation. What you were asking me to do, I can't do lightly. Once again, I'm sorry I dumped so much text over this, but when I have a point to make, it's unfortunately long-winded. I wish I could have said it in fewer words, but I can't.

Now, is someone else out there able to offer me some actual help here? ;__;

.Luke
New Member

Male Posts : 19
Reputation : 1
Language : English
Location : United States

http://tsfp.forumotion.org/

Back to top Go down

Solved Re: Cannot Find Variable Names I Need For Animated Hovering Icons in CSS

Post by Seranda7 on November 5th 2012, 6:18 am

^^" Sorry to spook you like that. In hindsight, probably not the best thing to say...

But anyways, just so you don't think I'm a complete creeper out to get your site: http://serenity-river-pack.forumotion.com

Made that, I'm Seath on there. I tend to help the others on that site with their own, so I sometimes forget it's creepy to others when I'm asking for admin rights. ^^"

But I think I can help you, with Mozilla Firefox they have a really cool feature where you can 'Inspect' pages.

Tools >> Web Developer >> Inspect

Should help you out if you're ever looking for class names again...

Code:

//New Topic
.i_post{width:96px; height:25px; background:url("http://i1058.photobucket.com/albums/t410/johnluke728/button_topic_new.gif") no-repeat 0 0;}

.i_post:hover{background:url("http://i1058.photobucket.com/albums/t410/johnluke728/button_topic_new.gif") no-repeat 0 -25px;}

New PM: i_msg_newpost
New Reply: i_reply


Not sure what other variables you're looking for...

Seranda7
New Member

Posts : 7
Reputation : 1
Language : English

Back to top Go down

Solved Re: Cannot Find Variable Names I Need For Animated Hovering Icons in CSS

Post by .Luke on November 5th 2012, 6:51 am

*breathes a huge sigh of relief*

No harm done, I'm just being cautious! Terribly sorry you had to hear all that. :# You might want to be a little more careful about being so forward in the future. Since my boards have a lot of IPs, emails, and names tied to it, I couldn't let any of that easily fall into a scammer's hands, but at the same time there was no solid evidence that you were one, so I made sure my response wasn't by any means a personal attack in either case, and now I'm certainly glad I didn't. ^^ You're more than welcome to post on the forums, if you like, since you already have an account there. =P (But it's okay if Shantae's not your thing. XD) I should be the one who's sorry if that wall of text scared you. ;__;

Anyway, you just blew me away! That Inspect devtool in Firefox is helping me find the variables of pretty much any element I hover my mouse over, and it's giving me a lot of ideas; thanks for your help, Seranda7! ^_^ Consider this one solved, Staffers. =P

.Luke
New Member

Male Posts : 19
Reputation : 1
Language : English
Location : United States

http://tsfp.forumotion.org/

Back to top Go down

Solved Re: Cannot Find Variable Names I Need For Animated Hovering Icons in CSS

Post by SLGray on November 5th 2012, 9:05 am

Topic Solved & Locked


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


SLGray
Administrator
Administrator

Male Posts : 36648
Reputation : 2443
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