...

View Full Version : Image Post Divider



JeannetteKP
10-20-2010, 04:10 PM
My blog is http://www.jeannettekaufmannphotography.com/blog

I'd like to add a image post divider between posts on my blog. I found a plugin in but I can't get it to work. The plug in is called Add a Separator. I'd like to either get the plugin to work or find code that will work. Thank you.

Here is my CSS.



/*
Theme Name: PhotoLounge
Theme URI: http://wordpress.org/
Description: A sleek, practical, and user-friendly Photography Blog Theme by <a href="http://www.slrlounge.com">SLR Lounge</a>.
Version: 1.0
Author: SLR Lounge
Author URI: http://slrlounge.com/
Tags: photography, custom header, fixed width, one columns, widgets
*/

/*Begin Commonly Edited Attributes */


a {
text-decoration: none;
}

a:hover, h2 a:hover, h3 a:hover {
color:#6281a3;
}

h1, h2, h3 {clear:both;}


body {
font-size: 13px;
font-family:Century Gothic, Helvetica, sans-serif;
color: #291b18;
text-align: center;
margin:0;
padding: 0;

}

.postmetadata {
clear: center;}

#pageborders {
width:1030px;
min-height:100%;
background-image:url(images/border-sides.png);
background-repeat:repeat-y;
margin:auto;
}


#border-bottom {
height:15px;
width:1000px;
background:url(images/border-bottom.png);
}

#page {
text-align: left;
margin:0 auto;
background-color: white;
margin:auto;
padding:0;
width:1000px;

}

.column {
padding:20px 40px;
margin:auto;
width: 850px; /*this controls the width of the content */
clear:both;
}

.post {
margin: 0 0 40px;
text-align: justify;
}

.clear {
clear: both;
}




/* General Attributes */

h1, h2, h3 {
text-transform:uppercase;
font-weight:normal; /*This used to make the titles of each post not bold */
}

h2 {
font-size: 18px;
}

h2.pagetitle { /* These are the attributes for the Title of Archives, Categories, etc*/
font-size:18px;
text-align:left;
float:left;
margin:0;
display:block;
color:#291b18;
}


h1, h1 a, h1 a:hover, h1 a:visited {
text-decoration: none;
color: 6281a3;
}

h2, h2 a, h2 a:visited, h3 {
color:#6281a3;
}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
text-decoration: none;
}

h1 {
padding-top: 70px;
margin: 0;
}

h2 {
margin: 20px 0 0 0;
}

h2.pagetitle {
margin-top:20px;
text-align: center;
}

h3 {
padding: 0;
margin:10px 0 0;
}

h3.comments {
padding: 0;
margin: 40px auto 20px ;
}
/* End Headers */



/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}

/* End Images */


/*start comments */
.commentlist li, #commentform input, #commentform textarea {
font: 0.9em Century Gothic, Helvetica, sans-serif;
}
.commentlist li ul li {
font-size: 1em;
}
.commentlist li {
font-weight: bold;
}

.commentlist li .avatar {
float: right;
padding: 2px;
background: #fff;
}

.commentlist cite, .commentlist cite a {
font-style: normal;
font-size: 14px;
}

.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}

#commentform p {
font-family: Century Gothic, Helvetica, sans-serif;
}

.commentmetadata {
font-weight: normal;
}

/*end comments*/

/*Start Header */

#header {
background-color:#000;
margin:0;
padding:0;
width: 1000px;
}

#logoimg {
text-align:center;

}

#headerimg {
margin:0;
width: 1000px;
}

/**** End Header ***/

/* Start Menu Items */

#menu {
list-style:none;
margin:0;
padding:0;
background:#ccc;
width:1000px;
height:100%;
border:none;
}


#menu:after {
content:'';
display:block;
clear:both;
}

#menu li {
padding:0 20px 0 20px;
float:left;
margin:13px 0;
color:#666;
text-transform:uppercase;
z-index:99;

}


#menu li a {
color:#291b18;
vertical-align:bottom;
font-size:12px;
}

#menu li.hover a,#menu li:hover a,#menu li.hover,#menu li:hover {
position: relative;

}

#menu li.hover ul, #menu li:hover ul {
display: block;
}

/*start drop-down menus on the top menu*/

#menu ul {
padding:0;
margin:0 0 0 -10px;
list-style:none;
width:108px;
display: none; /*******if you delete this, your drop down menu will appear randomly on the page somewhere **/
position: absolute;
font-family:Century Gothic, Helvetica, sans-serif;
}


#menu ul li a { /*This is the drop down stufff */
text-align:left;
float:right;
background:none;
margin:0px 0 -10px -35px;
padding:0 0 0 20px;
font-size:11px;


}

#menu ul li a:hover {color:#6281a3;}

/*end drop-down menus on the top menu*/

/*Featured Section */

#top_content {
width:1000px;
margin:auto;
border-bottom:2px solid #4b4b4b;
}

#featured_posts {
width:960px;
height:20px;
margin:0px auto;
padding:0;
clear:both;


}

#featured_posts p {
font-size:18px;
padding:0;
text-decoration:none;
text-align:center;
font-family:Century Gothic, Helvetica, sans-serif;
color:#666;



}

#list {
width:100%;
margin:0;
padding:0;
overflow:hidden;


}

.slider {
float:left;
margin:0;
position:relative;
visibility:hidden;
width:100%;
height:109px;
border-top:3px solid #000;
border-bottom:3px solid #000;
border-left:0px solid #000;
border-right:0px solid #000;
overflow:hidden;


}


/* this controls the space between the posts */

.slider ul li {
padding:0; /*control space between the images */
border-right:3px solid #000;

}

.slider ul li img {
cursor:pointer;
height:109px;
width:165px;
padding:0;

}

/* end Featuerd Section */

/************************************************
CAPTIFY CAPTION
************************************************/
.caption-top, .caption-bottom {
background: #000000;
color: #ffffff;
cursor:default;
padding:2px;
font-size:11px;
text-align:center;
}

.caption-top {
border-width:0px;
}

.caption-bottom {
border-width:0px;
}

.caption a, .caption a {
background:#000;
border:none;
text-decoration:none;
padding:2px;
}

.caption a:hover, .caption a:hover {
background:#202020;
}



/*end*/
/*begin menu navigation flower */
body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
color: #fff;
background: #930;
}
/* end */


/*start header section containing sociables, search, profile, etc*/

#header_bottom {
width:1000px;
display:block;
clear:both;
}

#page_line {
height:2px;
width:1000px;
display:block;
clear:both;
}

#header_bottom_right {
float:left;
display:inline;
width:65%;
padding:7px 0 0 0;
font-size:14px;
}

#header_bottom_left {
float:left;
display:inline;
width:30%;
}

.profile_vert {
width:50%;
clear:none;
}

.profile_vert img {
cursor:pointer;
height:160px;
width:240px;
margin:20px 0 20px 25px;
}

.profile_ls img {
cursor:pointer;
height:240px;
width:160px;
padding:0;
margin:
}




/*end header section containing sociables, search, profile, etc*/


/*start widgetized footer */

.footer {
height:100%;
width:1000px;
background-color:#ffffff;
position:relative;
float:left;
padding:10px 0 10px 0;
border-top:1px solid #6281a3;

}

.grid_4 h2 {
color:#333333;
clear:both;

}


.grid_4 a {
color:#999999;
}

.grid_4 a:hover {
color:#6281a3;
}

.grid_4 li {
list-style:none;
margin:0;
padding:0;
color:#999999;
}

.grid_4 ul {
list-style:none;
margin:0;
padding:7px 0;
}

.recentcomments, #recentcomments {
float:left;
margin:0;
padding:7px 0;
}

.widget widget_recent_entries {
margin:0;
padding:0;
}






/* Body >> Footer Blog Roll
----------------------------------------------------------------------------------------------------*/
.footer ul.blogroll li a {
color:#291b18;
background: url(images/arrow.gif) 2% 50% no-repeat;
}
.footer ul.blogroll li a:hover {
color:#6281a3;
background:url(images/arrow.gif) 2.5% 50% no-repeat;
text-decoration:none;
}

.footer h2 {
margin:0;
}
/* Body >> Footer Blog Roll
----------------------------------------------------------------------------------------------------*/

.footer ul.blogroll {margin:0; padding:0; list-style:none; list-style-position:inside;}
.footer ul.blogroll li {margin-bottom:2px; }
.footer ul.blogroll li {width:140px;float:left; line-height:15px;}
.footer ul.blogroll li a {display:block;padding:5px 10px 5px 20px; }
.footer ul.blogroll li a:hover {}

/* Body >> Recent Comments
----------------------------------------------------------------------------------------------------*/

ul.recentcomment { margin:0; padding:0; list-style:none; }
ul.recentcomment li { display:block;margin-bottom:2px;padding:5px 10px 5px 0px; overflow:hidden; height:100%;}

ul.recentcomment li span {display:block;}


ul.recentcomment li a {
color:#291b18;
}
ul.recentcomment li a:hover {
color:#6281a3;
text-decoration:none;
}


#sidebar { /*Note: this theme does not utilize a sidebar in the traditional sense. Instead, it is used as part of the footer */
width:1000px;
margin:auto;
}
/*end widgetized footer */




/* Begin Lists */

html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}

html>body .entry li {
margin: 7px 0 8px 10px;
}

.entry ul li:before, #sidebar ul ul li:before {
: "\00BB \0020";
}

.entry ol {
padding: 0 0 0 30px;
margin: 0;
}

.entry ol li {
margin: 0;
padding: 0;
}

.postmetadata ul, .postmetadata li {
display: inline;
list-style-type: none;
list-style-image: none;
}


/* End Entry Lists */



/* Begin Form Elements */
/* 2.2.3 Search */

#search1 { background:#ffffff no-repeat; height:25px; width:165px; margin:9px 3px 0px 0; position:relative; float:left; display:inline;}
#search1 input { background:none; border:none; width:154px; margin:4px 0 0 5px; font-size:12px; color:#9d9d9d; }
#search1 input.submit { position:absolute; right:8px; top:5px; width:15px; height:16px; padding:0; margin:0; }


#rss{margin:7px 0px 5px 0; display:inline; clear:none; float:left; display:inline;}

#menu_right {float:right; overflow:hidden; height:100%; width:222px; display:inline;}


.share_here {
margin:25px 0 0 32px;
float:left;

}

.shareit-box h2{
margin:10px 0 0 0;
padding:0;

}


.entry form { /* This is mainly for password protected posts, makes them look better. */
text-align:center;
}

select {
width: 130px;
}

#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}

#commentform {
margin: 5px 10px 0 0;
}
#commentform textarea {
width: 100%;
padding: 2px;
}
#respond:after {
: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#commentform #submit {
margin: 0 0 5px auto;
float: right;
clear:both;
}
/* End Form Elements */



/* Begin Comments*/
.alt {
margin: 0;
padding: 10px;
}

.commentlist {
padding: 0;
text-align: justify;
}

.commentlist li {
margin: 15px 0 10px;
padding: 5px 5px 10px 10px;
list-style: none;

}
.commentlist li ul li {
margin-right: -5px;
margin-left: 10px;
}

.commentlist p {
margin: 10px 5px 10px 0;
}
.children { padding: 0; }

#commentform p {
margin: 5px 0;
}

.nocomments {
text-align: center;
margin: 0;
padding: 0;
}

.commentmetadata {
margin: 0;
display: block;
}
/* End Comments */


/* Various Tags & Classes */

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

acronym, abbr, span.caps {
cursor: help;
}

acronym, abbr {
border-bottom: 1px dashed #999;
}

blockquote {
margin: 15px 30px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}

blockquote cite {
margin: 5px 0 0;
display: block;
}

.center {
text-align: center;
}

.hidden {
display: none;
}

.screen-reader-text {
position: absolute;
left: -1000em;
}

hr {
display: none;
}

a img {
border: none;
}

.navigation {
display: block;
text-align: center;
margin-top: 10px;
margin-bottom: 60px;
}

.slideshows {
width:750px;
height:auto;
margin:auto;
padding:none;
}
/* End Various Tags & Classes*/

/*grid CSS */

/*
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/

Licensed under GPL and MIT.
*/


/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
margin-left: auto;
margin-right: auto;
width: 996px;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
margin-left: 0;
}

.omega {
margin-right: 0;
}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
width:63px;
}

.container_12 .grid_2 {
width:146px;
}

.container_12 .grid_3 {
width:229px;
}

.container_12 .grid_4 {
width:312px;
}

.container_12 .grid_5 {
width:395px;
}

.container_12 .grid_6 {
width:478px;
}

.container_12 .grid_7 {
width:561px;
}

.container_12 .grid_8 {
width:644px;
}

.container_12 .grid_9 {
width:727px;
}

.container_12 .grid_10 {
width:810px;
}

.container_12 .grid_11 {
width:893px;
}

.container_12 .grid_12 {
width:976px;
}



/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_1 {
padding-left:83px;
}

.container_12 .prefix_2 {
padding-left:166px;
}

.container_12 .prefix_3 {
padding-left:249px;
}

.container_12 .prefix_4 {
padding-left:332px;
}

.container_12 .prefix_5 {
padding-left:415px;
}

.container_12 .prefix_6 {
padding-left:498px;
}

.container_12 .prefix_7 {
padding-left:581px;
}

.container_12 .prefix_8 {
padding-left:664px;
}

.container_12 .prefix_9 {
padding-left:747px;
}

.container_12 .prefix_10 {
padding-left:830px;
}

.container_12 .prefix_11 {
padding-left:913px;
}



/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_1 {
padding-right:83px;
}

.container_12 .suffix_2 {
padding-right:166px;
}

.container_12 .suffix_3 {
padding-right:249px;
}

.container_12 .suffix_4 {
padding-right:332px;
}

.container_12 .suffix_5 {
padding-right:415px;
}

.container_12 .suffix_6 {
padding-right:498px;
}

.container_12 .suffix_7 {
padding-right:581px;
}

.container_12 .suffix_8 {
padding-right:664px;
}

.container_12 .suffix_9 {
padding-right:747px;
}

.container_12 .suffix_10 {
padding-right:830px;
}

.container_12 .suffix_11 {
padding-right:913px;
}



/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .push_1 {
left:83px;
}

.container_12 .push_2 {
left:166px;
}

.container_12 .push_3 {
left:249px;
}

.container_12 .push_4 {
left:332px;
}

.container_12 .push_5 {
left:415px;
}

.container_12 .push_6 {
left:498px;
}

.container_12 .push_7 {
left:581px;
}

.container_12 .push_8 {
left:664px;
}

.container_12 .push_9 {
left:747px;
}

.container_12 .push_10 {
left:830px;
}

.container_12 .push_11 {
left:913px;
}



/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_1 {
left:-83px;
}

.container_12 .pull_2 {
left:-166px;
}

.container_12 .pull_3 {
left:-249px;
}

.container_12 .pull_4 {
left:-332px;
}

.container_12 .pull_5 {
left:-415px;
}

.container_12 .pull_6 {
left:-498px;
}

.container_12 .pull_7 {
left:-581px;
}

.container_12 .pull_8 {
left:-664px;
}

.container_12 .pull_9 {
left:-747px;
}

.container_12 .pull_10 {
left:-830px;
}

.container_12 .pull_11 {
left:-913px;
}




/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}

/* Body >> Share Post
----------------------------------------------------------------------------------------------------*/
.shareit-box {
padding:20px;
clear:both;
overflow:hidden;
height:100%;
}

.shareit-box h2 {float:left;display:inline-block;}
.shareit-box ul {margin:0;padding:0; list-style:none; float:right;}
.shareit-box li {display:inline; float:left; padding:2px; margin:2px;}
.shareit-box li a img {width:32px; height:32px;}
/* Body >> Share Post
----------------------------------------------------------------------------------------------------*/
.shareit-box {
background:#f5f5f5;
border:1px solid #ddd;
}

.shareit-box h2, related-post h2 {
border-bottom:none;
}

.shareit-box h2, { font:bold 18px "Trebuchet MS",Tahoma, verdana,sans-serif; margin:10px 0; }

abduraooft
10-21-2010, 09:36 AM
You don't need to have an extra plugin or any php/html code to add a separator in between posts. Setting a border to div.post{ } in CSS would be enough!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum