Gantry moet je een beetje leren kennen...
Als je al een beetje op weg bent met Gantry kan dit je vast helpen, want kennelijk is de handleiding van Gantry niet altijd even duidelijk en verdwaal je snel in de details.
Hier even een korte indruk hoe ik de template voor deze website inrichtte.
Wat zijn mijn layouts en waarom zijn het er meerdere?
- De Base Outline bepaalt de algehele opzet van de site, basisinstellingen verander je daar.
- rene3 is afgeleid ('Inherited') van de Base Outline, de default layout voor de website.
- fotos is afgeleid van rene3 met als belangrijkste wijziging de stijl van de body (donker dus)
Hier de 3 layouts op een rijtje:
Base Outline
rene3
fotos
Je kunt goed zien wat 'Inherited' is, dat is grijs.
En dat laat ik heel graag zo, omdat ik het liefst alles op één plek verander, in de Base Outline.
De andere layouts gebruik ik voor een specifiek doel.
Zo kwam ik er later pas achter dat je ook met Sidebars kunt werken. Die had ik hard nodig voor de modules, dus maakte ik rene3 en daarin heb ik naar hartelust een serie modules geplaatst zie boven.
Wat is voor jou belangrijk?
Het menu met de 4 tabs:
- Styles - hier bepaal je de kleuren, look en feel van de website
- Layout - waar staat wat?
- Page Settings - het enige wat ik hier doe, is custom CSS plaatsen
- Assignments - aan welke menu's ga je deze layout toekennen?
Dan laat ik nu nog even de Assignments zien:
rene3 kende ik toe aan de hele website behalve de foto's:
fotos kende ik toe aan de menu's Fotografie en Foto's:
De layout Fotos is dus geheel 'Inherited' van rene3, alleen paste ik de stijl aan naar het donkere thema.
Overigens, het menu Fotografie had niet perse een donker thema gehoeven, want er staan ook gewone artikelen in. Maar mocht iemand alleen het hoofdmenu Fotografie aanklikken en niet het submenu Foto's, dan wordt de bezoeker wel gelijk ondergdompeld in een donker thema, inclusief de artikelen en dat vond ik ook wel prima.
Je ziet dat je de Base Outline nergens aan kunt toekennen!
Dus je moet altijd wel een afgeleid template ontwerpen zoals rene3, waarin je vervolgens verder schaaft aan het uiterlijk.
Stel bijvoorbeeld dat ik de Base Outline gelijk al met de Sidebar gemaakt had, dan was ik minder flexibel geweest.
Plaatsing van modules:
Dat was bij standaard templates altijd een probleem. Je ziet dat ik ze allemaal vrolijk onder elkaar gezet heb, ongeveer in de volgorde die ik voor ogen had. Want verder verschijnen ze toch alleen maar in de menu's (cq, pagina's) die ik er in de module zelf al aan gekoppeld had.
Tip
Klik gerust op de wieltjes die overal staan, je ziet dat je alle elementen een eigen CSS-stijl kunt meegeven. Ze zijn grijs als ze 'inherited' zijn, anders gewoon zwart. Maar je kunt altijd de 'Inheritance' wijzigen door (onderdelen) van een voorgaand template te cloneren.
Dan als laatste nog iets over custom-CSS:
Die plaats je bij Page Settings. Sleep bij Atoms het blokje custom CSS naar beneden.
Voor mijn sidemenu was dat:
.sidemenu{
background: #eaf2f5;
color: #3180c2;
font-size: 1em;
text-align: left;
padding-top: 0.1rem;
padding-right: 0.1rem;
padding-bottom: 0.1rem;
padding-left: 0.3rem;}
Deze stijl kende ik toe aan de module: zijmenu support (klik op het wieltje):
Dus hier geef je modules hun eigen stijl mee! Wel zo makkelijk, meteen in het ontwerp en niet apart als optie in de aangemaakte module.
Hier laat ik het even bij, heb je nog vragen, laat het weten.
