Ondersteuning » Thema en CSS/opmaak » Veranderen kleur header CSS

Veranderen kleur header CSS

  • Opgelost huismuts

    (@huismuts)


    3 jaren, 11 maanden geleden

    Hallo,

    Ik ben bezig met een website voor een bedrijf, maar nu stuitte ik op een probleem.
    Het thema wat ik gebruik is https://nl.wordpress.org/themes/car-fix-lite/ en het gedeelte waar het logo in staat is standaard wit. Nu ziet dat er niet mooi uit op de tablet en mobiel, dus ik wil de kleur daarvan aanpassen. Nu heb ik de CSS code gevonden en het lukt me om de kleur aan te passen. Nu zijn er origineel meerdere CSS bestanden, o.a. voor computer en een voor mobiele devices die gebruik maken van dezelfde divs die ik dus moet aanpassen (.logo). Maar als ik de aan te passen codes samen in 1 bestand zet bij ‘Extra CSS’ dan gaat dat natuurlijk elkaar tegenwerken. Het ziet er goed uit op de pc, maar weer niet op de tablet etc.

    Iemand de gouden tip hoe ik dat kan oplossen? Excuus als dit een rare vraag is, ik ben nieuw in het WordPress wereldje en mijn CSS kennis is ook een beetje stoffig geworden. 😉

    #sitelayout_type{ margin:0 auto;}
    .logo{float:left;padding:30px 20px 30px 55px; position:relative;text-align:left; margin-top:-59px; width:23%; background-color:#000000;}
    .logo a{ z-index:999; position:relative}
    .logo:after{top: 0; height: 100%; width:100px; content: ”; position: absolute; right:-55px; background: #000000; -webkit-transform: skew(-30deg); -moz-transform: skew(-30deg); -ms-transform: skew(-30deg); -o-transform: skew(-30deg); z-index:1}
    }

    @media screen and (max-width: 980px){
    .logo{ width:auto; float:none; text-align:center; padding:0; margin:0 auto 10px auto; position:relative; padding:15px; }
    .logo::after, .logo::before{ position:relative;}
    }

    Groet, Huismuts

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • erpee

    (@erpee)

    3 jaren, 11 maanden geleden

    Volgens mij moet je hier zijn, ik neem aan dat je die “driehoek” wilt veranderen…

    Main site CSS
-------------------------------------------------------------*/
#sitelayout_type{ margin:0 auto;}
.container{ width:1170px; margin:0 auto; position:relative;}
.site-header.siteinner{ position:relative; background-color:#111;  }
.logo{float:left;padding:30px 20px 30px 55px; position:relative;text-align:left; margin-top:-59px; width:23%; background-color:#fff;}
.logo a{ z-index:999; position:relative}
.logo:after{top: 0; height: 100%; width:100px; content: ''; position: absolute; right:-55px; background: #ffffff; -webkit-transform: skew(-30deg);  -moz-transform: skew(-30deg); -ms-transform: skew(-30deg); -o-transform: skew(-30deg); z-index:1}
.logo h1 { font-weight:900; margin: 0;}
.logo a{color: #fff;}
.logo p{ font-size:13px; color:#111; display:block; letter-spacing:1px;}

    in .logo > background-color:#fff wijzigen.
    in .logo:after > background: #ffffff wijzigen.

    Thread starter huismuts

    (@huismuts)

    3 jaren, 11 maanden geleden

    Bedankt voor je reactie Erpee! Het is inmiddels al gelukt, ik had veel te veel code gekopieerd waardoor het elkaar ging tegenwerken. 

    .logo{ background-color: transparent;}
.logo:after, .logo::before{ background: transparent; }
    Moderator Richard van Denderen

    (@rdd)

    3 jaren, 11 maanden geleden

    Zorg wel dat dit in een child-theme of in de extra css optie van de customizer wordt geplaatst. Anders loop je het risico dat bij de eerst volgende thema update je aanpassingen weer foetsie zijn.

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Het onderwerp ‘Veranderen kleur header CSS’ is gesloten voor nieuwe reacties.

Weergaven