HpBk-TemplateWorld

Platinum

Design-Übersicht

» Dieses Design darfst du kostenlos für deine Homepage verwenden. Unter "Und so geht´s" (weiter unten auf dieser Seite) 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. Der Link zu HpBk-TemplateWorld darf ebenfalls nicht verändert werden. Dieses Design ist ein kostenloses Design von www.templatemo.com.

Platinum

» Platinum vom Feinsten.
Edle silberne Farbtöne geben diesem Design den letzten Schliff. Ganz besonders bei diesem Design: die Navigation besitzt ein Untermenü. So gibt es jede Menge Platz für viele verschiedene Menüpuntke. Im großen Header gibt es einen Monitor mit einer exklusiven Slideshow zu sehen. Die Bilder der Slideshow könnt ihr natürlich auch austauschen. Auf der rechten Seite gibt es eine Sidebar mit Platz für weitere Informationen.

» Bewertung:

Design-Code

» Text über dem Design | Code in einem separaten Fenster öffnen.

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

ddsmoothmenu.init({
	mainmenuid: "templatemo_menu", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

</head>
<body>

<div id="templatemo_header">
        <div id="site_title"><h1><a href="http://www.templatemo.com">Free CSS Templates</a></h1></div>

<li><a href="about.html"><span></span>About Us</a>
                    <ul>
                        <li><a href="submenupage.html">Sub menu 1</a></li>
                        <li><a href="submenupage.html">Sub menu 2</a></li>

<li><a href="submenupage.html">Sub menu 3</a></li>
                    </ul>
                </li>
                <li><a href="portfolio.html"><span></span>Portfolio</a>
                    <ul>
                        <li><a href="submenupage.html">Sub menu 1</a></li>
                        <li><a href="submenupage.html">Sub menu 2</a></li>

<li><a href="submenupage.html">Sub menu 3</a></li>
                        <li><a href="submenupage.html">Sub menu 4</a></li>
                        <li><a href="submenupage.html">Sub menu 5</a></li>
                   </ul>
              </li>
              <li><a href="blog.html"><span></span>Blog</a></li>
              <li><a href="contact.html"><span></span>Contact</a></li>

<li><a href="contact.html"><span></span>Contact</a></li>

</ul>
            <br style="clear: left" />
        </div> 
    </div> 
    
    <div id="templatemo_middle">
    	<div id="templatemo_middle_left">
        	<h2>Welcome to<strong>Platinum Theme</strong></h2>

<p>Donec pulvinar mattis feugiat. Suspendisse adipiscing hendrerit dapibus. Fusce auctor nibh a velit tempor rutrum. Vivamus mauris nulla, rutrum sed cursus sed, tempus eget magna.</p>
            <a href="#" class="learn_more"></a>
        </div>
        <div id="slider-wrapper">
        
            <div id="slider" class="nivoSlider">
                <img src="https://img.webme.com/pic/h/hpbk-templateworld-test/04.jpg" alt="Slider 01" />
                <img src="https://img.webme.com/pic/h/hpbk-templateworld-test/03.jpg" alt="Slider 02" />
                <img src="https://img.webme.com/pic/h/hpbk-templateworld-test/02.jpg" alt="Slider 03" />

<img src="https://img.webme.com/pic/h/hpbk-templateworld-test/01.jpg" alt="Slider 04" />
            </div>
        
        </div>
            <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/Platinum/jquery-1.4.3.min.js"></script>
            <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/Platinum/jquery.nivo.slider.js"></script>
            <script type="text/javascript">
            $(window).load(function() {
                $('#slider').nivoSlider();
            });
            </script>
        <div class="cleaner"></div>

</div> 
    
	<div id="templatemo_main_wrapper">
    	<div id="templatemo_main">
          	<div id="content">
				<div class="post">

» Text unter dem Design | Code in einem separaten Fenster öffnen.

</div>
            </div><br /><br />
            <div id="sidebar">
                <div id="templatemo">
                </div>
                
                <div class="sb_box">
                    <h3>Categories</h3>
                    <ul class="templatemo_list">
                        <li>Augue felis pharetra felis</li>
                        <li>Curabitur eget tincidunt</li>

<li>Donec sed nulla sit amet</li>
                        <li>Felis pharetra felis sed</li>
                        <li>Integer placerat dolor vel</li>
                        <li>Tortor mi in massa donec</li>
                        <li>Vulputate tortor in massa</li>
                    </ul>

</div>
                <div class="sb_box">
                	<h3>Flickr Stream</h3>
                    <ul class="flickr_stream">
                    	<li><a href="#"><img class="image_frame" src="https://img.webme.com/pic/h/hpbk-templateworld-test/templatemo_image_07.png" alt="" /></a></li>

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

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

<div id="templatemo_footer_wrapper">
	<div id="templatemo_footer">
    	<a href="#templatemo_header" class="goto_top"></a>
    	<div class="col_4">
        	<h5>Pages</h5>
            <ul class="footer_list">
            	<li><a href="home.html">Home</a></li>
                <li><a href="about.html">About Us</a></li>

<li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
			</ul>
        </div>
        
        <div class="col_4">
        	<h5>Partners</h5>

<ul class="footer_list">
            	<li><a href="http://www.flashmo.com/">Free Flash Templates</a></li>
                <li><a href="http://www.templatemo.com/">Free CSS Templates</a></li>
                <li><a href="http://www.flashmo.com/store">Preminum Templates</a></li>
                <li><a href="http://www.koflash.com/">Website Gallery</a></li>
                <li><a href="http://www.webdesignmo.com/blog/">Web Design Resources</a></li>

</ul>             
        </div>
        
        <div class="col_4">
        	<h5>Twitter</h5>
            <ul class="twitter_post">
	            <li>Suspendisse at scelerisque urna. Aenean tincidunt massa in tellus varius ultricies.</li>
                <li>Proin dignissim, diam nec <a href="#">@TemplateMo</a> enim lorem tempus orci, ac ante purus in justo.</li>

</ul>
        </div>
        
        <div class="col_4 col_l">
        	<h5>Follow Us</h5>
            <div class="footer_social_button">
                <a href="http://www.facebook.com/templatemo"><img src="http://www.loaditup.de/files/692536_ws85w5dwwc.png" title="facebook" alt="facebook" /></a>

</div>
            <div class="cleaner h40"></div>
            
        	Copyright © 2048 <a href="#">Company Name</a> <br /> 
            <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <br />

<a href="http://www.templatemo.com" target="_parent"> Free CSS Templates</a>
 <br /> 
Coding: 
            <a href="http://www.hpbk-templateworld.de.tl" target="_parent"> HpBk-TemplateWorld</a>
      		
		</div>
        
        <div class="cleaner"></div>
    </div>
</div>

</body>
</html>

» CSS-Code ohne Style Tags | Code in einem separaten Fenster öffnen.

/* ---Dieses Design und noch viele weitere kostenlose Designs findest du auf HpBk-TemplateWorld.de.tl - der Community für Designs und Tutorials im HpBk.--- */

#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;
}

#counter{
display: none; }

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

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

body {
	margin: 0;
	padding: 0;
	color: #6e6969;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	line-height: 1.3em; 
	background-color: #fff;
	background-image: url(https://img.webme.com/pic/h/hpbk-templateworld-test/platinum_body.png);
	background-repeat: repeat-x;
	background-position: top;
}

a, a:link, a:visited { color: #8b1818; font-weight: normal; text-decoration: none }
a:hover { text-decoration: underline; }

a.more { display: block; margin-top: 20px; width: 90px; height: 28px; line-height: 25px; background:  none no-repeat }

p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }
blockquote { font-style: italic; margin: 0 0 0 10px;}
cite { font-weight: bold; color:#282828; }
cite a, cite a:link, cite a:visited  { font-size: 12px; text-decoration: none; font-style: normal }
cite span { font-weight: 400; color: #282828; }
em { text-decoration: underline }

h1, h2, h3, h4, h5, h6 { color: #881212; font-weight: normal; }
h1 { font-size: 48px; margin: 0 0 30px; padding: 5px 0 }
h2 { font-size: 30px; margin: 0 0 25px; padding: 5px 0; }
h3 { font-size: 24px; margin: 0 0 20px; 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: 12px; margin: 0 0 5px; padding: 0; }

.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }

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

.image_frame { 
	display: inline-block; 
	padding: 4px; 
	border: 1px solid #ccc; 
	margin: 3px 0 15px 0; 
}

.image_fl { 
	float: left; 
	margin: 3px 30px 0 0; 
}

.image_fr { 
	float: right; 
	margin: 3px 0 0 30px; 
}

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

.templatemo_list li { 
	color:#6e6969; 
	margin: 0 0 10px 0; 
	padding: 0 5px 0 15px; 
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/platinum_list.png) no-repeat scroll 0 5px;  
}

.templatemo_list li a { 
	color: #6e6969; 
	font-weight: normal; 
}

.templatemo_list li a:hover { 
	color: #333; 
}

#templatemo_wrapper {
	width: 100%;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/platinum_wrapper.jpg) top center no-repeat;
}

#templatemo_header {
	height: 52px;
	width: 960px;
	padding: 40px 10px 10px;
	margin: 0 auto
}

#site_title { 
	float: left; 
}

#site_title h1 { 
	margin: 0; padding: 0; 
}

#site_title h1 a { 
	display: block; 
	font-size: 12px; 
	font-family: Georgia, "Times New Roman", Times, serif; width: 217px; 
	height: 52px; 
	color: #acacac; 
	text-indent: -10000px; 
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/platinum_logo.png) no-repeat center left; 
}

#templatemo_menu { 
	float: right; 
	width: 710px; 
	height: 52px; 
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/platinum_menu_bar.png) no-repeat; 
}

#templatemo_middle {
	width: 960px;
	padding: 40px 0 0;
	margin: 0 auto;
}
#templatemo_middle_left {
	float: left;
	width: 450px;
	padding: 20px 0;
}

#templatemo_middle_left h2 { 
	color: #535353; 
	font-size: 28px; 
	font-weight: normal; 
	line-height: 34px; 
	margin-bottom: 10px; 
}

#templatemo_middle_left h2 strong { 
	display: block; 
	color: #000; 
	font-size: 38px;  
	font-weight: normal; 
}

#templatemo_middle_left a.learn_more { 
	display: block; 
	margin-top: 20px; 
	width: 164px; 
	height: 50px; 
	background:  none no-repeat; 
}

.middle_box a.mb_more { 
	display: block; 
	font-weight: 700; 
	position: absolute; 
	bottom: 10px; right: 20px; 
}

#slider-wrapper {
	float: right;
    width: 305px;
    height: 253px;
    margin: 0 0 0;
	padding: 15px 18px;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/platinum_monitor.png) no-repeat 
}

#slider {
	position:relative;
    width: 300px;
    height: 175px;
	background: none no-repeat 50% 50%;
}

#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}

#slider a {
	border:0;
	display:block;
}

.nivo-controlNav {
	position:absolute;
	left:260px;
	bottom:-42px;
}

.nivo-controlNav a {
	display:block;
	width:22px;
	height:22px;
	background: none no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}

.nivo-controlNav a.active {
	background-position:0 -22px;
}

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background: none no-repeat;
	text-indent:-9999px;
	border:0;
}

a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

.nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}

.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}

#templatemo_main_wrapper {
	clear: both;
	width: 100%;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/platinum_content_top.png) no-repeat top center 
}

#templatemo_main {
	width: 960px;
	padding: 60px 10px 40px;
	margin: 0 auto;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/platinum_content_top.png) no-repeat top center 
}

#content {
	float: left;
	width: 620px;
}

.col_2 { width: 280px }

.testimonial { 
	padding: 0 0 0 50px; 
	display: block; 
	background:  none left top no-repeat; 
}

.post {
	clear: both;
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 0px solid #c6c6c6;
}

.post h2 { 
	margin-bottom: 30px; 
}

.post .meta { 
	font-size: 10px; 
	margin-bottom: 20px; 
}

.post .meta a, .post .meta strong { 
	color: #333; 
	font-weight: 700; 
}

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

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

.comments {
	list-style: none; 
}

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

.comments li .commentbox1 { 
	border-top: 1px solid #d7d7d7;  
	background: #f6f6f6; 
}

.comments li .commentbox2 { 
	border-top: 1px solid #c2c2c2;  
	background: #d7d7d7; 
}

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

.comment_box .gravatar { 
	float: left; 
	width: 75px; 
	margin-right: 30px; 
}

.comment_box .gravatar img {  
	width: 75px; 
	height: 75px; 
}

.comment_box .comment_text {  }

.comment_box .comment_text p { 
	margin: 0; 
}

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

.comment_text .date { 
	font-size: 12px; 
	font-weight: normal; 
	color: #000; 
	padding-left: 10px; 
}

.comment_text .time { 
	font-size: 12px; 
	font-weight: normal; 
	color: #000; 
	padding-left: 10px; 
}

.comment_text .reply a { 
	display: block; 
	clear: both; 
	float: right; 
	color: #000; 
	font-weight: 700; 
}

#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: #f6f6f6;
	border: 1px solid #d7d7d7;
}

#comment_form textarea {
	color: #111;
	background:#fff none repeat fixed 0 0;
	border: 1px solid #d7d7d7;
	height:150px;
	width: 360px;
	margin-top:5px;
	padding:5px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	margin-top: 5px;
}

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

#comment_form form input {
	color: #111;
	margin-top: 5px;
	padding: 5px;
	width: 200px;
	background:#fff none repeat fixed 0 0;
	border: 1px solid #d7d7d7;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	margin-top: 5px;
}

#comment_form .submit_btn {
	display: block; 
	width: 80px; 
	padding: 3px 8px; 
	text-align: center; 
	text-decoration: none; 
	font-weight: bold;  
	background: #666; 
	border: 1px solid #444; 
	color: #fff; 
	font-size:11px; cursor: pointer 
}

.rp_pp { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #ced4dc }
.rp_pp a { color: #666; font-weight: 700 }
.rp_pp img { float: right; margin-left: 15px; }
.rp_pp img.sidebar { float: left; margin: 0 15px 0 0; }
.rp_pp p { font-size: 10px }

.gallery_box { 
	float: left; 
	width: 280px; 
	margin: 0 60px 60px 0; 
}

#contact_form { 
	padding: 0; 
	width: 592px; 
	margin-bottom: 40px; 
}

#contact_form form { 
	margin: 0px; 
	padding: 0px; 
}

#contact_form form .input_field { 
	width: 270px; 
	padding: 5px; 
	color: #111;  
	background: #fff; 
	border: 1px solid #ccc;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	margin-top: 5px;
}

#contact_form form label { 
	display: block; 
	width: 100px; 
	margin-right: 12px; 
	font-size: 13px; 
}

#contact_form form textarea { 
	width: 580px; 
	height: 200px; padding: 5px; 
	color: #111;
	background: #fff; 
	border: 1px solid #ccc; 
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	margin-top: 5px;
}

#contact_form form .submit_btn { 
	margin: 10px 0px;
	padding: 5px 14px;
	background: #fff; 
	border: 1px solid #ccc; 
}

#sidebar {
	float: right;
	width: 280px;
}

#templatemo_search { 
	margin-bottom: 40px; 
	width: 264px; 
	height: 36px; 
	padding: 8px 5px 8px 8px; 
	background:  none no-repeat; 
}

#templatemo_search form {
	margin: 0;
	padding: 0;
}

#templatemo_search .txt_field {
	float: left;
	display: block;
	height: 34px;
	line-height: 34px;
	width: 230px;
	color: #fff;
	font-size: 12px;
	padding: 0 10px;
	font-variant: normal;
	border: none;	
	background: none;
}

#templatemo_search .sub_btn {
	float: right;
	display: block;
 	height: 34px;
	width: 25px;
	cursor: pointer;
	border: none;
	background: none;	
}

.sb_box {
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: 1px solid #ccc
}

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

.flickr_stream li { 
	float: left; 
	margin: 0 8px 8px 0; 
	padding: 0; 
}

#templatemo_footer_wrapper {
	width: 100%;
	background: #e9e9e9 url(https://img.webme.com/pic/h/hpbk-templateworld-test/platinum_footer_bg_repeat.png) repeat-x top
}

#templatemo_footer {
	width: 960px;
	margin: 0 auto;
	padding: 10px 10px 40px;
	color: #666;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/platinum_footer_bg.png) center top no-repeat;
}

.col_4 { 
	float: left; 
	width: 215px; 
	margin-right: 20px; 
}

a.goto_top { 
	display: block; 
	width: 30px; 
	height: 31px; 
	margin: 10px auto 40px; 
	background:  none no-repeat top center;  
}

#templatemo_footer h5 { 
	font-size: 14px; 
	font-weight: 700; 
	margin-bottom: 20px; 
}

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

.footer_list li { 
	margin: 0 0 5px; 
	padding: 0 0 3px; 
	border-bottom: 1px dotted #433854; 
}

.footer_list li a { 
	color: #666; 
}

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

.twitter_post li { 
	margin: 0 0 10px; 
	padding: 0 0 7px; 
	border-bottom: 1px dotted #433854; 
}

.footer_social_button { 
	clear: both; 
	margin-top: 20px; 
}

.footer_social_button a { 
	margin-right: 5px; 
}

#templatemo_cr_bar_wrapper {
	clear: both;
	width: 100%;
	height: 120px;
	background: #161616  none repeat-x 
}

#templatemo_cr_bar {
	width: 962px;
	margin: 0 auto;
	padding: 80px 9px 0;
	color: #a097ae;
	text-align: center
}

#templatemo_cr_bar a { color: #b8b0c4 }

.no_margin_right { margin-right: 0 }

.pagging { 
	margin: 0 0 20px; 
	padding: 0; 
}

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

.pagging ul li { 
	margin: 0; 
	padding: 0; 
	display: inline; 
}

.pagging ul li a { 
	float: left; 
	display: block; 
	color: #333; 
	text-decoration: none; 
	margin-right: 5px; 
	padding: 5px 10px; 
	background-color: #f6f6f6; 
	border: 1px solid #dfdfdf; 
}

.pagging ul li a:hover { 
	background: #e50000; 
	border: 1px solid #dfdfdf; 
	color: #fff;  
}

.ddsmoothmenu{
}

.ddsmoothmenu ul{
	z-index:100;
	margin: 0;
	padding: 5px;
	list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
	position: relative;
	display: inline;
	float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a {
	display: block;
	text-align: center;
	text-decoration: none;
	font-weight: 400;
	outline: none;
	border: none;
	
	height: 41px;
	line-height: 41px;
	font-size: 14px;
	padding: 0 30px 0 25px;
	margin: 0 5px 0 5px;
	color: #fff;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a.selected, .ddsmoothmenu ul li a:hover { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
	position: relative;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/platinum_menu_r.png) no-repeat right
}
.ddsmoothmenu ul li a.selected span, .ddsmoothmenu ul li a:hover span {
	position: absolute;
	left: -5px;
	width: 5px;
	height: 41px;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld-test/platinum_menu_l.png) no-repeat
}
	
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
	position: absolute;
	padding: 0;
	margin: 0;
	left: 0;
	display: none; /*collapse all sub menus to begin with*/
	visibility: hidden;
	background: #e50000;
	border-bottom: 1px solid #f5f5f5;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
padding: 0;
margin: 0;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
padding: 0;
margin: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
	font-weight: 500;
	padding: 0 10px;
	margin: 0;
	height: 28px;
	line-height: 28px;
	width: 140px; /*width of sub menus*/
	font-size: 12px;
	text-align: left;
	border-bottom: 1px dotted #333;
}

.ddsmoothmenu ul li ul li a.selected, .ddsmoothmenu ul li ul li a:hover  { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
	background: #333
}
/* Holly Hack for IE */
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: none;
}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.5;
}

/* menu */

/*
 * jQuery Nivo Slider v2.4
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
 
 
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:60;
	display:none;
}
/* The slices in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:89;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:99;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:99;
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}

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.
» Beachte bitte, dass deine Menüpunkte nicht automatisch übernommen werden. Du musst deine Menüpunkte manuell einfügen. Dies geschieht meistens im Code von "Text über dem Design" oder "Text unter dem Design".

Download des Original-Designs

» Auf folgender Seite kannst du das Paket des Designs kostenlos von TemplateMo.com herunterladen. Darin enthalten sind die Bilder des Designs, der unbearbeitete CSS-Design-Code und eine Live-Vorschau des Designs. Zum Download.

Du hast Fragen oder Probleme?

» Klappt etwas bei dir nicht? Oder du hast eine bestimmte Frage? Dann melde dich bitte in der "TemplateWorld Community". Nur dort kann ich dir schnell helfen. Wenn du deine Frage hier als Kommentar hinterlässt, kann ich dir leider keinen Support geben, da ich nicht alle Design-Seiten durchsuchen kann, wo dein Kommentar geschrieben wurde. Deshalb bitte ich um dein Verständnis.

Kommentare zu dieser Seite:

Kommentar von:	15.11.2014 um 22:23
VillageCraft-mc Offline	Ich habe eine Frage: Das mit den Copyright infos: Ist damit ALLES im Footer gemeint oder nur das unter Folloe us und so?