ADDING A BANNER, OR MULTIPLE BANNERS TO A SMUGMUG SITE by Ivar.




The first thing you need to do, is create your banner, using the software of your choice. Save it as a .JPG, .GIF, or .PNG file and upload it to your SmugMug account.

In this example I have made my banner 750px wide (the standard width of a smugmug homepage) and 150px high. But of course, you can make it a different size.

After you have created your banner, start with opening the customization page of your SmugMug account.


When logged in, click on "control panel" (1)
and in the control panel 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:

#my_banner { width: 750px; height: 150px; margin: 0 auto; background: url(http://www.smugmug.com/photos/XXXXXX_YYYYY-O.gif) no-repeat; }

Replace the url with the location of your banner, and the width/height with the actual width/height of your banner image.
NOTE: There is a space between the bracket and the 'no-repeat' portion in the background line.

NOTE: If you are using a PNG file with transparancy, Internet Explorer will not play nice. To make it play nice, it's possible to add some extra code, like this:

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://www.smugmug.com/photos/XXXXXXX_YYYYY-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingmethod=image,src='http://www.smugmug.com/photos/XXXXXXX_YYYYY-O.png');
}

Don't forget to change the address of your image in the last line (starting with '_filter') as well as the XXXXXXX_YYYYY needs to be changed to the corresponding image# of your image.

HOW DO I FIND THE LOCATION OF MY BANNER?

First navigate to your banner. above the banner, click on the 'share' button.

(if it shows the email-sharing page when you click that button, click on 'forums / blogs / etc'.)

Copy the URL that shows last in the list.

At the end you will the last bit will say ...-L.gif, or ...-L.jpg, or ...-L.png

When pasting the link into the CSS code, change the 'L' to an 'O'.


Example:
http://nickname.smugmug.com/photos/12345678_aBcDe-L.gif
becomes:
http://nickname.smugmug.com/photos/12345678_aBcDe-O.gif

NOTE: The gallery which contains the banner(s) can be private but must have 'external linking' set to 'yes' in the 'customize gallery' page.

HTML code



Scroll down a bit, and you will find a box labeled "header". Insert the following code in that box:


<div id="my_banner"> </div>

I ONLY WANT MY BANNER TO SHOW ON MY HOMEPAGE!?!?!?

No problem! In the original code, add: 'display: none;'
and below the original code, add:

.homepage #my_banner {
    display: block;
}


Do not add this code if you want to have multiple banners! (see below)

HAVING DIFFERENT BANNERS IN DIFFERENT CATEGORIES or GALLERIES


First, make sure you create and upload a second banner.

Add the following code to the existing code:

.category_Travel #my_banner {
background: url(http://www.smugmug.com/photos/XXXXXX_YYYYY-O.gif) no-repeat;
}

The URL has to point to the new banner (see above). If your new banner has a different width or height from the original banner, also add the "width: XXXpx" and/or: "height: XXXpx" and change the X's to the appropriate number.

This will set your original banner for all pages, except for the pages from the category specified which will have your new banner. In this example, I have set the new banner for all pages in the "Travel" category. You can set it for any category you like, just change the word 'Travel' in the category name.


Note: The category name is case-sensitive

Note: Spaces become underscores in this code. So if you have a category called "My Wedding" the code will begin with: .category_My_Wedding #my_banner {

If you want to add more banners for different categories, repeat the same process as above.