Hi Matthew,
Basically, You remove them within the CSS, and add them back in the HTML. For example, here's the coding adapted from "Luis" which I added for Scott, to his specifications:
http://www.pbase.com/lapradeChange as needed, but I'd suggest adding credit links to Luis, and Pbase. If you have any questions, pmail me and I'll get back to you.
Here's the style sheet CSS, just changing the "servar color #'s" makes changes throughout the page, really easy:
- Code: Select all
<setvar color1 = #ffffff>
<setvar color2 = #CFCFCF>
<setvar color3 = #DFDFDF>
<setvar color7 = #363636>
<setvar color5 = #3F0000>
<setvar color6 = #EFEFEF>
<setvar color4 = #000000>
<setvar color9 = #CF0C26>
<setvar color8 = #FF6600>
<setvar color10 = #4F0F0F>
A {
COLOR: <getvar color1>; TEXT-DECORATION: none
}
A:link {
COLOR: <getvar color1>; TEXT-DECORATION: BOLD
}
A:visited {
COLOR: <getvar color8>; TEXT-DECORATION: none
}
A:active {
COLOR: <getvar color9>; TEXT-DECORATION: none
}
A:hover {
COLOR: <getvar color8>; TEXT-DECORATION: UNDERLINE
}
A.thumbnail {
BORDER-RIGHT: <getvar color1> 1px solid; BORDER-TOP: <getvar color1> 1px solid;
DISPLAY: block; BACKGROUND: <getvar color7>;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -60px; BORDER-LEFT: <getvar color2> 1px solid; WIDTH: 172px;
PADDING-TOP: 2px; BORDER-BOTTOM: <getvar color2> 1px solid; HEIGHT: 214px
}
A.thumbnail:link {
BORDER-RIGHT: <getvar color2> 1px solid; BORDER-TOP: <getvar color2> 1px solid;
DISPLAY: block; BACKGROUND: <getvar color10>;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -60px; BORDER-LEFT: <getvar color2> 1px solid;
WIDTH: 172px; PADDING-TOP: 2px; BORDER-BOTTOM: <getvar color2> 1px solid; HEIGHT: 214px
}
A.thumbnail:visited {
BORDER-RIGHT: <getvar color9> 1px solid; BORDER-TOP: <getvar color9> 1px solid;
DISPLAY: block; BACKGROUND: <getvar color5>;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -60px; BORDER-LEFT: <getvar color9> 1px solid; WIDTH: 172px;
PADDING-TOP: 2px; BORDER-BOTTOM: <getvar color9> 1px solid; HEIGHT: 214px
}
A.thumbnail:active {
BORDER-RIGHT: <getvar color1> 1px solid; BORDER-TOP: <getvar color1> 1px solid;
DISPLAY: block; BACKGROUND: <getvar color4>;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -60px; BORDER-LEFT: <getvar color1> 1px solid; WIDTH: 172px;
PADDING-TOP: 2px; BORDER-BOTTOM: <getvar color1> 1px solid; HEIGHT: 214px
}
A.thumbnail:hover {
BORDER-RIGHT: <getvar color1> 1px solid; BORDER-TOP: <getvar color1> 1px solid;
DISPLAY: block; BACKGROUND: <getvar color4>;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
MARGIN-BOTTOM: -60px; BORDER-LEFT: <getvar color2> 1px solid; WIDTH: 172px;
PADDING-TOP: 2px; BORDER-BOTTOM: <getvar color2> 1px solid; HEIGHT: 214px
}
BODY {
MARGIN-TOP: 0px; BACKGROUND: <getvar color5>; MARGIN-BOTTOM: 20px
}
DIV {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color2>; BORDER-BOTTOM: 0px
}
TH {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color1>; BORDER-BOTTOM: 0px
}
TR {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color1>; 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 color3>; BORDER-BOTTOM: 0px
}
TABLE.luis {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px;
FONT: 12px verdana, arial, sans-serif; BORDER-LEFT: 0px;
COLOR: <getvar color9>; BORDER-BOTTOM: 0px
}
FONT {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color3>; BORDER-BOTTOM: 0px
}
LI {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color1>; BORDER-BOTTOM: 0px
}
UL {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color1>; BORDER-BOTTOM: 0px
}
FORM {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color1>; BORDER-BOTTOM: 0px
}
BLOCKQUOTE {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color1>; BORDER-BOTTOM: 0px
}
P {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 13px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color3>; BORDER-BOTTOM: 0px
}
B {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color3>; BORDER-BOTTOM: 0px
}
I {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color3>; BORDER-BOTTOM: 0px
}
FONT {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color3>; BORDER-BOTTOM: 0px
}
CENTER {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: <getvar color3>; BORDER-BOTTOM: 0px
}
FONT {
DISPLAY: block; FONT: 9px Verdana, Tahoma, Helvetica, sans-serif;
MARGIN-LEFT: 4px; WIDTH: 170px; COLOR: <getvar color1> ; MARGIN-RIGHT: 4px;
LETTER-SPACING: 0px
}
H3 {
FONT-WEIGHT: normal; FONT-SIZE: 15px; BACKGROUND: <getvar color5>;
PADDING-BOTTOM: 8px; BORDER-LEFT: 0px; COLOR: <getvar color9>;
LINE-HEIGHT: normal; PADDING-TOP: 8px; FONT-STYLE: normal;
LETTER-SPACING: 0px; TEXT-ALIGN: center; FONT-VARIANT: normal
}
IMG {
BORDER-RIGHT: <getvar color3> 1px; BORDER-TOP: <getvar color5> 1px;
BORDER-LEFT: <getvar color3> 1px; BORDER-BOTTOM: <getvar color5> 1px
}
IMG.thumbnail {
BORDER-RIGHT: <getvar color1> 1px solid; PADDING-RIGHT: 0px;
BORDER-TOP: <getvar color1> 1px solid; PADDING-LEFT: 0px;
BACKGROUND: <getvar color5>; PADDING-BOTTOM: 0px; MARGIN: 0px;
VERTICAL-ALIGN: middle; BORDER-LEFT: <getvar color1> 1px solid;
PADDING-TOP: 0px; BORDER-BOTTOM: <getvar color1> 1px solid
}
INPUT {
BORDER-RIGHT: <getvar color4> 1px solid; BORDER-TOP: <getvar color4> 1px solid;
BORDER-LEFT: <getvar color4> 1px solid; BORDER-BOTTOM: <getvar color4> 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 color7>;
BORDER-LEFT: 1px; BORDER-BOTTOM: <getvar color5> 1px dotted
}
.caption {
COLOR: <getvar color1>; 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 color5>; FONT: 11px Verdana, Tahoma, Helvetica, sans-serif;
COLOR: <getvar color1>; TEXT-DECORATION: none
}
.message_body {
MARGIN: 5px 5px 10px;
FONT: 10px Verdana, Tahoma, Helvetica, sans-serif; COLOR:
}
.sb {
BACKGROUND: <getvar color5>; FONT: 14px Verdana, Tahoma, Helvetica, sans-serif;
COLOR: <getvar color1>; TEXT-DECORATION: bold
}
BODY {
MARGIN-TOP: 0px; TOP: 0px
}
BODY {
scrollbar-face-color: <getvar color4>;
scrollbar-shadow-color: <getvar color5>;
scrollbar-highlight-color: <getvar color1>;
scrollbar-3dlight-color: <getvar color7>;
scrollbar-darkshadow-color: <getvar color5>;
scrollbar-track-color: <getvar color2>;
scrollbar-arrow-color: <getvar color9>;
}
BODY TABLE A IMG {
DISPLAY: inline
}
HR {
POSITION: relative
}
And HTML, be sure and change his name to yours in the RSS & other links so they'll work properly before updating your gallery! And click the box under the description field which says, "click here if using html". Lastly, do not change, or remov these photo numbers "56552555". They're transparent spacers used to align the elements.
- Code: Select all
<html lang="en-US"><head>
<p align="center"><img src="http://www.pbase.com/laprade/image/89111722/original.jpg">
<br><center>
<table border="0" cellpadding="3" cellspacing="0" width="800">
<tbody>
<tr>
<td align=left><img src="http://www.pbase.com/image/56552555/original.jpg"></td></tr>
<tr>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" height="8"></td></tr>
<tr>
<td colspan="3" valign="bottom"><!--- menu starts here --->
<table class="luis" border="0" cellpadding="0" cellspacing="0" width="800">
<tbody>
<tr>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" height="8"></td></tr>
<tr align="middle">
<td><a href="http://www.pbase.com/laprade/profile"><h3>Profile</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="8"></td>
<td><a href="http://my.statcounter.com/project/standard/stats.php?project_id=2745641&guest=1"><h3></h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="8"></td>
<td><a href="http://www.pbase.com/laprade/main_gallery"><h3>Past Years Galleries</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="8"></td>
<td><a href="mailto:ffphotog@aol.com"><h3>Email</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="8"></td>
<td><a href="http://www.pbase.com/laprade/other_fire_galleries"><h3>Fire Links</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="8"></td>
<td><a href="http://feeds.pbase.com/feeds/laprade/photos.atom"><h3>RSS Feed</h3>
</a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="8"></td>
<td><a href="http://upload.pbase.com/edit_gallery/laprade/root"><h3>EDIT</h3>
</a></td></tr></tbody></table></td></tr><!--- menu ends here --->
<tr>
<td valign="top"><br>
SLIDESHOW( 100517540, 100517227, 100518417, 100518830, 95946618, 91679914, 91379083, 88442763, 88444600, 84766174, 82715250, 79398193, 79398189, 79398195, 79398186 size=medium, delay=3, loop=yes)
<img id="imgid" src="http://www.pbase.com/image/56552555/original.jpg"></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg"><width="15"></td>
<td bgcolor="#333333" valign="top"><!--- right column --->
<table border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td><p align="center">
<br><p align="center">Welcome to<br> SmokeShowing Photography.</p> My name is Scott LaPrade and I am a 19 year-career firefighter in Leominster Ma on Ladder 1. I have been photographing fires and firefighters in and around the New England area for over 20 years. My web site gives me the opportunity to display photos of firefighters in everyday situations no matter what city or town they are from. <p>Also take a moment to look at other photographers who sites are posted in my "Other fire photography links" page. They have also produced some excellent photos of the best profession in the world that we all can enjoy and most of all learn from. Feel free to post comments on our pages and let us hear what you think. Feedback is always a plus when having a web site. <p>My web site is dedicated to my father Keith E. LaPrade Jr who passed away from my family on July 11th 2006 at the age of 71. He retired in 1996 with 34 years as a Police Detective with the City of Leominster Ma.<p>
</p><p><p/></td></tr></tbody></table></td><!--- end right column --->
</tr>
<tr>
<td colspan="5"><img onload="" src="http://www.pbase.com/image/56552555/original.jpg" height="6"></td></tr><!--- Elated credit <A HREF="http://www.elated.com">http://www.elated.com</A> --->
<tr>
<td colspan="5" align="center">
<p>NEWS: Well, another year passing. 2007 was my 2nd year with having my web site up. Many of you were crucial in helping me out with the site especially Tom Dang from Atlanta Ga. Thanks Tom for all your hard work. On another note, I personally attended 3 Line of duty deaths in 2007 and I can only hope that their will be NO more. When viewing my photo galleries, I hope it will in someway remind us of the dangers we face and to make us use our best judgment every day we get on the "RIG". So remember to RIDE SAFE! Again, thanks to all that continue to return and view "The JOB" and lets hope 2008 proves to be a good year for all. <p> <p> All galleries are available for purchasing either photo's or CD's. Images copyright © Smokeshowingphotography
*All Rights Reserved. No photo duplication in print or electronically without permission.* Please contact me by email above.
<br>To get news of photo updates subscribe to the RSS Feed, click link at top.
</p></td></tr><!--- end elated credit---></tbody></table></center>
<a name="galerias"></a><br><br>
To add the proper credit links to the bottom, change the bottom section below the slide show as shown here:
- Code: Select all
SLIDESHOW( IMAGE URL NUMBER, IMAGE URL NUMBER, IMAGE URL NUMBER, IMAGE URL NUMBER size=medium, delay=3, loop=yes)
<img id="imgid" src="http://www.pbase.com/image/56552555/original.jpg"></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg"><width="15"></td>
<td bgcolor="#333333" valign="top"><!--- right column --->
<table border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td><p align="center">
<br><p align="center"><P> YOUR TEXT HERE YOUR TEXT HERE YOUR TEXT HERE YOUR TEXT HERE YOUR TEXT HERE YOUR TEXT HERE YOUR TEXT HERE YOUR TEXT HERE</p>
</p></td></tr></tbody></table></td><!--- end right column --->
</tr>
<tr>
<td colspan="5"><img onload="" src="http://www.pbase.com/image/56552555/original.jpg" height="6"></td></tr><!--- Elated credit <A HREF="http://www.elated.com">http://www.elated.com</A> --->
<tr>
<td colspan="5" align="center">
<p>ADDITIONAL TEXT CAN BE ADDED HERE</p>
<br>
</p></td></tr><!--- end elated credit---></tbody></table></center>
<a name="galerias"></a><br><br>
Sun Sep 14, 2008 8:29 pm 