Ondersteuning » Algemeen WordPress » child theme twenteleven

  • Opgelost hapipiko

    (@hapipiko)


    hallo

    Ben nu al enkele uren bezig met het maken van een childtheme, voor twentyeleven.

    wat ik al heb gedaan:
    Map gemaakt twenty eleven child en die bij de mappen themes gezet,
    een style.css gemaakt en daar de korte tekst in gekopieerd en aangepast. Deze style.css geüpload naar de twenty eleven child map.

    Dit is de laatste versie:

    /*
    Theme Name: Twenty Eleven Child
    Version: 3.0

    Description: A basic starter child theme for Twenty Eleven

    Template: twentyeleven

    */

    @import url(“../twentyeleven/style.css”);

    Ik heb ook variaties geprobeerd, met o.a. het gehele style.css gekopieerd uit de bewerker (via dashboard) in de nieuwe child theme style.css en voorzien van een /* tekst en */
    Heb met hoofletters, spaties en – gewerkt.
    Ik heb video’s op youtube bekeken, op het WP Engelstalige forum gezocht, maar het lukt me niet.
    Als ik in dashboard bij themes kijk staat er een child theme bij, maar daarbij de tekst:

    Dit child thema heeft het parent thema nodig, Twenty Eleven.

    Ik begrijp het niet, wat doe ik fout?

    Tim

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Tim,

    Je doet niets fout.
    Bovenstaande style.css geplaatst in de childmap [bijv wp-content/themes/2011child], is voldoende om je childtheme te maken en gebruiken.

    De melding

    Dit child thema heeft het parent thema nodig, Twenty Eleven.

    Is een bevestiging / geheugensteuntje dat twenty eleven thema wordt gebruikt. Het is dus GEEN foutmelding

    Test je childtheme maar eens door aan style.css [van je childtheme] de volgende opmaakcode toe te voegen:

    p{
       color:#99cc6; /*appelgroene text*/
       font-size: 25px; /*erg grote letters*/
    }

    Zie je na saven en uploaden van de wijzigingen de zaak veranderen, dan werkt je childtheme.

    == == == Zo werkt een childtheme

    NB!
    Als je theme een ingebakken optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin. Waarom: de veranderingen in dit css-custom-veld krijgen meetal ‘voorrang’ boven een childtheme.
    Je hebt dan toch ook een childtheme nodig, mn. om wijzigingen aan header.php etc. te maken. Advies: Sla de css uit zo’n custom-veld OOK op in je style.css van je childtheme. Want: Dergelijke instellingen blijven niet altijd bewaard bij updates.
    Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.

    == == ==EXTRA 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] een childtheme…

    In een childtheme [en 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.

    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…

    LAAT de PARENT INTACT!
    Kopieer het aan te passen bestand naar de map van het childtheme.
    Maak dan de wijzigingen in het betreffende bestand 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?

    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 😉

    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 gevraagde wijzigingen.
    Hieronder wat voorbeelden.

    Parent:

    body {
         font-size: 62.5%; /*grootte van de tekst*/
         background: #fff; /*achtergrondkleur*/
         background-image:url('achtergrond.gif');
            font-family: 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*/

    == == ==
    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: Installeer en activeer ‘webontwikkelaar’ add-ons en -plug-ins.
    Aanbevolen: ‘firebug’ en ‘webdeveloper: http://www.chrispederick.com
    Deze gereedschappen laten je ‘onder de motorkap’ van je site kijken.

    == == ==

    Gebruik van firebug – enkele eerste stappen

    In browser:

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

    * boven de webpagina
    * firebug-werkbalken
    * li-onder: scherm met HTML/ CSS en bijv. DOM
    * re-onder: stijl= css

    3. In de FB-werkbalk: klik het tweede icoon van links [pijltje in vakje];
    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 FB-scherm
    5. In het FB-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

    6. Er is veel info over het gebruik van firebug.
    begin eens hier: https://getfirebug.com/faq/

    == == == 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

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    KOM JE ER NIET UIT?
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    Kom je er niet uit?
    Natuurlijk is er altijd nog dit forum!

      Geef zoveel mogelijk info!

    1. Te beginnen de url van je site en het [parent]theme dat je gebruikt.
    2. wat je WILT BEREIKEN
    3. wat je NIET wilt
    4. wat je totnutoe hebt geprobeerd
    Thread starter hapipiko

    (@hapipiko)

    Beste G.P. Ginfo,

    Dank voor je reactie, het doet me goed te horen dat ik op het goede spoor zat.
    Ik heb de code die je boven schreef gekopieerd naar de style.css van child, de site is, als ik die activeer, een kale (foto’s ontbreken ineens, menubalk is vol met pagina’s die ik onzichtbaar wil)
    (Moet ik style.css vanaf bewerker dashboard niet kopieren en toevoegen aan child style.css?

    Maar de tekst is wel groter geworden. (helaas niet appelgroen.)

    Je zegt:

    Als je theme een ingebakken optie heeft om de CSS aan te passen,..etc

    Hoe kom ik daar achter?

    Ik ga maar even stap-voor-stap jouw verhaal door en dit is het eerste waar ik op stuit.

    met vriendelijke groet,

    Tim

    Hi Tim,

    2011 theme heeft geen ‘custom css’-veld. Maar het is wel belangrijk om ook dit element mee te nemen, want niet zelden zoeken WP-gebruikers een theme naar hun zin en komen dan op een ander [niet-standaard] theme uit. Een aantal daarvan heeft een ‘custom css’, vandaar.
    == == ==
    Je CSS bewerk je het makkelijkst met een EDITOR [niet een wordprocessor].

    Open de door jou child style.css bijv. in NOTEPAD++ een gratis editor zeer geschikt voor code verwerking.
    Tip: NP++ is te koppelen als editor met FTP filezilla[ in de instellingen van Filezilla]. Zo kan je bestanden via je FTP Filezilla eenvoudig aanpassen in NP++ en weer uploaden naar je site.

    == == ==

    Je hebt nu alle ‘basisingrediënten’, werk nu stap voor stap aan een opmaak van je website zoals je hem voor ogen hebt.

    OPGELET:

    1. Maak een backup VOORDAT je de werkende site aanpast!
      Gaat er iets mis, dan kan je terug naar een werkende versie.
    2. Maak een backup NADAT je wijziging [hoe klein ook] blijkt te werken en naar tevredenheid is. Er is niets vervelender dan de laatste aanpassing, die het werk van enkele uren verknoeit.
    3. Het maken van backups gaat snel en eenvoudig. Het herstellen van een site zonder backup duurt vele malen langer en is zeer frustrerend…

    == == ==EXTRA
    NB!
    Heb je al een site: Maak eerst een back-up van de site!
    Om een volledige back-up te maken van je site, moet je twee back-ups maken:

    1. de bestanden van je site.
      Gebruik hiervoor [bijv.] FTP (http://filezilla-project.org/download.php)
    2. de database van je site [bevat de INHOUD, fotos’s teksten etc.
      Hiervoor kan je een plug-in gebruiken, of de functie in WP: Dashboard > Extra > Exporteren. Volg dan de instructies.
    Thread starter hapipiko

    (@hapipiko)

    beste WP. Ginfo,

    de test

    p{
    color:#99cc6; /*appelgroene text*/
    font-size: 25px; /*erg grote letters*/
    }

    levert een iets groter lettertype op, maar de kleur is niet veranderd.

    Wel vind ik de ‘childtheme’ versie van de website kaal: foto’s ontbreken in eens en de menubalk is voller dan ik wil.
    Ik vraag mij dan af: moet ik nu alles opnieuw opbouwen?

    Ik ben dus niet verder gegaan met jouw tips, die daaronder staan, dat is me nu even teveel, ik wil het stap-voor-stap afwerken.

    Hi Tim,

    In de kleurcode zit een typefoutje… whoops.

    p{
    color:#99cc66; /*appelgroene dus met twee zessen*/
    font-size: 25px; /*erg grote letters*/
    }

    Zo gaat ’t vast beter…

    Het klinkt ook wat vreemd dat afbeeldingen ineens niet meer te zien zijn;
    Wellicht zijn typefouten de oorzaak. [het vergeten / verkeerd plaatsen van , ; of }of het verkeerd benoemen van het element kan ‘verrassingen’ geven.

    Je hoeft niets ‘opnieuw’ op te bouwen.
    Gebruik firebug om je te helpen om te bepalen welke opmaak-elementen je wilt aanpassen.

    Willekeurige voorbeeld[en]:

    #access, access ul{
          background: #ffaabb;/*roze zie www.colorpicker.com*/
          height: 15px;
          }
    p{line-height:1.4em;} /*regelafstand*/
    Thread starter hapipiko

    (@hapipiko)

    beste WP. Ginfo,

    in de style.css van mijn childtheme staat nu:

    /*
    Theme Name: Twenty Eleven Child
    Version: 3.0

    Description: A basic starter child theme for Twenty Eleven

    Template: twentyeleven

    */

    @import url(“../twentyeleven/style.css”);

    p{
    color:#99cc66; /*appelgroene dus met twee zessen*/
    font-size: 25px; /*erg grote letters*/
    }

    Als ik die aktiveer, dan krijg ik grote groene letters te zien.
    Dus dat werkt !
    Maar de foto is weg, de menubalk is veel anders…
    Hoe dat komt is mij een raadsel, want ik heb niets getypt (dus ook geen typefouten)
    Het lijkt wel of de link naar het oorspronkelijke Style.css wel werkt, maar alle aanpassingen die ik tot nu toe heb gedaan zijn zichtbaar, maar niet op de manier zoals ik kon zien op de parent-site.
    Wat is er nu niet goed?

    ps: ik heb geen notepad op mijn iMac, ik gebruik TextWrangler om de style.css te schrijven, dan zie ik ook meteen regelnummers.

    Update:
    Heb childtheme nu geaktiveerd en de foto’s en achtergrond opnieuw ingesteld en ge-upload. Menu aangepast.
    tekstkleur zelf vervangen (colorpicker.com) (geweldige tip!

    Het begint er op te lijken. Ik ga nu kijken wat je hierboven nog meer hebt geschreven, bv over firebug.
    Alvast dank voor dit zetje in de goede richting!

    Graag gedaan. Vergeet aub niet de thread als ‘resolved’ / ‘opgelost’ te taggen in de rechter zijbalk.

    We zien nieuwe vragen vanzelf wel voorbijkomen 😉

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Het onderwerp ‘child theme twenteleven’ is gesloten voor nieuwe reacties.