Das News-Modul ohne Tabellen

Da stellt sich doch gleich die Frage – warum Tabellenfrei? Tabellen werden für tabellarische Darstellungen verwendet, einmal Produkt, einmal Preis u.s.w. Tabellen werden vom Screenreader als Tabellen erkannt und als solche definiert. Die Darstellung vom Website Baker Newsmodul ist aber keine tabellarische Anordnung, sondern kurzer Lesetext und dann mit Link zum weiterlesen.

Anfang der 90er Jahre, waren die Tabellen die einzige Möglichkeit etwas in HTML darzustellen, nur ist es in der heutigen Zeit nicht gerade barrierearmes Designen mit Tabellen ein News-Modul zu betreiben da es ja nun DIVs gibt. Mit tabellenfreiem HTML-Code und CSS-Technik kann man Form und Inhalt einer Seite strikter trennen und es verkürzt natürlich auch die Ladezeiten einer Seite.

Die Optionen im News-Modul

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

In das Codefeld Kopfzeile:

<div class="posts-container">

In das Codefeld 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 das Codefeld 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 das Codefeld 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 das Codefeld Nachricht Fusszeile:

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

In das Codefeld Kommentare Kopfzeile:

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

In das Codefeld Kommentare Schleife:

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

In das Codefeld Kommentare Fusszeile:

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

In das Codefeld Kommentare Seite:

<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_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;
}