textkleur in de menubalk wijzigen

Opgelost icarus83
(@icarus83)

8 jaren, 9 maanden geleden

Goedemorgen!

Ik zou graag de textkleur in m’n menubalk wijzigen maar zelfs na lang zoeken en experimenteren is het me nog steeds niet gelukt… Het probleem is dat ik de kleur van de menubalk wijzigen wil naar #ededd5, maar omdat de letters nu wit zijn zullen ze niet leesbaar worden.

Zoals gezegd heb ik gezocht in de stylesheet maar niets gevonden. Ook het toevoegen van een code (van het forum geleend) heb ik geprobeerd, maar dat heeft ook geen resultaat gebracht.

Wie kan me helpen, svp in bassie en adriaan taal want ik ben een echte leek…
hartelijk maandag!

15 reacties aan het bekijken - 1 tot 15 (van in totaal 20)

1 2 →

justinvdv
(@justinvdv)

8 jaren, 9 maanden geleden

Ik snap niet helemaal wat je bedoeld met de letters die niet meer leesbaar zijn dan?

Vanwaar dan deze kleur?

Heb je toevallig een link van je site?

Thread starter icarus83
(@icarus83)

8 jaren, 9 maanden geleden

De menubalk is nu donker en de letters licht. Ik wil de menubalk in een lichte kleur en dus zullen de letters in een donkere kleur moeten (zwart of donkergrijs)

m’n site is http://www.debierbasiliek.nl

justinvdv
(@justinvdv)

8 jaren, 9 maanden geleden

Kijk eerst even of het in de costumizer van je thema kan zoniet dan het volgende:

dit moeten we doen:

ga in je wordpress dashboard naar weergave -> editor.

Als het goed is opent hij automatisch het style.css bestand

vervolgens zoek je het volgende op doormiddel van de toetsen ctrl + f tegelijk te drukken:

#935820
deze kleur staat er 4 keer in

Hier kan je mee spelen dit is bijvoorbeeld ook de kleur voor als je met je muis erover heen gaat dit noem je een hover.

Als je een code veranderd sla hem wel even op voor de zekerheid kan je hem weer terug zetten als het toch niet is wat je wilt

als je dit opzoekt: @media only screen and (max-width: 799px)

dan zie je daar ergens deze kleuren staan:
background: #1f1f1f;
border-color: #1c1c1c;

dit zijn de kleuren van het menu op de mobiel.
de border-color zijn de randjes tussen de verschillende tabs in je menu.

Hier kan je dan ook mee spelen en andere kleuren codes invoegen om te krijgen wat je wilt hebben.

succes!

Thread starter icarus83
(@icarus83)

8 jaren, 9 maanden geleden

Bedankt voor je duidelijke uitleg. Ik heb de menubalk van kleur kunnen veranderen. Nu wil ik graag de textkleur nog veranderen naar zwart of donkergrijs(een kleurnummer weet ik te vinden :))

weet je waar ik dat kan aanpassen?

justinvdv
(@justinvdv)

8 jaren, 9 maanden geleden

Ik zou zo even voor je kijken ik ben nu niet achter de computer ben rond half 3 weer thuis. Dan zal ik direct even kijken

justinvdv
(@justinvdv)

8 jaren, 9 maanden geleden

Deze is voor de button Home:

#menu-primary .search-toggle:focus::before { color: #fff; }

en deze 2 voor de overige buttons

#menu-primary .menu-toggle button { color: rgba( 255, 255, 255, 0.75 ); }

#menu-primary .menu-toggle button:focus { color: rgba( 255, 255, 255, 0.75 ); }

laat even weten of het gelukt is.

Succes!

Thread starter icarus83
(@icarus83)

8 jaren, 9 maanden geleden

Ik heb het menu kunnen aanpassen, enorm bedankt voor al je hulp!
Alleen de home button is nog niet in de gewenste kleur. Wel op de weergave op mobiel maar daar verspringt ie weer van kleur als je het menu opent…
justinvdv
(@justinvdv)

8 jaren, 9 maanden geleden
Hey,

Ik heb nog even gekeken ik zie dat je site de #fff (wit) gebruikt voor veel dingen onder 1 code.

dus als je dan #fff veranderd verander je hem overal.

Ik zie dat hij een current functie heeft. dat houdt in als je op de tab home bent is home wit geselecteerd. Ik zie ook bijvoorbeeld navigatie staan in het wit. stel dat we de current link bijv blauw maken wordt navigatie ook blauw.

Als je dit wilt hoef je alleen maar #fff te veranderen en als je alleen de current link van kleur wilt veranderen doen we het volgende:

dit is de code waar die onder valt:
```
::selection {
	color: #fff; /* Don't combine with other elements. Breaks Firefox. */
}

blockquote,
blockquote a:hover,
blockquote a:focus,
.entry-content blockquote a:hover,
.entry-content blockquote a:focus,
.wp-calendar td.has-posts a,
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
#menu-primary .menu-toggle button:hover,
#menu-primary .menu-toggle button:focus,
------------> #menu-primary   li.current-menu-item > a,  <----------
#menu-primary   li a:hover,
#menu-primary   li a:focus,
#menu-secondary li li a:hover,
#menu-secondary li li a:focus,
#menu-sub-terms li a,
.page-links a,
.page-links a:hover,
.page-links a:focus,
.widget-title > .wrap,
.widget-title > .wrap a,
#comments-number > .wrap,
#reply-title > .wrap,
.attachment-meta-title > .wrap,
.comment-reply-link,
.comment-reply-login,
.comment-reply-link:hover,
.comment-reply-link:focus,
.comment-reply-login:hover,
.comment-reply-login:focus,
.media-shortcode-extend a,
.media-shortcode-extend a:hover,
.media-shortcode-extend a:focus,
.media-info-toggle,
.entry-content .media-info-toggle,
.mejs-time .mejs-currenttime,
.mejs-time .mejs-duration,
.mejs-volume-button .mejs-volume-slider .mejs-volume-current,
.mejs-volume-button .mejs-volume-slider .mejs-volume-handle,
.media-info-toggle:hover,
.media-info-toggle:focus,
.mejs-overlay-play .mejs-overlay-button::after,
.mejs-time-rail .mejs-time-float,
.wp-playlist-dark .wp-playlist-playing,
.wp-playlist-dark .wp-playlist-caption:hover,
.wp-playlist-dark .wp-playlist-caption:focus,
.wp-playlist-dark .wp-playlist-item:hover
.wp-playlist-dark .wp-playlist-item:focus,
.skip-link .screen-reader-text:focus {
	color: #fff;
}
```
Ik heb de code van de current link functie genoteerd met pijlen.

we gaan dit hele stuk nu zo invoegen:
```
::selection {
	color: #fff; /* Don't combine with other elements. Breaks Firefox. */
}

blockquote,
blockquote a:hover,
blockquote a:focus,
.entry-content blockquote a:hover,
.entry-content blockquote a:focus,
.wp-calendar td.has-posts a,
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
#menu-primary .menu-toggle button:hover,
#menu-primary .menu-toggle button:focus,
#menu-primary   li a:focus,
#menu-secondary li li a:hover,
#menu-secondary li li a:focus,
#menu-sub-terms li a,
.page-links a,
.page-links a:hover,
.page-links a:focus,
.widget-title > .wrap,
.widget-title > .wrap a,
#comments-number > .wrap,
#reply-title > .wrap,
.attachment-meta-title > .wrap,
.comment-reply-link,
.comment-reply-login,
.comment-reply-link:hover,
.comment-reply-link:focus,
.comment-reply-login:hover,
.comment-reply-login:focus,
.media-shortcode-extend a,
.media-shortcode-extend a:hover,
.media-shortcode-extend a:focus,
.media-info-toggle,
.entry-content .media-info-toggle,
.mejs-time .mejs-currenttime,
.mejs-time .mejs-duration,
.mejs-volume-button .mejs-volume-slider .mejs-volume-current,
.mejs-volume-button .mejs-volume-slider .mejs-volume-handle,
.media-info-toggle:hover,
.media-info-toggle:focus,
.mejs-overlay-play .mejs-overlay-button::after,
.mejs-time-rail .mejs-time-float,
.wp-playlist-dark .wp-playlist-playing,
.wp-playlist-dark .wp-playlist-caption:hover,
.wp-playlist-dark .wp-playlist-caption:focus,
.wp-playlist-dark .wp-playlist-item:hover
.wp-playlist-dark .wp-playlist-item:focus,
.skip-link .screen-reader-text:focus {
	color: #fff;
}

#menu-primary li.current-menu-item>a,
#menu-primary li a:hover {
    color: #kleurencode;
}
```
Zoals je ziet heb ik ook de hover erin gedaan die kan je ook scheiden door die los van elkaar te doen dan krijg je dit:
```
#menu-primary li.current-menu-item>a {
    color: #kleurencode;
}

#menu-primary li a:hover {
    color: #kleurencode;
}
```
op deze manier kan je een andere kleur selecteren als je met de muis erover heen gaat.

Ik hoop dat dit is wat je wilt zo niet laat het maar weer even weten

Succes!
justinvdv
(@justinvdv)

8 jaren, 9 maanden geleden
Bij de mobiele versie is je menu tekst nog wit.

Kan je veranderen door dit op te zoeken
```
@media only screen and (max-width: 799px) {

	#menu-secondary .wrap,
	#menu-primary .search-form > div { background: #1f1f1f; }

	#menu-primary li a,
	#menu-secondary li a,
	#menu-secondary .menu-toggle button {
		color:        rgba( 255, 255, 255, 0.75 );
		background:   #1f1f1f;
		border-color: #1c1c1c;
	}
```
even:

color: rgba( 255, 255, 255, 0.75 );

veranderen naar je eigen kleur

😉
Thread starter icarus83
(@icarus83)

8 jaren, 9 maanden geleden

fantastisch!! helemaal gelukt, de site op mobiel is nu perfect! Ik heb alleen ergens een foutje gemaakt (weet helaas niet waar) en kan het niet terugvinden in de voorgaande stappen:

de sliders uit de menubalk zijn ineens weer donker geworden, de kleurcode #935820 kan ik niet meer vinden en dus ook de juiste locatie niet 🙂

Sorry voor m’n gepruts, nog een laatste beetje hulp zou ik heel erg fijn vinden! Heel hartelijk bedankt alvast Justin!
justinvdv
(@justinvdv)

8 jaren, 9 maanden geleden
```
@media only screen and (min-width: 800px) {

		.menu li > ul::before {
			border-right-color:  transparent;
			border-bottom-color: #252525;
			border-left-color:   transparent;
		}

		.menu li li > ul::before {
			border-top-color:    transparent;
			border-bottom-color: transparent;
		}

		.ltr .menu li li > ul::before { border-right-color: #252525; }
		.rtl .menu li li > ul::before { border-left-color:  #252525; }

		#menu-primary   li li a,
		#menu-secondary li li a {
			background:   #1f1f1f;
			border-color: #1d1d1d;
		}
```
en dan dit stukje

#menu-primary li li a,
#menu-secondary li li a {
background: #1f1f1f;
border-color: #1d1d1d;

Die 2 codes zijn voor je submenu’s

Succes!
Thread starter icarus83
(@icarus83)

8 jaren, 9 maanden geleden

GE-WEL-DIG!!! helemaal gelukt, mega thanks!!

justinvdv
(@justinvdv)

8 jaren, 9 maanden geleden

Geen dank,

Kom snel even een biertje drinken hahah 😉

Thread starter icarus83
(@icarus83)

8 jaren, 9 maanden geleden

Altijd welkom!

Thread starter icarus83
(@icarus83)

8 jaren, 9 maanden geleden

Goedemorgen!

Ik heb nog twee een kleine vraagjes:

– heb een menu’tje in de sidebar gemaakt maar deze text is nu te donker. Volgens mij heet die h3 maar kan helaas niet terugvinden waar ik deze textkleur aan kan passen. Kan je me daarbij helpen?

– de font op de mobiele versie wordt niet goed weergegeven. Ik heb de font die ik wil gebruiken ingebakken in de website. Waar kan ik dat corrigeren?

bij voorbaat dank voor je reactie!

15 reacties aan het bekijken - 1 tot 15 (van in totaal 20)

1 2 →

Het onderwerp ‘textkleur in de menubalk wijzigen’ is gesloten voor nieuwe reacties.

Tags

Onderwerpen

Meest populaire onderwerpen

Onderwerpen zonder reacties

Non-support onderwerpen

Opgeloste onderwerpen

Onopgeloste onderwerpen

Alle onderwerpen