Welcome to the RapidWeaver Community Forums, where you can chat with RapidWeaver users from around the world!
Bewerken van een thema
Henk Vrieselaar
Lemmer, The NetherlandsPosts: 1,771Members
In een andere post wilde iemand wel eens weten "hoe een thema in elkaar zit". Een thema zelf in elkaar zetten, "from scratch" zoals ze dat zo mooi noemen, is een stuk lastiger. Als je weet hoe het in elkaar zit en welke onderdelen in de Contents van het thema zitten en waar ze voor dienen ben je al een heel eind en kun je sommige onderdelen van je website zelf bewerken. Misschien kan onderstaande uitleg je alvast wat op weg helpen.
Hieronder zal ik noemen wat er zoal te beleven is in de Contents van het thema. Die open je door op het thema te gaan staan met je muis, vervolgens rechter muisklik en dan in het pop-up venster "Reveal Contents in Finder" kiezen. Nu zie je een map (Contents) met files en andere mappen.
Laten we de belangrijkste bespreken:
• 1. De index.html. Die kun je het beste openen met een Text-Editor, de voorkeur is het gratis TextWrangler. De index.html bepaalt min of meer de lay-out van het thema, de plattegrond. Dus waar het menu zich bevindt en welk menu, waar de Titel en Slogan, Content en Sidebar zich bevinden en hoeveel ExtraContent-containers er zijn en waar ze zitten. Zeg maar het skelet van het thema. Elk thema heeft weer een andere 'bouwplaat'. Blijf hier liever vanaf. Een kleine verandering (al zou je maar een < weghalen doet je website al in een grote puinhoop veranderen.
• 2. De styles.css. Dit is een zogenaamd stylesheet, ook met een Text-Editor te openen maar het beste met CSS-EDit, maar er zijn andere. Met dit programma is het ook een plezier om de inhoud te bewerken. Wat doet de styles.css? Die bepaalt de grootte van de titel en slogan, het font, de breedte van de Container en de sidebar, hoe je blog eruit ziet en je foto-album, de kleuren, de links, enzovoorts.
De index.html krijgt dus vorm met de styles.css. De bouwplaat (de index.html) krijgt nu een gezicht.
In feite zou dit voldoende moeten zijn...
• 3. ... ware het niet dat je als gebruiker keuze wilt hebben: je wilt de breedte van je website kunnen variëren, de grootte van het font, de kleuren, de positie van de sidebar, je wilt misschien bepaalde onderdelen kunnen verbergen., enzovoorts. We hebben het nu dus over de Theme Styles in de Page-Inspector van Rapidweaver. Sommige thema's (vaak de ingebouwde, zoals Alpha en Manitoba) hebben maar een paar keuze-mogelijkheden, andere een hele rij.
Voor die keuzes is de Theme.plist gemaakt die je in de Contents ziet. Ook die kun je het beste openen met TextWrangler. Als je dat hebt gedaan schrik je in het begin van de abacadabra. Maar als je beter kijkt staan hier onder elkaar alle keuzemogelijkheden die je in de Theme Styles ziet. En elke keuze verwijst naar een bepaald stylesheet (altijd eindigend op .css).
Bijna onderaan staan de kleuren gedefinieerd die je in de Theme Styles > Colours ziet. En die corresponderen weer met de colourtag.css die je ook in de Contents ziet.
• 4. En dan zijn we meteen aanbeland bij de map css in de Contents. Als je die opent zie je een aantal andere mapjes. Elke map bevat een aantal stylesheets waar in de Theme.plist naar wordt verwezen en die datgene wat in de styles.css "overrulen". Dus als in de styles.css bijvoorbeeld staat dat het Titel-lettertype een Arial is en in de css-map ergens dat de titel een Helvetica moet zijn dan wordt het de laatste als je die tenminste aanklikt in de Theme Styles. Een thema heeft net zoveel mapjes in de css map als dat er Theme Styles zijn.
En als je vervolgens in de Custom CSS (Page-Inspector ] Header ] CSS) zet dat de titel een Trebuchet moet zijn, dan verhinder je daarmee de Arial en de Helvetica weer. Dus alles wat in de Custom CSS staat is de baas.
De rest van de files in de Contents van het thema is niet van belang om hier dieper te bespreken. In de scripts map vind je doorgaans de scripts voor het menu (als dat tenminste een bepaald effect heeft) en het extracontent script. De print.css is het stylesheet dat bepaalt hoe je geprinte versie eruit ziet. En dan zitten er nog thumbnails in van het thema zelf (de preview.png en de preview_large.jpg). Nogmaals: laat dat allemaal maar links liggen.
Samengevat
Als je wat gaat zitten bewerken in een thema doe dat dan alleen in de stylesheets, dus in de styles.css (zeg maar: de basis) en in de stylesheets in de css-map (de specifieke onderdelen die je in de Theme Styles terug ziet).
Enneh... vergeet niet eerst een duplicaat van je thema te maken voor je er in gaat klungelen! Klungelen is niet het goede woord, ga gewoon eens wat veranderen, save de file en kijk wat er gebeurt.
Henk
Hieronder zal ik noemen wat er zoal te beleven is in de Contents van het thema. Die open je door op het thema te gaan staan met je muis, vervolgens rechter muisklik en dan in het pop-up venster "Reveal Contents in Finder" kiezen. Nu zie je een map (Contents) met files en andere mappen.
Laten we de belangrijkste bespreken:
• 1. De index.html. Die kun je het beste openen met een Text-Editor, de voorkeur is het gratis TextWrangler. De index.html bepaalt min of meer de lay-out van het thema, de plattegrond. Dus waar het menu zich bevindt en welk menu, waar de Titel en Slogan, Content en Sidebar zich bevinden en hoeveel ExtraContent-containers er zijn en waar ze zitten. Zeg maar het skelet van het thema. Elk thema heeft weer een andere 'bouwplaat'. Blijf hier liever vanaf. Een kleine verandering (al zou je maar een < weghalen doet je website al in een grote puinhoop veranderen.
• 2. De styles.css. Dit is een zogenaamd stylesheet, ook met een Text-Editor te openen maar het beste met CSS-EDit, maar er zijn andere. Met dit programma is het ook een plezier om de inhoud te bewerken. Wat doet de styles.css? Die bepaalt de grootte van de titel en slogan, het font, de breedte van de Container en de sidebar, hoe je blog eruit ziet en je foto-album, de kleuren, de links, enzovoorts.
De index.html krijgt dus vorm met de styles.css. De bouwplaat (de index.html) krijgt nu een gezicht.
In feite zou dit voldoende moeten zijn...
• 3. ... ware het niet dat je als gebruiker keuze wilt hebben: je wilt de breedte van je website kunnen variëren, de grootte van het font, de kleuren, de positie van de sidebar, je wilt misschien bepaalde onderdelen kunnen verbergen., enzovoorts. We hebben het nu dus over de Theme Styles in de Page-Inspector van Rapidweaver. Sommige thema's (vaak de ingebouwde, zoals Alpha en Manitoba) hebben maar een paar keuze-mogelijkheden, andere een hele rij.
Voor die keuzes is de Theme.plist gemaakt die je in de Contents ziet. Ook die kun je het beste openen met TextWrangler. Als je dat hebt gedaan schrik je in het begin van de abacadabra. Maar als je beter kijkt staan hier onder elkaar alle keuzemogelijkheden die je in de Theme Styles ziet. En elke keuze verwijst naar een bepaald stylesheet (altijd eindigend op .css).
Bijna onderaan staan de kleuren gedefinieerd die je in de Theme Styles > Colours ziet. En die corresponderen weer met de colourtag.css die je ook in de Contents ziet.
• 4. En dan zijn we meteen aanbeland bij de map css in de Contents. Als je die opent zie je een aantal andere mapjes. Elke map bevat een aantal stylesheets waar in de Theme.plist naar wordt verwezen en die datgene wat in de styles.css "overrulen". Dus als in de styles.css bijvoorbeeld staat dat het Titel-lettertype een Arial is en in de css-map ergens dat de titel een Helvetica moet zijn dan wordt het de laatste als je die tenminste aanklikt in de Theme Styles. Een thema heeft net zoveel mapjes in de css map als dat er Theme Styles zijn.
En als je vervolgens in de Custom CSS (Page-Inspector ] Header ] CSS) zet dat de titel een Trebuchet moet zijn, dan verhinder je daarmee de Arial en de Helvetica weer. Dus alles wat in de Custom CSS staat is de baas.
De rest van de files in de Contents van het thema is niet van belang om hier dieper te bespreken. In de scripts map vind je doorgaans de scripts voor het menu (als dat tenminste een bepaald effect heeft) en het extracontent script. De print.css is het stylesheet dat bepaalt hoe je geprinte versie eruit ziet. En dan zitten er nog thumbnails in van het thema zelf (de preview.png en de preview_large.jpg). Nogmaals: laat dat allemaal maar links liggen.
Samengevat
Als je wat gaat zitten bewerken in een thema doe dat dan alleen in de stylesheets, dus in de styles.css (zeg maar: de basis) en in de stylesheets in de css-map (de specifieke onderdelen die je in de Theme Styles terug ziet).
Enneh... vergeet niet eerst een duplicaat van je thema te maken voor je er in gaat klungelen! Klungelen is niet het goede woord, ga gewoon eens wat veranderen, save de file en kijk wat er gebeurt.
Henk
Comments
site2
site3
site4
site5
site6
site7