Mouseover Text ~ at Runboard.com


Temple of Illusia
 »  Illustrated Secrets of Design .
 »  »  Mouseover Text
Support | Search Illusia

   Runboard       

Jump to Page:  1  2 

 
Demonic Inuyasha
Citizen
Worldly Traveler (premium)

Registered: 11-2004
Province: My Secluded Paradise
Posts: 49
Karma: 2 (+2/-0)
Avatar
Reply | Quote
Mouseover Text

I was wondering if it is possible to add a Mouseover text effect to the sidebar or anywhere for that matter on a board, and if so, how?

I have an example here for ya to get what I am going for:

Look Here

Hover over the Delete button on any of the posts and you'll get what I mean. In general I would like to know how it's done, and if it is possible to implement it into the sidebar and even for forum names. emoticon I have some very cool and nifty things I could do if it can be done.

Thanks ahead of time!


---
Image
Image
6/28/2008, 3:20 am PM Demonic Inuyasha Yahoo Read Blog
 
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5128
Karma: 89 (+103/-14)
Avatar
Reply | Quote
Re: Mouseover Text

No, it's not possible to put an effect on your Runboard that can be found on another Runboard. emoticon

Sorry, couldn't resist. emoticon

That effect is described here. Since that uses an area that already has a class name, you'll need to create your own class name to use it in the HTML section, and change the CSS accordingly.

For example, you could nest a link inside a class named "whatever":

<span class="whatever"><a href="....">...</a></span>

Then, change .postlistdelete in that CSS to .whatever

span.whatever {
     position: relative;
}
    span.whatever a span {
     display: none;
}
span.whatever a:hover {
     font-size: 99%;
     font-color: #000000;
}
span.whatever a:hover span {
     display: block;
     position: absolute;
     margin-top: 10px;
     margin-left: -10px;
     width: 200px; height:200px;padding: 5px;
     color: #ffd700;
     background: #880000;
     font:bold 12px Arial, sans-serif;
     text-align: left;
     text-decoration: none;
}

---
Image
Customization tutorials & Q&A
6/28/2008, 1:58 pm PM Lesigner Girl Read Blog
 
Demonic Inuyasha
Citizen
Worldly Traveler (premium)

Registered: 11-2004
Province: My Secluded Paradise
Posts: 49
Karma: 2 (+2/-0)
Avatar
Reply | Quote
Re: Mouseover Text

emoticon Yer so lucky I luv ya Lesa. emoticon

Will try it out now. emoticon

Last revised by Demonic Inuyasha, 6/28/2008, 6:41 pm


---
Image
Image
6/28/2008, 6:39 pm PM Demonic Inuyasha Yahoo Read Blog
 
Demonic Inuyasha
Citizen
Worldly Traveler (premium)

Registered: 11-2004
Province: My Secluded Paradise
Posts: 49
Karma: 2 (+2/-0)
Avatar
Reply | Quote
Re: Mouseover Text

Mkay, here is what I have right now: 

span.sidebar {

     position: relative;

}

    span.whatever a span {

     display: none;

}

span.sidebar a:hover {

     font-size: 99%;

     font-color: #000000;

}

span.sidebar a:hover span {

     display: block;

     position: absolute;

     margin-top: 10px;

     margin-left: -10px;

     width: 200px; height:200px;padding: 5px;

     color: #ffd700;

     background: #880000;

     font:bold 12px Arial, sans-serif;

     text-align: left;

     text-decoration: none;

}


I threw that snippet into my CSS at the bottom (this is on my Basics Board of course).

Then, I modified the first Affiliated Board of my sidebar in the CSS like this:

<li><span class="sidebar"><a href="www.runboard.com/banythinggoes">The Debate Forum</a></span></a></li>

In that HTML part, what do I need to add to it to get the addition of the mouseover text?


And yes I tried this out like it was meant to be done and got it spot on, I just have to get this to work. emoticon I am determined, you see. emoticon

---
Image
Image
6/28/2008, 7:02 pm PM Demonic Inuyasha Yahoo Read Blog
 
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5128
Karma: 89 (+103/-14)
Avatar
Reply | Quote
Re: Mouseover Text

From the Runboard Extra post:

In your Custom language Set, scroll down to the field 'post_list_delete' and right after the word Delete, add your text inside <span> tags, like this :
Delete<span>Sure you wanna delete this post ?</span>

Now, a board's underlying source code has
<span class="postlistdelete"><a href="....">______</a></span>
and whatever you put into the custom language set will fill in that blank. So, working it into this code:

<li><span class="sidebar"><a href="....">_______</a></span></li>

Technically, since you're using <li> around each link, you can just use this instead of adding span tags:
<li class="sidebar"><a href="....">_______</a></li>

... but then your CSS would also need to reflect that with, for instance, li.sidebar instead of span.sidebar.

---
Image
Customization tutorials & Q&A
6/28/2008, 7:59 pm PM Lesigner Girl Read Blog
 
Demonic Inuyasha
Citizen
Worldly Traveler (premium)

Registered: 11-2004
Province: My Secluded Paradise
Posts: 49
Karma: 2 (+2/-0)
Avatar
Reply | Quote
Re: Mouseover Text

I understand what your saying, but in my travels today, I found exactly what I would like to be able to do, so I spose it will make it a little easier on both of us. emoticon

Runboard Extra

If you hover over the sidebar choices, it has a mouseover text appear describing each, that is what I would like to do in my sidebar at PH. emoticon What you are saying has to mostly do with the CLS, and I'm not getting how that would do what I need to since the sidebar is different from the Delete/Edit/Reply/Quote stuff.

Sorry for being a pain, I'm trying hard to understand.
 emoticon


Edit:

<li><a href="www.runboard.come/bpostershaven/" title="This is the best board ever">Posters Heaven</a></li>

Would that work in the HTML?

Last revised by Demonic Inuyasha, 6/28/2008, 8:40 pm


---
Image
Image
6/28/2008, 8:20 pm PM Demonic Inuyasha Yahoo Read Blog
 
Demonic Inuyasha
Citizen
Worldly Traveler (premium)

Registered: 11-2004
Province: My Secluded Paradise
Posts: 49
Karma: 2 (+2/-0)
Avatar
Reply | Quote
Re: Mouseover Text

I went and tested that code I have up there, and also changed each occurrence in the CSS of span. to li.

and it worked! Thank you Lesa! emoticon Good Karma for you. emoticon


Edit in place of new post:

This one I think cannot be done, but going to ask anyways. Is it possible to utilize this code with adding hover text for the forum names? Like in place of using the underlying forum descriptions?

Last revised by Demonic Inuyasha, 6/28/2008, 9:37 pm


---
Image
Image
6/28/2008, 8:46 pm PM Demonic Inuyasha Yahoo Read Blog
 
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5128
Karma: 89 (+103/-14)
Avatar
Reply | Quote
Re: Mouseover Text

Demonic Inuyasha said:

Runboard Extra

If you hover over the sidebar choices, it has a mouseover text appear describing each, that is what I would like to do in my sidebar at PH. emoticon

...

<li><a href="www.runboard.come/bpostershaven/" title="This is the best board ever">Posters Heaven</a></li>

Would that work in the HTML?

Geeze, dude! Why didn't you just say that in the first place? emoticon

BTW, your link is all wrong. If you use the full path, it needs http:// before it, and it's .com, not .come. Also, I've seen the ending slash like you have cause problems in some cases.

Further, you could use a root-relative path instead of the full URL and just use:

<li><a href="/bpostershaven" title="This board is kinda cool">Posters Heaven</a></li> emoticon

As for forum names, no. You can only add tooltips to places where HTML can be added.

---
Image
Customization tutorials & Q&A
6/28/2008, 10:22 pm PM Lesigner Girl Read Blog
 
Demonic Inuyasha
Citizen
Worldly Traveler (premium)

Registered: 11-2004
Province: My Secluded Paradise
Posts: 49
Karma: 2 (+2/-0)
Avatar
Reply | Quote
Re: Mouseover Text

 emoticon

I thought I was saying that. emoticon

Yeah I made some spelling errors and stuff in that code, but those (errors, the http//:, and that /) are not present in the real thing. emoticon And will probably go in and fix them to the root url so as to open up more free space. emoticon

Oh and emoticon at the *kinda cool* part

And I figured the forum one wouldn't work, oh well emoticon



---
Image
Image
6/28/2008, 10:36 pm PM Demonic Inuyasha Yahoo Read Blog
 
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5128
Karma: 89 (+103/-14)
Avatar
Reply | Quote
Re: Mouseover Text

The first one you pointed me to uses CSS to display and hide the text, while the 2nd one is just a title attribute that creates a tooltip. But I want to thank you for giving me a real "DUH!" moment... seriously, do you know about that bug that has been caused by Moose's fancy CSS hide/display "tooltip"? emoticon I don't blame him for it though, but the idiots at Microsoft who don't know how to build a proper browser. emoticon

Oh yeah, I figured you might like the "kinda cool" thing, lol. I almost put that it wasn't too bad. emoticon





Last revised by Lesigner Girl, 6/29/2008, 1:03 am


---
Image
Customization tutorials & Q&A
6/29/2008, 1:02 am PM Lesigner Girl Read Blog
 


Add to this discussion

Jump to Page:  1  2 




Powered by AkBBS 0.9.5b  -  Link to us   -  Blogs   -  Hall of Honour   -  Chat
Click here to get your own free message board
You are not logged in (login)      Board's time is: 12/1/2008, 7:10 pm EDT
Back To Top
Runboard Stats