EzFiction by Kali: Spacing Between News Items

That's because you didn't add the news_break class to your stylesheet. Unless you do that, it's meaningless, and therefore, ignored.

Also, since you already  have the "newssig" class in the skin (though it's also not in the stylesheet), you should use that and add a bottom margin or border to that instead of adding a completely new class.

Try adding this to the style.css file in the skin folder:

.newssig {margin-bottom: 1em; border-bottom: 1px solid #000;}

Delete the "<div class="news_break"></div>" that you added.

Thanks, will try that.

I didn't actually change anything in the css regarding adding or deleting classes for news related bits, just tried to work with editing the original/default.

I did the above, but there is still no noticeable break between news articles.

Here is the new newsbox.tpl:

<!-- START BLOCK : newsbox -->
<div class="newsbox {oddeven}">
<div class="newstitle">{newstitle} {adminoptions}</div>
{newsstory}<br /><br />
--{newsauthor} on {newsdate} {newscomments}
</div>
<!-- END BLOCK : newsbox -->

Here is the .css:

/* Some definitions used everywhere */
BODY {
background: #333 url(images/stripes.png);
color: #000;
margin: 0;
padding: 0;
text-align: center;
font: 12px arial;
}

IMG {
border: 0;
padding: 0;
margin: 0;
}
/* Header cells in tables throughout the site */
TH {
background: #ad0000;
color: #FFF;
font-weight: bold;
}
/* links */
A {
color: #666;
font-weight: bold;
text-decoration: none;
}
/* hovering links */
A:hover {
color: #333;
font-weight: bold;
text-decoration: none;
}


#container {
width: 85%;
margin: auto;
text-align: center;
background-color: #fff;
}

/* the box at the top of the page */
#banner {
height: 160px;
background: #000000 url(images/top_image.jpg) top left repeat-x;
}

/* #bannerimage{
float: left;
height: 160px;
background: #000000 url(images/left_top_image.gif) top left;
text-align: left;
width: 350px;
} */

#featured {
margin-left:400px;
text-align: left;
font-weight: bold;
padding: 15px;
color: #fff;
}

.headertitle {
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #006dcc;
margin-bottom: 5px;
}

#featured a:link, #featured a:visited {
color: #006dcc;
text-decoration: none;
font-weight: bold;
}

#featured a:hover{
color: #999;
text-decoration: none;
font-weight: bold;
}

#navigation {
background: #ccc url(images/greybg.gif) repeat-x top left;
}

#search {
text-align: right;
padding: 3px;
}


/* The location of the div containing the RSS link in the banner area */
#rss {
position: absolute;
right: 50px;
top: 55px;
}

/* the following defines your menu below the banner div */
/* the box around the menu and aligning the text to center */
#menu {
padding-top: 5px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
font-size: 12px;
background: url(images/menubg.gif) repeat-x #006dcc;
}

#menulist {
padding: 0px;
margin: 0px;
text-align: left;
}

#menulist ul {
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#menulist li {
display: inline;
list-style-type: none;
}

#menulist a {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 7px;
padding-right: 7px;
margin-right: 3px;
}

#menulist a:link, #menulist a:visited {
color: #fff;
text-decoration: none;
font-weight: bold;
}

#menulist a:hover{
color: #000;
text-decoration: none;
font-weight: bold;
}


/* the footer box at the bottom of the page */
#footercon {
clear:both
}

#footercon a:link {color:#fff;}

#footerinfo,#footersearch,#footerbottom{
background:#ccc url(images/greybg.gif) repeat-x top left
}

#footerinfo a:link {color:#000;}

#footersearch{
text-align: right;
}

#footerinfo {
padding:1px 0 2px 6px
}

#footer,#footertitle,#footerbottom{
background:#5d5d5d url(images/blackbg.gif) repeat-x top left
}


#footersearch {
padding:3px 0 2px 6px
}

#footerbottom {
padding:5px 5px 0 5px;
color: #fff;
}


#footerbottom a{
color: #999;
}

#footertitle {
padding:4px;
color: #ccc;
font-weight: bold;
text-align: left;
}

/* End universal page setup */

/* this is a carryover from 1.1. Generally it is used around tables and table cells. */
.tblborder {
padding: 6px;
border-collapse: collapse;
}

/* Main page surrounds the text between the header and the footer.
For IE, height is set to 650 to force the footer down to the bottom of the page where the content is short.
And the second declaration is for everyone else so that it will scroll if longer but be a minimum of 650px
*/
#mainpage {
height: 550px;
padding: 15px;
background: #FFF;
text-align: left;
}
html>body #mainpage {
height: auto;
min-height: 550px;
}

/* This makes the actual story text appear in a 750px box, which prevents those at 800x600 from having to scroll sideways to view the story. To remove it, just delete this css and the "div id=skinny" tag (and the closing tag) from viewstory.tpl
*/

#skinny{
margin: auto;
width: 750px;
padding: 5px;
}


/* Most pages use pagetitle to format the page's title */
#pagetitle {
border-top: 4px solid #000;
border-bottom: 1px solid #006dcc;
text-align: center;
font-size: 14px;
color: #666;
padding: 3px
font-weight: bold;
margin-top: 1em;
margin-bottom: 1em;
}

/*
Where there's a list of alphabet links #alphabet controls their look.
Just to make things simpler #pagelinks controls the look of the links at the bottom of multi-page results
and will be set here too. Generally, they look alike.
*/
/* the box around the links */
#alphabet, #pagelinks {
text-align: center;
word-spacing: .1em;
margin: 1em;
}
/* each link */
#alphabet A, #pagelinks A {
color: #FFF;
text-decoration: none;
font-weight: bold;
background: #ad0000;
border: 1px solid #ad0000;
border-collapse: collapse;
padding: 0 2px;
}
/* each link when hovered over */
#alphabet A:hover, #pagelinks A:hover {
background: #dbdbdb;
color: #fff;
}
/* the currently selected letter and currently selected page */
#alphabet #current_letter, #pagelinks #currentpage {
background: #FFF;
color: #333;
font-weight: bold;
border: 1px solid #ad0000;
padding: 0 2px;
}
/* End alphabet and page link declarations */

/* labels throughout the site in forms and in other places */
LABEL, .classification {
color: #666;
font-weight: bold;
}
/* Admin options in various places. */
.adminoptions {
color: #ad0000;
font-weight: bold;
}

/* The listings of stories etc. */
/* .sectionheader styles the headings "Stories" and "Series" */
.sectionheader {
border-top: 4px solid #000;
border-bottom: 1px solid #006dcc;
text-align: center;
font-size: 14px;
font-weight: bold;
padding: 3px;
color: #666;
}

/* The box around each individual story */
.listbox {
margin: 1em 5%;
border: 1px solid #dbdbdb;
}

/* The title bar for each story box. */
.listbox .title {
background: url(images/menubg.gif) repeat-x #006dcc;
color: #FFF;
font-weight: bold;
padding: 4px;
padding-left: 8px;
}

.listbox .title a:link {color:#999;}

/* The content of the box...summary, categories, etc. */
.listbox .content {
padding: 6px;
background-color: #ffffff;
}

/* The tail info published date etc. on the last line */
.listbox .tail {
background: #ccc url(images/greybg.gif) repeat-x top left;
padding: 4px;
}

/*End story/series listings */

/* titleblock is used for the title information in series and challenges */
#titleblock {
margin: 0 10%;
}

/* The pulldown jump menus on several pages. */
.jumpmenu {
text-align: right;
margin-right: 1em;
}

/* On the story page, there's a jumpmenu at the bottom. It looks better centered, so this will replace the declaration above for that
drop down list ONLY */
#pagelinks .jumpmenu {
text-align: center;
}

/* This is used on series and challenges and other places where a response is solicited */
.respond {
text-align: center;
padding: 6px;
}

/* The sort menu on the categories page */
#sort { text-align: center; margin: 1em; }


/* On pages that don't use listings, the content is surrounded by a div labeled output to */
#output {
padding: 10px;
}

/* User Profile stuff */
/* The top list of information */
#profile {
margin: 1em 10%;
}
/* The sort menu in the profile */
#profile #sort {
text-align: right;
font-weight: bold;
color: #9ab96e;
}
/* The following declarations control the tabs */
/* The outer tab box */
#tabs {
background: #ad0000;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
text-align: center;
margin: 0;
padding: 0;
}
/* The individual tabs. */
#tabs span {
font-size: 12px;
background: #dbdbdb;
border: 1px solid #000;
padding: 3px;
}
/* Links in the tabs */

#tabs #active {
background: #ad0000;
color: #fff;
}

/* This controls the look of the blocks on the index page. */

/* The box around the block */
.block {
margin-bottom: 1.5em;
background: url(images/blockbg.gif) top left repeat-x #ededed;
}

/* The block's title */
.block .title {
border-top: 4px solid #000;
border-bottom: 1px solid #006dcc;
font-weight: bold;
font-size: 16px;
color: #666;
padding: 2px;
padding-left: 8px;
margin-bottom: 3px;
}

/* The block's content */
.block .content {
padding: 6px;

}

#leftindex {
width: 200px;
float: left;
}

#rightindex {
margin-left: 220px;
}


/* The next link at the bottom of a multi-chapter story */
#next { float: right; }
/* The previous link at the bottom of a multi-chapter story */
#prev { float: left; }

#browse #category_content { width: 95% !important; margin: 1em auto; }

#loginblock {
margin: 3px 0 0 0;
text-align: right;
}

#loginblock .textbox, #loginblock .checkbox {
}

#loginblock .button {
padding: 0;
margin: 0;
font-weight: bold;
font-family: "Arial";
}
#loginlinks {
display: inline;
}
#loginlinks A {
color: #999;
}

.newssig {margin-bottom: 1em; border-bottom: 1px solid #000;}

Change your news.tpl back to what you originally posted and just remove the line I mentioned above.

A note on html/css. If you have an id (#id) or class (.class) in your html, it must be styled in the CSS or it is meaningless. If you have an id or class in your stylesheet, you must attached it to an tag in the html or it is meaningless.

Your first problem was that you referenced a class that you did not style in your CSS. Your second is that, though you styled the correct class in your css, you removed it from your html. (And also, as an aside, you took out too many </div> tags and that is going to cause you problems too.)

Change your news.tpl back to what you originally posted and just remove the line I mentioned above.

That's just it. I didn't have to remove the line. When I went back to look at the news.tpl again, what I posted above was all of the information that was there. I have no idea what happened to the rest of is.

(It is possible that I copied the wrong news.tpl. I will double check to make certain that the original copy was from the skin I was working on.)

A note on html/css. If you have an id (#id) or class (.class) in your html, it must be styled in the CSS or it is meaningless. If you have an id or class in your stylesheet, you must attached it to an tag in the html or it is meaningless.

Your first problem was that you referenced a class that you did not style in your CSS. Your second is that, though you styled the correct class in your css, you removed it from your html. (And also, as an aside, you took out too many </div> tags and that is going to cause you problems too.)

Again, I'm only working from the original .css, I didn't change, remove, or add anything other than the header.tpl to make the banner random/rotating.

I think you must have been looking in the wrong place the first time then.

Change your news.tpl to the following:

<!-- START BLOCK : newsbox -->
<div class="newsbox {oddeven}">
<div class="newstitle">{newstitle} {adminoptions}</div>
{newsstory}<br /><br />
<div id="newssig">--{newsauthor} on {newsdate} {newscomments}</div>
</div>
<!-- END BLOCK : newsbox -->