HpBk-TemplateWorld

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

Gift Blog

» Geschenke für alle!
Dieses Weihnachtsdesign "Gift Blog" enthält einen weihnachtlichen Header mit Geschenken und Blumen als Weihnachtsdeko. Der rechte Teil des Designs besteht aus der riesigen Navigation, die abgegrenzt vom Content ist. In ihr gibt es reichlich Platz für News, Links und anderes. Auch ein Footer ist wieder dabei. Der Content passt sich 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>
<div class="post_section">
</div>
</div>
<div id="templatemo_footer">
<ul class="footer_menu">
	<li><a href="#">Home</a></li>
	<li><a href="subpage.html">Archives</a></li>
	<li><a href="subpage.html">Gallery</a></li>
	<li><a href="subpage.html">About Us</a></li>
	<li><a href="subpage.html">Contact Us</a></li>
</ul>
Copyright © 2048 <a href="#">Your Company Name</a> | <a target="_parent" href="http://www.iwebsitetemplate.com">Website Template</a> by <a target="_parent" href="http://www.templatemo.com">Free Templates</a> | Coding: <a href="http://HpBk-TemplateWorld.de.tl">HpBk-TemplateWorld</a></div>
</div>

<div id="templatemo_sidebar">
<div class="section_rss_twitter">
<div class="rss_twitter twitter"> </div>
<div class="margin_bottom_20"> </div>
<div class="rss_twitter rss"> </div>
</div>
<div class="menu_section">
<ul id="main_menu">
	<li><a href="#">Home</a></li>
	<li><a href="subpage.html">Archives</a></li>
	<li><a href="subpage.html">Photo Gallery</a></li>
	<li><a href="subpage.html">About Us</a></li>
	<li><a href="subpage.html">Contact Us</a></li>
</ul>
</div>
<div class="categories_section">
<h2>Navigation</h2>
<ul class="categories_list">
	<li><a href="subpage.html">Lorem ipsum dolor</a></li>
	<li><a href="subpage.html">Phasellus eget lorem</a></li>
	<li><a href="subpage.html">Sed sit amet sem</a></li>
	<li><a href="subpage.html">Cras eget est vel</a></li>
	<li><a href="subpage.html">Quisque in ligula</a></li>
	<li><a href="subpage.html">Donec a massa dui</a></li>
	<li><a href="subpage.html">Aenean facilisis</a></li>
	<li><a href="subpage.html">Etiam vitae consequat</a></li>
	<li><a href="subpage.html">Aliquam sollicitudin</a></li>
	<li><a href="subpage.html">Nunc fermentum</a></li>
</ul>
</div>
<div class="news_section">
<h2>Wichtige Links</h2>
<ol class="news_box">
	<li><a href="subpage.html">Lorem ipsum dolor sit amet consectetur </a></li>
	<li><a href="subpage.html">Maecenas tellus erat, dictum vel semper a, dapibus ac elit. Nunc rutrum pretium porta.</a></li>
	<li><a href="subpage.html">Aenean feugiat mattis est nec egestas</a></li>
</ol>
</div>
<div class="categories_section">
<h2>Partnerseiten</h2>
<ul class="categories_list">
	<li><a target="_parent" href="http://www.flashmo.com">Flash Templates</a></li>
	<li><a target="_parent" href="http://www.templatemo.com">Free CSS Templates</a></li>
	<li><a target="_parent" href="http://www.koflash.com">Flash Websites Gallery</a></li>
	<li><a target="_parent" href="http://www.webdesignmo.com/blog">Web Design Blog</a></li>
</ul>
</div>
</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;}

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

body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #47443e;
    background: #781919 url(https://img.webme.com/pic/h/hpbk-templateworld/570928.jpg) repeat;
}

a:link, a:visited { color: #6c7900; text-decoration: none; font-weight: normal; } 
a:active, a:hover { color: #6c7900; text-decoration: underline; }

p { margin: 0px; padding: 0px; }

img { margin: 0px; padding: 0px; border: none; }

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }

.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }

.float_l { float: left; }
.float_r { float:  right; }

.margin_r20 { margin-right: 20px; }

#templatemo_wrapper {
	width: 1000px
}

#templatemo_main_column_wrapper {
	float: left;
	width: 700px;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/570929.png);
	background-repeat: repeat-y;
	background-position: left;
}

#templatemo_main_column {
	padding-right: 10px;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/570931.jpg) no-repeat top left;
}

/* header */
#templatemo_header {
	width: 690px;
	margin: 0 auto;
	margin-bottom: 20px;
}

#templatemo_header  #site_title {
	padding-left: 200px;
	padding-top: 180px;
	padding-bottom: 30px;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/570932.png) no-repeat bottom center;	
}

#site_title a {
	font-size: 50px;
	color: #a32c1f;
	font-weight: bold;
	text-decoration: none;
}

#site_title a span {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	color: #666;
}
/* end of header */

#welcome_text {
	width: 400px;
	margin-left: 150px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px dotted #666;
}

#welcome_text strong {
	color: #548fc1;
}

/* content */
#templatemo_content {
	padding: 20px 60px;
}

.post_section {
	clear: both;
	padding-bottom: 40px;
	background:  none bottom repeat-x;	
}

.post_section h2  {
	color: #8c624e;
	font-size: 30px;
	font-weight: normal;
	margin: 0 0 10px 0;
	padding: 10px 0 10px 0;
}

.post_section p {
	text-align: justify;
	margin-bottom: 20px;
}

.post_section img {
	margin: 20px 0;
	border: 1px solid #220507;
}

.post_section .comment_tab {
	padding: 10px 0;
	margin: 40px 0 20px 0;
	border-bottom: 1px dashed #666;
	font-size: 20px;
	font-weight: bold;
}

#comment_section {
	clear: both;
	margin-bottom: 60px;
	width: 550px;
}

.first_level {
	margin: 0; padding: 0;
}

.comments {
	list-style: none; 
}

.comments li { margin-bottom: 10px; list-style:none; }
.comments li .lightgreen { border: 1px solid #c0d598;  background: #ecf5db; }
.comments li .lightblue	{ border: 1px solid #acc7de;  background: #e3f0fa; }
.comments li .comment_box { clear: both; width:100%; padding: 15px;  }
.comment_box .gravatar { float: left; width: 50px; margin-right: 15px; background: #fff; }
.comment_box .gravatar img { margin: 0; width: 50px; height: 50px; }
.comment_box .comment_text { margin: 0 0 0 65px; }
.comment_text .comment_author { font-size: 14px; font-weight: bold; color: #781919; margin-bottom: 10px; }
.comment_text .date { font-size: 12px; font-weight: normal; color: #333; padding-left: 10px; }
.comment_text .time { font-size: 12px; font-weight: normal; color: #333; padding-left: 10px; }
.comment_text .reply a { display: block; clear: both; float: right; padding: 5px 10px 0px 10px; height: 24px; text-align: center; background: #858956; border: 1px solid #fff; color: #fff; }

#comment_form {
	clear: both;
}

#comment_form h3 {
	font-size: 20px;
	border-bottom: 1px dotted #666;
	margin-bottom: 15px;
	padding-bottom: 10px;
}

#comment_form form {
	padding: 20px;
	background-color: #ecf5db;
	border: 1px solid #c0d598;
}

#comment_form textarea {
	background:#FFFFFF none repeat fixed 0 0;
	border: 1px solid #CCC;
	display:block;
	font-size:1.1em;
	height:150px;
	margin-top:5px;
	padding:5px;
	width: 525px;
}

#comment_form .form_row {
	width: 100%;
	margin-bottom: 15px;
}

#comment_form form input {
	margin-top: 5px;
	width: 200px;
}

#comment_form .submit_btn {
	width: 80px;
}
/* end of content */

/* sidebar */
#templatemo_sidebar {
	float: left;
	width: 240px;
	padding: 30px;
	color: #d8ceb4;
}

.section_rss_twitter {
	width: 240px;
	margin-bottom: 40px;
}

.rss_twitter a {
	display: block;
	width: 200px;
	color: #d8ceb4;
	padding: 20px 0 0 0;
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: bold;
}

.rss_twitter a:hover {
	text-decoration: none;	
}

.rss_twitter a span {
	font-size: 12px;
	margin-top: 5px;
	display: block;
	letter-spacing: 5px;
}

.rss a {
	background:  none right bottom no-repeat;
}

.twitter a {
	background:  none right bottom no-repeat;
}

#templatemo_sidebar h2 {
	color: #d8ceb4;
	font-size: 20px;
	font-weight: bold;
}

.menu_section {
	margin-bottom: 40px;
}

#main_menu {
	margin: 0;
	padding: 0;
	font-size: 16px;	
	color: #bd9139;	
	list-style: decimal-leading-zero;
}

#main_menu li {
	margin: 0 0 0 30px;
	padding: 0;
}

#main_menu li a {
	display: block;
	color: #bd9139;
	margin-bottom: 10px;
	padding: 2px 0;
	border-bottom: 1px solid #691414;	
}

.categories_section {
	clear: both;
	margin-bottom: 50px;	
}

.categories_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.categories_list li {
	margin: 0;
	padding: 0;
}

.categories_list li a {
	display: block;
	color: #bd9139;
	margin-bottom: 5px;
	padding: 3px 0 3px 0;
	border-bottom: 1px solid #691414;
}

.categories_list li a:hover {
	color: #edc613;
}

.news_section {
	clear: both;
	margin-bottom: 40px;
}

.news_box {
	margin: 0;
	padding: 0;
	list-style: none;
}

.news_box li {
	margin: 0;
	padding: 0;
}

.news_box li a {
	display: block;
	margin: 0 0 10px 0;
	padding: 0 0 10px 50px;
	color: #bd9139;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/570933.png) no-repeat top left;
}

.news_box li a:hover {
	color: #edc613;
	text-decoration: underline;
}
/* end of sidebar */

/* footer */
#templatemo_footer {
	color: #999;
	padding: 20px 60px;
	border-top: 1px dashed #333;
}

#templatemo_footer a {
	color: #333;
	font-weight: normal;
}

#templatemo_footer a:hover {
	text-decoration: none;
}

#templatemo_footer .footer_menu {
	margin: 0 0 10px 0;
	padding: 0px;
	list-style: none;
}

#templatemo_footer .footer_menu li {
	margin: 0px;
	padding: 0 20px 0 0;
	display: inline;
}

#templatemo_footer .footer_menu li a {
	color: #333;
}

#templatemo_footer .footer_menu li a:hover {
	text-decoration: underline;
}
/* 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.

Kommentar zu dieser Seite hinzufügen: