Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Recruiting Box?
Prev 1 2 3 4 5 6 7 8
Arahila (New Admin) 5/8/2010 6:03 PM EST : RE: Recruiting Box?
Arahila
Posts: 25
Becoming Adept!

Mottie said:
So many versions and so confused. if we are using the custom CSS, do we always put the code in there unless you have stated otherwise?

Thanks in Advance!
TopBottom

Mottie (MVP) 5/8/2010 6:34 PM EST : RE: Recruiting Box?
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Arahila!

Ideally, you put the CSS in with the code (inside the Free Form Text/HTML widget). If you put the CSS in with the CSS Additions or Full CSS (if you are using that) it wouldn't hurt anything.
TopBottom

Arahila (New Admin) 5/10/2010 5:41 PM EST : RE: Recruiting Box?
Arahila
Posts: 25
Becoming Adept!

Mottie said:
Hi Arahila!

Ideally, you put the CSS in with the code (inside the Free Form Text/HTML widget). If you put the CSS in with the CSS Additions or Full CSS (if you are using that) it wouldn't hurt anything.


Thanks Mottie, this will give me something to do during WoW maintenance tomorrow.
TopBottom

Sqwirtle (New Admin) 11/6/2010 2:29 PM EST : RE: Recruiting Box?
Sqwirtle
Posts: 50
Becoming Adept!

Mottie said:


BEFORE:
</td></tr><tr><td class="druid">Druids</td><td class="nocheck">
AFTER:
</td></tr><tr><td class="druid"><a class="tooltip" title="Closed">Druids</a></td><td class="nocheck">



I love that you added this! Thank you so much.

I have a quick question about the tooltip. Right now what ever you type in red and hover over that word, the tooltip will pop up. I want to know how difficult it would be to have the tooltip pop up over the image of the class instead (druid picture and/or the check box)

You're great!
TopBottom

Mottie (MVP) 11/6/2010 7:48 PM EST : RE: Recruiting Box?
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Sqwirtle!

The current tooltips do not allow you to reposition them so I think we're kind of out of luck on this one. I do have a tooltip script version that would allow it, but sadly it conflicts with the default one on GP... oh well.
TopBottom

Mottie (MVP) 11/14/2010 6:06 PM EST : RE: Recruiting Box?
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Tera Recruitment Status

I made all of these icons purple to match Socxiety's site, but if you need a different color, just message me and I'll work on it for you



The Code
Add the following code into a free form text/HTML widget while it is in <>HTML mode.
<style type="text/css">
 .recruitbx { background: url() center center no-repeat; border: 0px; color: #ddd; font-size: 14px; }
 .recruitbx td { vertical-align: middle; text-align: center; }
 .recruitbx td a { font-weight: bold; }

 .teraclass, .open, .closed, .green, .red {
  background: url(http://www.axiomfiles.com/Files/278466/icons-tera-classes.png) no-repeat;
  height: 25px;
  padding-left: 30px;
 }

 td.archer { background-position: center top; }
 td.beserker { background-position: center -50px; }
 td.lancer { background-position: center -100px; }
 td.mystic { background-position: center -150px; }
 td.priest { background-position: center -200px; }
 td.slayer { background-position: center -250px; }
 td.sorcerer { background-position: center -300px; }
 td.warrior { background-position: center -350px; }

 td.open { background-position: center -400px; }
 td.closed { background-position: center -450px; }
 td.green { background-position: center -500px; }
 td.red { background-position: center -550px; }
</style>
<center><table class="recruitbx">

 <tbody><tr><td class="teraclass archer"></td><td>
 <a class="tooltip" title="10/10 Spots open">Archer
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass beserker"></td><td>
 <a class="tooltip" title="10/10 Spots open">Beserker
 </a></td><td class="open">
 
 </td></tr><tr><td class="teraclass lancer"></td><td>
 <a class="tooltip" title="10/10 Spots open">Lancer
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass mystic"></td><td>
 <a class="tooltip" title="10/10 Spots open">Mystic
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass priest"></td><td>
 <a class="tooltip" title="10/10 Spots open">Priest
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass slayer"></td><td>
 <a class="tooltip" title="10/10 Spots open">Slayer
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass sorcerer"></td><td>
 <a class="tooltip" title="No spots open">Sorcerer
 </a></td><td class="closed">

 </td></tr><tr><td class="teraclass warrior"></td><td>
 <a class="tooltip" title="No spots open">Warrior
 </a></td><td class="closed">

 </td></tr></tbody></table>

Hover Class names<br/>for more information
</center>
Customizing
  • All of the class images and status icons were combined into one image (image sprite method). The images are then targeted using the background-position setting. If you want to add your own status image, then you'll have to add a background-image: url(...) to add it. See the other recruitment status posts for examples.
  • Modify the overall text color by changing the CSS in blue.
  • Change your recruitment status tooltip (popup) by modifying the title element in orange.
  • Change your recruitment status image by changing the class in green next to the matching class. I didn't include an example of the "green" or "red" status icons, but you can mess around with it and pick the one you like best, or add your own.
TopBottom

Prev 1 2 3 4 5 6 7 8
Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%