Gantry

on dinsdag, 21 november 2017. Posted in Gantry, Joomla

Gantry - een gratis template - is voor deze site als  gebruikt!

Gantry biedt je een fantastische grafische interface met bouwblokken voor de opbouw van je pagina's. Je kunt blokken slepen en modules komen echt waar je ze wilt hebben.

Het kostte wat moeite om het onder de knie te krijgen, maar voor mij was het de investering dubbel en dwars waard.

Op de Joomla Gebruikersgroep Leiden JUG071 gaf ik een presentatie over Gantry. Het helpt als je weet waar je moet beginnen....

Gantry installeren:

Ga naar http://gantry.org/downloads en ga naar de Joomla sectie. Maak niet de fout die ik maakte door de Grav 1.1.19 pakketten te dwonloaden, die is niet voor Joomla.

  1. Download de 3 pakketten
  2. Installeer eerst joomla-pkg_gantry5_v5.4.19.zip
  3. Pas dan kunnen de twee andere templates geinstalleerd worden, Helium en Hydrogen (de allernieuwste)

Nog meer over Gantry

on woensdag, 13 december 2017. Posted in Gantry

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?

layouts

  1. De Base Outline bepaalt de algehele opzet van de site, basisinstellingen verander je daar. 
  2. rene3 is afgeleid ('Inherited') van de Base Outline, de default layout voor de website.
  3. 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

base outline

rene3

rene3

fotos

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: 

gantry menus

  1. Styles - hier bepaal je de kleuren, look en feel van de website
  2. Layout - waar staat wat?
  3. Page Settings - het enige wat ik hier doe, is custom CSS plaatsen
  4. 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:

rene3 assign

fotos kende ik toe aan de menu's Fotografie en Foto's:

fotos assign

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. Eigenlijk vond ik dat 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 (= te wijzigen). 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):

sidebar

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.

 

Contact: Dit e-mailadres wordt beveiligd tegen spambots. JavaScript dient ingeschakeld te zijn om het te bekijken.