Cannot Find Variable Names I Need For Animated Hovering Icons in CSS Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
3 posters

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

    .Luke
    .Luke
    New Member


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

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

    Post by .Luke Fri 2 Nov - 5:00

    *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://2img.net/i/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 Mon 5 Nov - 7:15; edited 2 times in total
    .Luke
    .Luke
    New Member


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

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

    Post by .Luke Sat 3 Nov - 17:09

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

    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.
    avatar
    Seranda7
    New Member


    Posts : 7
    Reputation : 1
    Language : English

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

    Post by Seranda7 Sat 3 Nov - 18:02

    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.
    .Luke
    .Luke
    New Member


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

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

    Post by .Luke Sat 3 Nov - 19:40

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

    This is what I'm trying to do :

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

    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.)
    avatar
    Seranda7
    New Member


    Posts : 7
    Reputation : 1
    Language : English

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

    Post by Seranda7 Sun 4 Nov - 20:16

    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?
    .Luke
    .Luke
    New Member


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

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

    Post by .Luke Mon 5 Nov - 5:36

    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?

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

    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? ;__;
    avatar
    Seranda7
    New Member


    Posts : 7
    Reputation : 1
    Language : English

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

    Post by Seranda7 Mon 5 Nov - 6:18

    ^^" 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...
    .Luke
    .Luke
    New Member


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

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

    Post by .Luke Mon 5 Nov - 6:51

    *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
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51497
    Reputation : 3523
    Language : English
    Location : United States

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

    Post by SLGray Mon 5 Nov - 9:05

    Topic Solved & Locked



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

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