Green Sunshine
Green Sunshine
Wichtig: Dieses Design basiert auf dem Standard-Template
Live-Vorschau: hier.
» modern und modisch!
Diese CSS-Codes musst du einfach unter Design bearbeiten bei Eigenes CSS (für Profis) einfügen, damit das Design richtig funktioniert:
/* Hintergrund */
body {
background-color: #f0f0f0;
background-repeat: repeat-x;
}
/* Große Box */
#container {
width: 760px;
padding: 0;
margin-top: 20px;
margin-bottom: 20px;
background-color: #ffffff;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-webkit-box-shadow: 0px 0px 4px #a5a5a5;
-moz-box-shadow: 0px 0px 4px #a5a5a5;
box-shadow: 0px 0px 4px #a5a5a5;
}
/* Header */
#head {
height: 0;
}
/* Homepagetitel und Beschreibung */
#head_left {
width: 700px;
margin-left: 10px;
margin-top: 50px;
position: absolute;
z-index: 10;
}
/* Homepagetitel */
#head_left h2.title a {
font-size: 50px;
color: #83d103;
}
/* Homepagebeschreibung */
#head_left p {
display: none;
}
/* Login-/Kontobereich */
#head_center {
margin-left: 400px;
margin-top: 120px;
position: absolute;
z-index: 10;
}
/* Navigation - Hoverbutton */
#mainbar ul li a, #mainbar ul li a:hover {
color: #ffffff;
}
/* Navigation */
#mainbar {
padding: 5px 10px 0 10px;
height: 165px;
background-image: url(https://www.imgbox.de/users/bYemma/Yooco/header_001.png);
background-color: #ffffff;
border-radius: 7px 7px 0 0;
-moz-border-radius: 7px 7px 0 0;
-webkit-border-radius: 7px 7px 0 0;
}
/* Navigation (Links) */
#mainbar ul li a {
color: #111111;
padding: 10px 15px 0 15px;
background-image: none;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 1px solid transparent;
margin: 2px 1px 5px 1px;
font-size: 13px;
text-shadow: 0 0 0.1em #83d103, 0 0 0.1em #83d103;
}
/* Navigation - Hoverbutton */
#mainbar ul li a:hover {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.6);
background-image: url(https://s2.yooco-static.de/s2/images/background/orig/1/21/0e893d88172617769ea95cadd5c14dd9.png);
border: 1px solid #111111;
margin: 2px 1px 5px 1px;
-webkit-box-shadow: 1px 1px 4px #327E04;
-moz-box-shadow: 1px 1px 4px #327E04;
box-shadow: 1px 1px 4px #327E04;
text-shadow: 0 0 0.1em #327E04, 0 0 0.1em #327E04;
}
/* Navigation - Aktiver Button */
#mainbar ul li a.active {
background-color: #83d103;
background-image: url(https://s2.yooco-static.de/s2/images/background/orig/1/21/0e893d88172617769ea95cadd5c14dd9.png);
border: 1px solid #111111;
margin: 2px 1px 5px 1px;
-webkit-box-shadow: 1px 1px 4px #327E04;
-moz-box-shadow: 1px 1px 4px #327E04;
box-shadow: 1px 1px 4px #327E04;
}
/* Grundelement des Untermenüs */
#mainbar ul li ul {
background-image: url(https://www.imgbox.de/users/bYemma/GLOBALS/50transparent.png);
background-color: transparent;
margin-top: -5px;
-webkit-box-shadow: 0px 0px 4px #a5a5a5;
-moz-box-shadow: 0px 0px 4px #a5a5a5;
box-shadow: 0px 0px 4px #a5a5a5;
border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
}
/* Link im Untermenü */
#mainbar ul li ul li a {
color: #111111;
background-color: transparent;
border: 0;
border-bottom: 1px solid #a5a5a5;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
text-shadow: 1px 1px #ffffff !important;
}
/* Hoverlink im Untermenü */
#mainbar ul li ul li a:hover {
color: #111111;
background-color: transparent;
border: 0;
border-bottom: 1px solid #a5a5a5;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* Unterster Untermenülink */
#mainbar ul li ul li a[href="#"] {
border: 0;
border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
}
/* "Du befindest dich hier"-Bereich */
#breadcrumb {
padding: 10px 20px;
background-image: url(https://www.imgbox.de/users/bYemma/Yooco/header_002.png);
background-repeat: repeat-x;
background-color: #ffffff;
}
/* Inhaltsbereich */
#content {
margin: 0 10px;
background-color: #ffffff;
background-image: url(https://www.imgbox.de/users/bYemma/Yooco/foot_001.png);
background-repeat: no-repeat;
background-position: bottom;
}
a[href="/impressum.html"]:before { /* Impressumsymbol */
content: url(https://s3.yooco-static.de/s3/images/website/1575172/image/Rounded/Impressum.png);
vertical-align: middle;
}
a[href="/datenschutz.html"]:before { /* Datenschutzsymbol */
content: url(https://s3.yooco-static.de/s3/images/website/1575172/image/Rounded/lock-icon.png);
vertical-align: middle;
}
a[href="/abuse.html"]:before { /* Missbrauchsymbol */
content: url(https://s3.yooco-static.de/s3/images/website/1575172/image/Rounded/missbrauch.png);
vertical-align: middle;
}
a[href="/agb.html"]:before { /* AGB-Symbol */
content: url(https://s3.yooco-static.de/s3/images/website/1575172/image/Rounded/paragraph.png);
vertical-align: middle;
}
a[href="/agb.html"], a[href="/abuse.html"], a[href="/datenschutz.html"], a[href="/impressum.html"] {
text-decoration: none !important;
}
body {
background-color: #f0f0f0;
background-repeat: repeat-x;
}
/* Große Box */
#container {
width: 760px;
padding: 0;
margin-top: 20px;
margin-bottom: 20px;
background-color: #ffffff;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-webkit-box-shadow: 0px 0px 4px #a5a5a5;
-moz-box-shadow: 0px 0px 4px #a5a5a5;
box-shadow: 0px 0px 4px #a5a5a5;
}
/* Header */
#head {
height: 0;
}
/* Homepagetitel und Beschreibung */
#head_left {
width: 700px;
margin-left: 10px;
margin-top: 50px;
position: absolute;
z-index: 10;
}
/* Homepagetitel */
#head_left h2.title a {
font-size: 50px;
color: #83d103;
}
/* Homepagebeschreibung */
#head_left p {
display: none;
}
/* Login-/Kontobereich */
#head_center {
margin-left: 400px;
margin-top: 120px;
position: absolute;
z-index: 10;
}
/* Navigation - Hoverbutton */
#mainbar ul li a, #mainbar ul li a:hover {
color: #ffffff;
}
/* Navigation */
#mainbar {
padding: 5px 10px 0 10px;
height: 165px;
background-image: url(https://www.imgbox.de/users/bYemma/Yooco/header_001.png);
background-color: #ffffff;
border-radius: 7px 7px 0 0;
-moz-border-radius: 7px 7px 0 0;
-webkit-border-radius: 7px 7px 0 0;
}
/* Navigation (Links) */
#mainbar ul li a {
color: #111111;
padding: 10px 15px 0 15px;
background-image: none;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 1px solid transparent;
margin: 2px 1px 5px 1px;
font-size: 13px;
text-shadow: 0 0 0.1em #83d103, 0 0 0.1em #83d103;
}
/* Navigation - Hoverbutton */
#mainbar ul li a:hover {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.6);
background-image: url(https://s2.yooco-static.de/s2/images/background/orig/1/21/0e893d88172617769ea95cadd5c14dd9.png);
border: 1px solid #111111;
margin: 2px 1px 5px 1px;
-webkit-box-shadow: 1px 1px 4px #327E04;
-moz-box-shadow: 1px 1px 4px #327E04;
box-shadow: 1px 1px 4px #327E04;
text-shadow: 0 0 0.1em #327E04, 0 0 0.1em #327E04;
}
/* Navigation - Aktiver Button */
#mainbar ul li a.active {
background-color: #83d103;
background-image: url(https://s2.yooco-static.de/s2/images/background/orig/1/21/0e893d88172617769ea95cadd5c14dd9.png);
border: 1px solid #111111;
margin: 2px 1px 5px 1px;
-webkit-box-shadow: 1px 1px 4px #327E04;
-moz-box-shadow: 1px 1px 4px #327E04;
box-shadow: 1px 1px 4px #327E04;
}
/* Grundelement des Untermenüs */
#mainbar ul li ul {
background-image: url(https://www.imgbox.de/users/bYemma/GLOBALS/50transparent.png);
background-color: transparent;
margin-top: -5px;
-webkit-box-shadow: 0px 0px 4px #a5a5a5;
-moz-box-shadow: 0px 0px 4px #a5a5a5;
box-shadow: 0px 0px 4px #a5a5a5;
border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
}
/* Link im Untermenü */
#mainbar ul li ul li a {
color: #111111;
background-color: transparent;
border: 0;
border-bottom: 1px solid #a5a5a5;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
text-shadow: 1px 1px #ffffff !important;
}
/* Hoverlink im Untermenü */
#mainbar ul li ul li a:hover {
color: #111111;
background-color: transparent;
border: 0;
border-bottom: 1px solid #a5a5a5;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* Unterster Untermenülink */
#mainbar ul li ul li a[href="#"] {
border: 0;
border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
}
/* "Du befindest dich hier"-Bereich */
#breadcrumb {
padding: 10px 20px;
background-image: url(https://www.imgbox.de/users/bYemma/Yooco/header_002.png);
background-repeat: repeat-x;
background-color: #ffffff;
}
/* Inhaltsbereich */
#content {
margin: 0 10px;
background-color: #ffffff;
background-image: url(https://www.imgbox.de/users/bYemma/Yooco/foot_001.png);
background-repeat: no-repeat;
background-position: bottom;
}
a[href="/impressum.html"]:before { /* Impressumsymbol */
content: url(https://s3.yooco-static.de/s3/images/website/1575172/image/Rounded/Impressum.png);
vertical-align: middle;
}
a[href="/datenschutz.html"]:before { /* Datenschutzsymbol */
content: url(https://s3.yooco-static.de/s3/images/website/1575172/image/Rounded/lock-icon.png);
vertical-align: middle;
}
a[href="/abuse.html"]:before { /* Missbrauchsymbol */
content: url(https://s3.yooco-static.de/s3/images/website/1575172/image/Rounded/missbrauch.png);
vertical-align: middle;
}
a[href="/agb.html"]:before { /* AGB-Symbol */
content: url(https://s3.yooco-static.de/s3/images/website/1575172/image/Rounded/paragraph.png);
vertical-align: middle;
}
a[href="/agb.html"], a[href="/abuse.html"], a[href="/datenschutz.html"], a[href="/impressum.html"] {
text-decoration: none !important;
}