*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 :
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!
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