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! > Navbar images...
xtoturnwithinx (New Admin) 1/9/2011 9:54 PM EST : Navbar images...

xtoturnwithinx
Posts: 1148
Zomgawsh Poster

I can't believe I forgot how to do this, but can someone tell me how to replace text with images in the navbar and what image types are unusable? Thanks!
TopBottom

Ansu (New Admin) 1/9/2011 10:40 PM EST : RE: Navbar images...
Ansu
Posts: 783
Zomgawsh Poster

It depends on what part of the navbar you want to target.>

01.<div class="mTop">
02.    <table class="TabBar mTop mBottom">
03.        <tbody>
04.            <tr>
05.                <td class="Tab FirstTab">
06.                    <div class="SelectedTab">
07.                            <a class="topTabLink" href="Guild.aspx?GuildID=55555&amp;TabID=12345">Page 1</a>
08.                    </div>
09.                </td>
10.                <td class="Tab ">
11.                    <div class="UnSelectedTab">
12.                        <a class="topTabLink" href="Guild.aspx?GuildID=55555&amp;TabID=67890">Page 2</a><
13.                    </div>
14.                </td>
15.            </tr>
16.        </tbody>
17.    </table>
18.</div>

This is a standard navigation bar layout.  You could start by giving each button the same background using .Tab as your selector.   Or you could ignore the table cell classes, and modify the .SelectedTab and UnSelectedTab classes.   Or, if you're talking about actually replacing the text links (such as "Page 1") you could hide the text if the text were encapsulated in another object (like a span), however not having access to that, you'll have to make due with a little magic.

To hide a text string via css, use the following method:

01..SelectedTab, .UnSelectedTab {
02.    color: transparent;
03./* Transparency will make the text invisible, but IE simply renders it black. */
04.    font-size: 0px;
05./* To overcome this, we size the font to 0px making it take zero pixels */
06.    width: 50px;
07./* The width of your image */ 
08.    height: 20px;
09./* The height of your image */
10.    padding-top: 20px;
11./* The font anchors to the bottom-left corner, ergo pad the top for the image to show */
12.    padding-right: 50px;
13./* And pad right.  Note that background images will show in padding, but not margins. */
14.    background: url(http://www.server.com/button.png) center center no-repeat;  }

However, if you're looking to replace every button, each with its own pre-rendered appearance, you'll need to get a little crafty with CSS selectors.

1.a[href$="TabID=12345"] {
2.    background: url(foo); }

Here we've selected any <a> element with an href attribute ending with "TabID=12345".  That TabID refers to the page on your guildsite you want to link to, so just swap the numbers as needed.

As far as the image formats supported, stick with JPG, GIF, or PNG.   A complete list of supported formats and their browsers can be found here at Wikipedia.org.

Hope that helps.
TopBottom

xtoturnwithinx (New Admin) 1/10/2011 2:19 AM EST : RE: Navbar images...

xtoturnwithinx
Posts: 1148
Zomgawsh Poster

The problem here is that I don't know how to do CSS. A year ago, I built a GP site and it was as simple as just setting the images through the page properties, but when GP was updated, it became more complex. Using code won't really help me, as anything past the actual graphic design is out of my league.

You can see the site here: http://guildportal.com/Guild.aspx?GuildID=388744

The navbar buttons are supposed to match the text on the header, but I can't get them to show up.
TopBottom

Sandy Lewis (Blue Collar) 1/10/2011 12:10 PM EST : RE: Navbar images...
GuildPortal Support
Sandy Lewis
Posts: 1153
Zomgawsh Poster

You can still do it in "Page Properties"  

Go to Control Panel > Pages & Content (Widgets)> Click on the page you want to change
hen over to the right click "Page Properties" look for "Custom Tab Images"  place your ULR;s there.
Sandy Lewis, GuildPortal Support
Admin Community - FAQ - Videos - Support Tickets
TopBottom

Sandy Lewis (Blue Collar) 1/10/2011 12:14 PM EST : RE: Navbar images...
GuildPortal Support
Sandy Lewis
Posts: 1153
Zomgawsh Poster

Hmm--it looks like the site is not picking up your "Home tab" image.  I will have to make this a ticket for Aaron to look into.
Sandy Lewis, GuildPortal Support
Admin Community - FAQ - Videos - Support Tickets
TopBottom

xtoturnwithinx (New Admin) 1/10/2011 12:28 PM EST : RE: Navbar images...

xtoturnwithinx
Posts: 1148
Zomgawsh Poster

Thanks.
TopBottom

Aaron Lewis (Blue Collar) 1/17/2011 4:56 PM EST : RE: Navbar images...
GuildPortal Dev
Aaron Lewis
Posts: 1979
Zomgawsh Poster

Hello,

Doing it via page properties is still possible. From the control panel, open Pages & Content, then select a page. Click on Page Properties. There you can set (or select from guild storage) the images for default, selected and hover states. Make sure you have "Standard Tabs" selected in Style Tools > Navigation Style as well.
Aaron Lewis, GuildPortal.com
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%