I found the instructions to create a custom banner, but it is not displaying and I also wonder what size to make it in Photoshop.
Here is my site http://mrhoni-photography.smugmug.com

The file I'm using is transparent png. It is in an unlisted gallery. It is 1000px wide by 100px high. Originally I have been using a text banner with font size 48 from the Easy Customizer and that was the size I am trying to get to.

Here is the code I found and is currently in place:

/* Custom png banner */
#my_banner { width: 750px; height: 150px; margin: 0 auto; background: url(http://www.smugmug.com/photos/i-vrZp...-vrZpCL6-O.png) no-repeat; _background: none;
_filter:progidXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src=’http://www.smugmug.com/photos/i-vrZp...ZpCL6-O.png’);
}


I have this in the custom header:
<div id=”my_banner”> </div>

Originally Posted by mrhoni I found the instructions to create a custom banner, but it is not displaying and I also wonder what size to make it in Photoshop. Here is my site http://mrhoni-photography.smugmug.com The file I'm using is transparent png. It is in an unlisted gallery. It is 1000px wide by 100px high. Originally I have been using a text banner with font size 48 from the Easy Customizer and that was the size I am trying to get to. Here is the code I found and is currently in place: /* Custom png banner */ #my_banner { width: 750px; height: 150px; margin: 0 auto; background: url(http://www.smugmug.com/photos/i-vrZp...-vrZpCL6-O.png) no-repeat; _background: none; _filter:progidXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src=’http://www.smugmug.com/photos/i-vrZpCL6/1/L/i-vrZpCL6-O.png’); } I have this in the custom header: <div id=”my_banner”> </div>

Think it has to do with the type of quote marks that are being used for the banner division.



Try this:
<div id="my_banner"> </div>

Originally Posted by richW Think it has to do with the type of quote marks that are being used for the banner division. Attachment 36540 Try this: <div id="my_banner"> </div>

Thanks Rich, that was the problem, now just need to get is sized better

Originally Posted by mrhoni Thanks Rich, that was the problem, now just need to get is sized better

Now it is broken. I uploaded a new png file and now it is not showing as the banner - there is no banner. I must have done something wrong. When I did the first pasting of the new file name code got messed up, so I went back to the tutorial and replaced the CSS with this, which should be the same as before, just lined up prettier and has the new uploaded file.

/* Custom png banner */
#my_banner {
width: 750px;
height: 150px;
margin: 10 auto;
background: url(http://www.smugmug.com/photos/i-HNwh668-O.png) no-repeat;
_background: none;
_filter:progidXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.smugmug.com/photos/i-HNwh668-O.png');
}

Originally Posted by mrhoni Now it is broken. I uploaded a new png file and now it is not showing as the banner - there is no banner. I must have done something wrong. When I did the first pasting of the new file name code got messed up, so I went back to the tutorial and replaced the CSS with this, which should be the same as before, just lined up prettier and has the new uploaded file. /* Custom png banner */ #my_banner { width: 750px; height: 150px; margin: 10 auto; background: url(http://www.smugmug.com/photos/i-HNwh668-O.png) no-repeat; _background: none; _filter:progidXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.smugmug.com/photos/i-HNwh668-O.png'); }

Worked my way backwards to what I had in the beginning and just changed for the latest png file that I had loaded.

I would like to change to have the banner and the nav bar on the same row. Searching for a solution, but if you can help, thanks.

I found a thread that was discussing keeping the banner and navigation bar in line, but entering that code does not make a change.

I am stumped.

Add this to your CSS, see if that works for you:

#customHeaderContainer {
position: absolute;
right:10px;
top: 20px;
}

Thank you so much. Looks good.