Multiply.Design

Home Notes Blog Photos Video Reviews Links

Skyline theme...Creating the illusion of having a header and/or banner! (Updated 8/1/08)

May 12, '08 6:15 PM
by Pepper for everyone

With my wanting to "open up" the space between the page title and the navigation bar of the Skyline theme, I was running into problems...Then along came Dantcer with a similar situation ("Nav Bar Issue with IE"). Tho her resolve was different than my objective, the process she ended up using satisfied me, giving me the illusion I wanted. Hadn't really thought about it much except that many questions regarding "How to make a banner?" have been asked recently...soooo, here goes.

Please take into consideration that this application is for the "Skyline" theme. The rendition of this effect regarding the "Black Lily" theme can be found here. Renditions of the Vertical Owner Navigation Bar applicable to the "Live Love and Laugh" and "Shadow Box" themes can be found within the comments of this. Those are the only other posted applications of the Vertical Owner Navigation Bar that I am aware of...

This is the CSS pertaining to the positioning and display of the "owner navigation bar" from the Skyline base theme:

div.owner_nav {
border: none;
margin: 0;
height: 163px;
}
div#subnavc {
width: auto;
}
div#subnav {
padding: 1px;
padding-left: 5px;
background: none;
background-color: #000;
border: none;
border-top: 1px solid #99f;
border-bottom: 1px solid #99f;
height: auto;
}

To give you an idea of the dimensional difference, this is the top portion of the Skyline theme with that CSS...

Working with the height and padding of the div.owner_nav portion, and adjusting the padding-top of div#subnav to coordinate those efforts...

/*Navigation bar*/
div.owner_nav {
border: none;
margin: auto;
/*height +/- moves theme body (ie; Welcome box and headshot) relative to top of page*/
height: 260px;
width: auto;
padding: 0px;
/*pad-top moves title AND nav bar relative (+/-) to gnav*/
padding-top: 25px;
/*pad-bottom moves nav bar relative (+/-) to title*/
padding-bottom: 285px;
background: none;
}

div#subnavc {
width: auto;
}

/*owner nav bar - BG & border*/
div#subnav {
padding: 1px;
/*pad-left moves nav bar relative (+/-) to side of page*/
padding-left: 30px;
/*pad-top moves nav bar relative (+/-) to title*/
padding-top: 310px;
background: none;
border: none;
height: auto;
width: auto;
}

"Pushing" the page title a little, if you want it aligned to the left as I do...aligning it with the "Home" tab, placing it more within the body of your page as you scroll down, is accomplished here:

h1#page_owner_title {
/*pad-left moves title relative (+/-) to side of page*/
padding-left: 25px;
}

JFYI: If you want your page title "centered", simply add the following to the h1#page_owner_title { area...
text align: center;

This is what I came up with...

JFYI: The image I am using is 750x562px, the height (562px or close proximity) being important...to give you an idea of what size image you must use to "cover" your screen and to get this effect.

/* GTO - image from http://www.gtoforum.com/photopost/showphoto.php/photo/454/limit/views */
body {
background-color: #000000;
background-image:url(IMAGE URL - image used - 750x562px);
background-attachment: scroll;
background-position: top center;
background-repeat: no-repeat;
width: auto;
}

You also realize that you have options at this point (let your imagination be your guide)...ie:

background-attachment: fixed;
and/or with
background-position: top;
or
background-position: top left;
or
background-position: top right;

Another feature that can be used with this rendition is the vertical navigation bar. Thanks go to Denim, my friend, who passed this concept (CSS elements) on to me...of which I modified to fit the illusion I wanted:
(Please note the added elements within each area compared to the original base theme CSS...They are provided to show the latitude you have)

/*VERTICAL Navigation bar for Skyline*/
div.owner_nav {
border: none;
margin: auto;
/*height moves theme body (ie; Welcome box and headshot) relative (+/-) to top of page*/
height: 260px;
width: auto;
padding: 0px;
/*pad-top moves title AND nav bar relative (+/-) to gnav*/
padding-top: 25px;
/*pad-bottom moves nav bar relative (+/-) to title*/
padding-bottom: 285px;
background: none;
}

/*Vertical Nav bar CSS elements from Denim - modified*/
div#subnavc {
background: none;
width: 110px;
border: none;
padding: 0px;
/*pad-top moves nav bar +/- from title*/
padding-top: 60px;
/*pad-left + moves nav bar to right*/
padding-left: 35px;
margin: 0px;
position: absolute;
}

div#subnav {
padding: 0px;
padding-left: 8px;
margin: 0px;
background: none;
border: none;
height: 25px;
}

/*nav buttons - not "In Use" or hover*/
a.topt, a:visited.topt {
line-height: 2.4em;
display: block;
float: left;
width: 110px;
/*spacing between VERTICAL tabs*/
height: 40px;
text-align: left;
font-family: comic sans-serif;
font-weight: bold;
font-size: 18px;
font-style: oblique;
color: #ECE5B6;
padding: 0px;
margin: 0px;
background: none;
background: url(URL);
background-repeat: no-repeat;
background-position: center;
border: none;
}

/*hover on all - not "In Use"*/
a.topt:hover, a:visited.topt:hover {
line-height: 2.4em;
display: block;
float: left;
text-align: left;
font-family: Arial;
font-weight: bold;
font-size: 18px;
color: #fff;
padding: 0px;
margin: 0px;
background: none;
background: url(URL);
background-repeat: no-repeat;
background-position: center;
border: none;
}

/*"In Use" tab - not hover*/
a.toptsel, a:visited.toptsel {
line-height: 2.4em;
display: block;
float: left;
width: 110px;
/*space below VERTICAL "In Use" tab*/
height: 40px;
text-align: left;
font-family: comic sans-serif;
font-style: oblique;
font-weight: bold;
font-size: 18px;
color: #ECE5B6;
padding: 0px;
margin: 0px;
background: none;
background: url(URL);
background-repeat: no-repeat;
background-position: center;
border: none;
/*to add blinking (FF) "In Use" tab - only works with FF*/
text-decoration: blink;
}

/*"In Use" tab - hover*/
a.toptsel:hover, a:visited.toptsel:hover {
line-height: 2.4em;
display: block;
float: left;
text-align: left;
font-family: Arial;
font-weight: bold;
font-size: 20px;
color: #fff;
padding: 0px;
margin: 0px;
background: none;
background: url(URL);
background-repeat: no-repeat;
background-position: center;
border: none;
}
/*end of modified VERTICAL nav bar CSS*/

This is what I came up with...

AND...These adjustments to the CSS of Skyline have been worked/modified/resolved to satisfy viewing with both IE7 and FF!

If you are curious about the Global Navigation Bar, please refer to Demit's post, One-liner Global Navigation, or my post Global Navigation Bar..."tweaksville...lol for my interpretation and application.

A final note regarding these codes and the CSS Validator:
Tho the /* notes */ within the brackets (ie; { } ) are strategically placed for your reference and guidance in the event you want/need to tweak them for your personal preference...As of the "upgrade", mid June 2008, you MUST remove/delete all /* notes */ within the brackets (of which I colored for easy reference) prior to posting this code in your Custom CSS area, so the height and width don't get "stripped" by the validator, hence corrupting your theme!

Tags: skyline, banners, base themes, css, customize, resizing, themes, top header, tutorial

Prev: CSS Starters
Next: Change Photos/Calendar/Reviews Icons in Table View - CSS

reply share

40 CommentsChronological Reverse Threaded

demitmp wrote on May 13

congrats!

psychotic2 wrote on May 13

Thanks for sharing with the MD members with tutorial. :-)

wolvesandrainbows wrote on May 13

Perfect !
I finally branched out from Custom Colors for my page and used Skyline but was at a loss how to get this effect. Thank you thank you thank you.
Bookmarked this for sure.

ladyinthemist wrote on May 13

That is very nice!

shearoc wrote on May 13

Thanks

nutinnutshell wrote on May 13

demitmp said

congrats!

Thanks Demit...tho the finishing touch didn't come til you posted your tutorial on the gnav bar...that really brought it together, for me, at least...Thank you for that.

nutinnutshell wrote on May 13

psychotic2 said

Thanks for sharing with the MD members with tutorial. :-)

Psycho...All this was put together with a vision and picking up tidbits here and there from all the threads and other tutorials that float thru Multiply Design...for that, I am truly grateful. Just sharing what you guys have given me...lol

nutinnutshell wrote on May 13

wolvesandrainbows said

Thank you thank you thank you.

You're welcome... The checks in the mail, right...lmbo

nutinnutshell wrote on May 13

Thanks Shearoc & Lady...

I really like the "wide" aspect of Skyline...having a thought in the back of the mind as to what it could be...and think, with the help of many question/answer sessions here in Multiply Design, that it became a reality. From all the questions of late about how one can install a header/banner, this may appease many...Enjoy!

tenderspirit wrote on May 14

Wow...this is great thanks for sharing it ~ I've been wondering how others managed to get the menu on the side vertically (I really like that look!). You are awesome! :o)

nenafernanda wrote on May 17

Thanks you..........
mator nuwon,.,

osuzana wrote on May 17

You are such an expert. I'm speechless.

pepperjak wrote on May 17

osuzana said

expert

Thanks Red, but NOT...lol Just seem to have way too much time on my hands...that and grasping tidbits here and there and seeing how they would work together. Some do...some don't...*chokin*

nutinnutshell wrote on May 17

tenderspirit said

thanks for sharing it

You're welcome...enjoy!

nutinnutshell wrote on May 17

nenafernanda said

Thanks

You're welcome...also!...lol Enjoy

dantcer wrote on May 18

NICE JOB!!

pepperjak wrote on May 18

dantcer said

NICE JOB!!

Why Thank You, Linda...Gawd, it's good to see you out n' bout again! Missed ya, girl..hoping you're all better this time...

dantcer wrote on May 19

Thanks Pepper... I hope so too! I'm slowly getting caught up but there's so much to see and do! LOL

nutinnutshell wrote on May 21

Just to give everybody a heads up on this, the vertical nav bar may be extinct before it even gets off the taxi strip. For further info, go to http://multiply.com/mail/message/multiplydesign:notes:731
I will update as solid info is gathered.

dantcer wrote on May 21

Thanks. I think things may have settled as much as they are going to unless the header area is put back to the size it previously was. Haven't heard a word on that.

pepperjak wrote on May 21

Woot woot! I just checked this on both IE7 & FF...STILL works!

dantcer wrote on May 21

Good !!!

psychotic2 wrote on May 21

That's great because I still want to try this out :-)

pepperjak wrote on May 21

I was really concerned...didn't know whether to be po'd or just throw my arms up yesterday...lol I didn't go near my Custom CSS box til well into this morning after the "all clear" confirmation had been given. I spent a considerable amount of time getting this tweaked the way it is...Course, you guys would have done it in a fraction of the time, but I feel pretty good about it even if I did come into this arena 10 years after the fact...lol

dantcer wrote on May 21

My fraction of the time would have been how quickly someone could reply to a question for me. lol

karichi wrote on Jun 3

wooooooooooooooow this is great! i used it and it worked perfectly! thanks heaps dude! :D

nutinnutshell wrote on Jun 3

karichi said

thanks heaps dude!

Glad it woooowed ya...you're welcome...lol

pepperjak wrote on Jun 24, edited on Jun 24

I've been informed the height and width measurements are being stripped from this CSS virtually making the "vertical" nav bar a piece of junk...So much for any upgrade!
I'm sorry...and certainly hope that no one blames me for their misfortune...I have NO control or influence in what MP does with it's higher wisdom...

I will attempt to rectify the problem this weekend...jfyi

dantcer wrote on Jun 25

I haven't tested this Pepper and perhaps it's not happening to those using this, and just happening to you. Won't know til we hear from someone else.

pepperjak wrote on Jun 25

I've gotten PM'd by some that use it, one especially...and it's ugly!

dantcer wrote on Jun 25, edited on Jun 25

So it's theme/code related and not related to your account? That would be useful information for CS.

prettiestchick wrote on Jun 28

what if I am using a default or clean theme??? =(

dantcer wrote on Jun 29

Changing Header (or any background)

nutinnutshell wrote on Jun 29

UPDATE: As of the "upgrade", mid June 2008, you MUST remove all /* notes */ within the brackets, ie { } , so the height and width don't get "stripped" from the Custom CSS!

missthemed wrote on Jul 2

oh and this works on Andros as well
thank you :-D

nutinnutshell wrote on Jul 5

missthemed said

this works on Andros as well

http://littledebbie93.multiply.com/ has used it for the Shadow Box theme after some tweaking...and another as well, but I've lost track of which one...lol

nutinnutshell wrote on Aug 2, edited on Aug 2

Gonna "bump" this as I've up-dated it with highlighted areas and info regarding posted applications for other themes...

Thanks go to Linda (Dantcer) for the chocolate flavored "bump"...lol

dantcer wrote on Aug 2

Thanks for updating this. GOOD JOB!

nutinnutshell wrote on Aug 3

Thanks Linda....It still is a "copy/paste" thing for the Skyline for both the horizontal and vertical nav bar..but I'm hoping it is very clear that the /*notes*/, explaining the reactions in certain areas, need to be removed/deleted prior to posting...
I could have, from the beginning, just posted the copy/paste aspect, and kept it all a "secret"...but I posted it with available knowledge for other theme makers to expand upon with other themes if they wanted. It would be a cut and dry thing...except for the interpretation differences between IE7 and FF. I will not supply info or data that isn't compatible to both browzers...I feel that should be of the utmost importance to anyone who designs a theme for public consumption..just me! That's what I've gotten from this group...that is what I've attempted to give in return.
Debra sure has taken off with the "vertical", huh! Good for her...