Okay here we go!
Be sure you use either wordpad, or notepad to do this. Other programs such as "OfficeOrg" or "Microsoft Works" will not work, they alter the code.
1. Just to get it all straight, the CSS below needs to go into a new style sheet. So click the edit style sheet button, and when they open go to the bottom where it says, Make a New Style Sheet.
2. Clear everything in the large text area, then copy and paste the new CSS into the box, name it in the provided area and click update.
CSS:
- Code: Select all
<setvar color1 = #104F05>
<setvar color2 = #103F08>
<setvar color3 = #BFBFBF>
<setvar color4 = #2E6F22>
<setvar color5 = #FFFFFF>
<setvar color6 = #260000>
<setvar color7 = #240000>
<setvar color8 = #FFFFFF>
<setvar color9 = #1D7F17>
<setvar color10 = #247F1F>
<setvar color11 = #0E7F07>
<setvar color12 = #320000>
<setvar color13 = #CFCFCF>
A {
COLOR: <getvar color1>; TEXT-DECORATION: none
}
A:link {
COLOR: <getvar color1>; TEXT-DECORATION: bold
}
A:visited {
COLOR: <getvar color2>; TEXT-DECORATION: none
}
A:active {
COLOR: <getvar color3>; TEXT-DECORATION: none
}
A:hover {
COLOR: <getvar color4>; TEXT-DECORATION: bold
}
A.thumbnail {
BORDER-RIGHT: <getvar color5> 1px solid; BORDER-TOP: <getvar color5> 1px solid;
DISPLAY: block; BACKGROUND: <getvar color6>;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -45px; BORDER-LEFT: <getvar color5> 1px solid; WIDTH: 172px;
PADDING-TOP: 5px; BORDER-BOTTOM: <getvar color5> 1px solid; HEIGHT: 197px
}
A.thumbnail:link {
BORDER-RIGHT: <getvar color5> 1px solid; BORDER-TOP: <getvar color5> 1px solid;
DISPLAY: block; BACKGROUND: <getvar color6>;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -45px; BORDER-LEFT: <getvar color5> 1px solid;
WIDTH: 172px; PADDING-TOP: 5px; BORDER-BOTTOM: <getvar color5> 1px solid; HEIGHT: 197px
}
A.thumbnail:visited {
BORDER-RIGHT: <getvar color5> 1px solid; BORDER-TOP: <getvar color5> 1px solid;
DISPLAY: block; BACKGROUND: <getvar color6>;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -45px; BORDER-LEFT: <getvar color5> 1px solid; WIDTH: 172px;
PADDING-TOP: 5px; BORDER-BOTTOM: <getvar color5> 1px solid; HEIGHT: 197px
}
A.thumbnail:active {
BORDER-RIGHT: <getvar color5> 1px solid; BORDER-TOP: <getvar color5> 1px solid;
DISPLAY: block; BACKGROUND: <getvar color6>;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -45px; BORDER-LEFT: <getvar color5> 1px solid; WIDTH: 172px;
PADDING-TOP: 5px; BORDER-BOTTOM: <getvar color5> 1px solid; HEIGHT: 197px
}
A.thumbnail:hover {
BORDER-RIGHT: <getvar color3> 1px solid; BORDER-TOP: <getvar color3> 1px solid;
DISPLAY: block; BACKGROUND: <getvar color7>;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
MARGIN-BOTTOM: -45px; BORDER-LEFT: <getvar color3> 1px solid; WIDTH: 172px;
PADDING-TOP: 5px; BORDER-BOTTOM: <getvar color3> 1px solid; HEIGHT: 197px
}
BODY {
MARGIN-TOP: 0px; BACKGROUND: <getvar color8>; MARGIN-BOTTOM: 20px
}
DIV {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 10px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
TH {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 11px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
TR {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
TABLE {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: -27px; MARGIN-BOTTOM: 7px;
FONT: 12px verdana, arial, sans-serif; BORDER-LEFT: 0px;
COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
TABLE.luis {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px;
FONT: 10px verdana, arial, sans-serif; BORDER-LEFT: 0px;
COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
FONT {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 11px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
LI {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 11px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
UL {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 11px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
FORM {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 11px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
BLOCKQUOTE {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
P {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color10>; BORDER-BOTTOM: 0px
}
B {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
I {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
FONT {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 11px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
CENTER {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color4>; BORDER-BOTTOM: 0px
}
FONT {
DISPLAY: block; FONT: 9px Verdana, Tahoma, Helvetica, sans-serif;
MARGIN-LEFT: 4px; WIDTH: 170px; COLOR: <getvar color9>; MARGIN-RIGHT: 4px;
LETTER-SPACING: 0px
}
H3 {
FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND: <getvar color5>;
PADDING-BOTTOM: 8px; BORDER-LEFT: 0px; COLOR: <getvar color11>;
LINE-HEIGHT: normal; PADDING-TOP: 8px; FONT-STYLE: normal;
LETTER-SPACING: 0px; TEXT-ALIGN: center; FONT-VARIANT: normal
}
IMG {
BORDER-RIGHT: <getvar color5> 1px; BORDER-TOP: <getvar color5> 1px;
BORDER-LEFT: <getvar color5> 1px; BORDER-BOTTOM: <getvar color5> 1px
}
IMG.thumbnail {
BORDER-RIGHT: <getvar color5> 1px solid; PADDING-RIGHT: 0px;
BORDER-TOP: <getvar color5> 1px solid; PADDING-LEFT: 0px;
BACKGROUND: <getvar color12>; PADDING-BOTTOM: 0px; MARGIN: 0px;
VERTICAL-ALIGN: middle; BORDER-LEFT: <getvar color5> 1px solid;
PADDING-TOP: 0px; BORDER-BOTTOM: <getvar color5> 1px solid
}
INPUT {
BORDER-RIGHT: <getvar color5> 1px solid; BORDER-TOP: <getvar color5> 1px solid;
BORDER-LEFT: <getvar color5> 1px solid; BORDER-BOTTOM: <getvar color5> 1px solid
}
TABLE.thumbnail {
WIDTH: 10%
}
TD {
BORDER-RIGHT: 1px; BORDER-TOP: 1px;
BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: 1px;
BORDER-BOTTOM: 1px; BORDER-COLLAPSE: collapse; empty-cells: show
}
TD.message_body {
BORDER-RIGHT: 1px; BORDER-TOP: 1px; DISPLAY: block; BACKGROUND: <getvar color5>;
BORDER-LEFT: 1px; BORDER-BOTTOM: <getvar color5> 1px dotted
}
.caption {
COLOR: <getvar color3>; FONT-STYLE: italic
}
.display {
BORDER-RIGHT: <getvar color5> 1px solid; BORDER-TOP: <getvar color5> 1px solid;
BACKGROUND: <getvar color5>;
FILTER: progid:DXImageTransform.Microsoft.Shadow(color="#141414",Direction=135,Strength=6);
BORDER-LEFT: <getvar color5> 1px solid; BORDER-BOTTOM: <getvar color5> 1px solid
}
.lid {
BACKGROUND: <getvar color13>00; FONT: 11px Verdana, Tahoma, Helvetica, sans-serif;
COLOR: <getvar color5>; TEXT-DECORATION: none
}
.message_body {
MARGIN: 5px 5px 10px;
FONT: 10px Verdana, Tahoma, Helvetica, sans-serif; COLOR: <getvar color9>
}
.sb {
BACKGROUND: <getvar color5>; FONT: 12px Verdana, Tahoma, Helvetica, sans-serif;
COLOR: <getvar color11>; TEXT-DECORATION: bold
}
BODY {
MARGIN-TOP: 0px; TOP: 0px
}
BODY {
}
BODY TABLE A IMG {
DISPLAY: inline
}
HR {
POSITION: relative
}
3. After you've updated, click the link below saying "return to gallery"
4. On the stylesheet choices, chose the new stylesheet in the box then click update.
That finishes the CSS.
Now for the HTML:
5. Clear everything in the "Gallery description area, and be sure the box underneath is checked which says, "Check here if using html, uncheck for auto formatting."
6. Copy & Paste the new code below into the description, and click update:
- Code: Select all
<div class="galleryheader">
<br><p align="center">
<td align="center"><p align="center"><img src="http://www.pbase.com/franpurdy/image/103275370/original.jpg"></td>
<br> <!--- menu starts here --->
<table class="luis" border="0" cellpadding="0" cellspacing="0" width="800">
<br><br></p></center>
<tbody>
<tr>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" height="2"></td></tr>
<tr align="center">
<td><a href="http://www.pbase.com/franpurdy"><h3>Home</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="5"></td>
<td><a href="http://www.pbase.com/franpurdy/portraits"><h3>Portraits</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="5"></td>
<td><a href="http://www.pbase.com/franpurdy/pets"><h3>Pets</h3> </a> </td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="5"></td>
<td><a href="http://www.pbase.com/franpurdy/prints"><h3>Prints</h3></a></td>
<td><a href="http://www.pbase.com/franpurdy/client_area"><h3>Client Area</h3></a></td>
<td><a href="http://feeds.pbase.com/feeds/franpurdy/photos.atom"><h3>RSS Feed</h3></a></td>
<td><a href="mailto:fran@franpurdy.com"><h3>Email</h3></a></td>
<td><a href="http://upload.pbase.com/edit_gallery/franpurdy/root"><h3>Edit</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="5"></td>
</tr></tbody></table><!--- menu ends here ---><br>
<br><table border="0" cellpadding="10" cellspacing="0" width="80%">
<tbody><tr valign="top">
<td align="center" width="60%"><br><br>
SLIDESHOW(prints, size=medium, delay=3, loop=yes)
<br><br>Copyrighted C 2008 Fran Purdy LRPS.<br>
</td>
<td valign="middle" width="40%"> Photography has always been my passion. I was fortunate enough to study photography full time back in the 80's, before digital cameras were even dreamed of, and learned how to develop photographs using smelly chemicals in dark rooms!</p>
<p align="left">These days I use a Nikon D300, and process my images using Photoshop, but the thrill is still the same. Last year I was a finalist in The Daily Telegraph's 'Our Lives' photography competition, selected from over 50,000 entrants. This year I've been awarded membership of the Royal Photographic Society, and have made my mother proud by putting letters after my name (even if she doesn't know what they stand for!)</p>
<p align="left">I am now taking bookings for human and pet portraits, and commissions for any other genre of photography; be it food, fashion or the occasional wedding.</p> <p align="left">Please <a href="mailto:fran@franpurdy.com">CONTACT ME</a> to discuss any of your photographic needs.
<br>To get news of photo updates, please subscribe to my RSS Feed - link at top.</td></tr></tbody></table></td><!--- end right column ---></td>
</tr>
<tr><td colspan="2" align="center">
<br><center>
<br></center></td>
</tr>
</tbody></table>
<br></center>
<br><!--<br--><br>
<!-- END user desc -->
I've tested this in Firefox, IE and Safari with all screen resolutions using medium sized photos. This is for the Main "ROOT" gallery ONLY.
We'll worry about the others when this is taken care of. The test gallery I used can be seen here:
http://www.pbase.com/dang/fran