Runboard.com
You're welcome.



       Use the black navigation bar to log in or create your account.

Jump to Page:  1  2  3 

 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
posticon FAQ: Rollover for Topic/Reply buttons


These directions are for creating a rollover effect when someone hovers on a New Topic or Add Reply button link.

The rollover effect is done with CSS, since javascript is disallowed on Runboard. You need a transparent gif (1×1px will do) for the button itself, and two versions of each button you want the effect for (one for its normal state and one for the hover).

Edit all parts in green, below, appropriately.


NOTE: Always back up your headers and footers before changing them, in case you make a mistake.


In your custom language set, put the transparent.gif in for the New Topic and Reply buttons, like so:

<img src="http://url_to_transparent.gif" border="0" width="##" height="##" alt="New Topic" />
<img src="http://url_to_transparent.gif" border="0" width="##" height="##" alt="Add Reply" />

Even if your current CSS has border:0 declared for all images, it never hurts to have border="0" defined in the button code itself, just to make sure it displays correctly in all browsers. Make sure you specify the width, height, and alt in this line of button code. The width and height need to be set to the dimensions of your Topic and Reply buttons. The alt helps those with images disabled to know where to click, and if you disable images through your browser settings you can see what I mean.


To specify which buttons will show up, you define that in your Custom CSS. This will cause the image to be in the background, behind the transparent.gif. The class names for New Topic and Add Reply are .topiclistpostnewtopic and .postlistaddareply, respectively (you can find these class names in the CSS Class Charts I made up for everyone's reference), so for the New Topic and Add Reply buttons, here is what you'll need to define:

.topiclistpostnewtopic a:link, .topiclistpostnewtopic a:visited {
  display:block;width:##px;height:##px;
  background:url('http://url_to_new_topic.gif') center center no-repeat;
}
.topiclistpostnewtopic a:hover {
  display:block;width:##px;height:##px;
  background:url('http://url_to_new_topic_hover.gif') center center no-repeat;
}

.postlistaddareply a:link, .postlistaddareply a:visited {
  display:block;width:##px;height:##px;
  background:url('http://url_to_add_reply.gif') center center no-repeat;
}
.postlistaddareply a:hover {
  display:block;width:##px;height:##px;
  background:url('http://url_to_add_reply_hover.gif') center center no-repeat;
}


You will want to preload your hover images so they won't just disappear when someone with a dialup internet connection hovers on them. To preload images without the need for javascript, you'll want to add this bit in your Custom HTML header:

<img src="http://url_to_new_topic_hover.gif" width="0" height="0" style="display:none;" />
<img src="http://url_to_add_reply_hover.gif" width="0" height="0" style="display:none;" />

display:none makes them disappear completely on most browsers and keep things from shifting, and setting width and height to 0 will ensure that even someone with a non-css-enabled browser will not see them, and shifting of page contents should be non-existent, or at least unnoticeable.

Last revised by Lesigner Girl, 7/8/2006, 5:34 am


---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
2/1/2006, 5:30 am Link to this post PM Lesigner Girl Read Blog
 
panther1 Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 10-2005
Province: Sydney,Australia
Posts: 195
Karma: 4 (+4/-0)
ReplyQuote
Re: Rollover for Topic/Reply buttons


If I am not sure of the width and height of the images that are going in the custom images section (language set) whats the best way to find that out?
2/4/2006, 5:46 am Link to this post PM panther1
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
Re: Rollover for Topic/Reply buttons


There are a few ways to tell. If you open the folder on your computer that contains the image and then click on it once, it should tell you the dimensions at the bottom of the left-hand margin.

If you're looking at it through a browser, whether online or stored on your computer, you can right-click on it and choose "properties." It will tell you there. Doing this with your sig, I can see that it's 266×37 pixels. The first number is the width, and the 2nd is the height. Nice graphic, btw. emoticon

The third option is to actually open it in an image editor and use whatever method you can to check it there, but the first two options are much easier.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
2/4/2006, 6:18 am Link to this post PM Lesigner Girl Read Blog
 
panther1 Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 10-2005
Province: Sydney,Australia
Posts: 195
Karma: 4 (+4/-0)
ReplyQuote
Re: Rollover for Topic/Reply buttons


geez I can be so stupid at times, I have known those first two methods for years I had just forgotten about them, dear oh dear lol.

pity im not admin to delete that post hahaha *jokes* it may help someone else emoticon
2/4/2006, 6:24 am Link to this post PM panther1
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
Re: Rollover for Topic/Reply buttons


We can just pretend you were asking it for the benefit of others. emoticon

If it makes you feel any better, there have been times that I've forgotten things when I hadn't had a need for them in a while and later had a need for them.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
2/4/2006, 6:27 am Link to this post PM Lesigner Girl Read Blog
 
panther1 Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 10-2005
Province: Sydney,Australia
Posts: 195
Karma: 4 (+4/-0)
ReplyQuote
Re: Rollover for Topic/Reply buttons


HAHA yeah "stuff" happens I guess emoticon

can you see a problem with this, I added it but I still dont have the effect

/* NEW TOPIC & ADD REPLY BUTTONS */
.topiclistpostnewtopic a:link, .topiclistpostnewtopic a:visited {
  background-image:url(http://img19.imageshack.us/img19/4206/newtopic2sy.gif) center center no-repeat;
}
.topiclistpostnewtopic a:hover {
  background-image:url(http://img86.imageshack.us/img86/5498/newtopichover2hi.gif) center center no-repeat;
}




Last revised by panther1, 2/4/2006, 12:51 pm
2/4/2006, 12:16 pm Link to this post PM panther1
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
Re: Rollover for Topic/Reply buttons


That part looks fine (although I would put ' ' around the urls where they appear in my initial post), but you forgot to change your buttons to transparent gifs through your custom language set. The reason you're not seeing the rollover is because your buttons are hiding the background images, which are the images you want to see.

[edit for clarification] When you hover on the button, it is the background that is changing, not the button itself. This is why you want a transparent gif in front of it and not the button itself. [/edit]

In your custom language set, put the transparent.gif in for the New Topic and Reply buttons, like so:

<img src="http://url_to_transparent.gif" border="0" width="##" height="##" alt="New Topic" />
<img src="http://url_to_transparent.gif" border="0" width="##" height="##" alt="Add Reply" />

I originally posted "custom images" instead of "custom language set" but I edited my initial post to fix this.

Last revised by Lesigner Girl, 2/5/2006, 4:55 am


---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
2/5/2006, 4:52 am Link to this post PM Lesigner Girl Read Blog
 
panther1 Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 10-2005
Province: Sydney,Australia
Posts: 195
Karma: 4 (+4/-0)
ReplyQuote
Re: Rollover for Topic/Reply buttons


OK what is the transparent gif? all I have is the normal gif and hover gif, do I need a third image? I changed the custom language set to the hover gif but now its just the lighter button.
2/5/2006, 10:50 am Link to this post PM panther1
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
Re: Rollover for Topic/Reply buttons


Right click on this link and "Save Target As," then upload it to your image storage. It's a 1×1px transparent (blank/invisible) gif, and it's what you need to use for your topic & reply buttons in your Custom Language Set, so people will see the background images that you put in your CSS.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
2/6/2006, 12:59 am Link to this post PM Lesigner Girl Read Blog
 
panther1 Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 10-2005
Province: Sydney,Australia
Posts: 195
Karma: 4 (+4/-0)
ReplyQuote
Re: Rollover for Topic/Reply buttons


I saved the transparent gif and added it but now I cant see the buttons at all, its just the black background, here is what I have........

(custom language set)
<img src="http://img142.imageshack.us/img142/2788/transparent8qb.gif" border="0" width="208" height="50" alt="New Topic" />

<img src="http://img142.imageshack.us/img142/2788/transparent8qb.gif" border="0" width="208" height="50" alt="Add Reply" />


(Css)
.topiclistpostnewtopic a:link, .topiclistpostnewtopic a:visited {
  background-image:url('http://img19.imageshack.us/img19/4206/newtopic2sy.gif') center center no-repeat;
}
.topiclistpostnewtopic a:hover {
  background-image:url('http://img86.imageshack.us/img86/5498/newtopichover2hi.gif') center center no-repeat;
}

.postlistaddareply a:link, .postlistaddareply a:visited {
  background-image:url('http://img87.imageshack.us/img87/7435/addreply8rh208x505gq.gif') center center no-repeat;
}
.postlistaddareply a:hover {
  background-image:url('http://img80.imageshack.us/img80/7783/addreplyhover6uw6qm.gif') center center no-repeat;
}




Last revised by panther1, 2/6/2006, 7:36 am
2/6/2006, 7:34 am Link to this post PM panther1
 


Add to this discussion


Jump to Page:  1  2  3 



You are not logged in (login)
Back To Top

This board's time is GMT.

Board's time is GMT