Een van de eerste dingen die ik moest doen met een template gemaakt met Artisteer was een paar extra module posities aanmaken die niet standaard beschikbaar zijn. Hoewel het er al 22 zijn is dit nooit genoeg of zijn ze net niet op de posities beschikbaar waar de bedoeling is. Dus laten we doorgaan en met onderstaande voorbeeld 2 van de meest gevraagde module posities aan te maken op basis van een template gemaakt met Artisteer versie 2.5
- Helemaal aan de top van de pagina dus nog boven de header of het menu (Afhankelijk van hoe uw sjabloon is geconfigureerd)
- In het header gebied zelf
OK, daar gaan we.
U moet 3 bestanden bewerken in uw sjabloon.
- templateDetails.xml
- index.php
- template.css
Gebruik een platte tekst editor zoals Kladblok of Notepad++ of een HTML-editor zoals Dreamweaver. Gebruik GEEN Microsoft Word of OpenOffice Writer voor deze bewerkingen! Deze laatste type tekstverwerkers zijn eigenlijk nooit geschikt om teksten te kopieren en te plakken in websites. Gebruik dus altijd een platte tekst editor is ook een algemene tip.
templateDetails.xml
Open met de teksteditor het bestand Templates/<uw template>/templateDetail.xml
Scroll naar het einde van de pagina. Hier vind u de plek waar de module posities worden gedefinieerd. Het zier er zo uitzien:
<positions>
<position> banner1 </ positie>
<position> banner2 </ positie>
<position> banner3 </ positie>
<position> banner4 </ positie>
<position> banner5 </ positie>
<position> banner6 </ positie>
<position> bottom1 </ positie>
<position> bottom2 </ positie>
<position> bottom3 </ positie>
<position> breadcrumb </ positie>
<position> copyright </ positie>
<position> links </ positie>
<position> rechts </ positie>
<position> syndicaat </ positie>
<position> boven1 </ positie>
<position> top2 </ positie>
<position> top3 </ positie>
<position> user1 </ positie>
<position> gebruiker2 </ positie>
<position> user3 </ positie>
<position> Gebruiker4 </ positie>
<position> user5 </ positie>
</ Posities>
Dit zijn de standaard module posities die zijn gemaakt in elke Joomla template gemaakt met Artisteer 2.5.
Selecteer het volledige laatste item en kopieer deze en plak/maak 2 exemplaren van dit item aan. Zie onderstaand de gearceerde tekst in onderstaand voorbeeld:
<positions>
<position> banner1 </ positie>
<position> banner2 </ positie>
<position> banner3 </ positie>
<position> banner4 </ positie>
<position> banner5 </ positie>
<position> banner6 </ positie>
<position> bottom1 </ positie>
<position> bottom2 </ positie>
<position> bottom3 </ positie>
<position> breadcrumb </ positie>
<position> copyright </ positie>
<position> links </ positie>
<position> rechts </ positie>
<position> syndicaat </ positie>
<position> boven1 </ positie>
<position> top2 </ positie>
<position> top3 </ positie>
<position> user1 </ positie>
<position> gebruiker2 </ positie>
<position> user3 </ positie>
<position> Gebruiker4 </ positie>
<position> user5 </ positie>
<position> user5 </ positie>
<position> user5 </ positie>
</ Posities>
Merk op dat ik nog gearcheerde kleur alleen maar is om het gemakkelijker maken om te zien, doe dit niet op uw eigen code
Wat er nu gedaan moet worden is de kopieën te hernoemen in de namen van de nieuwe posities. U kunt kiezen wat u wilt, maar voor dit voorbeeld, heb ik gekozen voor pagina_top en header_right. Maak de wijzigingen, zodat er nu naar uitziet zoals het hoort hieronder:
<positions>
<position> banner1 </ positie>
<position> banner2 </ positie>
<position> banner3 </ positie>
<position> banner4 </ positie>
<position> banner5 </ positie>
<position> banner6 </ positie>
<position> bottom1 </ positie>
<position> bottom2 </ positie>
<position> bottom3 </ positie>
<position> breadcrumb </ positie>
<position> copyright </ positie>
<position> links </ positie>
<position> rechts </ positie>
<position> syndicaat </ positie>
<position> boven1 </ positie>
<position> top2 </ positie>
<position> top3 </ positie>
<position> user1 </ positie>
<position> gebruiker2 </ positie>
<position> user3 </ positie>
<position> Gebruiker4 </ positie>
<position> user5 </ positie>
<position>pagina_top</ positie>
<position>header_right</ positie>
</ Posities>
Sla uw wijzigingen op en sluit het bestand. Dat is het, dat is alles voor de templateDetails.xml bestand.
index.php
De volgende activiteit is waar je eigenlijk de module positie binnen de sjabloon toe te voegen, dat wil zeggen, waar u en uw bezoekers het kunnen zien. Het bestand dat we nu moeten open het bestand index.php van de template. Ik beperk me alleen met de sectie van het bestand waar de veranderingen te maken zijn. Het bestand is veel groter maar anders wordt het erg onoverzichtelijk. Opgemerkt moet dus worden dat, afhankelijk van hoe uw sjabloon is geconfigureerd, het enigszins kan afwijken van het onderstaande.
<div id="art-main">
<div class="art-sheet">
<div class="art-sheet-tl"></div>
<div class="art-sheet-tr"></div>
<div class="art-sheet-bl"></div>
<div class="art-sheet-br"></div>
<div class="art-sheet-tc"></div>
<div class="art-sheet-bc"></div>
<div class="art-sheet-cl"></div>
<div class="art-sheet-cr"></div>
<div class="art-sheet-cc"></div>
<div class="art-sheet-body">
<div class="art-header">
<div class="art-header-jpeg"></div>
<div class="art-logo">
<h1 id="name-text" class="art-logo-name"><a href="/">Headline</a></h1>
<div id="slogan-text" class="art-logo-text">Slogan text</div>
</div>
</div>
<div id="art-main">
<div class="art-sheet">
<div class="art-sheet-tl"></div>
<div class="art-sheet-tr"></div>
<div class="art-sheet-bl"></div>
<div class="art-sheet-br"></div>
<div class="art-sheet-tc"></div>
<div class="art-sheet-bc"></div>
<div class="art-sheet-cl"></div>
<div class="art-sheet-cr"></div>
<div class="art-sheet-cc"></div>
<div class="art-sheet-body">
<jdoc:include type="modules" name="page_top" style="art-block" />
<div class="art-header">
<div class="art-header-jpeg">
<div id="header_right"><jdoc:include type="modules" name="header_right" style="art-block" /></div></div>
<div class="art-logo">
<h1 id="name-text" class="art-logo-name"><a href="/">Headline</a></h1>
<div id="slogan-text" class="art-logo-text">Slogan text</div>
</div>
</div>
Dat was makkelijk! Maar wees voorzichtig ... er absoluut zeker van zijn dat het precies is waar het getoond wordt. Als deze veranderingen niet voor u werken is de kans groot dat dit is waar het probleem is.
Sla uw wijzigingen op.
template.css
Open het laatste benodigde bestand, het template.css bestand. Dit bestand staat in de css map van uw sjabloon. Het is een kwestie van persoonlijke voorkeur, maar over het algemeen, als ik nieuwe code toevoeg aan een css-bestand doe ik dit aan het einde van het bestand. Makkelijker en sneller te vinden als je nog eens iets moet aanpassen. Het enige wat u hoeft te doen is kopie onderstaande code te kopieren en plak deze in de template.css aan het einde.
# Header_right
{
float: right;
width: 200px;
height: 100px;
margin: 10px 10px 10px 10px;
}
De grootte en positie waarden in de bovenstaande code kwamen uit een sjabloon die ik heb gemaakt voor een klant die vereist een bepaalde dimensie en plaatsing; u kunt dit natuurlijk vrij aanpassen naar uw eigen wensen.
Sla uw wijzigingen op en ga uitproberen!
Tip1
Een van de makkelijkste manieren om deze nieuwe posities in actie te zien is om een "Custom HTML module" te maken. Voeg wat tekst toe en zet deze op één van deze nieuwe posities die nu worden weergegeven in de module positie van drop-down lijst (Dat is een van de belangrijkste reden om ze toe te voegen aan de tempateDetails.xml bestand) Maak een ander en zet deze op de tweede nieuwe positie.
Spelen met de afmetingen, vooral als je het toevoegen van een banner afbeelding of een diavoorstelling module of iets dergelijks.
Tip2
Je hebt misschien gemerkt dat er in de index.php, de nieuwe posities had hun standaard styling ingesteld op art-blok. U kunt dit wijzigen in de module class achtervoegsel gebied door het toevoegen van een van de standaard Artisteer achtervoegsels, te weten:
- art-nostyle
- art-article
- art-vmenu
Veel plezier met Joomla! en Artisteer:)
| < Vorige | Volgende > |
|---|