Photoblog Format


<h1>Photoblog Format</h1>
Modification on the <a href="http://www.movabletype.org/default-templates.html" target="_blank">default-templates</a> 
from Movable Type; modified by <a href="http://blogstyles.com" target="_blank">blogstyles.com</a>.<br>
<br>
For previews, check out <a href="http://blogstyles.com/photo/photoview.php">Photoblog Preview</a>.  
Hint, you can click on the sidebar links to change the colors to see which one you like best!<br>
<br>
<span class="money">New!</span>: 2 sets of <a href="http://blogstyles.com/photo/">new styles</a> are available for a small fee - they work along with this tutorial and only require pasting a new stylesheet into Movable Type.<br>
<br>
For a tutorial and specs on this design, check out <a href="http://blogstyles.com/photo/tutorial.php">Photoblog Tutorial</a>.<br>
<br>
  Uses a design based on <a href="http://love-productions.com/snap" target="_blank">Snap!</a>, 
  Kristine's personal photoblog.<br>
<br> 
<form>
<b>Main Index Template</b><br>
<br><br><br>
<b>Individual Archive Template</b><br>
<br><br><br>
<b>Date-based Archive Template</b><br>
<b>Category Archive Template</b><br>
<i>(The same template works for both archives!)</i>
<br><br><br>

<b>styles-site.css:</b> Blue<br>
<textarea cols="50" name="text" rows="10" wrap="virtual">
body { margin : 0px 0px 10px 0px; background-color : #CEE7FF; color : Black; font-size : 12px; font-family : Verdana, Tahoma, sans-serif; 
	scrollbar-face-color:#4DA8FF;scrollbar-shadow-color: #CEE7FF;scrollbar-highlight-color: #99CCFF;
	scrollbar-3dlight-color: #99CCFF;scrollbar-darkshadow-color:Black;scrollbar-track-color: #CEE7FF;scrollbar-arrow-color: #6A5ACD;}
	
table, td {	font-size: 10px;}
p { margin : 0px; font-size : 10px; }
img, image, .img { border : solid 1px black; margin : 2px;  background-color : #FFFFFF;  padding : 2px;}

A, A:LINK { color : #4DA8FF; text-decoration : none; font-weight : bold; }
A:visited	{ color : #007FF9; text-decoration : none; }
A:hover, A:ACTIVE		{ color : #6A5ACD;  }
 
#banner, #banner-commentspop { color : Black; font-size : 20px; font-weight : bold; border-bottom : 2px dotted #6A5ACD; border-top : 5px solid #99CCFF; background : #4DA8FF; padding : 15px; text-transform : uppercase; letter-spacing : .2em; }
.description { color : #6A5ACD; font-size : 12px; font-weight : bold; text-transform : none; letter-spacing : .none; }

#content { float : left; width : 65%; margin-right : 15px; padding : 20px;  background-color : #CEE7FF;  border-right : solid 1px black;   }
#links { padding-right : 15px; }
#menu { font-weight:bold;margin-bottom : 15px; font-size: 14px;   color : #CEE7FF; background-color:black;text-align:right; padding: 2px;}

.blog { padding-left : 15px; padding-top : 15px; padding-right : 15px;  background-color : #CEE7FF;  }
.blogbody { color : #333; font-size : 11px; font-weight : normal; line-height : 14px; padding-left : 10px; padding-right : 10px; padding-top : 10px; }
 .subject {	font-size: 10px; line-height: 9px; text-transform:lowercase;letter-spacing: .1em;  color : #333333;}
.blogdate	{ font-size : 16px; color : #6A5ACD;  padding-left: 15px; font-weight : bold;  background-color : #CEE7FF;  }
.blogfoot	{ font-size : 11px; color : #6A5ACD;  padding-right: 15px;margin-bottom : 15px; margin-top: 15px;text-transform : lowercase;  padding-left : 15px;  }
	
#calendar { color : #6A5ACD; font-size : 10px; font-weight : normal; line-height : 14px; padding : 1px;align : center; }
.calendarhead { font-size : 10px; font-weight : bold; line-height : 14px; padding : 1px; }

.side { color : #333; font-size : 11px; font-weight : normal; line-height : 14px; padding : 2px; background-color : #99CCFF; }
.sidetitle { color : Black; font-size : 14px; font-weight : bold; line-height : 14px; padding : 3px; background-color : #4DA8FF;margin-top : 10px; text-align : center; text-transform : uppercase; letter-spacing : .2em;  border-bottom : 1px dotted  #99CCFF;  border-top : solid 2px #99CCFF;      }
.syndicate { font-size : 9px; font-weight : bold; line-height : 14px; padding : 2px; margin-top : 10px; text-align : center; }
.powered { font-size : 9px; font-weight : bold; border-top : 1px solid #4DA8FF; border-bottom : 1px solid #99CCFF; line-height : 14px; text-transform : uppercase; padding : 2px; margin-top : 10px; text-align : center; letter-spacing : .2em; }

.comments-body { color : #6A5ACD; font-size : 11px; font-weight : normal; line-height : 14px; padding : 10px; }
.comments-post { color : #6A5ACD; font-size : 10px; font-weight : normal; }
.comments-head	{ font-size : 11px; color : #6A5ACD; padding : 5px; font-weight : bold; margin-top : 10px; }
.comments-body { color : #333; font-size : 11px; font-weight : normal; line-height : 12px; padding-left : 10px; padding-right : 10px; }
		
input,  select, textarea { color : Black; background-color : #4DA8FF; 
border: solid 1px #000000; font-size : 11px; }

		
div.float { float : left; padding: 2px;}
div.float p { text-align : center; }
div.container { border : 1px solid #000000;  background-color : #CEE7FF;  }
div.spacer { clear : both; }
</textarea>
<br><br><br>

<b>styles-site.css:</b> Red<br>
<textarea cols="50" name="text" rows="10" wrap="virtual">
body { margin : 0px 0px 10px 0px; background-color : #FFCCCC; color : Black; font-size : 12px; font-family : Verdana, Tahoma, sans-serif; 
	scrollbar-face-color: #CC0000;scrollbar-shadow-color: #FFCCCC;scrollbar-highlight-color: #FF9999;
	scrollbar-3dlight-color: #FF9999;scrollbar-darkshadow-color:Black;scrollbar-track-color: #FFCCCC;scrollbar-arrow-color: Red;}
	
table, td {	font-size: 10px;}
p { margin : 0px; font-size : 10px; }
img, image, .img { border : solid 1px black; margin : 2px;  background-color : #FFFFFF;  padding : 2px;}

A, A:LINK { color : #CC0000; text-decoration : none; font-weight : bold; }
A:visited	{ color : #990000; text-decoration : none; }
A:hover, A:ACTIVE		{ color : Red;  }
 
#banner, #banner-commentspop { color : Black; font-size : 20px; font-weight : bold; border-bottom : 2px dotted Red; border-top : 5px solid #FF9999; background : #CC0000; padding : 15px; text-transform : uppercase; letter-spacing : .2em; }
.description { color : #990000; font-size : 12px; font-weight : bold; text-transform : none; letter-spacing : .none; }

#content { float : left; width : 65%; margin-right : 15px; padding : 20px;  background-color : #FFCCCC;  border-right : solid 1px black;   }
#links { padding-right : 15px; }
#menu { font-weight:bold;margin-bottom : 15px; font-size: 14px;   color : #FFCCCC; background-color:black;text-align:right; padding: 2px;}

.blog { padding-left : 15px; padding-top : 15px; padding-right : 15px;  background-color : #FFCCCC;  }
.blogbody { color : #333; font-size : 11px; font-weight : normal; line-height : 14px; padding-left : 10px; padding-right : 10px; padding-top : 10px; }
.subject {	font-size: 10px; line-height: 9px; text-transform:lowercase;letter-spacing: .1em;  color : #333333;}
.blogdate	{ font-size : 16px; color : Red;  padding-left: 15px; font-weight : bold;  background-color : #FFCCCC;  }
.blogfoot	{ font-size : 11px; color : Red;  padding-right: 15px;margin-bottom : 15px; margin-top: 15px;text-transform : lowercase;  padding-left : 15px;  }
	
#calendar { color : Red; font-size : 10px; font-weight : normal; line-height : 14px; padding : 1px;align : center; }
.calendarhead { font-size : 10px; font-weight : bold; line-height : 14px; padding : 1px; }

.side { color : #333; font-size : 11px; font-weight : normal; line-height : 14px; padding : 2px; background-color : #FF9999; }
.sidetitle { color : Black; font-size : 14px; font-weight : bold; line-height : 14px; padding : 3px; background-color : #CC0000;margin-top : 10px; text-align : center; text-transform : uppercase; letter-spacing : .2em;  border-bottom : 1px dotted  #FF9999;  border-top : solid 2px #FF9999;      }
.syndicate { font-size : 9px; font-weight : bold; line-height : 14px; padding : 2px; margin-top : 10px; text-align : center; }
.powered { font-size : 9px; font-weight : bold; border-top : 1px solid #CC0000; border-bottom : 1px solid #FF9999; line-height : 14px; text-transform : uppercase; padding : 2px; margin-top : 10px; text-align : center; letter-spacing : .2em; }

.comments-body { color : Red; font-size : 11px; font-weight : normal; line-height : 14px; padding : 10px; }
.comments-post { color : Red; font-size : 10px; font-weight : normal; }
.comments-head	{ font-size : 11px; color : Red; padding : 5px; font-weight : bold; margin-top : 10px; }
.comments-body { color : #333; font-size : 11px; font-weight : normal; line-height : 12px; padding-left : 10px; padding-right : 10px; }
		
input,  select, textarea { color : Black; background-color : #CC0000; 
border: solid 1px #000000; font-size : 11px; }

		
div.float { float : left; padding: 2px;}
div.float p { text-align : center; }
div.container { border : 1px solid #000000;  background-color : #FFCCCC;  }
div.spacer { clear : both; }
</textarea>
<br><br><br>
<b>styles-site.css:</b> Orchid<br>
  <textarea cols="50" name="textarea" rows="10" wrap="virtual">
body { margin : 0px 0px 10px 0px; background-color : #FFCCFF; color : Black; font-size : 12px; font-family : Verdana, Tahoma, sans-serif; 
	scrollbar-face-color: #DA70D6;scrollbar-shadow-color: #FFCCFF;scrollbar-highlight-color: #E498E1;
	scrollbar-3dlight-color: #E498E1;scrollbar-darkshadow-color:Black;scrollbar-track-color: #FFCCFF;scrollbar-arrow-color: #BA55D3;}
	
table, td {	font-size: 10px;}
p { margin : 0px; font-size : 10px; }
img, image, .img { border : solid 1px black; margin : 2px;  background-color : #FFFFFF;  padding : 2px;}

A, A:LINK { color : #91258C; text-decoration : none; font-weight : bold; }
A:visited	{ color : #663366; text-decoration : none; }
A:hover, A:ACTIVE		{ color : #BA55D3;  }
 
#banner, #banner-commentspop { color : Black; font-size : 20px; font-weight : bold; border-bottom : 2px dotted #BA55D3; border-top : 5px solid #E498E1; background : #DA70D6; padding : 15px; text-transform : uppercase; letter-spacing : .2em; }
.description { color : #663366; font-size : 12px; font-weight : bold; text-transform : none; letter-spacing : .none; }

#content { float : left; width : 65%; margin-right : 15px; padding : 20px;  background-color : #FFCCFF;  border-right : solid 1px black;   }
#links { padding-right : 15px; }
#menu { font-weight:bold;margin-bottom : 15px; font-size: 14px;   color : #FFCCFF; background-color:black;text-align:right; padding: 2px;}

.blog { padding-left : 15px; padding-top : 15px; padding-right : 15px;  background-color : #FFCCFF;  }
.blogbody { color : #333; font-size : 11px; font-weight : normal; line-height : 14px; padding-left : 10px; padding-right : 10px; padding-top : 10px; }
 .subject {	font-size: 10px; line-height: 9px; text-transform:lowercase;letter-spacing: .1em;  color : #333333;}
.blogdate	{ font-size : 16px; color : #BA55D3;  padding-left: 15px; font-weight : bold;  background-color : #FFCCFF;  }
.blogfoot	{ font-size : 11px; color : #BA55D3;  padding-right: 15px;margin-bottom : 15px; margin-top: 15px;text-transform : lowercase;  padding-left : 15px;  }
	
#calendar { color : #BA55D3; font-size : 10px; font-weight : normal; line-height : 14px; padding : 1px;align : center; }
.calendarhead { font-size : 10px; font-weight : bold; line-height : 14px; padding : 1px; }

.side { color : #333; font-size : 11px; font-weight : normal; line-height : 14px; padding : 2px; background-color : #E498E1; }
.sidetitle { color : Black; font-size : 14px; font-weight : bold; line-height : 14px; padding : 3px; background-color : #DA70D6;margin-top : 10px; text-align : center; text-transform : uppercase; letter-spacing : .2em;  border-bottom : 1px dotted  #E498E1;  border-top : solid 2px #E498E1;      }
.syndicate { font-size : 9px; font-weight : bold; line-height : 14px; padding : 2px; margin-top : 10px; text-align : center; }
.powered { font-size : 9px; font-weight : bold; border-top : 1px solid #DA70D6; border-bottom : 1px solid #E498E1; line-height : 14px; text-transform : uppercase; padding : 2px; margin-top : 10px; text-align : center; letter-spacing : .2em; }

.comments-body { color : #BA55D3; font-size : 11px; font-weight : normal; line-height : 14px; padding : 10px; }
.comments-post { color : #BA55D3; font-size : 10px; font-weight : normal; }
.comments-head	{ font-size : 11px; color : #BA55D3; padding : 5px; font-weight : bold; margin-top : 10px; }
.comments-body { color : #333; font-size : 11px; font-weight : normal; line-height : 12px; padding-left : 10px; padding-right : 10px; }
		
input,  select, textarea { color : Black; background-color : #DA70D6; 
border: solid 1px #000000; font-size : 11px; }

		
div.float { float : left; padding: 2px;}
div.float p { text-align : center; }
div.container { border : 1px solid #000000;  background-color : #FFCCFF;  }
div.spacer { clear : both; }
</textarea>
  <br>
  <br><br>
<b>styles-site.css:</b> Monochrome<br>
<textarea cols="50" name="text" rows="10" wrap="virtual">
body { margin : 0px 0px 10px 0px; background-color : #E5E5E5; color : Black; font-size : 12px; font-family : Verdana, Tahoma, sans-serif; 
	scrollbar-face-color: #A4A4A4;scrollbar-shadow-color: #E5E5E5;scrollbar-highlight-color: #BEBEBE;
	scrollbar-3dlight-color: #BEBEBE;scrollbar-darkshadow-color:Black;scrollbar-track-color: #E5E5E5;scrollbar-arrow-color: #939393;}
	
table, td {	font-size: 10px;}
p { margin : 0px; font-size : 10px; }
img, image, .img { border : solid 1px black; margin : 2px;  background-color : #FFFFFF;  padding : 2px;}

A, A:LINK { color : #666666; text-decoration : none; font-weight : bold; }
A:visited	{ color : #4C4C4C; text-decoration : none; }
A:hover, A:ACTIVE		{ color : #939393;  }
 
#banner, #banner-commentspop { color : Black; font-size : 20px; font-weight : bold; border-bottom : 2px dotted #939393; border-top : 5px solid #BEBEBE; background : #A4A4A4; padding : 15px; text-transform : uppercase; letter-spacing : .2em; }
.description { color : #4C4C4C; font-size : 12px; font-weight : bold; text-transform : none; letter-spacing : .none; }

#content { float : left; width : 65%; margin-right : 15px; padding : 20px;  background-color : #E5E5E5;  border-right : solid 1px black;   }
#links { padding-right : 15px; }
#menu { font-weight:bold;margin-bottom : 15px; font-size: 14px;   color : #E5E5E5; background-color:black;text-align:right; padding: 2px;}

.blog { padding-left : 15px; padding-top : 15px; padding-right : 15px;  background-color : #E5E5E5;  }
.blogbody { color : #333; font-size : 11px; font-weight : normal; line-height : 14px; padding-left : 10px; padding-right : 10px; padding-top : 10px; }
 .subject {	font-size: 10px; line-height: 9px; text-transform:lowercase;letter-spacing: .1em;  color : #333333;}
.blogdate	{ font-size : 16px; color : #939393;  padding-left: 15px; font-weight : bold;  background-color : #E5E5E5;  }
.blogfoot	{ font-size : 11px; color : #939393;  padding-right: 15px;margin-bottom : 15px; margin-top: 15px;text-transform : lowercase;  padding-left : 15px;  }
	
#calendar { color : #939393; font-size : 10px; font-weight : normal; line-height : 14px; padding : 1px;align : center; }
.calendarhead { font-size : 10px; font-weight : bold; line-height : 14px; padding : 1px; }

.side { color : #333; font-size : 11px; font-weight : normal; line-height : 14px; padding : 2px; background-color : #BEBEBE; }
.sidetitle { color : Black; font-size : 14px; font-weight : bold; line-height : 14px; padding : 3px; background-color : #A4A4A4;margin-top : 10px; text-align : center; text-transform : uppercase; letter-spacing : .2em;  border-bottom : 1px dotted  #BEBEBE;  border-top : solid 2px #BEBEBE;      }
.syndicate { font-size : 9px; font-weight : bold; line-height : 14px; padding : 2px; margin-top : 10px; text-align : center; }
.powered { font-size : 9px; font-weight : bold; border-top : 1px solid #A4A4A4; border-bottom : 1px solid #BEBEBE; line-height : 14px; text-transform : uppercase; padding : 2px; margin-top : 10px; text-align : center; letter-spacing : .2em; }

.comments-body { color : #939393; font-size : 11px; font-weight : normal; line-height : 14px; padding : 10px; }
.comments-post { color : #939393; font-size : 10px; font-weight : normal; }
.comments-head	{ font-size : 11px; color : #939393; padding : 5px; font-weight : bold; margin-top : 10px; }
.comments-body { color : #333; font-size : 11px; font-weight : normal; line-height : 12px; padding-left : 10px; padding-right : 10px; }
		
input,  select, textarea { color : Black; background-color : #A4A4A4; 
border: solid 1px #000000; font-size : 11px; }

		
div.float { float : left; padding: 2px;}
div.float p { text-align : center; }
div.container { border : 1px solid #000000;  background-color : #E5E5E5;  }
div.spacer { clear : both; }
</textarea></form>