Project-4SP

S4 League Clan Design 02

Version 1.5

S4 League Clan Design Nr. 2

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.

S4 League Clan Design Nr. 2

Das Design "S4-League Clan Design Nr. 2" bringt eine tolle Style mit sich. Im Content eingebaut ist eine Sidebar, die als zweit Navigation dienen kann. Der Header ist sehr großzügig Gestahltet, einfach schlich und einfach. Direkt unter dem Header gibt es eine obere Navigation, außerdem ist auch ein Footer vorhanden.

Der Design Code

"Text über dem Design"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <link href="templatemo_style.css" rel="stylesheet" type="text/css" />  <link href="css/svwp_style.css" rel="stylesheet" type="text/css" /> <script src="http://www.loaditup.de/files/626387_mcsnhzqq58.js" type="text/javascript"></script> <script src="http://www.loaditup.de/files/626390_fffegwb9ar.js" type="text/javascript"></script>

<script src="http://www.loaditup.de/files/626391_k4m98vfky3.js" type="text/javascript"></script>

</head> 
<body> 
<div id="templatemo_wrapper">      
<div id="templatemo_header">         
<div id="site_title"><a href="">
<img src="images/templatemo_logo.png" alt="LOGO" />
<span>YOUR TAGLINE GOES HERE</span></a></div>

</div>

<div id="templatemo_menu">
         <ul>
             <li><a href="about.html">Home</a></li>
             <li><a href="about.html">About Us</a></li>
             <li><a href="gallery.html">Gallery</a></li>
             <li><a href="contact.html">Contact Us</a></li>
             <li><a href="contact.html">Contact Us</a></li>
             <li><a href="contact.html">Contact Us</a></li>
             <li><a href="contact.html">Contact Us</a></li>
         </ul>
</div>

"Text unter dem Design"

<div class="sidebar_box">             	
<h4>Categories</h4>                 
<ul class="tmo_list">                      	
<li><a href="index.html">Aliquam at adipiscing</a></li>                      
<li><a href="index.html">Cras eget urna eu nisi</a></li>                     
<li><a href="index.html">Integer aliquet tempus</a></li>                     
<li><a href="index.html">Nam non diam at augue</a></li>                     
<li><a href="index.html">Pellentesque erat ipsum</a></li>                     
<li><a href="index.html">Sed volutpat urna vitae</a></li>                                   
</ul>             
</div>

<div class="sidebar_box">             	
<h4>Recent comments</h4>                 
<div class="recent_comment_box">                     
<a href="#">Lorem ipsum dolor si</a>

<p>Maecenas tellus erat, dictum vel semper a, dapibus ac elit. Nunc rutrum pretium porta.</p>

</div>

<div class="recent_comment_box">                      
<a href="#">Aenean feugiat mattis </a>

<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Validate <a href="http://validator.w3.org/check?uri=referer" _fcksavedurl="http://validator.w3.org/check?uri=referer" _fcksavedurl="http://validator.w3.org/check?uri=referer" rel="nofollow"><strong>XHTML</strong></a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" _fcksavedurl="http://jigsaw.w3.org/css-validator/check/referer" _fcksavedurl="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow"><strong>CSS</strong></a>.</p>

</div>

<div class="recent_comment_box last_recent_comment_box">                     
<a href="#" _fcksavedurl="#" _fcksavedurl="#"> Lacus enim id lacinia in</a>

<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>

</div>             
<div class="cleaner"></div>     </div>

</div>

<

div id="templatemo_footer_wrapper"> 	
<div id="templatemo_footer">

<a href="index.html" class="current">Home</a> | 
<a href="about.html">About Us</a> | 
<a href="gallery.html">Gallery</a> | 
<a href="contact.html">Contact Us</a>

<br />

Copyright © 2048 by <a href="#">Your Company Name</a> | 
Grafiken by <a target="_blank" href="http://alaplaya.net">Alaplaya</a> | 
Coding by <a href="http://www.hpbk-templateworld.de.tl" target="_blank">HpBk-TemplateWorld</a> | 
Design by <a target"_blank" href="http://project-4sp.de.tl">Project-4sP</a>

"CSS-Code Ohne Style Tag"

body {
color:#fff;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
line-height:1.5em;
background-color:#010101;
background-image:url(http://www0.images.alaplaya-assets.net/images/backgrounds/bg_s4_full.jpg?1332930284);
background-attachment:scroll;
background-repeat:no-repeat;
background-position:top;
margin:0;
padding:0;
}

#templatemo_footer {
width:970px;
height:40px;
text-align:center;
color:#fff;
background:url(https://img.webme.com/pic/t/test-egz2/s4l-b-footer.png) no-repeat top center ;
margin: 0 auto;
}

#templatemo_main {
width:910px;
background:url(https://img.webme.com/pic/t/test-egz2/s4l-b-main.png) repeat;
padding:30px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
}

#templatemo_menu {
width:970px;
height:40px;
color: #fff;
background:url(https://img.webme.com/pic/t/test-egz2/s4l-b-menu.png) no-repeat top center;
padding-left: -10px;
}

.tmo_list li {
color:#fff;
background:transparent url(https://img.webme.com/pic/t/test-egz2/s4l-b-li.png) no-repeat scroll 0 8px;
margin:0 0 10px;
padding:3px 0 3px 15px;
}

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

a:hover {
text-decoration:underline;
}

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

h1,h2,h3,h4,h5,h6 {
color:#00F;
font-weight:400;
}

h1 {
font-size:34px;
margin:0 0 30px;
padding:5px 0;
}

h2 {
font-size:26px;
margin:0 0 20px;
padding:0;
}

h3 {
font-size:21px;
margin:0 0 15px;
padding:0;
}

h4 {
font-size:18px;
margin:0 0 15px;
padding:0;
}

h5 {
font-size:16px;
margin:0 0 10px;
padding:0;
}

h6 {
font-size:14px;
margin:0 0 5px;
padding:0;
}

.h10 {
height:10px;
}

.h20 {
height:20px;
}

.h30 {
height:30px;
}

.h40 {
height:40px;
}

.h50 {
height:50px;
}

.h60 {
height:60px;
}

a.more {
display:block;
width:98px;
height:27px;
color:#fff;
font-weight:700;
background:url(http://www.loaditup.de/files/626379_yze9824ztd.png) no-repeat;
padding:7px 0 0 10px;
}

.float_l {
float:left;
}

.float_r {
float:right;
}

blockquote {
font-style:italic;
margin-left:10px;
}

cite {
font-weight:700;
color:#000;
}

cite span {
color:#333;
}

em {
color:#ca5005;
font-weight:700;
}

.tmo_list {
list-style:none;
margin:0 0 0 10px;
padding:0;
}

#templatemo_wrapper {
width:960px;
margin:0 auto;
}

#templatemo_header {
width:960px;
height:100px;
padding-top:50px;
text-align:center;
background: none no-repeat top center;
}

#site_title a {
display:block;
width:300px;
text-align:center;
font-size:24px;
color:#fff;
font-weight:400;
text-decoration:none;
margin:0 auto;
padding:0;
}

#site_title a span {
display:block;
font-size:14px;
color:#fff;
}

#templatemo_menu ul {
height:40px;
list-style:none;
margin:0;
padding:10px 0 0;
}

#templatemo_menu ul li {
display:block;
margin:0;
padding:0;
}

#templatemo_menu ul li a {
float:left;
display:block;
height:40px;
margin-right:1px;
font-size:14px;
color:#fff;
text-align:center;
text-decoration:none;
font-weight:700;
outline:none;
border:none;
padding:0 20px;
}

#templatemo_menu ul li a span {
display:block;
font-size:11px;
font-weight:400;
color:#fff;
}

#templatemo_menu ul li a:hover,#templatemo_menu ul .current {
color:#fff;
background: none center bottom no-repeat;
}

#templatemo_content {
float:left;
width:600px;
padding:0 50px 0 30px;
}

.content_box {
clear:both;
margin-bottom:30px;
padding-bottom:30px;
border-bottom:1px solid #4c4c4c;
}

.last_content_box {
border-bottom:0;
margin:0;
padding:0;
}

.post_box {
margin-bottom:40px;
padding-bottom:40px;
border-bottom:1px solid #4c4c4c;
}

.post_box_last {
padding-bottom:0;
margin-bottom:0;
border-bottom:none;
}

.post_box_right {
float:right;
width:340px;
}

.post_box h2 {
line-height:30px;
margin:0;
padding:0 0 10px;
}

.post_box .post_meta {
margin-bottom:20px;
background:#131313;
padding:5px;
}

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

.post_box img {
float:left;
margin-right:20px;
border:1px solid #000;
background:#221c1c;
display:inline-block;
padding:5px;
}

.post_box .category {
float:left;
width:300px;
}

.post_box .comment {
position:absolute;
top:-10px;
right:0;
width:70px;
height:42px;
text-align:center;
padding-top:10px;
font-size:16px;
font-weight:700;
background: none no-repeat;
}

.post_box .comment a {
color:#fff;
text-decoration:none;
}

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

.comments {
list-style:none;
}

.comments li {
margin-bottom:10px;
list-style:none;
}

.comments li .commentbox1 {
border:1px solid #000;
background:#383838;
}

.comments li .commentbox2 {
border:1px solid #383838;
background:#505050;
}

.comments li .comment_box {
clear:both;
width:100%;
padding:15px;
}

.comment_box .gravatar {
float:left;
width:50px;
border:1px solid #3c3735;
margin-right:15px;
background:#3c3735;
}

.comment_box .gravatar img {
width:50px;
height:50px;
margin:0;
}

.comment_box .comment_text {
margin:0 0 0 65px;
}

.comment_box .comment_text p {
margin:0;
}

.comment_text .comment_author {
font-size:14px;
color:#cd7e00;
margin-bottom:10px;
}

.comment_text .reply a {
display:block;
clear:both;
float:right;
height:24px;
text-align:center;
background:#3694ab;
border:1px solid #fff;
color:#fff;
padding:1px 10px;
}

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

#comment_form form {
background:#383838;
border:1px solid #000;
padding:20px;
}

#comment_form textarea {
background:#262626 none repeat fixed 0 0;
border:1px solid #000;
display:block;
height:150px;
margin-top:5px;
width:540px;
color:#AAA;
font-family:Verdana,Geneva,sans-serif;
font-size:12px;
padding:5px;
}

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

#comment_form form input {
margin-top:5px;
color:#AAA;
font-family:Verdana,Geneva,sans-serif;
font-size:12px;
width:200px;
background:#262626 none repeat fixed 0 0;
border:1px solid #000;
padding:3px 5px;
}

#comment_form .submit_btn {
width:90px;
font-weight:700;
color:#FFF;
cursor:pointer;
}

#contact_form {
float:left;
padding:0;
}

#contact_form form .input_field {
width:270px;
background:#1b1b1b;
color:#AAA;
font-family:Verdana,Geneva,sans-serif;
font-size:12px;
border:1px solid #000;
margin-top:5px;
padding:5px;
}

#contact_form form label {
display:block;
width:100px;
margin-right:10px;
font-size:14px;
color:#AAA;
}

#contact_form form textarea {
width:388px;
height:200px;
border:1px solid #000;
background:#1b1b1b;
color:#AAA;
font-family:Verdana,Geneva,sans-serif;
font-size:12px;
margin-top:5px;
padding:5px;
}

#contact_form form .submit_btn {
margin-right:100px;
color:#AAA;
font-weight:700;
background:#1B1B1B;
border:1px solid #000;
padding:7px 14px;
}

.cleaner_h10 {
clear:both;
height:10px;
width:100%;
}

#templatemo_sidebar {
float:left;
width:180px;
padding-left:30px;
}

.sidebar_box {
margin-bottom:15px;
padding-bottom:15px;
border-bottom:1px solid #433d3a;
}

.recent_comment_box {
border-bottom:1px dashed #433d3a;
margin:0 0 15px;
padding:0 0 15px;
}

.recent_comment_box a {
color:#fff;
font-weight:700;
}

.last_recent_comment_box {
border:none;
margin:0;
padding:0;
}

#templatemo_footer_wrapper {
width:100%;
background:#xxxx  none top repeat-x;
}

#templatemo_footer a {
color:#fff;
}

a.left,a.right {
background:transparent;
color:red;
font:bold 16px Arial;
overflow:hidden;
}

a.left img,a.right img {
border:0;
}

a.l_dis,a.r_dis {
background:transparent;
cursor:default;
}

a:focus {
outline:none;
}

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

a,a:link,a:visited,a.more:hover {
color:#fff;
text-decoration:none;
}

.cleaner,#comment_form {
clear:both;
}

.tmo_list li a,.tmo_list li a:hover,#comment_form form label {
color:#fff;
}

.first_level,#contact_form form {
margin:0;
padding:0;
}

.comment_text .date,.comment_text .time {
font-size:12px;
font-weight:400;
color:#9b8e79;
padding-left:10px;
}

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.

Sie sind unser 66596 Besucher

Sidebar

Project-4SP

S4 League Clan Design 02

Kennst du schon...?

Partner

Partner

Follow Us