Group's posts with tag: resizing
|  | OK...Linda made a comment about all the Custom CSS for the Skyline theme being able to interchange with the Black Lily. It does, to a point. The first option I tried, after placing my kinda sorta basic customised Skyline CSS into the Black Lily, was the "wide open illusion" horizontal and vertical navigation bars. They didn't fair so well!
Sooo...off I went to the drawing board! Here's the Black Lily base code for the Owner Nav bar, along with the area for the page "title"...both of which are involved to work this out...
/*Black Lily owner nav bar - base code*/
div.owner_nav {
padding: 0;
height: 210px;
background: url(http://images.multiply.com/multiply/style/blacklily/ownernav_bg.jpg) no-repeat top left;
}
div#subnavc {
margin-left: 120px;
background-color: #454;
background: none;
width: auto;
border: none;
}
div#subnav {
width: auto;
padding: 0;
margin: 0;
height: auto;
background: none;
}
a.topt, a:visited.topt {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: center;
background: none;
font-size: 11px;
color: #fa0;
width: 68px;
height: 19px;
font-weight: bold;
padding: 0;
padding-top: 10px;
background: url(http://images.multiply.com/multiply/style/blacklily/lvl2nav_tab.jpg);
}
a.toptsel, a:visited.toptsel {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: center;
background: none;
font-size: 11px;
color: #fff;
padding: 0;
padding-top: 10px;
width: 68px;
height: 19px;
font-weight: bold;
background: url(http://images.multiply.com/multiply/style/blacklily/lvl2nav_tab.jpg);
}
/*Black Lily "page title" - base code*/
h1#page_owner_title {
padding: 90px 0 0 130px;
background-color: #ddd;
background-color: #ecf2f9;
background-color: #456;
background-color: none;
background-color: transparent;
color: #c00;
background-color: #456;
border: none;
background: none;
font-size: 40px;
font-weight: normal;
font-family: serif;
height: 57px;
}
...which, with the rest of the base code, gives you a page as shown by "Image 1" below...
First order of business was to implant an image as the background which involved these two areas in order to have a "transparent" effect for the area above the main body of the theme...
body {
background: url(IMAGE URL);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
/*b/g for MP logo and gnav (Inbox - Groups)*/
table.globalnav {
background: none;
background-color: transparent;
}
With the following modified "nav bar" and "title" CSS...
/*Owner Nav Bar (HORIZONTAL)*/
div.owner_nav {
padding: 0;
/*moves title AND nav bar relative to gnav*/
padding-top: 40px;
/*moves nav bar down relative to title*/
padding-bottom: 250px;
height: 210px;
background: none;
background-color: transparent;
}
div#subnavc {
/*chg (-) to move nav bar left*/
margin-left: 30px;
background: none;
background-color: transparent;
width: auto;
border: none;
}
div#subnav {
width: auto;
padding: 0;
margin: 0;
height: auto;
background: none;
background-color: transparent;
}
/*nav buttons - not "In Use" or hover*/
a.topt, a:visited.topt {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: left;
background: none;
font-size: 18px;
color: #ECE5B6;
font-style: oblique;
font-weight: bold;
font-family: Trebuchet MS, Helvetica, sans-serif;
width: 90px;
height: 19px;
padding: 0;
padding-top: 10px;
background: none;
background-color: transparent;
}
/*hover on all - not "In Use"*/
a.topt:hover, a:visited.topt:hover {
color: #fff;
}
/*"In Use" tab - not hover*/
a.toptsel, a:visited.toptsel {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: left;
background: none;
font-size: 18px;
color: #fff;
font-style: oblique;
font-weight: bold;
font-family: Trebuchet MS, Helvetica, sans-serif;
/*"blink" works in FF only*/
text-decoration: blink;
padding: 0;
padding-top: 10px;
width: 90px;
height: 19px;
background: none;
background-color: transparent;
}
/*"In Use" tab - hover*/
a.toptsel:hover, a:visited.toptsel:hover {
color: #fff;
}
/*End of HORIZONTAL owner nav bar CSS*/
/*TITLE area adjustments for Horizontal nav bar*/
h1#page_owner_title {
padding: 0;
/*moves nav down - must establish div.owner_nav { padding-bottom } FIRST!*/
padding-bottom: 350px;
/*pushes (+) title to right - to line up with body&navbar*/
padding-left: 20px;
background: none;
background-color: transparent;
border: none;
color: #ECE5B6;
font-size: 22px;
font-weight: bold;
font-style: oblique;
font-family: Trebuchet MS, Helvetica, sans-serif;
height: 57px;
}
...you get the effect, as displayed in "Image 2" (IE7) and "Image 3" (FF).
With the following modified "nav bar" and "title" CSS...
/*Owner Nav Bar (VERTICAL)*/
div.owner_nav {
width: auto;
padding: 0px;
/*moves (+) title AND nav bar relative to gnav*/
padding-top: 25px;
/*moves (+) nav bar down relative to title*/
padding-bottom: 285px;
background: none;
}
div#subnavc {
/*adj (-) to bring nav bar left*/
margin-left: 35px;
background: none;
width: 110px;
border: none;
/*chg (+) nav bar relative to title*/
padding-top: 20px;
position: absolute;
}
div#subnav {
padding-left: 8px;
background: none;
border: none;
height: 20px;
}
/*nav buttons - not "In Use" or hover*/
a.topt, a:visited.topt {
line-height: 2.4em;
display: block;
float: left;
width: 110px;
/*spacing between tabs*/
height: 40px;
text-align: left;
font-size: 18px;
color: #ECE5B6;
font-style: oblique;
font-weight: bold;
font-family: Trebuchet MS, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
background: none;
background: url();
background-repeat: no-repeat;
background-position: center;
border: none;
}
/*hover on all - not "In Use"*/
a.topt:hover, a:visited.topt:hover {
color: #fff;
}
/*"In Use" tab - not hover*/
a.toptsel, a:visited.toptsel {
line-height: 2.4em;
display: block;
float: left;
width: 110px;
/*space below "In Use" tab*/
height: 40px;
text-align: left;
font-size: 18px;
color: #fff;
font-style: oblique;
font-weight: bold;
font-family: Trebuchet MS, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
background: none;
background: url();
background-repeat: no-repeat;
background-position: center;
border: none;
/*to add blinking (FF) "In Use" tab on nav bar*/
text-decoration: blink;
}
/*"In Use" tab - hover*/
a.toptsel:hover, a:visited.toptsel:hover {
color: #fff;
}
/*End of VERTICAL owner nav bar CSS*/
/*TITLE area adjustments for Vertical nav bar*/
h1#page_owner_title {
background-color: transparent;
/*pushes (+) "title" to rt - to line up with body&navbar*/
padding-left: 40px;
/*will push title & nav bar down - more space between gnav, less space between Welcome box*/
padding-top: 20px;
color: #ECE5B6;
font-size: 22px;
font-weight: bold;
font-style: oblique;
font-family: Trebuchet MS, Helvetica, sans-serif;
height: 57px;
}
...you get the effect, as displayed in "Image 4" (IE7) and "Image 5" (FF).
I inserted /* notes */ in appropriate areas of the codes with an explanation regarding the relevancy of changes in each area to give you latitude for personal tweaking...Hopefully, they are understandable by all!
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, I do not advise pasting any /* notes */ contained by the brackets (ie; { } ) in with your Custom CSS as they may cause problems for you when you validate your CSS such as coming up with a misplaced semi-colon. Save yourself the frustration...lol
I want to take this opportunity to thank Linda (Dantcer), for the image that seemed so fitting as it went with the original colors of the Black Lily theme...Thank You, Linda!
Happy trails....
UPDATE: As of the "upgrade", mid June 2008, you MUST remove all /* notes */ within the brackets, ie { } , so the validator doesn't strip the height and width from the Custom CSS!
|
With my wanting to open up the space between my page title and the navigation bar, 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 theme is Skyline, and it is the only theme I've worked with. I can only give you legitimate findings in this realm, but it may give you an idea of what you may be able to do with other themes. This all came about as the result of many "trials & errors"...I shouldn't be the only one...lol This is the base CSS pertaining to the positioning of the "owner navigation bar" of the Skyline 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: 260px;
width: auto;
padding: 25px 0px 285px 0px;
background: none;
}
/*owner nav bar - BG & border*/
div#subnav {
padding: 1px;
padding-left: 30px; 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 {
padding-left: 25px;
}
This is what I came up with...
JFYI: The image I am using is 750x562px...
body {
background-color: #000000;
/* GTO - image from http://www.gtoforum.com/photopost/showphoto.php/photo/454/limit/views */
background-image:url(IMAGE URL);
background-attachment: scroll;
background-position: top center;
background-repeat: no-repeat;
width: auto;
} You also realize that you have options at this point...ie:
background-attachment: fixed;
background-position: center;
Another feature that can be used with this rendition is the vertical navigation bar...Thanks go to Denim, my friend, who passed this concept on to me...and which I modified to fit the illusion I wanted:
/*Navigation bar*/
div.owner_nav {
border: none;
margin: auto;
height: 260px;
width: auto;
padding: 25px 0px 285px 0px;
background: none;
}
/*Vertical Nav bar CSS from Denim - modified*/
div#subnavc {
background: none;
width: 110px;
border: none;
/*moved bar down fr title - and to rt*/
padding-top: 60px;
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 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) no-repeat 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) no-repeat 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 "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); no-repeat center;*/
border: none;
/*to add blinking (FF) "In Use" tab on nav bar*/
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) no-repeat center;*/
border: none;
}
/*end of modified vertical CSS*/
This is what I came up with...
 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!
 Link: http://www.getpaint.net/Paint.NET is free image and photo editing software for computers that run Windows. It features an intuitive and innovative user interface with support for layers, unlimited undo, special effects, and a wide variety of useful and powerful tools. An active and growing online community provides friendly help, tutorials, and plugins.
 Link: http://www.resize2mail.com/Resize 2 mail is an online resize website utility developed for digital camera owners, webmasters, people travelling or anybody who quickly wants to resize a digital image for email or publishing on a web site.
Click link for more information
| |
Link: 
