HpBk-TemplateWorld

Green Blog

Design Übersicht

» Dieses Design darfst du kostenlos auf deine Homepage einfügen und verwenden. Unter "Und so geht´s" findest du eine kurze Anleitung, wie du dieses Design im Homepage-Baukasten einfügst. Mit einem Klick auf das Bild des Designs vergrößert du die Vorschau.

» Bitte beachte:
Die Copyright Informationen im Footer des Designs dürfen auf keinen Fall entfernt oder geändert werden, da du sonst gegen die Lizenz- und Nutzungsrechte des Designs verstößt. Natürlich darfst du Bilder und Grafiken (Header, etc.) verändern und beschriften und auch das Design anders gestalten.

Green Blog

» Ein echter Hingucker!
...ist das Design "Green Blog". Das überwiegend dunkel gehaltene Design wird durch einen wunderschönen Header mit hellen Farbelementen, Schmetterlingen und Blumen besonders elegant geschmückt. Auf der rechten Seite gibt es jede Menge Boxen für eine weitere Navigation, Partnerseiten, Infos und vieles mehr. Im oberen Menü gibt es die wichtigsten Punkte auf einen Blick zu sehen. Auch ein Footer ist vorhanden. Der Content passt sich automatisch an die Länge eurer Seite an.

» Bewertung des Designs:

Der Design Code

"Text über dem Design" » Code in einem separaten Fenster anzeigen

"Text unter dem Design" » Code in einem separaten Fenster anzeigen

<div class="post_title"></div>
<div class="post_body">
</div>
</div>

<div class="templatemo_post">
<div class="post_body">
</div>
</div>
</div>

<div id="templatemo_content_right">
<div class="templatemo_right_section">
<h2>Menü</h2>
<ul>
	<li><a href="#">Morbi nec magna pulvinar</a></li>
	<li><a href="#">Suspendisse rhoncus lectus</a></li>
	<li><a href="#">Pellentesque rutrum est</a></li>
	<li><a href="#">Nunc blandit orci</a></li>
</ul>
</div>
<div class="templatemo_right_section">
<h2>Archiv</h2>
<ul>
	<li><a href="#">January 2048</a></li>
	<li><a href="#">December 2047</a></li>
	<li><a href="#">November 2047</a></li>
	<li><a href="#">October 2047</a></li>
	<li><a href="#">September 2047</a></li>
</ul>
</div>
<div class="templatemo_right_section">
<h2>Partnerseiten</h2>
<ul class="popular_post">
	<li><a href="#">Donec mollis aliquet</a><br>
	Author 1 - Oct 14, 2048 <span class="comment">12 replies</span></li>
	<li><a href="#">Aliquam tristique lacust</a><br>
	Author 2 - Oct 14, 2048 <span class="comment">8 replies</span></li>
	<li><a href="#">Suspendisse potent</a><br>
	Author 3 - Oct 14, 2048 <span class="comment">10 replies</span></li>
	<li><a href="#">Nullam vitae tellus</a><br>
	Author 4 - Oct 14, 2048 <span class="comment">30 replies</span></li>
</ul>
</div>
<div class="templatemo_right_section">
<h2>Letzte News</h2>
<ul>
	<li>Lorem Ipsum on <a href="#">Donec mollis aliquet</a></li>
	<li>Consectetuer on <a href="#">Suspendisse a nibh</a></li>
	<li>Sed on <a href="#">Pellentesque vitae magna</a></li>
	<li>Vitae Neque on <a href="#">Nunc blandit orci sit amet</a></li>
	<li>Donec Mollis on <a href="#">Maecenas adipiscing</a></li>
</ul>
</div>
</div>
</div>
</div>

<div id="templatemo_bottom_panel">
<div id="templatemo_bottom_section">
<div class="templatemo_bottom_section_content">
<h3>Bildergalerie</h3>
<ul class="gallery">
	<li><a href="#"><img src="http://www.loaditup.de/files/567700.jpg" alt="image name"></a></li>
	<li><a href="#"><img src="http://www.loaditup.de/files/567701.jpg" alt="image name"></a></li>
	<li><a href="#"><img src="http://www.loaditup.de/files/567702.jpg" alt="image name"></a><a href="http://www.webdesignmo.com" target="_blank"><br>
	</a></li>
</ul>
</div>
<div class="templatemo_bottom_section_content">
<h3>Partnerseiten</h3>
<ul class="list_section">
	<li><a href="#">Lorem ipsum</a></li>
	<li><a href="#">Duis mollis</a></li>
	<li><a href="#">Maecenas adipiscing</a></li>
	<li><a href="#">Nunc blandit orci</a></li>
	<li><a href="#">Cum sociis natoque</a></li>
</ul>
</div>
<div class="templatemo_bottom_section_content">
<h3>Links</h3>
<ul class="list_section">
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Privacy</a></li>
	<li><a href="#">Terms</a></li>
</ul>
<a href="http://validator.w3.org/check?uri=referer"><img vspace="8" border="0" style="border: 0pt none; width: 88px; height: 31px;" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional"></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img vspace="8" border="0" style="border: 0pt none; width: 88px; height: 31px;" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!"></a></div>
</div>
</div>
    
<div id="templatemo_footer_panel">
<div id="templatemo_footer_section">Copyright © 2048 <a href="#">Your Company Name</a> |              <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a> | Coding: <a href="http://HpBk-TemplateWorld.de.tl">HpBk-TemplateWorld</a></div>
</div>

"CSS Code ohne Style Tags" » Code in einem separaten Fenster anzeigen

#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
#nav{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

td[height="102"] { 
position:absolute; 
left:50%; 
margin-left:-384px; }

/*
CSS Credit: http://www.templatemo.com/
*/

body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	background: #000000;
}

a:link, a:visited { color: #ffc64a; text-decoration:none; } 
a:active, a:hover { color: #FFFF00; text-decoration: underline; }

h1 {
	margin: 0px;
	padding: 10px 0;
	font-size: 26px;
	color: #d77707;
	font-weight: normal;
}

h2 {
	margin: 0 0 15px 0;
	padding: 0 0 10px 0;
	font-size: 20px;
	color: #ff9d11;
	border-bottom: 1px dotted #663e17;
}

h3 {
	margin: 0 0 15px 0;
	padding: 0 0 10px 0;
	font-size: 20px;
	color: #ffc64a;
	border-bottom: 1px dotted #663e17;
}

p {
	margin: 0px;
	padding: 0 0 10px 0;
	text-align: justify;
}

.cleaner {
	clear: both;
	width: 100%;
	height: 1px;	
}

.comment {
	padding-left: 20px;
	margin-left: 5px;
	background:  none bottom left no-repeat;
}
/* ----- Form ----- */

form{
	margin: 0px;
	padding: 0px;
	width: 100%;
	text-align: right;
}

#searchfield{
	background: none;
	border: 1px solid #ffffff;
	color: #ffffff;
	font-size: 13px;
	font-variant: normal;
	height: 15px;
	line-height: normal;
	padding: 4px;
	width: 230px;
}

#searchbutton{
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	height: 26px;
	margin: 0 0 0 7px;
	padding: 0 6px;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
	width: 66px;
}

/* end of form */

/* menu */
#templatemo_menu_panel{
	width:100%;
	height: 59px;	
	margin: 0 auto;
	color: #ffffff;
	background: #000000;
}

#templatemo_menu_panel #templatemo_menu_section{
	width: 930px;
	height: 59px;	
	margin:0 auto;
	padding: 0 0 0 30px;
	color: #03a0a6;
	background:  url(https://img.webme.com/pic/h/hpbk-templateworld/567694.jpg) no-repeat;	
}

#templatemo_menu_section ul {
	float: left;
	width: 930px;
	margin: 0;
	padding: 15px 0 0 0;
	list-style: none;
}

#templatemo_menu_section ul li{
	display: inline;
}

#templatemo_menu_section ul li a{
	float: left;
	width: 110px;
	padding: 5px 0;
	margin-right: 5px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #fbe270;
	border-right: 1px solid #5f3b11;	
}

#templatemo_menu_section li a:hover, #templatemo_menu_section li .current{
	color: #ffffff;
}
/* end of menu */

/* content and header panel */
#templatemo_header_content_container {
	clear: both;
	overflow: hidden;
	width:100%;
	margin: 0 auto;
	background: #000000 url(https://img.webme.com/pic/h/hpbk-templateworld/567695.jpg) top center no-repeat; 
}

#templatemo_header_content_container #templatemo_header_section{
	clear: both;
	width: 960px;
	height: 150px;
	margin:0 auto;

}

#templatemo_header_section #templatemo_title_section{
	float: left;
	width: 400px;
	padding: 90px 0 15px 30px;
	font-size: 60px;
	color: #ffffff;
}

#templatemo_header_section #templatemo_search_section{
	float: right;
	margin-right: 30px;
	width: 330px;
	padding: 70px 0 15px 0;
}

#templatemo_header_section #templatemo_search_section form{
	text-align: left;
}

#templatemo_header_content_container #templatemo_content{
	clear: both;
	height: 100%;
	width: 930px;
	padding: 30px 0 0 15px;
	margin:0 auto;
}

#templatemo_content_left {
	float: left;
	width: 600px;
	margin-bottom: 15px;
}

#templatemo_content_right {
	float: right;
	width: 300px;
	margin-bottom: 15px;
}

/* for left column */
#templatemo_content_left .templatemo_post {
	width: 598px;
	padding: 0;
	padding-bottom: 10px;
	margin-bottom: 30px;
	border: 1px solid #191a0d;
	background: #0b0c04   none top right no-repeat;	
}

* html #templatemo_content_left .templatemo_post {
	margin-bottom: 15px;
}

.templatemo_post .post_title{
	width: 570px;
	height: 50px; /* padding 20px + */
	margin: 0 0 10px 0;
	padding: 20px 0 5px 30px;
	font-size: 26px;
	font-weight: bold;
	color: #d77707;
}

.templatemo_post .post_title .post_info{
	width: 100%;
	font-weight: normal;
	font-size: 12px;
	color: #acb66c;
	padding-top: 10px;
}

.templatemo_post .post_body{
	padding: 0 30px 15px 30px;
}

.templatemo_post .post_body img{
	margin-bottom: 15px;
	border: 5px solid #21240e;
}

.templatemo_post .post_comment{
	padding: 5px 30px;
	font-weight: bold;
}

/* end of left colun */

/* for right column */
#templatemo_content_right .templatemo_right_section{
	clear: both;
	display:inline-block;
	width: 248px;
	padding: 15px 15px 10px 15px;
	margin-bottom: 30px;
	background: #0b0c04 url(https://img.webme.com/pic/h/hpbk-templateworld/567696.jpg) top center no-repeat;	
	border: 1px solid #191a0d;	
}

#templatemo_content_right .templatemo_right_section .popular_post {
	list-style: none;
	margin: 0;
	padding: 0;
}
#templatemo_content_right .templatemo_right_section .popular_post li{
	margin: 0 0 5px 0;
	padding: 0 0 5px 0;
	border-bottom: 1px solid #22250e;
}

#templatemo_content_right .templatemo_right_section ul{
	clear: both;
	margin: 0 0 0 15px;
	padding: 0px;
}

#templatemo_content_right .templatemo_right_section ul li{
	margin: 0 0 5px 0;
}

/* end of right column */

/* for bottom palen */
#templatemo_bottom_panel{
	width:100%;
	min-height: 250px;
	margin: 0 auto;
	border-top: 1px solid #050702;
	background: #050702 url(https://img.webme.com/pic/h/hpbk-templateworld/567698.jpg) center bottom no-repeat;

}

#templatemo_bottom_panel #templatemo_bottom_section{
	overflow: hidden;
	height: 100%;
	width: 930px;
	margin:0 auto;
	padding: 40px 0 15px 30px;

}

#templatemo_bottom_section .templatemo_bottom_section_content {
	display: inherit;
	float: left;
	width: 270px;
	padding-right: 20px;
	margin:0 0 15px 10px;
}

#templatemo_bottom_section .templatemo_bottom_section_content img{
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
}

.templatemo_bottom_section_content .gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	background: #000000;
}

.templatemo_bottom_section_content .gallery li {
	padding: 0;
	float: left;
	margin: 0 4px 4px 0;	
	width: 80px;
	height: 70px;
	border: 3px solid #000000;
}

.templatemo_bottom_section_content .gallery img {
	border: none;
}

.templatemo_bottom_section_content .list_section{
	margin: 0 0 15px 30px;
	padding: 0;
}
/* end of bottom panel */

/*  footer */

#templatemo_footer_panel{
	width:100%;
	height: 50px;
	margin: 0 auto;
	background: #040500 url(https://img.webme.com/pic/h/hpbk-templateworld/567699.jpg) center top no-repeat;
	border-top: 1px solid #141204;
}

#templatemo_footer_panel #templatemo_footer_section{
	width: 960px;
	height: 10px;
	margin:0 auto;
	padding: 20px 15px;	
	text-align: center;

}
/* end of footer */

Und so geht´s

» Zuerst musst du dich in den Homepage-Baukasten einloggen.
» Dann klickst du auf "Design einstellen" und wählst dort das "CSS-Design - Nur für Profis geeignet" aus.
» Danach klickst du auf "Erweiterte Einstellungen" und fügst die Codes, die hier auf der Seite stehen, in die verschiedenen Felder "Text über dem Design" "Text unter dem Design" und "CSS-Code ohne Style Tags" ein.
» Danach speicherst du das Ganze ab und darfst dein neues Design bestaunen.

Download des Designs

» Hier kannst du das Paket des Designs kostenlos herunterladen. Darin enthalten sind die Bilder des Designs, der unbearbeitete Design-Code und die Live-Vorschau des Designs. Jetzt herunterladen.

Was bedeutet dieses Symbol?

» Dieses Symbol steht für den "Template TÜV". Fast alle Designs auf HpBk-TemplateWorld besitzen diese Zertifizierung. Wenn ihr in der Design-Beschreibung das "Template TÜV-Siegel" findet, könnt ihr euch darauf verlassen, dass das Design 100%-ig funktioniert, wenn ihr den Code richtig einfügt, da ich dieses Design ausgiebig getestet habe. Des Weiteren garantiere ich mit diesem Symbol, dass das Design sowohl im neuesten Internet-Explorer, als auch im neuesten Mozilla Firefox richtig angzeigt wird. Habt ihr dennoch einen Fehler gefunden, meldet euch bitte umgehend bei mir über das Kontaktformular.

Kommentar zu dieser Seite hinzufügen: