How to add a Post Divider

  • cindypchen

    (@cindypchen)


    15 years, 9 months ago

    Hello,

    I have created a jpg file that I would like to use as a separator/divider at the end of each post on my blog.

    My problem is that it is appearing every time I hit the enter/return key instead of just one time at the end of the post.

    My blog is http://www.cindychenphotography.com/blog. Right now, I saved my default settings without the separator since I wasn’t working anyway.

    This is the original css (and what my blog is at currently)

    #content p{
         padding: 0px 0px 15px 0px;
	margin: 0px;
	line-height: 20px;
	}

    This is what I entered (when the divider image was appearing every time I hit the enter key). I found this sample coding while searching though it was written for another wp template.

    #content p{
         margin: 0px 0px 1px 0px;
         padding: 0 0 85px 0;
         background: url(images/separator.jpg) no-repeat center bottom;
         }

    Please let me know what I need to change to make this work. I am not knowledgable when it comes to coding! Thank you so so much!

    Cindy

Viewing 5 replies - 1 through 5 (of 5 total)
  • whooami

    (@whooami)

    15 years, 9 months ago

    #content p{
    margin: 0px 0px 1px 0px;
    padding: 0 0 85px 0;
    background: url(images/separator.jpg) no-repeat center bottom;
    }

    thats going to cause it to display every time a <p> tag is ‘seen’ within the div that’s using id=”content” —

    thats not what you want.

    You arent separating posts using any type of CSS right now, and Im not going to make my suggestion, since it would entail doing that.

    Thread Starter cindypchen

    (@cindypchen)

    15 years, 9 months ago

    Whooami, thank for your explaining so I understand why I am having that problem.

    Since I am not currently separating posts, how would I go about adding in a post divider?

    The website where I had found that sample coding I showed in my earlier post was actually incorrect. The sample said

    .meta-inner {
margin: 0px 0px 1px 0px;
padding: 0 0 85px 0;
background: url(images/myFile.jpg) no-repeat center bottom;
}

    but since I didn’t have a “meta inner” on my template, I put it in #content p. I am guessing now that is the wrong place. Would the divider still go under “content” in the css or someplace different?

    This is the code from my blog css regarding content. I’m not sure if this is helpful to include or not but figured it couldn’t hurt to include it.

    /************************************************
*	Content 					     		    *
************************************************/

#contenttop {
	width: 925px;
	height: 40px;
	margin: 0px auto 0px;
	padding: 0px;
	}

#contentbottom {

	width: 925px;
	height: 30px;
	margin: 0px auto 0px;
	padding: 0px;
	}

#content {
	width: 925px;
	margin: 0px auto 0px;
	padding: 0px 0px 0px 0px;
	}

.title {
	width: 925px;
	margin: 0px auto 0px;
	padding: 0px;
	}

.titleleft {
	width: 195px;
	height: 40px;
	float: left;
	margin: 0px;
	padding: 0px;
	text-align: left;
	}

.titleright {
	width: 195px;
	height: 40px;
	float: right;
	margin: 0px;
	padding: 0px;
	text-align: right;
	}

#content p{
         padding: 0px 0px 15px 0px;
	margin: 0px;
	line-height: 20px;
	}

#content p img{
	border: none;
	margin-bottom: 10px;
	}

#content h1 {
	color: #f40c34;
	font-size: 28px;
	font-family: Times New Roman, Verdana, Arial, Sans-Serif;
	font-weight: normal;
	padding: 0px 0px 0px 0px;
	margin: 0px;
	}

#content h1 a  {
	color: #aed373;
	text-decoration: none;
	}

#content h1 a:hover {
	color: #f40c34;
	text-decoration: none;
	}

#content blockquote p{
	margin: 0px 0px 10px 0px;
	padding: 10px 0px 0px 0px;
	}

blockquote{
	margin: 0px 25px 15px 25px;
	padding: 0px 25px 0px 10px;
	background: #E8E8E8;
	border-top: 2px solid #000000;
	border-bottom: 1px solid #000000;
	}

#content ol{
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 10px 0px;
	}

#content ol li{
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 5px 0px;
	}

#content ul{
	list-style-type: square;
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 10px 0px;
	}

#content ul li{
	list-style-type: square;
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 5px 0px;
	}

#content img.wp-smiley {
	float: none;
	border: none;
	padding: 0px;
	margin: 0px;
	}

#content img.wp-wink {
	float: none;
	border: none;
	padding: 0px;
	margin: 0px;
	}

    Again, thank you for taking the time to help. I hope I am providing enough information.

    Cindy

    Thread Starter cindypchen

    (@cindypchen)

    15 years, 9 months ago

    I am still hoping to add a divider between posts. Can anyone help?

    Thanks,
    Cindy

    Thread Starter cindypchen

    (@cindypchen)

    15 years, 9 months ago

    Bumping.

    Please let me know if I can provide additional information. I am still looking to add a post divider and am lost.

    Thank you!
    Cindy

    ariyo

    (@ariyo)

    15 years, 4 months ago

    Hey Cindy
    I am not sure since I’ve never done it before. However, take a look at your index.php file and find your post loop. Try adding an img tag with a link to the divider image or an empty div (not my favorite) that you can style in CSS and give it a background image AT THE END OF THE LOOP.. I think this would be the easiest way to do it. if you are using a pre-made theme and not familiar with the code try searching for a plug-in or something. There should be different ways to go about doing that, even JavaScript.
    Hope that helps!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to add a Post Divider’ is closed to new replies.