Adding a navbar to your smugmug site, by
Ivar.
First, let's start with opening the customization page of your SmugMug account.
When logged in, click on "control panel" (1)
and in the control panel, in the Customize tab, find the organize & customize section, and click the "customize" link (2).
CSS code
Near the top of the page, there is a text-box, labeled CSS. Insert the following text in that box:
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
} |
HTML code:
Scroll down a bit, and you will find a box labeled "header". Insert the following code in that box:
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/
XXXXXX">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/
XXXXXX">Information</a></li>
<li><a href="/gallery/
XXXXXX">Guestbook</a></li>
</ul>
</div>
Be sure to replace the X's in the above links with the actual gallery ID. To find your gallery ID, go into your gallery:
http://www.smugmug.com/gallery/
2672379_SJXej#141467928_N7uQ7
The gallery ID is the first set of numbers after the word "gallery". So, in the example link, the gallery ID is "2672379". Those are the numbers you would replace the X's with.
Note that you only need to use "/galleries" as the link to your galleries in your navbar code. Also, for the "home" link, just use "/", as in the above example code.
*************************
Want to remove the breadcrumb (navigation) and page navigation from your non-gallery pages? For example, Guestbook, About Me, Contact, Information pages. No problem! Add the following to your CSS code box in your customization. Remember to replace the X's with the gallery ID (see above on how to find that):
.gallery_
XXXXXX #breadcrumb {display: none;}
.gallery_
XXXXXX .pageNav {display: none;}
Nice clean page now :)
CHANGING THE WORDS IN THE NAVBAR
If you want to change words (those that appear in the navbar), change the words right after the location.
CHANGING THE LINKS
How does the navbar know where it has to take you? You have to tell it!
The link is in between the quotation marks. Change the nickname to your account name, and add the location of the gallery you wish to link.
LOCATION? WHAT'S THE LOCATION??
Navigate your way to the gallery you want to link to, and look in the address window of your browser.
If you are linking directly to a gallery, it will look like: nickname.smugmug.com/gallery/12345678_aBcDe
LINKING TO CATEGORIES, OR USING THE "GALLERIES" PAGE
If you are linking to a category, the web address will be something like:
http://nickname.smugmug.com/Galleryname
Remember that the gallery name is case sensitive. If the gallery name is made up of multiple words, the space between the words is replaced by an underscore.
If you are using the 'galleries page hack', such as described in the 'site layout', you can use the same thing, which will most likely be http://nickname.smugmug.com/galleries
USING A CUSTOM DOMAIN
When using a custom domain, you can leave out the http://nickname.smugmug.com part of the web address. In that case, the link used (see below) can be: /galleries
for instance. That way the links will keep you on your custom domain.
I NEED MORE LINKS
No problem! just add another one of those lines, starting with < li > and ending with < /li >
You can also remove a link the same way
MAKE ME PRETTY! CHANGING BACKGROUND COLOR OF THE LINKS
In the '#navcontainer ul li a' section in the CSS box there is a line that starts with 'background-color:' the second part is a # followed by a number. Change that number to any color code you wish. You can find information on color codes
here.
