Ondersteuning » Thema en CSS/opmaak » menubalk twee kleuren maken?

  • Beste WP specialisten ;),

    Na al ongeveer drie uur bezig te zijn, dacht ik: laat ik het gewoon eens vragen.
    Hoe kan je de menubalk twee kleuren krijgen?
    Ik weet ondertussen hoe je de kleur van de balk aan kunt passen, maar ik wil net als bijvoorbeeld apple, een licht kleur verschil aanbrengen in mijn menubalk zodat het er wat mooier uitziet.
    In de tutorialvideo’s zie je dat ze ‘background-image’ aanpassen, maar ik heb dat niet in mijn css. –> Website is: http://www.provideradviseur.nl and wordpress theme is vantage. Dit is de huidige css code die ik aan kan passen om de kleur te wijzigen: (trouwens, let nog niet te veel op de website zelf, hij is nog niet af en nog in testfase!)

    /* =Menu
    ———————————————– */

    .main-navigation {
    position: relative;

    background: #343538;
    font-size: 13px;
    margin: 0 -35px;
    }

    Bij voorbaat dank,
    gr. Marc

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Dag Marc,

    Bedoelt u een verschuiving van de ene kleur naar de andere met een vloeiende overgang?

    Dan is dit de code:
    background: -webkit-linear-gradient(#3395d6, #0a0a0a);

    De kleurcode’s moet u uiteraard naar uw eigen smaak aanpassen.

    Houdt u er wel rekening mee dat niet alle browsers deze overgang kunnen tonen.

    Thread starter marcnuijten

    (@marcnuijten)

    Dag NomenNescio,

    Top! Hartelijk bedankt. Dat kostte mij dus 4 uur om uit te vogelen ;).
    ALleen zie ik inderdaad dat het nu in mozilla helemaal wit is geworden…
    Dit is wel een erg groot nadeel, is daar wat op te verzinnen?

    En is het ook nog mogelijk om een abruptere overgang te hebben (net zoiets als bijvoorbeeld de werkbalk van apple.com.

    Nogmaals dank,
    gr. Marc

    De eerste vraag kan ik wel beantwoorden.

    Waarschijnlijk ziet u het in uw style.css staan, met uitzondering van de kleurencombinaties. In mijn geval heb ik #222 als background staan voor oudere browsers. Hier kunt u de kleur invullen die u zelf wilt.

    #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(#3395d6, #0a0a0a);
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;

    Uw tweede vraag kan ik helaas niet beantwoorden. Wellicht dat een iemand anders u hierbij kan helpen. De enige oplossing die ik kan bedenken is dat u zelf een afbeelding maakt en deze als background definieert. In plaats van een kleur zet u dan:
    url(‘http://www.xxx.nl/naamvanplaatje.jpg’)

    Thread starter marcnuijten

    (@marcnuijten)

    Dat plaatje toevoegen is heel handig en werkt bij alle browsers! Bedankt, ik weet wat ik wilde weten. Het resultaat is te zien op http://www.provideradviseur.nl NU alleen nog de lay out verder mooi maken. 🙂

    Eerlijk gezegd had ik in eerste instantie een reactie getypt waarin ik aan gaf dat ik geen oplossing wist tot plots het idee van een afbeelding me inviel. Nu moet ik deze oplossing alleen nog im mijn eigen websites implementeren. 🙂

    Thread starter marcnuijten

    (@marcnuijten)

    haha zo heb je er zelf ook nog wat aan 😉
    Wat is je website dan? Ik ben benieuwd…

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Het onderwerp ‘menubalk twee kleuren maken?’ is gesloten voor nieuwe reacties.