Ondersteuning » Thema en CSS/opmaak » kleuren aanpassen (Solon theme)

  • Opgelost jaime.

    (@jaime-1)


    Vandaag begonnen met het maken van mijn blog: http://www.paardenleven.net

    Ik heb het Solon thema uitgekozen, ben hier erg tevreden over! Nu bied de customizer de mogelijkheid om de kleuren aan te passen, mijn gekozen primary color is wit en mijn secondary color is #dd7e7e.

    Alleen vallen de publicatiedatum, categegorieen en de ‘leave a comment’ en ‘read more’ gekoppeld aan een post ook onder de primary color, waardoor dit niet meer zichtbaar is (valt weg tegen de witte achtergrond).

    Als ik dit dan aanpas naar een andere kleur, bijvoorbeeld grey, dan worden ook de titels van mijn widgets grijs omdat die ook onder de ‘primary color’ vallen. Is er een manier om dit te omzijlen? Waardoor ik het stukje onder de titel van een post toch in een andere kleur kan maken dan de ‘primary color’?

    Ik bedoel dus het stukje onder de titel van een blogpost, hier staat o.a. de publicatiedatum, de categorieen waartoe de post behoort en kan je ‘Leave a comment’ aanklikken.

    Ik hoop dat deze vrouwenuitleg begrijpelijk is.

15 reacties aan het bekijken - 1 tot 15 (van in totaal 15)
  • Hi,

    Dank voor de uitgebreide info! [meer info is beter, want dan snappen we wat je bedoelt πŸ˜‰ ]

    /*aanpassingen |verander de kleur naar wens*/
    .entry-meta {
        color:#dd7e7e !important;
    }
    
    time.entry-date.published {
        color:#dd7e7e !important;
    }
    
    span.cat-links, span.cat-links a {
        color:#dd7e7e !important;
    }

    == == == WAT NU TE DOEN MET DEZE CODE…

    Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin.
    Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.

    Alternatief: 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.

    == == == ik wil echt GEEN childtheme [en begrijp het probleem van het aanpassen van het originele theme…]
    Zet de bovenstaande code dan ONDERAAN het bestand ‘style.css’ van je thema. Ververs je browser <CTRL-F5>.
    == == ==

    == == == 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;
    • Gebruik een FTP-programma bijvoorbeeld filezilla om je site te benaderen
    • open de map van je childtheme
    • gebruik een code-editor bijv. ‘NOTEPAD++’ [gratis] om het bestand ‘style.css’ van je childtheme te bewerken
    • voeg bovenstaande code toe aan ‘style.css’ van je childtheme > sla alle wijzigingen op
    • UPload de aangepaste ‘style.css’ naar de map van je childtheme [en overschrijf]
    • browser: druk <CTRL-F5> om je browser te verversen
    • bekijk het resultaat

    – 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.

    …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.

    Veel plezier!
    == == == 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 jaime.

    (@jaime-1)

    Bedankt voor je snelle antwoord, daar wordt een mens blij van!

    Het werkt helaas niet zoals gehoopt, ik heb een childtheme aangemaakt volgens jouw stappenplan (met de plugin) maar gelijk daarna had ik in mijn blog een button boven ‘home’ zitten. Ik heb het nu gewoon zo gelaten zodat je de button kan zien, maar ook omdat ik geen idee heb hoe ik die button daar weg krijg (die hoor je denk ik alleen te zien op een mobile device?)

    Daarna heb ik de style.css aangepast van het childtheme zoals in jouw stappenplan, alleen geeft dat niet het gewenste resultaat..

    Voor de zekerheid heb ik ook nog maar de eerst genoemde manier geprobeerd, dus even het solon thema weer actief gemaakt (ipv childtheme) en de code daar in de stylesheet ingevoegd, maar ook dan geeft het niet het gewenste resultaat.

    Nu heb ik dus wel een childtheme maar met rare button en ondanks je super uitleg helaas niet het gewenste resultaat..

    Hi,

    OK, da’s jammer… Even kijken om de boel weer in het gareel te krijgen…

    Het werkt helaas niet zoals gehoopt

    Om te beginnen heb ik even de bovenstaande code [opnieuw] op jouw site ‘losgelaten’ en hij werkt zoals ik hem bedoel…
    Nu is de vraag…

    • werkte het wel, maar niet zoals JIJ bedoelde? Kennelijk heb ik je vraag / doelstelling verkeerd begrepen >> geef meer precieze info
    • werkte het niet >> geen waarneembare verandering [behalve de button]
    • anders…

    == == ==

    Voor de zekerheid heb ik ook nog maar de eerst genoemde manier geprobeerd, dus even het solon thema weer actief gemaakt (ipv childtheme) en de code daar in de stylesheet ingevoegd, maar ook dan geeft het niet het gewenste resultaat.

    OPGELET!!
    Heb je de code ONDERAAN het stylesheet ingevoegd?!!

    Thread starter jaime.

    (@jaime-1)

    Het is nu grotendeels gelukt! πŸ™‚ Bedankt!

    Ik dacht dat ik het in style.css moest toevoegen, maar dat werkte dus niet (geen zichtbare verandering), nu heb ik jouw stukje code toegevoegd onderaan rtl.css en nu werkt het wel!

    Het is alleen nog niet helemaal precies zoals ik het er graag uit zou willen laten zien, het liefst heb ik het exact zoals in de demo: http://demo.athemes.com/solon/
    Dus ook een stippellijntje erboven en eronder, en ik denk dat ik ook nog een stukje code nodig heb zodat de tags en ‘leave a comment’ en het read-more-plusje rechtsonderin (zie demo) bij een post zichtbaar worden.

    _______________________________________________________________

    Weet jij toevallig ook hoe ik de button die opeens sinds het childtheme boven ‘Home’ is komen te staan weer kan laten verdwijnen?

    ________________________________________________________________

    En dan nog een laatste vraag, aangezien die ook over de kleuren/style in dit thema gaat: het liefst heb ik het witte vlak bovenin waar mijn logo ook staat, in deze kleur: #f4eeed in plaats van in het wit (= temporarycolor). Welke code kan ik daarvoor gebruiken?

    Thread starter jaime.

    (@jaime-1)

    Het is nu grotendeels gelukt! πŸ™‚ Bedankt!

    Ik dacht dat ik het in style.css moest toevoegen, maar dat werkte dus niet (geen zichtbare verandering), nu heb ik jouw stukje code toegevoegd onderaan rtl.css en nu werkt het wel!

    Het is alleen nog niet helemaal precies zoals ik het er graag uit zou willen laten zien, het liefst heb ik het exact zoals in de demo: http://demo.athemes.com/solon/
    Dus ook een stippellijntje erboven en eronder, en ik denk dat ik ook nog een stukje code nodig heb zodat de tags en ‘leave a comment’ zichtbaar worden.

    =====

    Weet jij toevallig ook hoe ik de button die opeens sinds het childtheme boven ‘Home’ is komen te staan weer kan laten verdwijnen?
    =====

    En dan nog een laatste vraag, aangezien die ook over de kleuren/style in dit thema gaat: het liefst heb ik het witte vlak bovenin waar mijn logo ook staat, in deze kleur: #f4eeed in plaats van in het wit (= temporarycolor). Welke code kan ik daarvoor gebruiken?

    Hi Jaimie,

    Zoals hierboven ook al vermeld: Aanpassingen aan je CSS [=Cascading StyleSheet] plaats je altijd ONDERAAN!

    …en verder…
    Jouw aanpassingen staan nu op een rare plek! in rtl.css. Dit CSS-bestand ‘right-to-left.css’ wordt gebruikt om de code voor talen met een schrift van ‘rechts-naar-links’ zoals hebreews, arabisch etc.

    Het ligt meer voor de hand de boel ONDERAAN ‘style.css’ te plaatsen, waar iedereen het verwacht.

    Dat houdt het onderhoud van je site -op de langere termijn- wat overzichtelijker. [?morgen? / volgend jaar weet je niet meer wat en waar je zaken precies hebt aangepast, is mijn ervaring ;)]

    == == ==
    Laten we met het ‘button-probleem’ beginnen en daarna de rest aanpakken. Dat lijkt me het ‘veiligst’ / meest werkbaar…

    Die button hoort alleen te worden weergegeven op kleine schermen zoals je telefoon. Waarschijnlijk is er bij het aanpassen van bijv. ‘style.css’ en / of een van de vervolgacties iets misgegaan. [een typefoutje zit in een heel klein hoekje ;-( ]

    Ik heb geprobeerd te achterhalen waar precies het probleem zit, maar dat bleek zoeken naar een speld in een hooiberg. Daarom wil ik de boel eerst herstellen naar ‘het origineel’ en daarna de wijzigingen opnieuw doorvoeren – maar nu goed πŸ˜‰ -. Dan zou de boel weer op orde moeten zijn.

    Tips:

    • Wees zuinig met het aanbrengen van nieuwe veranderingen in probleemsituaties. Zo blijft het achterhalen van de oorzaken en het ’terugdraaien’ // oplossen, beter overzichtelijk.
    • werk langzaam en nauwkeurig
    • neem de volgende stap pas als de vorige succesvol is afgerond
    • gaat er iets fout? ga een stap / wat stappen terug en loop de zaak na [maak daarbij zo weinig mogelijk wijzigingen; Controleer steeds of je aanpassing werkt; je wilt systematisch zoeken naar een oplossing]
    • VRAAG GERUST!

    == == == wat heb je nodig

    • zorg dat je ongestoord kan werken!
    • houd een ‘schone versie’ van je thema bij de hand. Gebruik hiervoor bijv. de versie die je nog op je PC hebt staan [mits niet gebruikt] of download een nieuwe versie naar je PC!!
    • FTP-toegang tot je site [bijv. ‘filezilla’ je webhost heeft je vast de gegevens gestuurd]
      >>alternatief: je kan dit ook doen middels het ‘dashboard van je WEBHOST’ [bijv. PLESK] >> ga naar ‘bestandsbeheer / filemanager oid.
    • zet een pot koffie / drank naar keuze >>heel belangrijk!! πŸ˜‰

    — — — uitschakelen ‘probleem- style.css’

    1. FTP / WEBHOST: Hernoem het bestand ‘style.css’ van jouw thema als volgt: ‘0style.css’. Dit ‘style.css’ vind je hier: ‘../wp-content/themes/solon’
    2. Niet schrikken, je site ziet er gelijk uit als een zooitje…
    3. FTP / WEBHOST: kopieer nu het bestand ‘style.css’ van jouw SCHONE thema op je PC, [zie boven] naar ‘../wp-content/themes/solon’
    4. CONTROLEER

    5. browser: Druk <CTRL-F5> om je browser te verversen!!.
    6. Als je alles goed hebt gedaan, ziet je site er nu weer herkenbaar uit. Op een PC-scherm, bij een ‘normale weergave’ moet de button nu verdwenen zijn…
      Er kunnen verder nog kleine afwijkingen zijn, als je al eerder veranderingen hebt gemaakt in dit bestand…

      Heb je onverwachte problemen? ga niet verder, maar trek aan de bel!!

      == == == bovenstaande ging goed…!?
      Mooi! Dan gaan we verder met het herstellen / aanbrengen van de gevraagde wijzigingen…

    7. FTP / WEBHOST: open het bestand ‘style.css’ in een ‘editor’ [niet een wordprocessor als MSWord], maar bijv. ‘Notepad++’ [gratis en goed] of gebruik een eigen editor.
    8. breng wijzigingen ONDERAAN het CSS-bestand aan!!! [anders werkt het NIET!]
    9. sla alle wijzigingen op
    10. browser: Druk <CTRL-F5> om je browser te verversen!!.
    11. als je alles juist hebt gedaan, ziet alles er nu piekfijn uit

    Tijd voor een drankje naar keuze πŸ˜‰

    == == ==

    — — –laat de opmerkingen /*tekst*/ in de code staan!
    Het heeft geen effect op je site maar maakt ook hier het onderhoud makkelijker!

    == == == hieronder begint de code…

    /*aanpassingen - zichtbaar maken metadata onder de titel van bericht |verander de kleur naar wens*/
    .entry-meta {
        color:#dd7e7e !important;
    }
    
    time.entry-date.published {
        color:#dd7e7e !important;
    }
    
    span.cat-links, span.cat-links a {
        color:#dd7e7e !important;
    }
    
    /*stippellijnen boven / onder metadata berichten */
    .hentry .entry-meta,
    .entry-footer {
    	padding: 5px 0;
    	border-top: 1px dashed #dd7e7e;
    	border-bottom: 1px dashed #dd7e7e;
    }
    
    /*-- -- -- rest van de meta data*/
    span.tags-links,
    span.tags-links a,
    span.comments-link,
    span.comments-link a {
        color:#dd7e7e;
    }
    -- -- -- lees meer
    /* Read more button */
    .read-more {
    	position: absolute;
    	right: -30px;
    	bottom: -40px;
    	width: 0;
    	height: 0;
    	border-top: 40px solid transparent;
    	border-right: 40px solid #e86f67;
    	-webkit-transition: all 0.3s;
    	transition: all 0.3s;
    }
    .read-more:hover {
    	color: 40px solid #000000;/*'+' verandert van kleur bij muis-hover*/
    }
    
    /*achtergrondkleur header*/
    .site-branding,
    header#masthead {
        background-color: #f4eeed !important;
    }

    einde code-aanpassingen
    == == == == == == == == == == == == == == == == == == == == ==
    == == == ER IS EEN NOG BETER ALTERNATIEF
    == == == == == == == == == == == == == == == == == == == == ==
    Namelijk dit: plaats je aanpassingen in je childtheme…

    1. herstel eerst ‘style.css’ van het originele thema, zoals hierboven beschreven
    2. browser: Druk <CTRL-F5> om je browser te verversen!!.
    3. controleer of je site nu weer ‘normaal’ er uitziet, zonder button.
    4. dashboard > weergave > thema’s
    5. ACTIVEER het childthema dat je eerder hebt gemaakt
    6. <CTRL-F5> controleer of je site nu nog steeds ‘normaal’ er uitziet, zonder button.
    7. — — —

    8. editor: open ‘style.css’ VAN JE CHILDtheme. Hier zou geen / bijna geen code in moeten staan…
    9. plak bovenstaande code ONDERAAN ‘styles.css’van je CHILDtheme > sla alle wijzigingen op
    10. <CTRL-F5> controleer of je site nu nog steeds zonder button, maar nu MET alle andere wijzigingen uitziet…
    11. Ook volgende aanpassingen van je CSS plaats je gewoon ONDERAAN ‘style.css’van je CHILDtheme en dan ververs je de browser <CTRL-F5>

    Thread starter jaime.

    (@jaime-1)

    Super bedankt dat je zoveel moeite neemt!

    Even om het e.e.a. te verduidelijken:

    – Ik heb altijd alle codes onderaan in de stylesheet ingevoerd en niet ergens anders.

    – Bij de code invoegen ONDERAAN in style.css is er GEEN zichtbare verandering, zowel in het hoofdthema als in het childthema. Om die reden had ik eens gekeken wat er zou gebeuren als ik het in het rtl.css thema invoer. En dan is er wel resultaat, maar in die stylesheet iets invoeren is dus niet de bedoeling.

    – Die button boven’home’ is ontstaan nadat ik met de plugin het child-theme had aangemaakt/geactiveerd. Ik heb nu het betreffende theme + childtheme + plugin verwijderd en daarmee is de button dus ook weer verdwenen.

    – Opnieuw solon theme geΓ―nstalleerd

    – Ik heb opnieuw het childtheme aangemaakt, volgens de instructies op deze site: http://www.wplounge.nl/wordpress-child-theme-maken/ daarna heb ik de childtheme geactiveerd.

    In de style.css van mijn child-theme staat nu het volgende:

    /*
     Theme Name:   Paardenleven
     Theme URI:    http://paardenleven.net/
     Description:  Solon Child Theme
     Author:       Jaime
     Author URI:   http://paardenleven.net/
     Template:     solon
     Version:      1.0.0
     Tags:         plaats, hier, jouw, tags, gescheiden, door, kommas
     Text Domain:  solon-child
    */
    
    @import url("../solon/style.css");
    
    /* =Eigen CSS hier beneden plaatsen
    -------------------------------------------------------------- */
    
    /*aanpassingen - zichtbaar maken metadata onder de titel van bericht |verander de kleur naar wens*/
    .entry-meta {
        color:#dd7e7e !important;
    }
    
    time.entry-date.published {
        color:#dd7e7e !important;
    }
    
    span.cat-links, span.cat-links a {
        color:#dd7e7e !important;
    }
    
    /*stippellijnen boven / onder metadata berichten */
    .hentry .entry-meta,
    .entry-footer {
    	padding: 5px 0;
    	border-top: 1px dashed #dd7e7e;
    	border-bottom: 1px dashed #dd7e7e;
    }
    
    /*-- -- -- rest van de meta data*/
    span.tags-links,
    span.tags-links a,
    span.comments-link,
    span.comments-link a {
        color:#dd7e7e;
    }
    -- -- -- lees meer
    /* Read more button */
    .read-more {
    	position: absolute;
    	right: -30px;
    	bottom: -40px;
    	width: 0;
    	height: 0;
    	border-top: 40px solid transparent;
    	border-right: 40px solid #e86f67;
    	-webkit-transition: all 0.3s;
    	transition: all 0.3s;
    }
    .read-more:hover {
    	color: 40px solid #000000;/*'+' verandert van kleur bij muis-hover*/
    }
    
    /*achtergrondkleur header*/
    .site-branding,
    header#masthead {
        background-color: #f4eeed !important;
    }

    Deze style.css heb ik aangemaakt in Notepad, en via filezilla geupload in de map van mijn childtheme. Maar alsnog zonder zichtbaar resultaat.

    Vraag: Kan het niet zijn dat, iets in het hoofdthema (een code) ervoor zorgt dat een custom stylesheet uit een childtheme word uitgeschakeld/ondergeschikt? Of is dit een rare gedachte van een wordpress leek zoals ik.

    Thread starter jaime.

    (@jaime-1)

    Wat ook vreemd is.. ik weet dat het eigenlijk niet de bedoeling is, maar gewoon om te proberen/testen heb ik ook een keer het hoofdthema geactiveerd, en in die stylesheet onderaan de code ingevoegd, maar ook dan is er geen zichtbare verandering.

    Hi Jaime,

    Ik heb de code nog eens bekeken, en ik heb een typefoutje ontdekt in de tekst.
    ..woops.., sorry!

    Verwijder de tekst ‘– — — lees meer’ op regel 29 [net boven /*read more button*/]

    Ik verwacht dat de boel dan een stuk beter werkt. In de test werkt het nu wel…

    Gooi maar in je child CSS. Vergeet niet je browser te verversen!

    Thread starter jaime.

    (@jaime-1)

    Gedaan, maar bij mij is er nog steeds geen verschil te zien, kijk maar eens op paardenleven.net . Ik heb echt geen idee waar het misgaat, ik doe het exact zoals jij beschrijft, en toch levert het geen zichtbaar resultaat.

    Thread starter jaime.

    (@jaime-1)

    Gelukt! Het werkte wel degelijk! Lag aan de cache van mijn browser (google chrome) daardoor zag ik ondanks refreshen geen zichtbaar resultaat. Nu dus wel πŸ™‚ (alleen de stippellijntjes zijn nog niet zichtbaar)

    Top!! Heel erg bedankt voor je hulp, je hebt weer iemand blij gemaakt!

    Loop alleen nog tegen het e.e.a. aan, daarover heb ik later nog even een vraagje. Dus ik laat het topic nog even onopgelost staan, omdat de vraag over hetzelfde onderwerp gaat.

    Thread starter jaime.

    (@jaime-1)

    Zo, even het e.e.a. aangepast, en hij is nu bijna zoals ik hem zou willen!
    De volgende dingen zou ik nog graag aangepast zien, ik hoop dat je mij daarvoor nog aan de juiste codes kunt helpen? (en ik hoop het in de toekomst ook zelf te gaan leren)

    – De social media buttons zijn nu d.grijs, die wil ik graag wit hebben.

    – De titels van de widgets wil ik ook graag in het wit hebben.

    – Onderin mijn thema staat “Proudly powered by WordPress | Theme: Solon by aThemes” dat wil ik het liefst weg hebben..

    – Links in posts zijn nu blauw (zie bijvoorbeeld het ‘contact’ linkje op de pagina ‘over mij’), die links wil ik graag in de kleur #dd7e7e hebben.

    Hi Jaime,
    Fijn dat het werkt!

    De volgende dingen zou ik nog graag aangepast zien, ik hoop dat je mij daarvoor nog aan de juiste codes kunt helpen? (en ik hoop het in de toekomst ook zelf te gaan leren)

    Hieronder eerst wat algemene info over CSS. Daarna neem ik je stapsgewijs door één voorbeeld-wijziging heen. Vervolgens kan je lekker aan de gang en de boel naar hartenlust aanpassen aan je eigen wensen.

    == == == ALGEMENE INFO == == ==
    == == ==Zo werkt een [CT] childtheme…

    Een CT dient er voor om het origineel te scheiden van de aanpassingen die jij als webbouwer maakt.
    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.

    == == == Wat gebeurt er met de CSS [cascading opmaak / stijlblad] in een childtheme…

    In een childtheme met CSS geldt dat de code die als laatste wordt uitgevoerd, het uiterlijk / acties van de site bepaalt.
    bijvoorbeeld:

    body{ background-color: #ffffff; /*wit*/
           background-color: #000000; /*zwart*/
    }

    Resultaat: ‘zwart’.
    Dat geldt ook als de opmaakkenmerken 100 regels verderop in het stijlbestand staan!

    ** ** **
    Heb je een CT, dan zal EERST het origineel [parent] doorlopen / getoond worden, DAARNA de opdrachten opgenomen in het CHILDtheme. >>Dat gaat RAZENDSNEL: de site ziet er uit als bedoeld in het childtheme.

    == == ==

    als ik nu iets wil toevoegen aan style.css dan zet ik dat in het childtheme ,maar als ik nu iets wil verwijderen of veranderen?

    De stylesheet van het CT heeft in de basis alleen een ‘kop’ die de koppeling maakt met de parent [het originele theme].
    Zolang er niks in staat, gebeurt er niks.

    Vervolgens plaats je de gewenste wijzigingen.
    Hieronder wat voorbeelden.

    Parent:

    body {
         font-size: 62.5%; /*grootte van de tekst*/
         background: #fff; /*achtergrondkleur*/
         background-image:url('achtergrond.gif');/*achtergrondplaatje*/
            font-family: Arial, sans-serif; /*lettertype*/
         line-height: 22px; /*regelafstand*/
         color: #444; /*tekstkleur*/
    }

    CHILD
    Vervolgens hoef je alleen DIE zaken aan te passen of toe te voegen die jij wilt.

    body {
         font-size: 45.5%; /*grootte van de tekst kleiner*/
         background: #0000FF; /*achtergrondkleur veranderd*/
         background-image:none; /*achtergrond-afbeelding verwijderd*/
            font-family: universe; /*ander lettertype*/
         line-height: 12px; /*regelafstand kleiner*/
         color: #99cc66; /*tekstkleur appeltjes groen*/
            margin-left:25px; /*marge-links toegevoegd*/
    }

    Wil je zaken VERWIJDEREN zoals menu-balken, elementen in de lay-out, dan kijk je waar je dat het handigst doet:

    • mbv CSS
    • door het PHP-bestand aan te passen

    Je vertelt niet wat je NIET wilt met een element, maar wat je dan wel wilt

    background-image:none; /*achtergrond-afbeelding verwijderd*/

    == == == Ook Belangrijk om te weten…
    De site bestaat uit meer dan een bestand als style.css.
    Wil je andere zaken aanpassen, bijv de header of footer, dan moet je mogelijk de bestanden header.php en footer.php aanpassen.
    Hoe werkt dat… PHP is een heel stuk moeilijker dan CSS; Daar gaan we het hier dus NIET over hebben..;). Raadpleeg dus een deskundige!

    == == == Hoe weet je wat je moet aanpassen…
    Het zoeken naar welke css / php / HTML je moet aanpassen is een beetje een puzzel.
    Gelukkig zijn daar goede gereedschappen voor.

    >>
    In je browser: rechtsklik in de browser en kies ‘element inspecteren’
    Deze gereedschappen laten je ‘onder de motorkap’ van je site kijken.

    1. re-klik > element inspecteren
    2. Het sub-scherm opent:

    * bovenin de webpagina
    * het sub-cherm met eigen werkbalkje en iconen
    * li-onder: scherm met ‘style | computed | event listeners >>’
    * re-onder: stijl= css

    3. In de sub-scherm: klik het eerste icoon van links [vergrootglas];
    4. Beweeg je muis over de webpagina [en klik]. Hiermee selecteer je een element in de webpagina, om daarmee de code zichtbaar te maken in het sub-scherm
    5. In het sub-scherm:

    * Links: de HTML-code van het gekozen element
    * rechts: de stijl =CSS
    * klik in de css en verander de waarde; kleur grootte of voeg een regel toe
    * controleer in het deel van de webpagina of het gewenste effect wordt bereikt
    * Nee? Druk <F5> verversen browser. Probeer iets anders
    * Ja: neem de aanpassing op in de ‘style.css’ van je childtheme
    == == == == == == == == == == == ==
    NU STAP VOOR STAP PUZZELEN
    == == == == == == == == == == == ==

    De titels van de widgets wil ik ook graag in het wit hebben.

    1. ga naar je site en log in
    2. dashboard > ‘site bekijken’ [je ziet je site en direct daarboven het WP-dashboard-menu]
    3. klik in je pagina > scroll iets naar beneden
    4. re-klik op de widget-titel ‘over mij’ > kies ‘element inspecteren’ er opent een subscherm
    5. == == == het subscherm is je vriend…

    6. In het subscherm zie je nu
    • de bovenste helft is je webpagina
    • links HTML van de bladzijde
    • rechts CSS
    • klik op het element dat je wilt aanpassen:
      <h3 class=”widget-title”>Over mij</h3>
    • in het rechter subscherm zie je het geselecteerde element. Hier
      ‘h3.widget-title {}’ met wat waarden.
    • klik in het vakje ‘element.style {}’
    • geef aan welke waarde jij de tekstkleur wilt hebben:
      color: #ffffff;
    • In het bovenste deel van je scherm, zie je nu de veranderingen die je aanbrengt. Heb je het juiste element te pakken? En de juiste aanpassing? Dan verandert de boel zoals je wenst. Zo niet? dan mag je nog even verder puzzelen..;)

      h3.widget-title {
          color:#ffffff;
      }

      Let op: de wijzigingen die je hier op deze manier doet, worden NIET bewaard!
      Het is een ’test-gereedschap’!

      Heb je de juiste wijziging gevonden? Plaats de gewenste code dan onderaan in ‘style.css’ van je childtheme.

      == == ==

      h3.widget-title {
          color:#ffffff;
      }

      Links in posts zijn nu blauw (zie bijvoorbeeld het ‘contact’ linkje op de pagina ‘over mij’), die links wil ik graag in de kleur #dd7e7e hebben.

      Dat is in dit geval een slecht plan! πŸ˜‰ De link-tekst krijgt zo dezelfde kleur als de achtergrond!! van sommige andere elementen zoals het sidebar-vak met de widgets…

      /* kleuren van links in hun verschillende gedaantes
      !!!LET OP!!!
      !!!Laat deze link-elementen in deze volgorde staan!!!
      Dat voorkomt problemen. Daarnaast zijn ze samen beter te vinden...;)
      
      LET OP! ook zaken zoals een TITEL van een bericht is bijv. op je home-page -tegelijkertijd- een LINK. De link kleur [in elke gedaante] moet daarom een andere kleur hebben, dan de achtergrond!!!
      
      */
      /* unvisited link */
      a:link {
          color: green;
      }
      
      /* visited link */
      a:visited {
          color: green;
      }
      
      /* mouse over link */
      a:hover {
          color: red;
      }
      
      /* selected link */
      a:active {
          color: yellow;
      }

      De social media buttons zijn nu d.grijs, die wil ik graag wit hebben.

      Ook dit zijn links! Hierboven gekozen kleuren hebben dus mogelijk invloed!
      Je kan voor elke situatie eigen kleuren opgeven…

      .social-widget li a::before{
          color:white;
      }

      == == == “Proudly powered by WordPress | Theme:
      >> werk stap voor stap!

    1. KOPIEER het bestand ‘footer.php’ van de parent-map, naar de map van je CHILDtheme
    2. editor: open ‘footer.php’ van je CHILDtheme in de editor
    3. <CTRL-f> [=find] ga op zoek naar ‘Proudly powered by WordPress’
    4. OPGELET
      VERWIJDER OF VERVANG alleen de tekst, Laat de code intact!!!

    5. sla alle wijzigingen op > ververs de browser en controleer het resultaat
    6. Gaat het mis? >> verwijder ‘footer.php’ uit de CHILD-map en probeer het opnieuw met een verse kopie.

    Thread starter jaime.

    (@jaime-1)

    Bedankt voor je uitgebreide uitleg!

    – Het aanpassen van de footer is gelukt!

    – Ook is het mij nu duidelijk hoe ik evt. de titelkleur van widgets e.d. kan aanpassen. Heb wat geoefend ermee en dat gaat goed! Dankzij de duidelijke uitleg. Dus dat is heel fijn!

    – Het enige dat ik onmogelijk voor elkaar krijg en waar ik al uren mee aan het prutsen ben is het aanpassen van de linkkleur. Ik wil op o.a. deze pagina: http://www.paardenleven.net/contact/ de blauwe links in de tekst graag in de kleur #dd7e7e hebben. Ook lukt het mij dus echt niet om de socialmedia buttons wit te krijgen. Ik heb het vermoeden dat ik daarbij ook de sectie waar het om gaat moet vermelden in de code ? Ik kom er niet uit en ik snap niet waarom niet.

    Hi,
    Zoals boven al gezegd, als je de link kleur #dd7e7e; maakt, dan geeft dat elders problemen, omdat dit ook een achtergrondkleur is >> de link(tekst) ‘verdwijnt’dan. Geef het dus een andere kleur!
    — — —
    Ik denk dat dit ‘goed gaat’ zo niet, verzin een list…

    .entry-content.clearfix p a, .entry-content.clearfix p a:hover, .entry-content.clearfix p a:focus{
    	color:#dd7e7e !important;
    	text-decoration:underline;
    }

    De voor alle vragen code staat hierboven al… Heb je dat al geprobeerd??
    Zo ja, wat heb je gedaan en wat gaat er mis?

15 reacties aan het bekijken - 1 tot 15 (van in totaal 15)
  • Het onderwerp ‘kleuren aanpassen (Solon theme)’ is gesloten voor nieuwe reacties.