Webarte Blog

Das Newsmodul von Websitebaker

Das WebsiteBaker Newsmodul ohne Tabellen zu bauen ist natürlich ein großer Vorteil. zum einen ist es suchmaschinenfreundlicher, zum andern kann mit css mehr erreicht werden.

Hierfür müssen zwei Dinge geändert werden.

Schritt eins:

Admin Backend einloggen und im Newsmodul Optionen wählen und in die Felder diesen Code einsetzen:

In die Kopfzeile:  

<div class="posts-container">

In die Beitrag Schleife: 

<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>

In die Fusszeile:  

<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>

In die Nachricht Kopfzeile:
<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]" />

In die Nachricht Fusszeile:  

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

In die Kommentare Kopfzeile:  

<div class="comment_container">
<h3>Comments</h3>

In die Kommentare Schleife: 

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

In die Kommentare Fusszeile:

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

In die Kommentare Seite:  

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

Schritt zwei:

In die frontend.css

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

.post_title, .post_date,
.post-title, .post-date {
	border-bottom: 1px solid #DDDDDD;
}
.post_title,
.post-title {
	font-weight: bold;
	font-size: 12px;
	color: #000000;
}
.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;
}