| Autor |
Nachricht |
-
4i
|
 19.09.2011 um 18:56 (UTC)
Titel: [Vorlage] Design Iceblue als CSS Design |
|
|
Hey,
ich habe mal das Design Iceblue als CSS Design gecodet. Das Design besitzt nur Standartklassen (außer eine, die aber nur zur Postionierung dient), d.h. im Designcode muss nichts geändert werden, wenn man seinen Titel ändern, neue Navigationspunkte hinzufügen bzw. entfernen oder den Inhalt der Sidebar ändern will.
Das fertige Design sieht wie folgt aus:
... oder als Livedemo betrachten: http://livedemo.de.tl/Iceblue-als-CSS-Design.htm
Einfach das Design CSS aufwählen und auf "Erweiterte Einstellungen" klicken. Nun folgende Codes in folgende Felder einfügen:
Text über dem Design:
Text unter dem Design:
CSS-Code ohne Style Tags:
Code: /* WERBUNG ZENTRIEREN */
table[height="102"] {
margin: auto;}
/* HINTERGRUND */
body {
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_background.png);
padding: 0px;
margin: 0px;}
/* DESIGN (ERSTELLTES DIV / DIENT ZUR POSITIONIERUNG) */
#design{
width: 1079px;
margin: 0px auto;}
/* CONTAINER */
#container{
width: 921px;
min-height: 1000px;
padding: 0px 79px 100px 79px;
margin: 0px;
float: left;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_container.png);
background-repeat: repeat-y;}
/* CONTENT CONTAINER */
#content_container{
width: 736px;
height: auto;
float: left;}
/* HEADER */
#header_container{
width: 921px;
height: 104px;
float: left;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_header.jpg);}
/* TITEL VOM HEADER */
h1#header{
width: 901px;
height: 26px;
padding: 10px 10px 68px 10px;
display: block;
color: #FFFFFF;
font-family: tahoma,verdana,arial;
font-size: 26px;
font-weight: normal;
text-align: right;
overflow: hidden;}
/* NAVIGATION CONTAINER */
#nav_container{
width: 185px;
padding 0px;
margin: 0px;
float: left;}
/* TITEL NAVIGATION */
#nav_heading{
width: 165px;
height: 14px;
display: block;
padding: 2px 10px 8px 10px;
margin: 0px;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_navitop.png);
color: #FFFFFF;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;
overflow: hidden;}
/* ELEMENT IN DEM SICH NAVIGATIONSLINKS POSTIONIEREN */
#nav {
padding: 0px 0px 40px 0px;
margin: 0px;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_naviend.png);
background-position: bottom;}
/* AUFLISTUNG DER NAVIGATIONSLINKS */
#nav li {
width: 135px;
height: 14px;
padding: 8px 25px 11px 25px;
display: block;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_button.png);
list-style-type: none;
color: #000000;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;
text-decoration: none;
overflow: hidden;}
/* SCHRIFT DER NAVIGATIONSLINKS */
#nav a{
display: block;
color: #000000;
text-decoration: none;}
/* HOVEREFFEKT FÜR NAVIGATIONSLINKS */
#nav a:hover {
text-decoration: underline;}
/* UNTERSEITEN DER NAVIGATIONSLINKS */
#nav li.subpage {
width: 120px;
padding-left: 40px;
padding-right: 25px;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_subpagebutton.png);
text-align: left;}
/* TEXTFELD */
#content{
width: 534px;
height: auto;
padding: 0px 17px 70px 17px;
float: left;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_content.png);
background-position: bottom;
color: #000000;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;}
/* TITEL TEXTFELD */
h2#title{
width: 528px;
height: 14px;
display: block;
padding: 14px 20px 10px 20px;
margin: 0px -17px 10px -17px;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_contenttop.png);
overflow: hidden;}
#title span{
color: #FFFFFF;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;}
/* SIDEBAR */
#sidebar_container{
width: 148px;
padding: 0px 10px 40px 10px;
float: right;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_sidebar.png);
background-position: bottom;
color: #000000;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;}
/* TITEL SIDEBAR */
#sidebar_heading{
width: 148px;
height: 14px;
display: block;
padding: 2px 10px 8px 10px;
margin: 0px -10px 10px -10px;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_sidebartop.png);
border-bottom: 1px solid #FFFFFF;
color: #FFFFFF;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;
overflow: hidden;}
/* FORMATIERUNG DER LINKS */
a:link,
a:visited{
color: #436EEE;
text-decoration: none;}
a:hover{
color: #000000;}
/* UNNOETIGE KLASSEN */
#counter{display: none;}
#pre_content {display:none;}
#pre_header {display:none;}
#post_header {display:none;}
#post_content {display:none;}
#below_content {display:none;}
#extraDiv2 {display:none;}
#extraDiv3 {display:none;}
#extraDiv4 {display:none;}
#extraDiv5 {display:none;}
#extraDiv6 {display:none;}
Gründe zur Wahl dieses Designs (statt normalem unbearbeitetem Icebluedesign):
» Wer das normale Iceblue Design nutzt, muss seinen Text nicht anpassen, da die Maße so ziemlich gleich geblieben sind
» Werbung für alle Auflösungen mittig platziert
» Design für alle Auflösungen mittig platziert
» Der Farbverlauf rechts beim normalen Design wird nun auch links angezeigt
» Man muss bei der Navigation nicht mehr auf die Links klicken, sondern es reicht nun auf den Button zu klicken
» Unterseiten werden eingerückt angezeigt
Der ein oder andere wird sich sicher fragen, wieso man dieses Design statt einem leicht bearbeiteten Icebluedesign wählen sollte. Da frag ich mich, wieso sollte man ein bearbeitetes Icebluedesign statt diesem wählen :)
Das Design darf frei verwendet sowie bearbeitet (nicht empfehlenswert für Anfänger) werden. Es ist aber nicht gestattet das Design auf seiner Homepage anzubieten!
Liebe Grüße, David |
|
|
↑
|
|
 |
-
arealmelon
|
28.10.2011 um 19:07 (UTC)
Titel: |
|
|
Sehr schön gemacht!
Allerdings sehe ich den Sinn nicht es wie das Iceblue Design aussehen zu
lassen. Trotzdem gute Arbeit. |
|
|
↑
|
|
|
|
|
28.10.2011 um 22:19 (UTC)
Titel: |
|
|
Also ich finde es gut. Gerade für User, die gerne das CSS Design verwenden wollen, aber ein komplettes Design nicht erstellen können.
Ich werde den Thread mal bei Gringos Vorlagen verlinken. Ich hoffe er hat nichts dagegen.
Danke an 4i, für die Arbeit.
EDIT: Ich lass für eventuelle Fragen, mal offen. ______________ mfg
o-4-n
"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]
*** Die Suchfunktion ist KEINE tödliche Krankheit! ***
Eventplanung, Equipment, Zeltverleih, Catering
Zuletzt bearbeitet von o-4-n am 29.10.2011, 13:40, insgesamt 3-mal bearbeitet
|
|
|
↑
|
|
|
-
ar-destine
|
29.10.2011 um 14:50 (UTC)
Titel: Menü oben |
|
|
Noch eine Frage:
Wo kann man die Navigationsbutton einstellen??
Also damit sie angezeigt werden, damit das Menü oben ist??? |
|
|
↑
|
|
|
|
|
29.10.2011 um 17:19 (UTC)
Titel: Re: Menü oben |
|
|
Hallo,
ar-destine hat Folgendes geschrieben: Noch eine Frage:
Wo kann man die Navigationsbutton einstellen??
Also damit sie angezeigt werden, damit das Menü oben ist??? |
|
|
↑
|
|
|
-
arnosgartenruhe
|
20.04.2012 um 16:25 (UTC)
Titel: Re: [Vorlage] Design Iceblue als CSS Design |
|
|
hallo, ist ja eine tolle sache, doch wo kann ich den quellencode ändern, denn ich habe nur den kostenlosen bausatz.
vg rüdiger
4i hat Folgendes geschrieben: Hey,
ich habe mal das Design Iceblue als CSS Design gecodet. Das Design besitzt nur Standartklassen (außer eine, die aber nur zur Postionierung dient), d.h. im Designcode muss nichts geändert werden, wenn man seinen Titel ändern, neue Navigationspunkte hinzufügen bzw. entfernen oder den Inhalt der Sidebar ändern will.
Das fertige Design sieht wie folgt aus:
... oder als Livedemo betrachten: http://livedemo.de.tl/Iceblue-als-CSS-Design.htm
Einfach das Design CSS aufwählen und auf "Erweiterte Einstellungen" klicken. Nun folgende Codes in folgende Felder einfügen:
Text über dem Design:
Text unter dem Design:
CSS-Code ohne Style Tags:
Code: /* WERBUNG ZENTRIEREN */
table[height="102"] {
margin: auto;}
/* HINTERGRUND */
body {
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_background.png);
padding: 0px;
margin: 0px;}
/* DESIGN (ERSTELLTES DIV / DIENT ZUR POSITIONIERUNG) */
#design{
width: 1079px;
margin: 0px auto;}
/* CONTAINER */
#container{
width: 921px;
min-height: 1000px;
padding: 0px 79px 100px 79px;
margin: 0px;
float: left;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_container.png);
background-repeat: repeat-y;}
/* CONTENT CONTAINER */
#content_container{
width: 736px;
height: auto;
float: left;}
/* HEADER */
#header_container{
width: 921px;
height: 104px;
float: left;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_header.jpg);}
/* TITEL VOM HEADER */
h1#header{
width: 901px;
height: 26px;
padding: 10px 10px 68px 10px;
display: block;
color: #FFFFFF;
font-family: tahoma,verdana,arial;
font-size: 26px;
font-weight: normal;
text-align: right;
overflow: hidden;}
/* NAVIGATION CONTAINER */
#nav_container{
width: 185px;
padding 0px;
margin: 0px;
float: left;}
/* TITEL NAVIGATION */
#nav_heading{
width: 165px;
height: 14px;
display: block;
padding: 2px 10px 8px 10px;
margin: 0px;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_navitop.png);
color: #FFFFFF;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;
overflow: hidden;}
/* ELEMENT IN DEM SICH NAVIGATIONSLINKS POSTIONIEREN */
#nav {
padding: 0px 0px 40px 0px;
margin: 0px;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_naviend.png);
background-position: bottom;}
/* AUFLISTUNG DER NAVIGATIONSLINKS */
#nav li {
width: 135px;
height: 14px;
padding: 8px 25px 11px 25px;
display: block;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_button.png);
list-style-type: none;
color: #000000;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;
text-decoration: none;
overflow: hidden;}
/* SCHRIFT DER NAVIGATIONSLINKS */
#nav a{
display: block;
color: #000000;
text-decoration: none;}
/* HOVEREFFEKT FÜR NAVIGATIONSLINKS */
#nav a:hover {
text-decoration: underline;}
/* UNTERSEITEN DER NAVIGATIONSLINKS */
#nav li.subpage {
width: 120px;
padding-left: 40px;
padding-right: 25px;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_subpagebutton.png);
text-align: left;}
/* TEXTFELD */
#content{
width: 534px;
height: auto;
padding: 0px 17px 70px 17px;
float: left;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_content.png);
background-position: bottom;
color: #000000;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;}
/* TITEL TEXTFELD */
h2#title{
width: 528px;
height: 14px;
display: block;
padding: 14px 20px 10px 20px;
margin: 0px -17px 10px -17px;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_contenttop.png);
overflow: hidden;}
#title span{
color: #FFFFFF;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;}
/* SIDEBAR */
#sidebar_container{
width: 148px;
padding: 0px 10px 40px 10px;
float: right;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_sidebar.png);
background-position: bottom;
color: #000000;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;}
/* TITEL SIDEBAR */
#sidebar_heading{
width: 148px;
height: 14px;
display: block;
padding: 2px 10px 8px 10px;
margin: 0px -10px 10px -10px;
background-image: url(http://img.webme.com/pic/l/livedemo/cssiceblue_sidebartop.png);
border-bottom: 1px solid #FFFFFF;
color: #FFFFFF;
font-family: tahoma,verdana,arial;
font-size: 14px;
font-weight: normal;
overflow: hidden;}
/* FORMATIERUNG DER LINKS */
a:link,
a:visited{
color: #436EEE;
text-decoration: none;}
a:hover{
color: #000000;}
/* UNNOETIGE KLASSEN */
#counter{display: none;}
#pre_content {display:none;}
#pre_header {display:none;}
#post_header {display:none;}
#post_content {display:none;}
#below_content {display:none;}
#extraDiv2 {display:none;}
#extraDiv3 {display:none;}
#extraDiv4 {display:none;}
#extraDiv5 {display:none;}
#extraDiv6 {display:none;}
Gründe zur Wahl dieses Designs (statt normalem unbearbeitetem Icebluedesign):
» Wer das normale Iceblue Design nutzt, muss seinen Text nicht anpassen, da die Maße so ziemlich gleich geblieben sind
» Werbung für alle Auflösungen mittig platziert
» Design für alle Auflösungen mittig platziert
» Der Farbverlauf rechts beim normalen Design wird nun auch links angezeigt
» Man muss bei der Navigation nicht mehr auf die Links klicken, sondern es reicht nun auf den Button zu klicken
» Unterseiten werden eingerückt angezeigt
Der ein oder andere wird sich sicher fragen, wieso man dieses Design statt einem leicht bearbeiteten Icebluedesign wählen sollte. Da frag ich mich, wieso sollte man ein bearbeitetes Icebluedesign statt diesem wählen 
Das Design darf frei verwendet sowie bearbeitet (nicht empfehlenswert für Anfänger) werden. Es ist aber nicht gestattet das Design auf seiner Homepage anzubieten!
Liebe Grüße, David |
|
|
↑
|
|
|
|
|
|
|
↑
|
|
|
|
