• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization Compact, stretchy, dynamic custom header

Need some help with your New SmugMug Site?

Dgrin Challenges

Our Challenges moderator has lined up an new set of challenges for you. The Weekly Word Challenge. Get all the details and participate in the conversation Weekly Word Challenge.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Page 1  of  4
1 2 3 4
Old Mar-30-2011, 02:51 PM
#1
jfriend is offline jfriend OP
Scripting dude-volunteer
Compact, stretchy, dynamic custom header
I am regularly asked how my compact (51px high) and stretchy custom header is done. Here's the code from mine.

HTML in the custom header:

Code:
<div id="myHeader">
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/popular">Popular</a></li>
<li><a href="/Portfolio">Portfolio</a></li>
<li><a href="/Family">Family</a></li>
<li><a href="/" onclick="return false;" class="customContactButton">Contact Me</a></li>
</ul>
</div>
<div id="myBanner"></div>
</div>
CSS in advanced customization:

Code:
/**********************************************************
** header/navbar formatting
***********************************************************/

#myHeader {
    margin: 0 0 5px 0;
    padding: 10px 15px 10px 15px;
    background: transparent url(http://jfriend.smugmug.com/photos/632707648_Ymb75-O.jpg) repeat-x;
    min-width: 838px;
}

#myBanner {
    background: transparent url(/photos/631724792_9goWJ-O-1.png) no-repeat;
    height:31px;
    width: 370px;
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingmethod=image, src="http://jfriend.smugmug.com/photos/631724792_9goWJ-O-1.png");
}

#navcontainer {
    font-size: 120%; 
    width: 500px; 
    height: 31px; 
    float: right;
}

#navcontainer ul {
    margin: 0;
    padding: 5px 0;
    list-style-type: none;
    text-align: right;
}

#navcontainer li {
    display: inline;
    margin: 0 8px;
}


#navcontainer a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 2px 0 1px 0;
}

#navcontainer a:hover {color: #FFFF00;}

/* don't change the text color of the current item */
#navcontainer .navCurrentPage:hover {color:#FFFFFF;} 

/* highlight individual menu items when their page is current */
#navcontainer .navCurrentPage {
    border-bottom: 1px solid #DDDD00;
    border-top: 1px solid #DDDD00;
}
And, I've installed two customization scripts:

1) The dynamic navbar script #21 here that automatically highlights the current page in the navbar.

2) The custom contact form (for pro sites only) script #30 here to power the contact me link.

To use this on your site, you have to remove any existing custom header (whether Easy Customizer or custom), change all links to be your own (image and click destinations), adjust the banner image size to match your particular image, configure the navbar to be the destinations you want and install the two scripts mentioned above.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Mar-30-2011, 04:36 PM
#2
bbeck4x4 is offline bbeck4x4
Major grins
bbeck4x4's Avatar
Amazing, works great, is there a way to push the banner next to the navbar and have them centered? If not not a big deal, thanks for all you do, I'd have a pretty boring looking site if it weren't for your help.
__________________
Brian Beck
Spanish Fork, Utah - Photographer - Portraits - Landscapes
Google + Facebook Website
Old Mar-30-2011, 05:16 PM
#3
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by bbeck4x4 View Post
Amazing, works great, is there a way to push the banner next to the navbar and have them centered? If not not a big deal, thanks for all you do, I'd have a pretty boring looking site if it weren't for your help.
You'd have to set the width of the myHeader div and set left and right margin to auto to center it. This would keep your background from going all the way across. If you want it to go all the way across, you'd have to nest another div inside of myHeader and set the width on that instead.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Mar-30-2011, 05:26 PM
#4
bbeck4x4 is offline bbeck4x4
Major grins
bbeck4x4's Avatar
K, I'll work on the centering part, then attempt the new div, will that require anything new in the html section or can I do it all in the css?
__________________
Brian Beck
Spanish Fork, Utah - Photographer - Portraits - Landscapes
Google + Facebook Website
Old Mar-30-2011, 05:37 PM
#5
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by bbeck4x4 View Post
K, I'll work on the centering part, then attempt the new div, will that require anything new in the html section or can I do it all in the css?
New div looks like this:

Code:
<div id="myHeader">
<div id="myHeaderInner">
<div id="navcontainer">
<ul>
<li class="navCurrentPageParent navCurrentPageParentExact"><a class="navCurrentPage navCurrentPageExact" href="/">Home</a></li>
<li><a href="/gallery/8868328_TxCuL">Testimonials</a></li>
<li><a href="/gallery/15389264_KKH2i">Contact/Pricing</a></li>
<li><a href="/galleries">Clients</a></li>
<li><a href="/popular">Popular</a></li>
</ul>
</div>
<div id="myBanner"></div>
</div>
</div>
new CSS:

#myHeaderInner {width: 900px; margin: 0 auto;}

Remove these lines of CSS:

margin-left:2cm;
margin-right: 2cm;
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Mar-30-2011, 05:46 PM
#6
bbeck4x4 is offline bbeck4x4
Major grins
bbeck4x4's Avatar
That's some fast code reading, I swear trying to read this is like reading the code in the Matrix. So I have the new in, but they are still apart =( what parts to adjust?
__________________
Brian Beck
Spanish Fork, Utah - Photographer - Portraits - Landscapes
Google + Facebook Website
Old Mar-30-2011, 05:56 PM
#7
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by bbeck4x4 View Post
That's some fast code reading, I swear trying to read this is like reading the code in the Matrix. So I have the new in, but they are still apart =( what parts to adjust?
#myHeaderInner {width: 900px; margin: 0 auto;}

goes on a line by itself, not inside that other rule.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Mar-30-2011, 06:00 PM
#8
bbeck4x4 is offline bbeck4x4
Major grins
bbeck4x4's Avatar
So you do read the Matrix =) ,, Thank you, If your ever in Utah and need something, let me know.
__________________
Brian Beck
Spanish Fork, Utah - Photographer - Portraits - Landscapes
Google + Facebook Website
Old Mar-31-2011, 03:11 PM
#9
Jamesbjenkins is offline Jamesbjenkins
Live, shoot, post, repeat
Jamesbjenkins's Avatar
I thought I did everything right, but now my navbar is all stacked up at the right side of the screen. Is there a way to have something like my other banner with small pictures in it, but that's able to float so it looks good on any size screen? I want the top of my page to pop and "catch" people and I don't know if this does it...
__________________
Website: www.captured-photos.com
Proofing: clients.captured-photos.com
Facebook: Like Me || Twitter: Follow Me
Gear: Lots of Nikon bodies & glass, an office full of tools and toys
Old Mar-31-2011, 04:52 PM
#10
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Jamesbjenkins View Post
I thought I did everything right, but now my navbar is all stacked up at the right side of the screen. Is there a way to have something like my other banner with small pictures in it, but that's able to float so it looks good on any size screen? I want the top of my page to pop and "catch" people and I don't know if this does it...
Move your banner after your navbar (like in my code) and then increase the width of your navbar so it isn't forced to wrap to two lines. You can have a wider banner if you want as long as you're confident banner + navbar will fit on most screens. I personally wouldn't make anything wider than 1000px.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Mar-31-2011, 06:35 PM
#11
Jamesbjenkins is offline Jamesbjenkins
Live, shoot, post, repeat
Jamesbjenkins's Avatar
I can't get the navbar to move up to level with the top of the logo, regardless of where I put it in the order of the CSS. Everything else seems to be OK, I just need the navbar to not sit underneath the grey background like it is now. Is that possible?
__________________
Website: www.captured-photos.com
Proofing: clients.captured-photos.com
Facebook: Like Me || Twitter: Follow Me
Gear: Lots of Nikon bodies & glass, an office full of tools and toys
Old Mar-31-2011, 06:43 PM
#12
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Jamesbjenkins View Post
I can't get the navbar to move up to level with the top of the logo, regardless of where I put it in the order of the CSS. Everything else seems to be OK, I just need the navbar to not sit underneath the grey background like it is now. Is that possible?
The place you need to move the banner after the navbar is in your custom header (the actual HTML code), not in your CSS.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Mar-31-2011, 07:07 PM
#13
Jamesbjenkins is offline Jamesbjenkins
Live, shoot, post, repeat
Jamesbjenkins's Avatar
Quote:
Originally Posted by jfriend View Post
The place you need to move the banner after the navbar is in your custom header (the actual HTML code), not in your CSS.
Really sorry to still be dealing with this! I moved the HTML div tag for the banner after the navbar, and moved the CSS for the banner back to its original location in your tutorial. Now the Banner isn't aligned left anymore, and is in fact behind the slideshow. WTF. I thought I had a good basic understand of HTML and CSS, but I don't. Sorry.

Help?
__________________
Website: www.captured-photos.com
Proofing: clients.captured-photos.com
Facebook: Like Me || Twitter: Follow Me
Gear: Lots of Nikon bodies & glass, an office full of tools and toys
Old Mar-31-2011, 07:10 PM
#14
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Jamesbjenkins View Post
Really sorry to still be dealing with this! I moved the HTML div tag for the banner after the navbar, and moved the CSS for the banner back to its original location in your tutorial. Now the Banner isn't aligned left anymore, and is in fact behind the slideshow. WTF. I thought I had a good basic understand of HTML and CSS, but I don't. Sorry.

Help?
You didn't quite get it after the navbar (it's actually in the navbar). Change your entire custom header to this:

Code:
<div id="myHeader">
<div id="navcontainer" class="menu">
<ul>
<li class="navCurrentPageParent navCurrentPageParentExact"><a class="navCurrentPage navCurrentPageExact" href="/">Home</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/Other/Hola/10298107_smpho">Photographer</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="http://www.ballengerphotos.com/Other/blog/12880372_m7Akn#000000_">Blog</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/Clients/Services-Offered/10298925_i2dzq">Services</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/Photography">Galleries</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/Client%20Shots">Clients</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/gallery/12931908_DoTdq/1/000000_">Contact</a></li>
</ul>
</div>
<div id="myBanner"></div>
</div> <!-- closes myHeader -->
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Apr-29-2011, 12:54 PM
#15
Sklavos is offline Sklavos
Big grins
Sklavos's Avatar
Hi

I tried (with no luck) to apply the custom header...

I try to accomplish following: Have only a JFriend slideshow (that I have managed!) with a header containing my logo (left) and a navbar (right), white font on black background. I have drawn a logo being a png file with white text on transparent background.

Situation is, I can show the navbar but under no circumstances my logo! Also, any choices for the background seem to have no effect. Last, but not least, the changes do show as applied and wished for at my homepage as i am logged in as in "visitor view", but are not visible in other browsers in my system (Firefox 4, Chrome) as well as in Safari in other systems or user accounts, with no smugmug cookies.

Is it perhaps a dimensions issue? I set the minwidth of header as the sum of navbar and logo and its height as the logo height.

I really would appreciate any help.

Thanks in advance.


My CSS code:

Code:
/**********************************************************
** header/navbar formatting
***********************************************************/

#myHeader {
    margin: 0 0 5px 0;
    padding: 10px 15px 10px 15px;
    background: transparent url(http://smug.sklavos.com/photos/i-Dh8Wvjt/0/D/i-Dh8Wvjt-D.gif) repeat-x;
    min-width: 1020px;
}

#myBanner {
    background: url(/photos/i-q7rMxP7/0/D/i-q7rMxP7-D.png) no-repeat;
    height: 100px;
    width: 520px;
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingmethod=image, src="http://smug.sklavos.com/photos/i-q7rMxP7/0/D/i-q7rMxP7-D.png");
}

#navcontainer {
    font-size: 120%; 
    width: 500px; 
    height: 100px; 
    float: right;
}

#navcontainer ul {
    margin: 0;
    padding: 5px 0;
    list-style-type: none;
    text-align: right;
}

#navcontainer li {
    display: inline;
    margin: 0 8px;
}


#navcontainer a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 2px 0 1px 0;
}

#navcontainer a:hover {color: #FFFF00;}

/* don't change the text color of the current item */
#navcontainer .navCurrentPage:hover {color:#FFFFFF;} 

/* highlight individual menu items when their page is current */
#navcontainer .navCurrentPage {
    border-bottom: 1px solid #DDDD00;
    border-top: 1px solid #DDDD00;
}
The custom header code:

Code:
<div id="myHeader">
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/popular">Popular</a></li>
<li><a href="/Portfolio">Portfolio</a></li>
<li><a href="/Family">Family</a></li>
<li><a href="/" onclick="return false;" class="customContactButton">Contact Me</a></li>
</ul>
</div>
<div id="myBanner"></div>
</div>
Old Apr-29-2011, 12:58 PM
#16
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Sklavos View Post
Hi

I tried (with no luck) to apply the custom header...

I try to accomplish following: Have only a JFriend slideshow (that I have managed!) with a header containing my logo (left) and a navbar (right), white font on black background. I have drawn a logo being a png file with white text on transparent background.

Situation is, I can show the navbar but under no circumstances my logo! Also, any choices for the background seem to have no effect. Last, but not least, the changes do show as applied and wished for at my homepage as i am logged in as in "visitor view", but are not visible in other browsers in my system (Firefox 4, Chrome) as well as in Safari in other systems or user accounts, with no smugmug cookies.

Is it perhaps a dimensions issue? I set the minwidth of header as the sum of navbar and logo and its height as the logo height.

I really would appreciate any help.

Thanks in advance.
No need to post your code - we can see it right in your page. From what I can tell, the gallery where your banner and background images are located are not allowing originals. And, both URLs are wrong. Enable originals and then get the URLs using the Share/Get a Link button.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Apr-29-2011, 01:21 PM
#17
Sklavos is offline Sklavos
Big grins
Sklavos's Avatar
Quote:
Originally Posted by jfriend View Post
No need to post your code - we can see it right in your page. From what I can tell, the gallery where your banner and background images are located are not allowing originals. And, both URLs are wrong. Enable originals and then get the URLs using the Share/Get a Link button.
I could never thank you enough! The links were to blame.
Old May-01-2011, 02:58 AM
#18
Sklavos is offline Sklavos
Big grins
Sklavos's Avatar
Quote:
Originally Posted by Sklavos View Post
I could never thank you enough! The links were to blame.
One more question to you all.

I am quite amazed by the way the upper part of the photo in the slideshow is shown as transparent background in the stretchy header in this site

http://www.wendywilkersonphotography.smugmug.com/

How can this be realized? Reposition the biobox? Any help appreciated!
Old May-01-2011, 06:55 AM
#19
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Sklavos View Post
One more question to you all.

I am quite amazed by the way the upper part of the photo in the slideshow is shown as transparent background in the stretchy header in this site

http://www.wendywilkersonphotography.smugmug.com/

How can this be realized? Reposition the biobox? Any help appreciated!
That's just a full-screen slideshow with a semi-transparent background for the header. Described here.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old May-02-2011, 05:14 AM
#20
mrbraz is offline mrbraz
Marcio
Hi,

thanks for your navigation bar! It's awesome.

But, I still have a doubt: how can I make it works even on the Galleries page?? I have multiple home pages (for the slideshow on front and for the galleries page) and the bar doesn't appear at the galleries page.

the site is: retinasemrumo.smugmug.com

Thanks for your help,
Page 1  of  4
1 2 3 4
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
Custom header (html) help needed. Pawleader Legacy SmugMug Customization 1 Sep-11-2009 07:05 AM
Need custom header for specific galleries... arizonadigitalphotography Legacy SmugMug Customization 1 Aug-08-2008 12:30 PM
Custom Header Not Working PawPaw Bear SmugMug Support 6 Mar-24-2008 03:12 PM
Custom Header Help Lyle C Legacy SmugMug Customization 3 Mar-10-2006 04:07 PM
Custom Header Problem mattjchambers Legacy SmugMug Customization 13 Jan-25-2006 07:28 AM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump