Newsmodul

Store Templates, Tutorials, Website Bakeron Mai 20th, 2011Keine Kommentare

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.

Kopfzeile
<div class="posts-container">
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>
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>
Nachrichten 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]" />
Nachrichten Fusszeile
<div class="postdetail_footer">Last changed: [MODI_DATE] at [MODI_TIME]</div>
<a class="postdetail_back" href="[BACK]">« Back</a>
Kommentare Schleife
<blockquote>
<div class="comment_info">By [DISPLAY_NAME] on [DATE] at [TIME]</div>
<h4>[TITLE]</h4>
<p>[COMMENT]</p>
</blockquote>
Kommentare Fusszeile
<a class="comment_add" href="[ADD_COMMENT_URL]">Add Comment</a>
</div>
Kommentar 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-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

 

 

  • StumbleUpon
  • Digg
  • Delicious
  • Technorati
  • Yahoo! Bookmarks
  • Twitter
  • MySpace
  • Google Bookmarks
  • Facebook
  • E-Mail
Keine Antwort zu “Newsmodul”

Schreiben Sie einen Kommentar