Met onze open dag moesten we ook nadenken over hoe we een beetje handzaam mensen van informatie voorzien over datgene wat ze willen weten. Ik had al eerder een
presentatie gemaakt en die kunnen we mooi gaan gebruiken om een beknopt overzicht te geven. Het leek me echter ook aardig om per onderwerp wat materiaal te hebben. En eigenlijk heeft onze weblog al die informatie en zijn de labels die er aan hangen de onderwerpen die interessant zijn. Daarom wilden we de weblog printen en daar dan boekjes van maken. Nu zijn er dus bedrijfjes die dat inderdaad voor je kunnen doen. Marcel heeft echter ook ontdekt hoe je dat zelf kunt doen. Het enige wat hiervoor nodig is, is een stukje CSS, dat je toevoegt aan je blog-sjabloon.
Dit stukje CSS zorgt er voor dat allerlei delen van je webpagina niet afgedrukt worden, zoals de kolom met labels en historie, reclame, titelbalken, voetnoten, bladerknoppen.
CSS is een manier om het uiterlijk van een webpagina afzonderlijk te definiëren van de inhoud. Met aanpassingen aan de CSS kun je dus dezelfde tekst verschillend uit laten zien, afhankelijk van allerlei omstandigheden. Een handige "selector" is daarbij
@media, waarmee je het uiterlijk voor "print" anders kunt laten zijn dan voor "screen" of "handheld".
Ga in je Blogger blog naar Sjabloon, Aanpassen, Geavanceerd en dan CSS toevoegen (staat onderaan de lijst).
Voeg daar de volgende tekst toe:
@media print, screen
{
.header, #footer-3, .date-header, #blog-pager, #navbar, .noprint, .cap-top, .inline-ad, .column-right-outer, .fauxborder-right, .post-footer, #HTML1, .blog-feeds, .feed-links {display: none;}
.column-right-outer {width: 0}
.main-inner .fauxcolumn-right-outer {width: 0}
.columns {padding-right: 0px}
.content-outer {width: 95%}
}
Als het goed is, zie je in het voorbeeldvenster daaronder dat alles onzichtbaar is, behalve de tekst van je berichten. Als je tevreden bent, moet je
@media print, screen veranderen in
@media print.
Om het even kort toe te lichten:
@media zorgt er voor dat het blok erachter (tussen accolades) van toepassing is op "print", "screen" of
iets anders.
Vervolgens kun je met selectors als
.header stukken html van een bepaalde
class selecteren. Als je in de brontekst van een webpagina kijkt, herken je ze aan
class="header". Ook kunnen delen van de brontekst een id hebben. Deze zijn te selecteren met bijv.
#footer-3.
Achter al deze selectors staat
{display: none;}, oftewel: verbergen.
De rest van de CSS-code is bedoeld om de tekst bladvullend te maken.
Omdat in Blogger-sjablonen nog heel veel meer CSS-code staat, gaat deze soms vóór op de bovenstaande code. Dit is te zien als je in Google Chrome de
Element Inspector aan zet. Je ziet dan bijvoorbeeld dat het stukje
.columns {padding-right: 0px} niet tot uitdrukking komt. Het enige wat daar aan te doen is, is een kleine aanpassing aan de sjabloon zelf.
Ga hiervoor naar Sjabloon, HTML bewerken, negeer de waarschuwing ("verdergaan") en ga in de brontekst op zoek naar ".columns" met daaronder {padding-right:...".
Je wilt bereiken dat dit stukje, dus de styling die van toepassing is voor de class .columns alleen actief is voor @media screen. Bij mij ziet het stukje er na aanpassing zo uit: (let op open- en sluit-accolades)
@media screen {
.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}
}
Na al deze aanpassingen kun je het resultaat zien door in je browser op de menu-optie "Afdrukken" te klikken. Om het jezelf en je bezoekers makkelijker te maken, kun je ook een link toevoegen in het sjabloon op een plaats naar keuze. De in te voegen code is:
<a href="javascript:window.print()">Afdrukken</a>
Het is wel even puzzelen waar dit precies in het sjabloon moet komen. Succes.
De buitenste ring van de vijver moet ik nog grotendeels aanplanten. Ik doe het maar stukje bij beetje en ook hier de natuur het meeste werk laten doen. Deze gele lis kun je uitelkaar trekken en dan in een nieuwe pot weer door laten groeien. Is ook eetbaar begreep ik laatst, maar dat heb ik nog niet geprobeerd.
Je krijgt vanzelf allerlei leven in de vijver. Hoef je helemaal niets voor te doen. Laatst een wooffer op bezoek, en hij heeft ons allerlei waterbeestjes laten zien.
Tuinieren in zakken in helemaal in. Je kunt ze hangen, ze zijn klein, je hoeft niet te wieden, ziet er grappig uit enz. Nu had ik een stukje moestuin waar het gras nogal hard groeit. Had eigenlijk geen zin om de hele zaak op de spitten en dus maar iets anders bedacht. Ik heb zakken gemaakt (van een oud reclameplastic) en deze op het gras gezet. Groeit lekker!
Marcel had al een tijdje geleden deze kapstok gemaakt. Erg simpel. Wat balkjes doormidden gezaagd, een blokje ertussen en een wasdraad om de boel bij elkaar te houden. Ik vond hem super mooi en de jongens super cool (jas ophangen wordt een soort basketbal wedstrijd :)). Kwam ik een paar weken geleden in de VK magazine over design dit plaatje van deze lamp tegen..
Het oorspronkelijke plan was om een grote tafel onder het afdak te zetten. Maar beton is nogal zwaar dus op het laatst (voordat ze kwamen gieten) hadden we bedacht dat we er maar twee van zouden maken. Moesten we ook twee onderstellen hebben, dus Marcel had er nog maar een bijgemaakt. Deze is deze week ook afgekomen. We gaan deze ook nog maar voorzien van wieltjes dan kunnen we hem ook nog verplaatsen.
