Newsmodul

Das Newsmodul von WebsiteBaker ohne Tabellen und mit CSS3 Formatierungen. Ein kleines Tutorial und ein Free Download.

Newsmodul Tabellenfrei!

Die folgenden codes müssen in die Optionen des Moduls.
WB-Admin – Seite mit Newsmodul – Modul-Abschnitt – Optionen.

<div class="posts-container">

<div class="post_entry">
<div class="post_date">[PUBLISHED_DATE]</div>
<h3 class="post_title"><a href="[LINK]">[TITLE]</a></h3>
<div class="post_short">[SHORT]</div>
<a class="post_readmore" href="[LINK]">[TEXT_READ_MORE]</a>
</div>

<div class="post_footer" style="display: [DISPLAY_PREVIOUS_NEXT_LINKS]">
<div class="post_f1">[PREVIOUS_PAGE_LINK]<span>|</span></div>
<div class="post_f2">[OF]</div>
<div class="post_f3"> [NEXT_PAGE_LINK]<span>|</span></div>
</div>
</div>

<div class="postdetail_head"><h2>[TITLE]</h2>
<h4>Posted by [DISPLAY_NAME] ([USERNAME]) on [PUBL_DATE]</h4>
<div class="postdetail_crumbs" style="display: [DISPLAY_GROUP]">
<a href="[BACK]">[PAGE_TITLE]</a> » <a href="[BACK]?g=[GROUP_ID]">[GROUP_TITLE]</a></div>
</div>
<img class="postdetail_image" style="display: [DISPLAY_IMAGE]" src="[GROUP_IMAGE]" alt="[GROUP_TITLE]" />

<div class="postdetail_footer">Last changed: [MODI_DATE] at [MODI_TIME]</div>
<a class="postdetail_back" href="[BACK]">« Back</a>

<blockquote>
<div class="comment_info">By [DISPLAY_NAME] on [DATE] at [TIME]</div>
<h4>[TITLE]</h4>
<p>[COMMENT]</p>
</blockquote>

<a class="comment_add" href="[ADD_COMMENT_URL]">Add Comment</a>
</div>

<h1>Comment</h1>
<h2>[POST_TITLE]</h2>
<br />

Die Frontend CSS

Dann bearbeite CSS im Backend vom Newsmodul oder, FTP – WB Verzeichnis – module – News- und dann die frontend.css

herunterladen und den nachfolgenden code in die CSS Datei schreiben, speichern und wieder hochladen.

.captcha-table,
.captcha_table,
.news-table {
	border: 0px;
}

.post_title,
.post-title {
	font-size: 17px;
    font-weight: bold;
}
.post_date,
.post-date {
	text-align: right;
	font-weight: bold;
}
.post_short,
.post-short {
	text-align: justify;
	padding-bottom: 5px;
}
.comment_title,
.comment-title {
	font-weight: bold;
}
.comment_text,
.comment-text {
	font-weight: normal;
	background-color: #FDFDFD;
	border-bottom: 1px solid #DDDDDD;
	padding-bottom: 15px;
}
.comment_title, .comment_text,
.comment-title, .comment-text {
	border-left: 1px solid #DDDDDD;
}
.comment_info,
.comment-info {
	text-align: right;
	border-right: 1px solid #DDDDDD;
}
.comment_title, .comment_info,
.comment-title, .comment-info {
	border-top: 1px solid #DDDDDD;
	background-color: #EEEEEE;
}
.selected_group_title,
.selected-group-title { 
	font-size: 14px;
	text-align: center;
}
/*** Don't remove the class nixhier, this is required for ASP ***/
.nixhier {
	display:none;
}
.loop_header,
.loop-header {
	width: 100%;
}
.page_header,
.page-header {
	width: 100%;	
}
.post_header,
.post-header {
	width: 100%;	
}
.page_left,
.page-left {
	text-align: left;	
}
.page_center,
.page-center {
	text-align: center;
}
.page_right,
.page-right {
	text-align: right;	
}
.comment_header,
.comment-header {
	width: 100%;
}
.public_info,
.public-info {
	text-align: right;
}
.group_page,
.group-page {
	text-align: center;
}

Template CSS

Für das Template kommt nun die CSS um das Newsmodul gut aussehen zu lassen.

/* post_date */
.post_date {
    display: block;
    float: left;
    font-size: 12px;
    height: 56px;
    line-height: 21px;
    margin-bottom: 0;
    margin-right: 25px;
    margin-top: 2px;
    text-align: center;
    width: 55px;
	text-shadow: 1px 1px 1px #FFFFFF;
}

/*icon date*/
.post_date {
    background: url("images/post_date.png") no-repeat scroll 0 0 transparent;
}


/*weiterlesen button */
.post_readmore {
	float:right;
	background: #377ad0;
	background: -moz-linear-gradient(top, #52a8e8 0%, #377ad0 100%);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
	border-top: 1px solid #4081af;
	border-right: 1px solid #2e69a3;
	border-bottom: 1px solid #20559a;
	border-left: 1px solid #2e69a3;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	color: #fff;
	font-family: "lucida grande", sans-serif;
	font-size: 11px;
	font-weight: normal;
	line-height: 1;
	padding: 3px 10px 4px;
	text-align: center;
	text-shadow: 0 -1px 1px #3275bc;
	width: 62px;
	-webkit-background-clip: padding-box;
}


/*weiterlesen button hover*/
.post_entry a:hover {
	background:#377AD0 -moz-linear-gradient(center top , #3E9EE5 0%, #206BCB 100%) repeat scroll 0% 0% transparent;
	cursor: pointer;
	text-shadow: 0pt -1px 1px #1D62AB;
	text-shadow:none;
}

/*abstand button nach unten*/
.post_entry {
	border: 1px solid #999;
    margin-bottom: 25px;
    padding-bottom: 28px;
	-moz-box-shadow: 5px 8px 8px #999;
	-webkit-box-shadow: 5px 8px 8px #999;
	padding:30px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

/*button linkfarbe*/
.post_entry a {
    color: #fff; 
	text-decoration:none;

}


/*button linkfarbe*/
.post_entry a {
    color: #fff; 
	text-decoration:none;

}



/*link einer news rechts neben icon*/
.post_title a {color: #000;}
.post_title a:hover {color: #20559A; background:none;}

Die restlichen Einstellungen können der Demo entnommen werden.

Demo

Download