Handleiding Templates bewerken voor LogiVert 6

Transcriptie

1 Hoofdstuk: Inleiding Handleiding Templates bewerken voor LogiVert 6 Copyrights : 203 LogiVert BV Website : V Eerste versie

2 Hoofdstuk: Inleiding Inhoud Inleiding... 4 Introductie... 4 De 4 niveaus... 4 Niveau Template instellingen... 5 Wat... 5 Standaard webwinkel aanpassen... 5 Algemeen... 6 URL structuur... 6 Zoeksuggesties tonen... 6 Contactgegevens... 7 Tekstuele taalselectie... 7 Menu's... 7 Topmenu... 7 Zijmenu... 8 Aantal extra pagina's... 8 Social Media... 8 AddThis... 9 Facebook... 9 Standaard templateteksten aanpassen... 0 Niveau 2 Vrije blokken en Widgets... Vrije blokken extra pagina... Vrije blokken artikelgroepen... 2 Widgets... 2 Niveau 3 - Afbeeldingen... 3 Wat... 3 Hoe... 3 Functie afbeeldingen... 3 Stap : Bestaande template aanpassen... 4 Stap 2 : Een afbeelding aanpassen... 4 Stap 3 : de buttons aanpassen... 4 Stap 4 : Uw wijzigingen veilig stellen... 4 Niveau 4 CSS... 5 Wat

3 Hoofdstuk: Inleiding Hoe... 6 Customized CSS... 7 Aanpassingen opslaan... 9 Updates van deze handleiding

4 Hoofdstuk: Inleiding Inleiding Introductie LogiVert 6 biedt een aantal standaard templates. Deze templates zijn er in verschillende uitvoeringen en kleuren. Toch zal er al snel de behoefte ontstaan om deze naar eigen smaak en huisstijl aan te passen. De templates van LogiVert 6 voldoen aan de laatste opmaak standaarden voor websites. De gebruikte technieken zijn XHTML en CSS. Technieken die bij ontwerpers bekend zijn. Dit omdat ze relatief eenvoudig te gebruiken zijn en tegelijk zeer krachtig zijn. XHTML en CSS maken een goede scheiding van een technisch raamwerk en opmaak mogelijk. XHTML voor het raamwerk en CSS voor de opmaak. In de XHTML bestanden van de LogiVert 6 templates zijn ook PHP ( en Smarty ( scripts/technieken opgenomen. Deze blijven in deze handleiding buiten beschouwing. Zij zijn nodig voor de uitvoer van de online webwinkel software. De XHTML bestanden vormen via het veel toegepaste boxes principe de verschillende pagina s van de definitieve site. Deze boxes zullen we verder blokken noemen. Het raamwerk wordt bepaald in één bestand (layout.html). Dit raamwerk wordt, afhankelijk van het type pagina (home, winkelwagen, productinfo, ), gevuld met blokken. Bij blokken moet u denken aan bijvoorbeeld de lijst van artikelgroepen, de aanmelding voor de nieuwsbrief, de taalselectie of de weergave van de artikeldetails. De 4 niveaus Er zijn 4 bewerkingsniveaus voor de templates. Het eerste niveau is geschikt voor mensen zonder ervaring met het ontwerpen van websites. Voor elk volgend niveau is steeds wat meer technische kennis vereist. De 4 niveaus zijn: Niveau Het aanpassen van de standaard template m.b.v. instellingen. Niveau 2 Het aanpassen van de template m.b.v. vrije blokken. Niveau 3 Het aanpassen van afbeeldingen voor achtergronden, banners en koppen. Niveau 4 Het aanpassen van het CSS bestand voor verdere grafische wijzigingen. In deze handleiding zullen de verschillende stappen en mogelijkheden besproken worden om een bestaande template naar eigen smaak aan te passen. 4

5 Hoofdstuk: Niveau Template instellingen Niveau Template instellingen Wat Als u een bestaande template aan wilt passen, is dit mogelijk binnen de back office van LogiVert. De template functionaliteit binnen de LogiVert applicatie geeft u standaard de mogelijkheid om de opbouw van de door u gekozen template te beïnvloeden. Standaard webwinkel aanpassen Afhankelijk of u een nieuwe administratie aan het creëren bent () of u via Start -> Administratie -> Eigenschappen dan in stap 2/6 knop Selecteren (2), krijgt u het venster Template selecteren te zien. 5

6 Hoofdstuk: Niveau Template instellingen In het venster Template selecteren kunt u de vooringesteld templates bekijken. Via het linker veld kiest u de template inclusief kleurvariatie die het beste bij uw webwinkel past. Als u uw keuze heeft gemaakt, klikt u op Accepteren en belandt u terug in het Eigenschappen venster. Via de optie Vormgeving van Template kunt u de template verder aanpassen. Via de optie Templateteksten kunt de gebruikte teksten in de template wijzigen naar uw eigen voorkeur. Algemeen URL structuur U kunt ervoor kiezen om de dynamische URL's die standaard getoond worden aan te passen naar statische URL's. Dynamische URL's: Statische URL's: Zoeksuggesties tonen Als een klant gebruikt maakt van het zoekveld zal de webwinkel zoeksuggesties tonen aan de hand van het aanwezige assortiment. 6

7 Hoofdstuk: Niveau Template instellingen Contactgegevens Vul contactgegevens in van uw onderneming en vink de box aan om de contactgegevens onderin elke pagina weer te laten geven. Tekstuele taalselectie Vink deze optie aan om in plaats van vlaggen tekst te tonen voor het selecteren van de taal in de webwinkel. Menu's LogiVert 6 onderscheidt een aantal menu s en men instellingen. Topmenu Bepaal het gedrag van het topmenu. Het topmenu bevindt zich in uw webwinkel geheel rechts bovenin. Hier worden enkel Extra pagina's weergegeven. Bij Verlengde submenu's worden de subgroepen bij scroll-over weergegeven onder de hoofdgroep. Submenu's paginabreed vult de getoonde menu's uit over de beschikbare ruimte. 7

8 Hoofdstuk: Niveau Template instellingen Zijmenu Kies de positie van het zijmenu. Met Zijmenu niet op homepage tonen aan gevinkt, staan de (niveau ) productgroepen in het hoofdmenu. Deze uit vinken zorgt ervoor dat de productgroepen in een zijmenu op de homepage worden weergegeven. Kiest u ervoor het zijmenu niet te tonen op de homepage en selecteer u Geen dan worden de productgroepen in zijn geheel niet getoond. Aantal extra pagina's Geef aan hoeveel items in de respectievelijke menu s mogen worden weergegeven. Social Media 8

9 Hoofdstuk: Niveau Template instellingen AddThis Dit toont de Share-knop in uw webwinkel. Het PubID wordt na registratie gegenereerd bij AddThis. ( De te gebruiken PubID kunt u halen uit de aangeboden code. Facebook Deze opties aan vinken genereert de Facebook like-button op zowel de artikelgroepspagina's als de artikeldetailpagina's. De Facebook reacties worden getoond op de artikeldetailpagina's. 9

10 Hoofdstuk: Niveau Template instellingen Standaard templateteksten aanpassen Via de optie Standaard templateteksten kunt de gebruikte teksten in de template wijzigen naar uw eigen voorkeur. Door in het vakje achter de standaardtekst uw eigen tekstkeuze in te voeren heeft u de mogelijkheid deze te gebruiken in uw gepubliceerde webwinkeltemplate. Indien u geen vervangende tekst invoert zal de standaard tekst toegepast worden, u hoeft niet alle tekstvelden te voorzien van aangepaste tekst. De tekstaanpassingen zijn door te voeren op alle talen waarin u de template kan opmaken. Door alle instellingen te benutten, heeft u al de mogelijkheid de webwinkeltemplate die inrichting en vorm te geven die bij uw organisatie of product past. LogiVert heeft echter ook standaard de mogelijkheid blokken toe te voegen aan de standaard template vanuit de back office. 0

11 Hoofdstuk: Niveau 2 Vrije blokken en Widgets Niveau 2 Vrije blokken en Widgets Vrij blokken zijn onderdelen die in de zijvlakken in de webwinkel worden weergegeven. Deze blokken worden in de zijmenu's boven of onder de standaard onderdelen (productgroepenlijst, winkelwagen, nieuwsbriefregistratie, etc) weer gegeven. U kunt hier bijvoorbeeld logo's van zakenpartners of widgets plaatsen. Er zijn 2 verschillende soorten vrije blokken..vrije blokken Extra pagina's 2.Vrije blokken Artikelgroepen Vrije blokken extra pagina Als u vrije blokken aanmaakt onder extra pagina s, zorgt dit er voor dat u een extra blok aan het menu krijgt toegevoegd. Deze zal zichtbaar zijn op het moment de bezoeker een extra pagina selecteert U kan deze blokken voorzien van tekst, hyperlinks, afbeeldingen en widgets.

12 Hoofdstuk: Niveau 2 Vrije blokken en Widgets Vrije blokken artikelgroepen Als u vrije blokken aanmaakt onder artikelgroepen, zorgt dit er voor dat u een extra blok aan het menu krijgt toegevoegd. Deze zal zichtbaar zijn op het moment de bezoeker een artikelgroep selecteert. U kan deze blokken voorzien van tekst, hyperlinks, afbeeldingen en widgets Widgets Een widget is als volgt samen te vatten: Een simpel grafisch object of element dat een eenvoudige, eenduidige en vaak veel gebruikte functie vervult en door een gebruiker in- en uitgeschakeld kan worden om een bestaande gebruikersinterface aan te vullen of vorm te geven. In LogiVert heeft u m.b.v. een widget de mogelijkheid om bijvoorbeeld actuele social media gegevens op te halen en deze op te nemen in uw template. Om een widget toe te passen, kiest u bij de opmaak van vrije blokken en of extra pagina s voor de widget. 2

13 Hoofdstuk: Niveau 3 - Afbeeldingen Niveau 3 - Afbeeldingen Wat In de submap Images van de template bevinden zich de afbeeldingen van de template. Deze afbeeldingen vormen de achtergrond, banners en knoppen. Het overgrote deel van de achtergronden wordt bepaald door deze afbeeldingen. U dient er echter rekening mee te houden dat dat niet voor alles geldt. Enkele achtergrondkleuren en letterkleuren worden in het CSS bestand bepaald. Hierover leest u meer in volgend hoofdstuk. Het bewerken van de afbeeldingen kan dus niet gebruikt worden voor een algehele wisseling van de template kleuren. Het is dus verstandig om een standaard template te kiezen die in grote lijnen aan uw kleurwens voldoet. De aanwezige afbeeldingen mogen volledig aangepast worden. Het enige waar u technisch gezien rekening mee dient te houden, is dat de afmetingen van deze afbeeldingen gehandhaafd moeten worden. Grafisch gezien is het aan te raden om gelijke kleuren en stijlen te handhaven, maar hier bent u natuurlijk vrij in. Hoe De afbeeldingen zijn in het png- jpeg- of gif-formaat. Deze formaten kunnen in alle gangbare bewerkingsprogramma s aangepast worden. Daarin kunt u bijvoorbeeld de achtergrond van de banner wissen en vervangen door eigen foto s. U kunt er ook een tekst in opnemen. Functie afbeeldingen Als u wilt weten welke functie en positie een afbeelding heeft, kan u dit visueel bepalen door de door u gekozen template in een publicatievoorbeeld weer te geven. 3

14 Hoofdstuk: Niveau 3 - Afbeeldingen Stap : Bestaande template aanpassen De enige programma s die we nodig hebben, zijn Windows Verkenner, LogiVert en een fotobewerkingsprogramma. We openen Windows Verkenner en bladeren naar de map waar het programma standaard de administratie wegschrijft. Voor Windows XP is dat : C:\Documents and Settings\All Users\Documenten\logivert\lv6\admins\uw administratie\layout6\images. Voor Windows Vista en Windows 7 is dat : C:\Users\Public\Documents\ logivert\lv6\admins\uw administratie\layout6\images. Stap 2 : Een afbeelding aanpassen U kan er voor kiezen bijvoorbeeld de gebruikte banner aan te passen, dan dient u de banner te bewerken in een fotobewerkingsprogramma. Maar u kan ook gewoon zelf een banner ontwerpen. Dit kan al op eenvoudige wijze in Windows Paint. Let er wel op dat de nieuwe afbeelding de zelfde maatvoering heeft als het origineel. Sla de nieuwe afbeelding op in de images-map van uw administratie en geef deze de naam van de te wijzigen afbeelding. U krijg waarschijnlijk een waarschuwing met de opmerking dat het bestand al bestaat en of u deze wilt vervangen. Dat is inderdaad de bedoeling, dus klik op Ja. Stap 3 : de buttons aanpassen U herhaalt de handelingen uit stap 2, maar ditmaal past u niet een algemene afbeelding aan, maar bewerkt u een afbeeldingsbestand die gebruikt wordt als button. Voor buttons kan u ook kijken op internet, er worden er veel aangeboden in alle kleuren, maten en extensies. Voorkeur gaat wel uit naar.png, omdat daar gekozen kan worden voor een transparante achtergrond. Stap 4 : Uw wijzigingen veilig stellen Omdat u afbeelding aanpassingen in een standaard template heeft uitgevoerd dient u een aparte map aan te maken, deze map neemt u op in uw administratie met een kopie van de door u gemaakte wijzigingen. U dient de bestanden wel handmatig na een update en selectie van de door u gekozen basistemplate opnieuw te kopiëren naar de template map binnen uw administratie. Voor Windows XP is dat : C:\Documents and Settings\All Users\Documenten\logivert\lv6\admins\uw administratie\layout_backup. Voor Windows Vista en Windows 7 is dat : C:\Users\Public\Documents\ logivert\lv6\admins\uw administratie\ Layout_backup. 4

15 Hoofdstuk: Niveau 4 CSS Niveau 4 CSS Wat In het CSS bestand wordt voor 90%, of meer, het uiterlijk van de template bepaald. In dit bestand staat waar en hoe de afbeeldingen uit vorig hoofdstuk getoond worden. Het CSS bestand bevindt zich in de submap Images en heeft de naam _cataloge.css. Beschrijving van CSS volgens Wikipedia (bron: Cascading Style Sheets (afgekort tot CSS), stijlbladen, zijn een mogelijkheid om de vormgeving van webpagina's los te koppelen van hun feitelijke inhoud en centraal vast te leggen. Het Engelse "style" heeft de betekenis van "opmaak", niet van schrijfstijl. Het begrip "cascading" (als een waterval) verwijst naar de mogelijkheid van het overerven van opmaak-eigenschappen (zie onder). De CSS-informatie voor de vormgeving van het document wordt toegevoegd aan de HTML-code ervan. Die informatie mag in het HTML-bestand zelf staan, maar ook in een apart bestand waar het HTML-document naar verwijst. Een dergelijk extern bestand wordt ook wel stylesheet genoemd. Een belangrijke reden voor de introductie van Cascading Style Sheets was de eenvoudigere en consistentere vormgeving van webpagina's, met minder webbrowser-specifieke eigenaardigheden. Het World Wide Web Consortium (W3C) heeft daartoe de standaard vastgelegd. De vastgelegde standaard is in de loop van de jaren significant uitgebreid. De oorspronkelijke standaard staat bekend als CSS. Latere uitbreidingen staan bekend als CSS2 en CSS3. Met Cascading Style Sheets kan de vormgeving van elk element in een webpagina worden bepaald. Een element van een webpagina wordt gedefinieerd door het gebruik van een HTML-tag. De term cascading geeft aan dat de stijl van elementen overerving vertoont: elk element neemt de stijl over van zijn parent-element, tenzij er een eigen stijl voor dat element is gegeven. Elke webbrowser heeft een ingebouwde stylesheet die de vormgeving van alle elementen bepaalt als er geen stylesheets aan een document worden meegegeven. 5

16 Hoofdstuk: Niveau 4 CSS Een stijl bestaat uit een aantal aspecten zoals lettertype en voor- en achtergrondkleur. Ook breedte van kantlijnen, de horizontale en verticale positie, de zichtbaarheid, de transparantie, of een element boven of onder een ander element ligt en vele andere aspecten kunnen in een stylesheet worden aangegeven. Elk aspect van de stijl wordt onafhankelijk overgeërfd door child-elementen in een webpagina. Daarom hoeven alleen de afwijkende aspecten van een stijl te worden aangegeven. Als er in de stijl een lettertype wordt aangegeven voor het hele document, dan wordt dat lettertype in het hele document gebruikt en hoeft het niet voor elk element apart te worden aangegeven. Niet alle aspecten van een stijl erven over. Bijvoorbeeld de breedte en hoogte van een element erven niet over. Als een element een box vormt met gespecificeerde breedte, dan refereert een relatieve aanduiding voor breedte van child-elementen aan de breedte van de box. Als de breedte van een tabel op 00 pixels is gezet en een cel in die tabel heeft breedte 25%, dan betekent dat 25% van 00 pixels. Hoe Het bewerken van dit bestand vraagt wel om enige kennis van de materie. U kunt het uzelf echter vrij eenvoudig aanleren. Voor meer informatie over de werking van CSS en de toepassing kan u het beste kijken op hier wordt op eenvoudige wijze de basis uitgelegd. Een CSS bestand is een tekstbestand waarin met behulp van standaard codes regels worden bepaald voor de opmaak. Het CSS bestand kunt u in notepad++ / kladblok openen. 6

17 Hoofdstuk: Niveau 4 CSS Customized CSS Om er voor te zorgen dat u niet bij iedere update uw CSS aanpassingen opnieuw moet toekennen is Logivert voorzien van een 0_customized.CSS bestand. In dit bestand kan u de door u gewenste wijzigingen vastleggen. Door gebruik te maken van de browser functionaliteit om elementen te inspecteren kan u van een specifiek onderdeel de CSS code ophalen. De optie elementen inspecteren wordt d.m.v. een selectie in een website door een rechtermuisknopactie opgeroepen als keuze. (FireFox en Chrome) 7

18 Hoofdstuk: Niveau 4 CSS Als u van het geselecteerde element de CSS code hebt opgehaald, kan u de code regel kopiëren en opnemen in het custom CSS bestand. Voor Windows XP is dat : C:\Documents and Settings\All Users\Documenten\logivert\lv6\admins\uw administratie\layout6\images\ 0_customized.CSS. Voor Windows Vista en Windows 7 is dat : C:\Users\Public\Documents\ logivert\lv6\admins\uw administratie\layout6\images\ 0_customized.CSS. Door deze werkwijze toe te passen, hoeft u geen wijzigingen door te voeren in het originele CSS bestand. 8

19 Hoofdstuk: Aanpassingen opslaan Aanpassingen opslaan Omdat u afbeelding en CSS aanpassingen in een standaard template heeft uitgevoerd dient u een aparte map aan te maken, deze map neemt u op in uw administratie met een kopie van de door u gemaakte wijzigingen. Voor Windows XP is dat : C:\Documents and Settings\All Users\Documenten\logivert\lv6\admins\uw administratie\layout_backup. Voor Windows Vista en Windows 7 is dat : C:\Users\Public\Documents\ logivert\lv6\admins\uw administratie\ Layout_backup. Updates van deze handleiding Deze handleiding zal in de toekomst verder uitgebreid worden. Het zal verder gespecificeerd worden en waar nodig aangevuld met tips en praktijkvoorbeelden. Controleer regelmatig op de download pagina van onze site of er een nieuwe versie beschikbaar is. 9