Support » CSS / opmaak vragen » Wijzigen kleur menubalk

  • Hoi,

    Ik wil graag de kleur van mijn menubalk wijzigen, maar weet niet waar in CSS style ik moet kijken.
    Het thema is Premium Style.

    Op mijn iMac heeft de menubalk een andere kleur dan op mijn Windows laptop. Hoe kan dit? En naar welke moet ik nu kijken?

    Misschien een stomme vraag, maar als ik mijn link opstuur, dan kan iedereen toch in mijn website werken. Hij is nog niet online.

    Gr. Liza538

11 reacties aan het bekijken - 1 tot 11 (van in totaal 11)
  • Als jij ’n link naar je website met de inloggegevens erbij dan kunnen wij inderdaad je website binnen komen. Maar anders niet.

    De achtergrond van je site wordt geregeld door

    `
    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    background: jouw-kleurnummer;
    }

    Succes!

    groet,
    Lianne

    Hoi Lianne,

    Ik wil de menubalk een andere kleur geven. Niet de gehele achtergrond. Heb ik dan onderstaande deel uit style.CSS nodig. En welke kleurcode moet ik aanpassen (of meerdere)?

    .main-navigation ul.nav-menu,
    	.main-navigation div.nav-menu > ul {
    		display: inline-block !important;
    		text-align: left;
    		width: 100%;
    		background-color:#222222;
    		color: #FFFFFF;
    		background: url("images/alert-overlay.png") repeat-x scroll 0 0 #222222;

    Gr. Liza538

    De background-color moet je aanpassen. van de selector die je zelf opgeeft. Die moet je je eigen kleurnummer geven. Precies zoals ik in post twee aangeef.

    Dit doe je het beste in een childtheme. Als je hiermee geen ervaring hebt, is het gemakkelijk om even tijdelijk de plugin One Click Childtheme te installeren. (Deze kan nadat je het childtheme hebt gemaakt direct weer deinstalleren. Deze werkmethode zorgt ervoor dat bij een update van je thema je wijzigingen niet verloren gaan.

    Succes!

    Lianne

    Dag Liza,

    Zou je even een link naar je website willen plaatsen? Dan geef ik je de juiste code.

    Groet,
    Thijs
    __________________
    Leer in eenvoudige stappen hoe je een professionele WordPress website maakt met de WP Handleiding | http://www.wphandleiding.nl

    Lianne,
    Precies gedaan wat je zei. Echter alleen op Windows laptop veranderd de kleur aan de zijkant van de menubalk. De menubalk zelf veranderd niet van kleur.
    Ik ben een leek. In welk deel van style.CSS moet de wijziging plaatsvinden?

    Premium Style Default Theme CSS
    Premium Style Site Layout & Look
    Premium Style Header CSS
    Premium Style search form
    Premium Style entry meta CSS
    Premium Style entry meta CSS
    Premium Style entry meta CSS
    Premium Style indexloop CSS
    Premium Style Breadcrumbs CSS
    Premium Style entry CSS
    Premium Style comment CSS
    Premium Style tags & categories CSS
    Premium Style Author info Box CSS
    Premium Style Related Posts Box CSS
    Premium Style Navigation Box CSS
    Premium Style image CSS
    Premium Style widget CSS
    Premium Style social icon CSS
    Premium Style calendar CSS
    Premium Style pagination CSS
    Premium Style pagenavi CSS
    Premium Style footer CSS
    Premium Style copyright CSS
    Premium Style scroll and sticky CSS
    Premium Style Comments Form CSS
    Premium Style respond CSS
    Premium Style Pingbacks & Trackbacks CSS
    Premium Style gendral CSS
    Premium Style menu CSS

    Gr. Liza538

    Dag Liza,

    In: Premium Style Header CSS
    Maar ik zou adviseren om het zonder die plugin te doen en gewoon in de STYLE.CSS toe te voegen onderaan.

    Dit is de juiste code:

    .main-navigation div.nav-menu > ul {
    background: url(“images/alert-overlay.png”) repeat-x scroll 0 0 #e34523 !important;
    }

    En dan “#e34523” aanpassen in de kleur die je wilt.

    Groet,
    Thijs
    __________________
    Leer in eenvoudige stappen hoe je een professionele WordPress website maakt met de WP Handleiding | http://www.wphandleiding.nl

    Thijs, jouw code werkte niet. Er veranderde niets.
    Lianne, jouw code werkt wel voor Windows, maar niet voor Apple. Op mijn iMac veranderde niets. Is hier ook nog een leuke code voor?

    Jullie weten ook vast de code om de letterkleur in het menu te wijzigen.

    Gr. Liza538

    Hmmm vreemd, sorry.

    Wat is de link naar je website, dan geef ik je beide codes die op alle OS werken.

    Groet,
    Thijs
    __________________
    Leer in eenvoudige stappen hoe je een professionele WordPress website maakt met de WP Handleiding | http://www.wphandleiding.nl

    Hoi,

    Ik heb je template nog een keer bekeken en zie dat je menubalk op verschillende plekken is geregeld. De selector die ik boven noem is besloten in een mediaquerie (hiermee regel je responsive gedrag).

    Advies blijft om een childtheme te maken, met maar 1 stylesheet, nl style.css, en daarin alleen je wijzigingen op te nemen. De code wordt dan:

    @media screen and (min-width: 600px)
    {
    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    background: url("images/alert-overlay.png") repeat-x scroll 0 0 XXjouw-kleurnummerXX !important;
    }
    }

    Hier ‘luistert’ zowel een Mac (daar werk ik mee) als in Windows.

    Succes!

    Lianne

    Lianne, ik ben echt een leek en begrijp niet wat je hierboven zegt.
    Bedoel je een apart kopje in style.CSS, waarin de wijzigingen komen.

    /**************** Premium Style …………… CSS ****************/

    Mijn advies beslaat twee elementen

    1. Maak een childtheme ( de One Click Childtheme plugin helpt je hierbij). Dit childtheme gebruikt alles van ‘Premium Style’, maar laat zich binnen het childtheme overschrijven. Hier een youtube-videootje over hoe met deze plugin een childtheme te maken. Zoals gezegd kun je direct nadat je dit hebt gedaan, de plugin ‘One click childtheme’ weer verwijderen.
    2. Je childtheme heeft een eigen bestand, genaamd style.css. Het is good practice hierin je wijzigingen m.b.t. css op te nemen. Een comment erbij helpt je later te achterhalen waarom je die code hebt opgenomen. Dit kun je meteen volgend op de code die al in dit bestand staat plaatsen.
    /*Achtergrondkleur van navigatie-balk aanpassing */
    @media screen and (min-width: 600px)
    {
    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    background: url("images/alert-overlay.png") repeat-x scroll 0 0 XXjouw-kleurnummerXX !important;
    }
    }

    Heel moeilijk is het niet.

    Succes!

    Lianne

11 reacties aan het bekijken - 1 tot 11 (van in totaal 11)
  • Het onderwerp ‘Wijzigen kleur menubalk’ is gesloten voor nieuwe reacties.