136892
136892
10.05.2019
view6572
view18
0
Goto Top

WordPress Header Leiste ändern

gelöstFrageWebentwicklungEntwicklung
Hallo,

ich habe bei WordPress eine Webseite erstellt RSV-Seerose
Das Theme nennt sich "Sydney"
Das Theme ist kostenlos und soll kostenlos bleiben. (Kosten Gründe)

Meine Frage.
Auf der Startseite kann man die Menüs schlecht lesen.
Die Menüleiste soll mehr herausstechen z.B mit etwas Tranzparent, das man das Bild im Slider nur etwas schlechter sehen kann und die Menüs besser erkennbar werden.
Ich würde gerne mit CSS im Customizer Änderungen vornehmen.
Leider finde ich keinen Code dazu der für dieses Theme funktioniert.

Hoffe jemand kennt sich damit aus.
ShareTeilen
Auf Facebook teilen Auf Twitter teilen Auf Reddit teilen Auf Linkedin teilen

Content-ID: 449906

Url: https://administrator.de/contentid/449906

Ausgedruckt am: 20.11.2024 um 15:11 Uhr

18 Kommentare
Neuester Kommentar
Goto Top
Raku1994
Raku1994 10.05.2019 aktualisiert um 14:33:18 Uhr
Goto Top
Poste mal den Navigationsbereich deiner Style.css. Ist eigentlich nur das Hinzufügen eines Hintergrunds, der so groß wie die Menüleiste ist.

In der richtigen Klasse der Navigation reicht eigentlich folgendes (zum Testen einfach mal komplett schwarz):

background: #000000;
width: 100%;
height: 50px;

background sagt dem Template, dass die Menüleiste schwarz sein soll.

width setzt die Breite dieses Balkens auf die volle Breite des Menüs

height setzt die Höhe des Balkens auf 50 Pixel.
136892
136892 10.05.2019 um 14:47:33 Uhr
Goto Top
Danke erst mal für die Antowrt.

Die Style.css hat über 3000 Zeilen
Welche von denen soll ich hier Posten?
Kann ich auch den ganzen Code Block in einer txt Datei hochladen?
136892
136892 10.05.2019 um 14:49:18 Uhr
Goto Top
Hier ist der Teil Navigation:

/*--------------------------------------------------------------
Navigation
*/
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}
.posts-navigation .nav-previous {
padding-left: 15px;
}
.posts-navigation .nav-next {
padding-right: 15px;
}
.post-navigation {
margin: 30px 0 45px;
background-color: #f7f7f7;
padding: 30px;
position: relative;
}
.post-navigation a {
color: #47425d;
}
.post-navigation .nav-previous:hover span,
.post-navigation .nav-next:hover span {
color: #47425d;
}
.post-navigation span {
color: #c7c7c7;
transition: color 0.3s;
}
.post-navigation .nav-previous span {
margin-right: 10px;
}
.post-navigation .nav-previous {
border-right: 1px solid #ebebeb;
}
.post-navigation .nav-next span {
margin-left: 10px;
}
.navigation.pagination {
margin-top: 30px;
}
.nav-links .page-numbers {
background-color: #f7f7f7;
padding: 20px;
line-height: 1;
display: inline-block;
color: #443f3f;
}
.nav-links .page-numbers:not(.dots):hover,
.nav-links .page-numbers.current {
background-color: #252525;
color: #fff;
}
Raku1994
Raku1994 10.05.2019 um 14:49:22 Uhr
Goto Top
Glücklicherweise sind die CSS-Dateien in Wordpress-Themes sehr strukturiert und übersichtlich. Geh einfach in deine Style-Datei, drück STRG+F und verwende als Suchbegriff "Navigation" face-smile
136892
136892 10.05.2019 um 14:50:43 Uhr
Goto Top
Habe es gerade Gepostet face-smile
Raku1994
Raku1994 10.05.2019 um 14:51:59 Uhr
Goto Top
Ich erledige das mal schnell für dich. Folgendes kopieren und entsprechende Stelle in der Style.css ersetzen. Ist die erste klasse ganz oben.

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
background: #000000;
width: 100%;
height: 50px;
}
136892
136892 10.05.2019 um 14:57:37 Uhr
Goto Top
Danke aber leider hat sich auf der Webseite nicht geändert..
Cache habe ich auch geleert
139708
139708 10.05.2019 aktualisiert um 15:20:55 Uhr
Goto Top
Moin.
So in der Art?

Schwarz auf Weiß
screenshot
#mainnav ul li a, #mainnav ul li::before {
	color: black;
}
#mainnav {
	display: block;
	float: right;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	background: rgba(255,255,255,0.6);
}
oder Weiß auf Schwarz
screenshot
#mainnav {
	display: block;
	float: right;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	background: rgba(0,0,0,0.6);
}
Gruß wireguard
Pjordorf
Pjordorf 10.05.2019 um 15:16:26 Uhr
Goto Top
Hallo,

Zitat von @136892:
Danke aber leider hat sich auf der Webseite nicht geändert..
Und du bist sicher die richtige Style.css genommen zu haben? Durchsuche deinen WebServer mal nach style.css und schau dann welche dein Wordpress nutzt.

https://www.google.com/search?q=wordpress+sydney+theme+menu+color
https://de.wordpress.org/themes/sydney/

Gruß,
Peter
Kraemer
Kraemer 10.05.2019 aktualisiert um 15:19:46 Uhr
Goto Top
#mainnav {
		background-color:black;
		opacity: 0.7;
}

Mit opacity bestimmst du die Transparenz.
136892
136892 10.05.2019 aktualisiert um 17:44:33 Uhr
Goto Top
Danke wo muss den der Quellcode hin?
Ganz oben unter "Navigation"?
unbenannt
136892
136892 10.05.2019 um 17:47:20 Uhr
Goto Top
Danke hat sich erledigt.
Ich war nicht direkt im Customizer sondern in der Style.css Datei (Theme Editor)
136892
136892 10.05.2019 um 17:54:57 Uhr
Goto Top
Wäre es auch möglich die ganze Leise einzufärben das es ein Teil ist?
z.b bei PayPal ist es auch so getrennt
paypal
139708
139708 10.05.2019 aktualisiert um 18:00:08 Uhr
Goto Top
Zitat von @136892:

Wäre es auch möglich die ganze Leise einzufärben das es ein Teil ist?
?? Birnen, Äpfel ??
136892
136892 10.05.2019 um 18:02:39 Uhr
Goto Top
Hier wurden "nur" die Menü Schriften umrahmt. Ich würde gerne den ganzen oberen Teil einfärben also ein ganzer Block
Einschließlich dem Logo.
139708
Lösung 139708 10.05.2019 aktualisiert um 18:08:54 Uhr
Goto Top
Hinzufügen für Einfärbung bei Hover über den Header:
#masthead:hover {
	background: rgba(0,0,0,0.5);
}
136892
136892 10.05.2019 um 18:13:31 Uhr
Goto Top
Cool vielen Dank
Habe es so gemacht

.site-header.fixed {
background: rgba(0,0,0,0.5);
}
139708
139708 10.05.2019 um 18:16:45 Uhr
Goto Top
Na dann bitte auch Wie kann ich einen Beitrag als gelöst markieren?
gelöstFrageWebentwicklungEntwicklung
Heiß diskutiert
FohnbitNetzwerkgerät im Netzwerk verschwindet nach NeustartFohnbit - 34 Kommentareuser217Kaufberatung Hardware - Hyper-V Cluster 3 Nodesuser217 - 25 KommentarecseLaufwege erfassen in großer Hallecse - 20 Kommentareprplemk2Testumgebung bauen (Grundlegend)prplemk2 - 19 KommentarePharaunIntel-E810 QSFP28 to Mikrotik QSPF+ mit 40Gbit VerbindungPharaun - 18 Kommentaresuperfun2k24SSL VPN an Sophos UTM sehr langsamsuperfun2k24 - 16 KommentareFrontierAbsicherung eines privaten GastnetzesFrontier - 14 KommentareaufdemmarsHP Z620 USB hat kein Strom beim Startenaufdemmars - 13 KommentareadmtechEntwicklertagebuch: Release 6.4 - Filteradmtech - 13 KommentareYan2021Nachricht an mehrere PCs im Netzwerk sendenYan2021 - 12 KommentareZZaaiiggaaEDIFACT - Keins vorhanden ?ZZaaiiggaa - 11 KommentareManuManu2021Verpasster Anruf von +49-030-123456 mit einer Mobilfunk Prepaid SIMManuManu2021 - 11 Kommentare