SebastianGeiger
Grünschnabel
Hallo zusammen,
eines gleich vorweg. Ich bin relativ neu auf dem Gebiet was das Anpassen von CSS-Dateien geht. Es wäre also nett, wenn ihr eure Antworten möglichst detailiert ausführt.
Zum Problem:
Ich habe eine Homepage mit Wordpress erstellt und dazu ein fertiges Theme heruntergeladen. Nun bin ich dabei das Theme etwas anzupassen. Konkret geht es mir momentan um die Anpassung der Navigation. Hier ein Bild: http://imageshack.us/photo/my-images/573/navigation.png/
Wie ihr sehen könnt, erkennt man dass die Navigation etwas heller/transparenter ist als der Hintergrund. Ich würde aber gerne den Navigationsbalken deutlich dünkler machen. (in etwa den Farbcode #7c0507). Ich finde aber absolut nicht die entsprechende stelle im CSS. Ich habe es schon mit FireBug probiert - was mir aber auch nicht weitergeholfen hat. Leider kann ich euch keinen Link zur Seite geben, da momentan alles lokal bei mir auf dem Rechner läuft.
Hier aber der CSS-Code für die Navigation aus der style.css
Vielen Dank bereits im Voraus für eure Hilfe!
Viele Grüße
Sebastian
eines gleich vorweg. Ich bin relativ neu auf dem Gebiet was das Anpassen von CSS-Dateien geht. Es wäre also nett, wenn ihr eure Antworten möglichst detailiert ausführt.
Zum Problem:
Ich habe eine Homepage mit Wordpress erstellt und dazu ein fertiges Theme heruntergeladen. Nun bin ich dabei das Theme etwas anzupassen. Konkret geht es mir momentan um die Anpassung der Navigation. Hier ein Bild: http://imageshack.us/photo/my-images/573/navigation.png/
Wie ihr sehen könnt, erkennt man dass die Navigation etwas heller/transparenter ist als der Hintergrund. Ich würde aber gerne den Navigationsbalken deutlich dünkler machen. (in etwa den Farbcode #7c0507). Ich finde aber absolut nicht die entsprechende stelle im CSS. Ich habe es schon mit FireBug probiert - was mir aber auch nicht weitergeholfen hat. Leider kann ich euch keinen Link zur Seite geben, da momentan alles lokal bei mir auf dem Rechner läuft.
Hier aber der CSS-Code für die Navigation aus der style.css
Code:
/* 2.2 Navigation */
#navigation{ font:bold 13px/1em arial, sans-serif; margin-top: 6px; }
#navigation ul.rss { margin: 0 0 0 10px; padding: 8px 0; }
.nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; }
.nav a { position:relative; color: #ffffff; display:block; z-index:100; padding:7px 10px; line-height:18px; text-decoration:none; text-shadow:0 1px 0 #000; }
.nav li { float:left; width: auto; margin-left: 15px; }
.nav li a.sf-with-ul { padding-right:20px; }
.nav a:hover,
.nav li.current_page_item a,
.nav li.current_page_parent a,
.nav li.current-menu-ancestor a,
.nav li.current-cat a,
.nav li.current-menu-item a,
.nav li.sfHover { background:#510e00; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
/* Optional Styling */
#navigation {
/* Border Radius */
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
/* Box Shadow */
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.03);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.03);
box-shadow: 0 2px 2px rgba(0,0,0,.03);
}
#navigation .nav li a { }
#navigation .nav li:first-child a { border-left:none; }
/* 2.2.1 Drop-down menus */
.nav li ul { background: #510e00; margin:0 0 0 -1px; padding:7px 10px; position: absolute; left: -999em; width: 160px; z-index:999; }
.nav li ul li { margin-left: 0px !important; }
.nav li ul li a { padding:8px 0px; width:160px; color:#ffffff; background: none; font-size:0.9em;}
.nav li ul li a:hover { text-decoration: underline; }
.nav li ul li a.sf-with-ul { padding-right:0; }
.nav li ul ul { margin: -37px 0 0 140px; }
.nav li ul li a:hover,
.nav li.current_page_item ul li a,
.nav li.current_page_parent ul li a,
.nav li.current-menu-ancestor ul li a,
.nav li.current-cat a ul li,
.nav li.current-menu-item ul li a,
.nav li.sfHover ul li { background:none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;}
.nav li:hover,.nav li.hover { position:static; }
.nav li:hover ul ul, .nav li.sfhover ul ul,
.nav li:hover ul ul ul, .nav li.sfhover ul ul ul,
.nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; }
.nav li:hover ul, .nav li.sfhover ul,
.nav li li:hover ul, .nav li li.sfhover ul,
.nav li li li:hover ul, .nav li li li.sfhover ul,
.nav li li li li:hover ul, .nav li li li li.sfhover ul { left:auto; }
.nav .sf-sub-indicator {background: url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.4em;top:44%;width:10px;height:10px;text-indent:-999em;overflow:hidden;}
.nav li ul .sf-sub-indicator {background:url(images/arrow-superfish-right.png) no-repeat; top:38%; }
/* Optional Styling */
#navigation .nav li ul {
/* Border Radius */
border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px;
/* Box Shadow */
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.03);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.03);
box-shadow: 0 2px 2px rgba(0,0,0,.03);
}
#navigation .nav li ul ul { border-radius: 0 4px 4px 4px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
#navigation .nav li ul li a { border:0; border-top:1px solid #333333; border-bottom:1px solid #222222; }
#navigation .nav li ul li:first-child a { border-top:none; }
#navigation .nav li ul li:last-child a { border-bottom:none; }
/* 2.2.2 Top Navigation (optional) */
#top { background: #000; }
#top .nav { }
#top .nav a { color:#ddd; padding:8px 10px; line-height:18px; text-decoration:none; text-shadow:none; }
#top .nav li { }
#top .nav li a.sf-with-ul { padding-right:20px; }
#top .nav a:hover,
#top .nav li.current_page_item a,
#top .nav li.current_page_parent a,
#top .nav li.current-menu-ancestor a,
#top .nav li.current-cat a,
#top .nav li.current-menu-item a,
#top .nav li.sfHover { background: #222; }
#top .nav li ul { background: #222; margin:0; padding:0px; width: 180px; border: none; z-index:999;
/* Box Shadow */
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
#top .nav li ul, #top .nav li ul li:last-child a {
/* Border Radius */
border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px;
}
#top .nav li ul li { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
#top .nav li ul li a { padding:8px 10px; width:160px; color:#ddd; background: none; font-size:0.9em;}
#top .nav li ul li a:hover { background: #000; }
#top .nav li ul li a.sf-with-ul { padding-right:10px; }
#top .nav li ul ul { margin: -34px 0 0 180px; }
#top .nav li:hover, #top .nav li.hover { position:static; }
#top .nav li:hover ul ul, #top .nav li.sfhover ul ul,
#top .nav li:hover ul ul ul, #top .nav li.sfhover ul ul ul,
#top .nav li:hover ul ul ul ul, #top .nav li.sfhover ul ul ul ul { left:-999em; }
#top .nav li:hover ul, #top .nav li.sfhover ul,
#top .nav li li:hover ul, #top .nav li li.sfhover ul,
#top .nav li li li:hover ul, #top .nav li li li.sfhover ul,
#top .nav li li li li:hover ul, #top .nav li li li li.sfhover ul { left:auto; }Vielen Dank bereits im Voraus für eure Hilfe!
Viele Grüße
Sebastian
