test-egz2

Titel der neuen Seite

Version 1.0

Hallohilol Design

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.

Hallohilol Design

Das Design "Hallohilol" bringt eine tolle Style mit sich. Der Content ist schön breit und bietet so mit viel platz für Text, Bilder uvm. Der Header ist sehr großzügig Gestahltet, einfach schlich und einfach. Direkt unter dem Header gibt es eine obere Navigation, der Footer ist schön groß und damit gut geeignet für Besondere Ereignisse oder Narichten die man seiner Community mit teilen mochte.

Style: Anime Fraben: Schwarz, Blau

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="" _fcksavedurl=""> <img src="images/templatemo_logo.png" _fcksavedurl="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" _fcksavedurl="about.html">Home</a></li>              <li><a href="about.html" _fcksavedurl="about.html">About Us</a></li>              <li><a href="gallery.html" _fcksavedurl="gallery.html">Gallery</a></li>              <li><a href="contact.html" _fcksavedurl="contact.html">Contact Us</a></li>              <li><a href="contact.html" _fcksavedurl="contact.html">Contact Us</a></li>              <li><a href="contact.html" _fcksavedurl="contact.html">Contact Us</a></li>              <li><a href="contact.html" _fcksavedurl="contact.html">Contact Us</a></li>          </ul> </div>     <div id="templatemo_main"> <div id="templatemo_content"> <div id="templatemo_slider"> <div id="featuredslideshow"> </div> </div> <div class="post_box">

"Text unter dem Design"

<div class="post_box_right">                 </div>   </div>  <div class="post_box post_box_last"> <div class="post_box_right">                  </div>              </div>                    </div>                       <div id="templatemo_sidebar">          	         <div class="sidebar_box">              </div>           	               <div class="sidebar_box">             	 <h4>Categories</h4>                  <ul class="tmo_list">                      	 <li><a href="index.html" _fcksavedurl="index.html">Aliquam at adipiscing</a></li>                       <li><a href="index.html" _fcksavedurl="index.html">Cras eget urna eu nisi</a></li>                      <li><a href="index.html" _fcksavedurl="index.html">Integer aliquet tempus</a></li>                      <li><a href="index.html" _fcksavedurl="index.html">Nam non diam at augue</a></li>                      <li><a href="index.html" _fcksavedurl="index.html">Pellentesque erat ipsum</a></li>                      <li><a href="index.html" _fcksavedurl="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="#" _fcksavedurl="#">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="#" _fcksavedurl="#">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" _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" _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="#" _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" _fcksavedurl="index.html" class="current">Home</a> |  <a href="about.html" _fcksavedurl="about.html">About Us</a> |  <a href="gallery.html" _fcksavedurl="gallery.html">Gallery</a> |  <a href="contact.html" _fcksavedurl="contact.html">Contact Us</a>  <br />   Copyright © 2048 by <a href="#" _fcksavedurl="#">Your Company Name</a> |  Grafiken by <a target="_blank" href="http://alaplaya.net" _fcksavedurl="http://alaplaya.net">Alaplaya</a> |  Coding by <a href="http://www.hpbk-templateworld.de.tl" _fcksavedurl="http://www.hpbk-templateworld.de.tl" target="_blank">HpBk-TemplateWorld</a> |  Design by <a target"_blank" href="http://project-4sp.de.tl" _fcksavedurl="http://project-4sp.de.tl">Project-4sP</a>           <div class="cleaner h10"></div>               	 <div class="cleaner"></div>		      </div> </div>

"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://www.loaditup.de/files/634014_prfsutyue9.png); background-attachment:scroll; background-repeat:no-repeat; background-position:top; margin:0; padding:0; }  #templatemo_footer { width:898px; height:20px; text-align:center; color:#ff0; background:url(http://www.loaditup.de/files/634015_d8bbh56cqm.png) top center no-repeat; border:1px solid #010101; margin:0 auto; padding:0 30px 20px; }  #templatemo_main { width:900px; background:url(http://www.loaditup.de/files/634016_pwmvxcrufg.png) repeat; padding:30px; }  #templatemo_menu { width:898px; height:40px; background:url(http://www.loaditup.de/files/634017_e99dzpucxn.png) no-repeat top center; border:1px solid #010101; margin-bottom:-13px; padding:0 30px; }  .tmo_list li { color:#fff; background:transparent url(http://www.loaditup.de/files/634018_fph36dksxp.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:#F93; 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:#000; 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:#ffc66c; }  #templatemo_menu ul { height:40px; list-style:none; margin:0; padding:5px 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:#ff0; 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:#fc0; }  #templatemo_menu ul li a:hover,#templatemo_menu ul .current { color:#f90; 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:#333; 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:#cd7e00; 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:#fc0; }  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.

Titel der neuen Seite

Lorem ipsum dolor sit

Nunc dignissim accumsan