Esperansa

Ein einfaches Template was mit nur zwei Grafiken auskommt. Das Design hat 2 Menüs und zwei Contentbereiche. Im ersten Menü wird immer die erste Ebene mit einer anderen Farbe gezeigt, bei Hover oder angeklicktem Link erscheint ein kleiner Pfeil – links. Das zweite Menü ist für die Kategorien gedacht bei denen kein Untermenü gezeigt werden soll und stellt somit die Menüpunkte eng zusammen. Eine dritte Ebene ist im Menü generell nicht vorgesehen.

Das Template Esperansa

Einige der CSS Einstellungen im Template:

.linksbuendig {text-align: left;}
.rechtsbuendig {text-align: right;}
.zentriert {text-align: center;}
.blocksatz {text-align: justify;}
.clear{clear:both; height:1px; background:transparent;}

blockquote{
	background-color:#dfdfdf;
	padding: 3px;
	border: 1px solid #ccc;
	margin: 3px 0 20px 0;
	color:#333;
}
address {
	background:url("images/messagebox.png") no-repeat scroll 10px 5px #f9f9f9;
	border:1px dashed #ccc;
	margin:4px 1px 0px 0px;
	padding:33px 38px 40px;
	text-indent:34px;
	font-size:16.5px;
	color:#141414;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif;
}
address p {
	margin:0;
	padding:0;
}
.noti_warning {
    background: url("images/block_32.png") no-repeat scroll 10px center #FFCCCC;
    border: 1px solid #FF9999;
    color: #BE3A3A;
    margin-bottom: 20px;
    padding: 20px 52px;
    text-align: left;
}
.noti_note {
    background: url("images/warning_32.png") no-repeat scroll 10px center #FFEBA9;
    border: 1px solid #EEC63F;
    color: #9A802A;
    margin-bottom: 20px;
    padding: 20px 52px;
    text-align: left;
}
.noti_info {
    background: url("images/address_32.png") no-repeat scroll 10px center #B7E5FF;
    border: 1px solid #5495C7;
    color: #3580AB;
    margin-bottom: 20px;
    padding: 20px 52px;
    text-align: left;
}
.noti_success {
    background: url("images/tick_32.png") no-repeat scroll 10px center #C4F1A3;
    border: 1px solid #90C249;
    color: #4E7C2D;
    margin-bottom: 20px;
    padding: 20px 52px;
    text-align: left;
}
pre {
    -moz-border-radius: 5px 5px 5px 5px;
    background-image: url("images/code.png");
    border: 1px solid #8E8E8E;
    color: #000;
    display: block;
    font-size: 15px;
    font-style: inherit;
    font-weight: inherit;
    line-height: 19px;
    margin: 0;
    outline: 0 none;
    overflow-x: visible;
    overflow-y: hidden;
    padding: 0 30px;
    vertical-align: baseline;
}

Diese Template wurde mit verschiedenen Browsern, unter einem Apple- und Windows-Betriebssystem erfolgreich getestet.

Demo

Download