Ondersteuning » Thema en CSS/opmaak » Zoekbalk andere kleur

  • Hoi wie kan mij helpen? Mijn zoekbalk is donker grijs en als ik er op klik is hij lichtgrijs. Deze kleuren wil ik veranderen, maar dat lukt mij niet.Waar of hoe kan ik dat veranderen? Ik heb al bij Style. css gekeken maar het lukt me niet.

8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
  • Wat is de URL van je website?
    Welk Theme gebruik je?
    Zo kunnen we hier advies op maat geven.

    Thread starter Leo Goossens

    (@leo-goossens)

    Ik gebruik als thema twenty eleven en ik ben net begonnen met mijn website (er staat dus nog niets op).

    #access {
    	background: #222; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#252525, #0a0a0a);
    	background: -o-linear-gradient(#252525, #0a0a0a);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    	background: -webkit-linear-gradient(#252525, #0a0a0a);
    }
    #access a {
    	color: #eee;
    }
    
    #access ul ul a {
    	background: #f9f9f9;
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
    	background: #efefef;
    }

    Hieronder de instellingen voor het ‘actieve’ menu

    #access li:hover > a,
    #access a:focus {
    	background: #f9f9f9; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    	color: #373737;
    }

    Bovenstaand is [een deel van] de betreffende CSS-code.
    Dat ziet er zo ‘ingewikkeld’ uit, omdat

    1. er gebruik wordt gemaakt van kleurverloop in de menubalk
    2. kleurverloop voor de verschillende browsers, anders gecodeerd wordt >> de diverse varianten worden dus opgenomen

    voorbeeld:

    #access {
    	background: #222; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#99cc66, #eeeeee);/*appeltjesgroe naar lichtgrijs*/
    	background: -o-linear-gradient(#99cc66, #eeeeee);/*appeltjesgroe naar lichtgrijs*/
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#99cc66), to(#eeeeee)); /* older webkit syntax */
    	background: -webkit-linear-gradient(#99cc66, #eeeeee);
    }

    == == ==
    Pas de kleuren aan naar wens [zie bijv. `www.colorpicker.com’]

    Voeg bovenstaande code toe aan style.css van je CHILDtheme.
    Zo voorkom je dat al je aanpassingen worden overschreven als de makers van je theme een update installeren.
    Verder heeft het als voordeel dat alle aanpassingen overzichtelijk bij elkaar staan. Dat is makkelijk, overzichtelijk en eenvoudiger te onderhouden.

    Kies je ooit een ander theme, dan dien je een nieuw childtheme te maken.

    Heb je nog geen childtheme?

    1. installeer en activeer ‘one click childtheme’-plug-in
    2. activeer de originele theme
    3. Dashboard > weergave > child theme
    4. beantwoordt de vragen op het scherm
      >> er wordt een child theme aangemaakt in een map met bestanden zoals style.css;
    5. Activeer het childtheme.
    6. ==

    7. om je site aan te passen, maak je nu alle wijzigingen in de map en bestanden van je child theme.
      – Maak je aanpassingen in style.css van het childtheme;
      – mocht je aanpassingen willen maken in de originele php-bestanden, kopieer de betreffende php-file uit het originele theme naar de map van het childtheme. Maak hierin dan de gewenste aanpassingen.

    == == == Extra
    Als je precies wilt zien welke elementen je site heeft en welke opmaak-kenmerken [css] daarbij horen, installeer dan bijv de browser-add-on ‘firebug’ of of rechtsklik en kies ‘element inspecteren’.

    Zo kan je op zoek naar de diverse elementen en de kenmerken zoals kleuren, layout etc. aanpassen.

    Thread starter Leo Goossens

    (@leo-goossens)

    Hoi,
    Ik ben vergeten te vertellen dat ik de koptekst heb weggehaald en dat de zoekbalk zich verplaatst heeft naar de menu balk.
    Daar is de zoekbalk zwart geworden. Mijn menubalk is blauw, en daar staat ‘zoeken’ in het zwart en als ik er op klikt wordt hij licht grijs. Moet ik dan de zelfde kleurcode’s gebruiken (en veranderen) wat u hier boven heeft neergezet? Ik heb wel het een en ander geprobeerd maar het nog steeds de kleur zwart in de zoekbalk.Ik hoop dat u me verder kan helpen

    Wat is de URL van je website?
    Welk Theme gebruik je?
    Zo kunnen we ZIEN wat er aan de hand is.

    Thread starter Leo Goossens

    (@leo-goossens)

    Ik heb de koptekst weer neer gezet. Tekst weggehaald en alleen de zoekbalk laten staan. Zo doet hij het wel goed. Alleen heb ik nu in de menubalk als ik een keuze maak en ik op een keuze(artikelen) sta dat hij wit wordt dus de het keuze woord niet meer zie.
    Ik gebruik twenty eleven (zie hier boven) op mijn site staat nog niks.

    Kwestie van de kleur van de tekst aanpassen.

    #access li:hover > a,
    #access a:focus, #access ul ul a, #access ul ul :hover > a{
       color:#99cc66; /*appeltjesgroen aanpassen*/
    }

    …Beginner / gevorderd / expert…
    Om succesvol te werken aan een website is het belangrijk dat je de basisbeginselen onder de knie krijgt van HTML en CSS. Je hoeft geen expert te worden, maar met wat basiskennis gaat het een stuk makkelijker 😉 [Een heel klein beetje kennis van PHP helpt ook, maar is doorgaans niet direct nodig]
    Zo kan je een gekozen theme makkelijker aanpassen aan je behoeften.

    == == == leesvoer:

    http://www.w3schools.com/css/default.asp
    http://codex.wordpress.org/Getting_Started_with_WordPress
    http://codex.wordpress.org/CSS
    http://codex.wordpress.org/Finding_Your_CSS_Styles
    http://codex.wordpress.org/FAQ_Troubleshooting
    http://codex.wordpress.org/Backing_Up_Your_Database
    Natuurlijk zijn er ook trainingen op het internet te vinden…
    bijv. [engels, betaald] Lynda.com:
    http://www.lynda.com/WordPress-tutorials/WordPress-Essential-Training/154417-2.html
    Natuurlijk zijn we op dit forum bereid je verder te helpen met je vragen / keuzes…

    Thread starter Leo Goossens

    (@leo-goossens)

    Mijn URL is: sms-goossens.info
    mijn theme: Twenty Eleven

8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
  • Het onderwerp ‘Zoekbalk andere kleur’ is gesloten voor nieuwe reacties.