Support » CSS / opmaak vragen » CSS aanpassen heeft geen effect

  • Opgelost bpoolen

    (@bpoolen)


    Hallo,

    Ik heb graag hulp nodig bij het aanpassen van kleuren en links op mijn website.

    Het aanpassen van het style.css bestand van mijn child-theme heeft geen enkel effect op:
    -kleur letters van de hele site zwart
    -kleur hoofdmenu en onderste menu grijs
    -kleur van tekst in het menu
    -kleur en eigenschappen van de links.

    Ik heb ook al gekeken naar het inspectievenster van Google Chrome, maar daar word ik helaas niet veel wijzer van.
    Het is al wel gelukt om zelf wat tabellen en knoppen te maken met style.css .

    Kan iemand mij uitleggen hoe het werkt?

    Alvast bedankt!

11 reacties aan het bekijken - 1 tot 11 (van in totaal 11)
  • Blijkbaar weet je het juiste bestand te vinden maar zie je niets veranderen in de website zelf. Dat kan komen door dat je browser waar je mee kijkt eerst de in het geheugen opgeslagen versie van de website laat zien. Om dat te voorkomen kan je bij Google Chrome via Instellingen > Geavanceerde instellingen bij het kopje Privacy de Browsegegevens wissen. Dan kan je ook nog kiezen voor vanaf wanneer en ik neem dan gewoon vanaf het begin. Ruimt lekker op 😉

    Wat ook mogelijk is is dat je het verkeerde bestand aan het aanpassen bent. Zet boven aan het css bestand eens gewoon je naam, sla het op en klik dan, na het vernieuwen van de website eens met een rechtermuisklik op de pagina. Zoek de goede code op voor het juiste css bestand en klik daar dan eens op. Als het goed is opent deze zich dan in een nieuw tabblad of venster en kijk of je naam er in staat.

    Ook de server kan je website in het geheugen hebben staan en ik herb geen idee hoe je die kan legen. Daar voor moet je bij je hoster wezen maar in ieder geval zou die zichzelf moeten vernieuwen na een paar uur.

    Als laatste, heb je misschien wel een plug in die er voor zorgt dat de pagina word opgeslagen in het geheugen van de server. Kijk daar dus ook even naar.

    Je geeft ook aan dat je niet veel snapt van het inspectievenster maar misschien helpt dit stukje tekst met afbeeldingen je verder. De hyperlinken naar de afbeeldingen staan in de tekst.

    Succes gewenst en als je wilt dat ik met je mee kijk heb ik wel je website adres nodig.

    Als ik mijn eigen tabellen onder in het style.css aanpas dan is het op de website direct zichtbaar.
    Ik heb mijn naam boven in style.css gezet, en dat kan ik ook zichtbaar maken met de Firefox browser: rechtsklik op de pagina – element inspecteren -{} stijleditor – style.css 121 regels
    Dit werkt denk ik naar behoren.

    Ik heb de volgende dingen in mijn style.css aangepast zonder resultaat:
    hoofdstuk 5.1 kleuren links
    hoofdstuk 5.2 kleur menu: .main-navigation background-color: #5ce3f2; in plaats van zwart

    De kleur voor de fonts kan ik niet vinden.

    Naast de bovenenoemde aanpassingen van kleuren en links wil ik ook nog het woord “zoeken” bovenin het scherm veranderen in “search” . Geen idee waar dat wordt vastgelegd.

    Wil je meekijken op de website?

    Mijn website is: http://worldofmicromodels.nl/

    De achtergrond kleur van je topmenu word geregeld door de achtergrondkleur van je laag met het id top-bar. Die staat nu op zwart (black). Maar als je die verandert naar het blauw van de achtergrond dan is dat wel een raar gezicht met de zwarte rand die wel achter blijft.
    Dat kan je weer aanpassen als je de volgende css code aanpast.

    .mega-container {
        background: white;
        max-width: 1170px;
        margin: auto;
        overflow: visible;
        border-right: solid 5px black;
        border-left: solid 5px #009ee2;
    }

    Je menu items zijn nog wel steeds zwart en dat word weer geregeld door een zwarte achtergrond van de laag met het id top-menu. Haal de kleur weg en alls is netjes blauw. Alleen zijn de witte letters niet echt fijn om te lezen dus als je die wilt aanpassen dan moet je in de volgende code iets gaan aanpassen;

    #top-menu ul li a {
        padding: 9px 15px;
        display: inline-block;
        color: white;
        font-size: 12px;
        font-family: "Lato", sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        transition: 0.2s all ease;
        -webkit-transition: 0.2s all ease;
        -moz-transition: 0.2s all ease;
        -ms-transition: 0.2s all ease;
        -o-transition: 0.2s all ease;
    }

    Maar je kan hem natuurlijk ook overschrijven met je style.css. Je weet dat je dan niet alles en in hoeft te plaatsen maar alleen maar hetgeen waar het om gaat? Dus alleen dit

    #top-menu ul li a {
        color: #000;
    }

    is genoeg voor zwarte letters.

    Voor de kop Home moet je deze css code hebben;

    #primary-mono h1.entry-title {
        font-weight: normal;
        color: black;
        font-weight: bold;
        font-size: 36px;
        margin-top: 0px;
        padding: 10px;
        padding-left: 0;
        margin-bottom: 0px;
    }

    en voor de rest van de tekst heb je deze code nodig;

    #primary-mono .entry-content {
        color: #777;
        line-height: 1.7em;
        font-size: 14px;
    }

    Mag ik overigens opmerken dat het wel zo netjes is voor de zoekmachine om maar 1 kop 1 in je website te hebben. Normaal gesproken is dat de naam van de website maar bij jouw is dat een afbeelding. Dan is dat nog mogelijk door hem te verbergen voor de bezoeker maar dan ziet de zoekmachine hem wel.
    De Home op de eerste pagina zou ik helemaal niet laten zien en dan de “”Welcome to the World of Micromodels” zou ik een kop 2 maken.
    Met de koppen werkt het net zo als bij een boek. De kop 1 is de titel van het boek en zo verder.

    Succes

    — Het begint me duidelijk te worden hoe ik de code kan vinden en het css moet aanpassen.
    Als je weet hoe het werkt dan is het zo simpel!
    Ik heb de aanpassingen geplaatst onderin het main.css van het Parent theme.
    Ben ik dat kwijt bij een update van het Parent theme?
    Ik heb geprobeerd dat op te lossen door de aangepaste main.css bij het Child theme te zetten, maar dan zijn de aanpassingen niet zichtbaar.
    Wat is de handigste werkwijze?

    — Het probleem met de koptekst:

    – WordPress zet bovenin de pagina automatisch de koptekst die in het menu staat. Volgens het inspectievenster is dat een H1 header. Iedere pagina krijgt dus zo’n H1 header.
    Wat ik niet begrijp is dat Yoast zegt dat er geen koptekst is bijvoorbeeld bij pagina “Contact”, terwijl “Contact” een H1 header is die geplaatst is door WordPress.

    – Bij de homepage wil ik niet dat “Home” vermeld wordt. Moet ik in de css dan overal de #primary-mono h1.entry-title weghalen? Dit durf ik niet zomaar op eigen houtje te doen om een crash te voorkomen!
    p.s. De afbeelding staat in de paragraaf, en is voor zover ik kan zien geen header.

    Oké er stond hier heel veel tekst maar dat verdwijnt zo maar. Dus dit is een test of dit ook verdwijnt!

    De aanpassingen die ik wil doen in het main.css van het Parent Theme heb ik geplaatst in het style.css van het Child Theme. Al deze aanpassingen worden nog steeds overschreven door het main.css van het Parent Theme.
    Hoe kan dat?

    voorbeeld:

    regel 869 style.css van Child Theme:

    
    #top-bar {
       background: #00222b;
    }
    

    de kleur #00222b in style.css regel 869 wordt overschreven door main.css regel 35 kleur zwart.

    Er is één uitzondering waar het wel lukt:

    
    #top-menu ul li a:hover {
      color: white;
      background-color: #00cfdd;
    }
    

    De achtergrondkleur #00cfdd in style.css van Child Theme wordt niet overschreven door main.css. Color: white wordt weer wel overschreven.
    Het lukt me alleen niet om deze code terug te vinden in het inspectievenster om te zien hoe dat kan. Als ik op het menu rechts-klik dan vind ik wel #top-menu ul li a , maar niet #top-menu ul li a:hover .
    – Hoe kan ik dat vinden?

    .nl / .com
    Ik ben wel van plan om nog een Nederlands deel van de website te maken, maar mijn prioriteit ligt bij Engels.

    Headers.
    Wat de headers betreft dat ga ik nog uitzoeken.

    Oké ik heb nu iets raars gedaan en het Thema wat je gebruikt, Nevler, gedownload en eens gekeken wat er in de mappen zit. Als ik de functions.php open dan kom ik op regel 167 de code tegen die de main.css plaatst in de head van de website.

    Wat een optie is is om in de functions.php na regel 167 nog een regel toe te voegen met de volgende code
    wp_enqueue_style( 'nevler-main-theme-style', get_template_directory_uri() . '/assets/css/eigen.css' );
    Maak daarna een css bestand aan in de map assets/css met de naam eigen en plaats daar alle code in. Dan word het wel overschreven door wat je er in plaatst maar je hebt kans dat die verandering weer teniet word gedaan als er een vernieuwing van het thema is.

    In de WordPress Codex staat een artikel met uitleg hoe je met het functions.php bestand kan zorgen dat het Child theme css geladen wordt na het parent theme css. https://codex.wordpress.org/Child_Themes . Ik heb het functions.php bestand aangemaakt en geplaatst in de Nevler-child map. Ik weet nog heel weinig van PHP, dus ik weet niet of ik de code goed heb gemaakt. Maar wel heb ik een sterk vermoeden dat hier het probleem zit.
    Zo ziet mijn functions.php in het Child theme er uit:

    
    <?php
    function my_theme_enqueue_styles() {
    
        $parent_style = 'nevler-style'; // This is 'nevler-style' for the Nevler theme.
    // above the text = 'parent-style' has been changed in = 'nevler-style' for making ready the child theme.
    
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style ),
            wp_get_theme()->get('Version')
        );
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    ?>
    

    Als dit niet werkt dan ga ik de andere methode toepassen die je hebt uitgezocht.

    Heb om hulp gevraagd, want ik ken de child functie van WP niet, maar nog geen goed antwoord gekregen.

    Sorry maar ik krijg geen antwoord en kan je nu dus ook niet beter adviseren dan ik al had gedaan.
    maak altijd een back-up van alle bestanden of in ieder geval van diegene die je gaat aanpassen. Dat kan al simpel genoeg door de bestanden naar je eigen computer te kopiëren.

    Hallo Arjan, bedankt voor alle hulp. Ik heb er heel wat van geleerd, en kan weer verder met het verbeteren van mijn website.
    Met vriendelijke groet, Bas Poolen

11 reacties aan het bekijken - 1 tot 11 (van in totaal 11)
  • Het onderwerp ‘CSS aanpassen heeft geen effect’ is gesloten voor nieuwe reacties.