Hvordan lage et nettsted med TYPO3 - fra start til mål. Etappe 3 - Bootstrap package og t3kit.

TYPO3 har ikke så mange ferdige design å velge fra, men de som finnes gir stor fleksibilitet og inneholder langt mer enn bare design. De fleste designa er basert på Bootstrap, særlig BS3 men det finnes også design basert på Foundation. I etappe 3 skal vi omtale 2 ferdige "design", nemlig Benjamin Kott sin Bootstrap Package og t3kit sitt t3kit_theme. I tillegg skal vi omtale Sitepackage-Builder.

Bootstrap package

Bootstrap Package har vært med oss i en del år, og er blant annet en del av TYPO3 Introduction Package. Introduction Package er en mulighet for å lage en TYPO3 nettside på 1 - 2 - 3. Vi vil muligens si litt om akkurat det senere.

Det første vi skal gjøre er å installer Bootstrap Package - og i og med at vi bruker composer så må vi åpne en teminal, gå til rett plass (der vi har composer.json) og kjøre noen kommandoer. Navnet på pakken er bk2k/bootstrap-package, så kommandoen blir.

composer require bk2k/bootstrap-package

For å få designet til å virke så må vi gjøre noe ting til, som å installere extension og bruke den som mal. 

Installasjon, hovedmal og inkludere

Det første vi gjør er å installere Bootstrap Pacakge i Extension Manager. Velg Extension i venstre meny, og så klikk på Activate (kuben med + tegn). Bilde 1.

De neste vi må gjøre er å aktivere Bootstrap Package som mal. Gå til Template, i sidetreet velg Home, og da skal man ha Main Typoscript Rendering. Klikk på Constants og slett de 5 linjene, åpne så Setup og slett de 71 linjene. Bootstrap Pacakage har den nødvendige TypoScripten for å lage sida i selve extension, og vi bruker inkluder for å få den på plass.

Klikk på Edit the whole template record, og velg så fanen Includes - og så velg Bootstrap Package under Include static. Fluid Content Elemtents om de finnes i venstre liste skal avinstalleres. Resultatet skal være som bilde 2.

Slik er det enkle resultatet av Bootstrap Package med "clean" side

Funksjonalitet i Bootstrap Package

Bootstrap Package gir mulighet til å tilpasse en lang rekke verdier gjennom malen. Velg Template i venstre meny, siden Home og i nedtrekksmenyen velger man Constant Editor.

Ser man på nedtrekksmenyen under Category kan man her justere stanradverdier, avanserte verdier og stiler. I vårt tilfelle tenkre jeg vi skal gjøre følgende:

  • Legge inn en annen logo
  • Bytte font fra Source Sans Pro til Loboto
  • Fjerne språkmeny
  • Endre copyright tekst
  • Endre farger 

Det første vi gjør er å endre logo. Det første vi trenger å gjøre er da  å laste opp ny logo. Velg Filelist, og så lager vi en egen mappe for logo og designtilpasninger. Jeg har kalt denne templates og så images for logoer og bilder etc. Og så laster jeg opp en logo jeg har laget. Så velger jeg Template, Home, Constant Editor og Bootstrap Package Basic. I feltet for logo klikker jeg på byanten  - og så legger jeg inn url til logo, her fileadmin/templates/images/eriksverdenlogo.svg (bilde 3).

Det neste jeg gjør er å fylle inn Meta Settings, og så blar jeg videre til Theme. Her setter jeg Google Webfont til Roboto og Navigation Type til Fixed Top (bilde 4). Jeg slår også av Breadcrumb. Under Section Language slåt jeg av LanguageSection, og under Section Copyright endrer vi Copyright Text (bilde 5).

Da har vi endret det vi trenger under Bootstrap Package Basic, så da må vi velge Save.

Under Bootstrap Package Advanced gjør vi ingenting i dette tilfellet, men her kan vi sette en del mer avanserte verider, og faktisk endre det meste om ønskelig. Men under Bootstrap Pacakge Styling skal vi endre. I mitt tilfelle skal vi endre følgende:

  • @brand-primary (man kan eventuelt endre de andre @brand-fargene) - bilde 6.
  • @navbar-height
  • @navbar-default-bg
  • @footer-bg

Og så klikker vi Save.

Som man ser - her kan man fikse det meste og finne fram til farger, oppsett etc som passer logo, bilder og design man måtte ønske.

Og slik ser nettsidene ut etter justering - hvor bra kan diskuteres

Ennå mer funksjonalitet

Bootstrap Package har mer funksjonalitete enn muligheten til å endre farger, logo - ja tilpasse det meste i CSS (LESS). I tillegg kommer Bootstrap Package med en rekke predefinerte sideutseender. Velg Page i venstre meny, Home i sidetreet, og så klikker du på Edit Page Properties (Ark med blyant under Columns). Velg så fanen Appearance. Under Backend Layout ser du en lang rekke mulige sideoppsett (bilde 7). Navnet Backend Layout er egentlig misvisende - det påvirker også utseende på nettsidene.

I og med at Home er forsiden, så velger vi utseende som heter Special Startpage på denne siden og Default på undersider. Save and Close. Backend i TYPO3 for Home vi da se slik ut (bilde 8)

Da kan vi starte med å legge inn innhold i de ulike blokkene som er på forsida. Det ligger alt noe innhold i Normal. Først så skal vi ha inn noe i Border. Klikk på Content. Da får vi opp en veiviser med alle mulige innholdselementer vi kan bruke. En del av disse er standard TYPO3 og noen er spesifikke for Bootstrap Package. Vi velger Carousel under Interactive (bilde 9). Brukern er forholdsvis selvforklarende.

Som det neste legger vi inn elemter i Middle: Left osv. Her passer det fint med Text and Icon. Bilde 10 viser hvordan dette ser ut - med noen elementer i tillegg.

 

 

Og slik ble omtrent resultatet

T3kit

Vi lar Bootstrap Pacakge være Bootstrap Package enn så lenge - man må bare prøve seg fram med mulighetene.

Det neste alternativet vi skal se på er t3kit. Her har jeg ikke særlige muligheter til å vise dette via www.eriksvendsen.no - da t3kit ikke er oppdatert for TYPO3 9.x. Men gå til nettsiden www.t3kit.com så ser man designet og hovedoppsettet.

Men configurasjonen skjer på samme måte som for Bootstrap Package via Templates, Constant Editor. Dog bruker t3kit en extension som heter themes - og som har et eget oppsett i backend.

Sitepackagebuilder

Sitepackagebuilder er en enkel mulighet til å kickstarte utviklingen av et tema/design for TYPO3. Dette er en enkel nettbasert løsning som lager en ferdig grovramme for det designet man måtte ønske.

Du finner Sitepackagebuilder på https://sitepackagebuilder.com/.

For neste etappe - etappe 4 så har vi faktisk brukt Sitepackagebuilder til å lage et design som bruker Bootstrap Pacakge som grunnlag.