I want a divider between each post on my news page (http://http://www.shaunhillphotography.co.uk/news/), like the one on
http://pexeto.com/acoustic_wp/blog/

 

I have a valid installation of this theme, but it just didn't cut it. So I have been working with an alternative theme. However, I miss the above described feature and would like it reintroduced using the alternative theme.

I expect I will need to make a modification to a php file, so that the theme automatically inserts this divider between each news article automatically, along with inserting

 

.category-news{width: 100%;display: block;border-top: 1px solid 
#ebebeb;border-bottom: 1px solid #f5f5f5;}
 

into the custom CSS file.

Does anyone know how I would go about doing this?

Edited February 21, 201313 yr by Ben

Hi,

See attached screenshot of what i've done.

 

You'll need to add a new div between each post element, this will be in the php...

 

<div id="content-sm">

<div id="post-750"></div>

<div class="post-spacer"></div>

<div id="post-751"></div>

</div>

 

Then give the styling:

.post-spacer {
    border-bottom: 1px solid #F5F5F5;
    border-top: 1px solid #EBEBEB;
    display: block;
    font-size: 1px;
    height: 1px;
    margin: 0 0 20px;
    width: 100%;
}
 

 

To neaten up the other elements alter some of the existing styles e.g.

Remove both the borders from ".entry-utility"

And change the margin on to .post to margin: 0 0 1em;

Edited February 21, 201313 yr by SEOLover

<div id="content-sm">
       <div id="post-750"></div>
       <div class="post-spacer"></div>
       <div id="post-751"></div>
</div>

 

Thank you for your reply.

 

Am I searching for <div id="content-sm"> within the theme php files?

 

Regarding the rest (tidying and adding stuff), is this what you mean?

#body{
	line height: 0px
}

#branding{
	width: 250px
}

#breadcrumb{
    padding-top: 25px;
}

#container{
    background: none repeat scroll 0 0 transparent;
    line heigh: 0px
    border: 0 solid #CCCCCC;
    float: left;
    margin: 0 0 15px;
    padding: 0 25px;
    width: 910px;
    }
	
#content-sm{
	width: 100%;
	float: left;
    padding-top: 25px;
    padding-right: 0%;
}	

.entry-utility {
    width: 100%;
    display: block;
}

#footer {
	border-top:0px;
}

h1 {
	border-bottom:0px;
}
	
.menu a .cufon {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.menu a:hover .cufon {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ED1C22;
}

p {
	margin-bottom:0.5em;
}

.post-110{
    padding-top: 2px;
	margin: 0 0 1em;
}

.post-1003{
    padding-top: 25px;
	margin: 0 0 1em;
}

.post-spacer {
    border-bottom: 1px solid #F5F5F5;
    border-top: 1px solid #EBEBEB;
    display: block;
    font-size: 1px;
    height: 1px;
    margin: 0 0 20px;
    width: 100%;
}

#riva-slider-1-shell {
    overflow: hidden; 
    width: 985px;
    margin-left: -25px;
}

td{
width:100%;
height:50px;
}

#wrapper{
	overflow: hidden;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border: 1px goutset #ffffff;
	background-color:#fff;
}
/*
#widget-area{
    hidden
}
*/

Yes i'd do a search, many dvanced text/html editors can do a "find in files" - so you could just do a search for "content-sm" within the theme directory and find it that way.

 

Yes your styling looks fine you just need to add:

 

.post { margin: 0 0 1em;}

 

You don't need to add anything else e.g. remove .post-110, .post-1003 etc

Thank you for your reply. I tried 1em but the spacing between one post and the heading of the next was confusing, so I made it 2em. This looks fine for all the entries, except at the bottom of the page.

 

#body{
	line height: 0px
}

#branding{
	width: 250px
}

#breadcrumb{
    padding-top: 25px;
}

#container{
    background: none repeat scroll 0 0 transparent;
    line heigh: 0px
    border: 0 solid #CCCCCC;
    float: left;
    margin: 0 0 15px;
    padding: 0 25px;
    width: 910px;
    }
	
#content-sm{
    width: 100%;
	float: left;
    padding-top: 25px;
    padding-right: 0%;
}	

.entry-utility {
    width: 100%;
    display: block;
}

#footer {
	border-top:0px;
}

h1 {
	border-bottom:0px;
}
	
.menu a .cufon {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.menu a:hover .cufon {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ED1C22;
}

p {
	margin-bottom:0.5em;
}

.post { margin: 0 0 2em;}

.post-spacer {
    border-bottom: 1px solid #F5F5F5;
    border-top: 1px solid #EBEBEB;
    display: block;
    font-size: 1px;
    height: 1px;
    margin: 0 0 20px;
    width: 100%;
}

#riva-slider-1-shell {
    overflow: hidden; 
    width: 985px;
    margin-left: -25px;
}

td{
width:100%;
height:50px;
}

#wrapper{
	overflow: hidden;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border: 1px goutset #ffffff;
	background-color:#fff;
}
/*
#widget-area{
    hidden
}
*/

 

I searched for content-sm and there are a lot of results within a lot of PHP files. However, there isn't any DIV styling within the PHP files. Is this alright?

Edited February 21, 201313 yr by Sheepdisease

It is probably in index . php as it is a wordpress site, but would quite easily be in a different file depending on the theme.

 

Also, I have noticed that on a larger screen, the content DIV floats to the right, im not sure if that is the desired affect? My screen resolution is 1920px wide. Hope this helps, its looking nice btw

 

Leon.

Thank you for the feedback. I don't want anything to go out of line, do you know what I need to do to fix that?

Wow, you were right. First place I attempted to insert the divider and it worked:

 

index.php

<?php /* The entry content */ ?>					
<div class="entry-content">	
<?php the_content( __( 'Continue reading <span class="meta-nav">»</span>', 'photocrati-framework' )  ); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'photocrati-framework' ) . '&after=</div>') ?>
				</div><!-- .entry-content -->
				<div id="post-750"></div>
				<div class="post-spacer"></div>
				<div id="post-751"></div>

 

That's awesome. Just need to alter the appearance now I think?

 

How do I fix this DIV problem?

Can't you just give a class to all your posts and style that class with a bottom-border and some extra margin? I don't use WP so not sure if it's possible but if it is then you won't need to use an empty div.

Like that man says ^ pretty sure they have a class post

Sounds like a possibility, does anyone else have any experience in this area?

.post{border-bottom: 3px double #EBEBEB;}

Thank you for the reply. Unfortunately, when I replaced the existing .post style with yours it messed up the appearance of divider between the posts.

 

Any idea why?

 

I've just done a search using the website and noticed the divider doesn't appear.

 

http://www.shaunhillphotography.co.uk/?s=wedding

 

What php file needs editing to insert this?

<!-- #entry-utility -->	
    <div id="post-750"><padding-top: 50px></div>
	<div class="post-spacer"></div>
	<div id="post-751"></div>      

Dont replace add to the existing css and remove the div post spacer

 

.post {
margin: 0 0 2em;
border-bottom: 1px solid #EBEBEB;
box-shadow: 0 1px 0 #ffffff,0 2px 0 #f5f5f5;}

 

using box-shadow to get your different colours

Edited February 21, 201313 yr by mteam

Thank you for the suggestion, but when I tried that it didn't produce any effect under each post, and furthermore it messed up the picture slider on the front page because it added px25% padding to the left.

add the code so i can see on your link

 

it wouldn't add padding left to anything you must be doing something wrong

Yep, I must have done something wrong. The code you have given me is what I needed all along, to avoid having to actually amend any PHP!

 

I've been trying to copy the CSS styling to get the links underneathe to appear with the same spacing and on the right hand side like on http://pexeto.com/acoustic_wp/blog/ to no avail. What do I need to add in order to get this to happen?

 

Thank you so much for your help.

.entry-utility {

width: 100%;

display: block;

margin-bottom: 1px;

overflow: auto;/*added this line*/

}

.cat-links{

float: right;

padding: 0 4px 7px 0;/*adjust to suit*/

}

Every time you reply you bring joy into my life! Thank you.

 

How do I replace the standard 'Search' button with the graphical button which is contained within the search function on the website pexeto website I linked to previously (showing as a widget on that page). I have modified it so that it is more consistent with the theme thus far.

 

Couple of questions about this page:

 

http://www.shaunhillphotography.co.uk/contact/

 

Why doesn't the 'website' field appear like the rest and why is there a strange space on the right hand side?

space on right hand side is because your tables width is smaller

 

If you look at the css for the search button on the pexeto website its all there

How do I get the icon for email to appear the way that it does for email (without editing the CSS for that element type globally)?

 

http://www.shaunhillphotography.co.uk/contact/

Edited February 24, 201313 yr by Sheepdisease