136892
136892
May 10, 2019
view6185
view18
0
Goto Top

WordPress Header Leiste ändern

GermansolvedQuestionWeb DevelopmentDevelopment
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.
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 449906

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

Printed on: April 19, 2024 at 17:04 o'clock

18 Comments
Latest comment
Goto Top
Member: Raku1994
Raku1994 May 10, 2019 updated at 12:33:18 (UTC)
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.
Mitglied: 136892
136892 May 10, 2019 at 12:47:33 (UTC)
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?
Mitglied: 136892
136892 May 10, 2019 at 12:49:18 (UTC)
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;
}
Member: Raku1994
Raku1994 May 10, 2019 at 12:49:22 (UTC)
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
Mitglied: 136892
136892 May 10, 2019 at 12:50:43 (UTC)
Goto Top
Habe es gerade Gepostet face-smile
Member: Raku1994
Raku1994 May 10, 2019 at 12:51:59 (UTC)
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;
}
Mitglied: 136892
136892 May 10, 2019 at 12:57:37 (UTC)
Goto Top
Danke aber leider hat sich auf der Webseite nicht geändert..
Cache habe ich auch geleert
Mitglied: 139708
139708 May 10, 2019 updated at 13:20:55 (UTC)
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
Member: Pjordorf
Pjordorf May 10, 2019 at 13:16:26 (UTC)
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
Member: Kraemer
Kraemer May 10, 2019 updated at 13:19:46 (UTC)
Goto Top
#mainnav {
		background-color:black;
		opacity: 0.7;
}

Mit opacity bestimmst du die Transparenz.
Mitglied: 136892
136892 May 10, 2019 updated at 15:44:33 (UTC)
Goto Top
Danke wo muss den der Quellcode hin?
Ganz oben unter "Navigation"?
unbenannt
Mitglied: 136892
136892 May 10, 2019 at 15:47:20 (UTC)
Goto Top
Danke hat sich erledigt.
Ich war nicht direkt im Customizer sondern in der Style.css Datei (Theme Editor)
Mitglied: 136892
136892 May 10, 2019 at 15:54:57 (UTC)
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
Mitglied: 139708
139708 May 10, 2019 updated at 16:00:08 (UTC)
Goto Top
Zitat von @136892:

Wäre es auch möglich die ganze Leise einzufärben das es ein Teil ist?
?? Birnen, Äpfel ??
Mitglied: 136892
136892 May 10, 2019 at 16:02:39 (UTC)
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.
Mitglied: 139708
Solution 139708 May 10, 2019 updated at 16:08:54 (UTC)
Goto Top
Hinzufügen für Einfärbung bei Hover über den Header:
#masthead:hover {
	background: rgba(0,0,0,0.5);
}
Mitglied: 136892
136892 May 10, 2019 at 16:13:31 (UTC)
Goto Top
Cool vielen Dank
Habe es so gemacht

.site-header.fixed {
background: rgba(0,0,0,0.5);
}
Mitglied: 139708
139708 May 10, 2019 at 16:16:45 (UTC)
Goto Top
Na dann bitte auch How can I mark a post as solved?
GermansolvedQuestionWeb DevelopmentDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsjstrickerWIREGUARD VPN ON UDM PRO BEHIND FRITZBOX - HANDSHAKE DID NOT COMPLETEjstricker - 3 CommentsDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment