CSS Template tutorial 1.5 - Joomla! 1.5 Template maken

Een echte Joomla! 1.5 Template maken

Het eerste wat we nodig hebben om mee te beginnen is onze compilatie. Een compilatie is het ontwerp dat de basis zal vormen voor de template. We zullen een voorbeeld gebruiken, vriendelijk gedoneerd door Casey Lee, de Lead Designer van Joomla!Shack14 voor onze doeleinden. Het heet "Bold" en we kunnen het zien in Figuur 9.8.

Figure 9.8 Een ontwerp compilatie van Joomla!shack

Slicing and Dicing

De volgende stap in het proces staat bekend als Slicing. We moeten gebruik maken van ons grafisch programma om de beelden in kleine stukken te snijden zodat het kan worden gebruikt in onze template. Het is belangrijk om erop te letten hoe het formaat van de elementen kan worden aangepast, als dat nodig is. (Mijn voorkeur voor afbeeldingen toepassing is Fireworks, want ik vind het beter geschikt voor het web design in tegenstelling tot print dan liever Photoshop).

Opzetten van Module locaties
 

Dit template zal enkele specifieke locaties hebben voor specifieke modules, enigszins afwijkend van de standaard Joomla! installatie. Om ervoor te zorgen dat de modules correct worden opgezet als u werkt met dit template, zorg dan dat van de volgende kenmerken:

• User1=voor de zoek module
• User2=voor het top menu
• Top=voor de nieuwsflits of custom HTML module

Niets anders zou op deze locaties moeten worden gepubliceerd.
 

De header-afbeelding heeft een zacht ruisen aan de top. We willen dat behouden, dus plaatsen we de afbeelding in de achtergrond en wijsen vervolgens een kleur toe. Op die manier kan de koptekst verticaal verschalen, als we dat nodig hebben om, bijvoorbeeld, het lettertype grootte wordt aangepast. We moeten ook de kleuren van elk type op wit zetten, zodat ze worden weergegeven op de zwarte achtergrond.

We gebruiken de achtergrondafbeelding ook voor het zoekvak. We moeten ervoor zorgen dat we gericht zijn op de juiste invoer met behulp van CSS specificeringen. Ik heb ook gebruik gemaakt van absolute positionering binnen een relatief gepositioneerde element om het zoekvak te krijgen waar ik dat wil. De afbeelding zal niet verschalen met tekst resizing met slechts een enkele afbeelding. Hiervoor zou een bovenste en onderste afbeelding nodig zijn. Dat is een andere oefening voor u!

#header {
color:#fff;
background:#212121 url(../images/header.png) no-repeat;
position:relative;
}

#header h1 {
font-family:Arial, Helvetica, sans-serif small-caps;
font-variant:small-caps;
font-stretch:expanded;
padding-left:20px;
}

#header input {
background:url(../images/search.png) no-repeat;
border:0;
height:22px;
width:168px;
font:1em Arial, Helvetica, sans-serif;
padding:2px;
}

#header .search {
position:absolute;
top:20px;
right:20px;
}

Ik heb geen gebruik gemaakt van een grafisch logo hier, maar van platte tekst. De reden is vooral dat SEO's, zoals zoekmachines, geen beelden kunnen lezen. Men zou dit kunnen doen met enige sjiek beeld vervanging, maar dat laat ik liever als een oefening voor uzelf.

Onze header ziet er nu uit zoals wordt weergegeven in figuur 9.9.

Figure 9.9 header achtergrond afbeelding
 

Vervolgens moeten een een techniek implementeren gebruikt om eeb achtergrond te laten zien in een aanpasbare kolom: sliding doors.

Achtergrond Kolommen

Herinner dat wanneer we een gekleurde achtergrond op de kolommen plaatsen, de kleur niet helemaal wordt uitgebreid naar de voettekst. Dit komt doordat het <div >element, in dit geval aan de zijkant en aan de zijkant-2, slechts zo groot is als de inhoud. Het groeit niet om het element te vullen.

Wij moeten daarvoor gebruik maken van een techniek genaamd 'Sliding Faux Columns', waarmee in wezen twee grote beelden over elkaar schuiven. Er dienen twee nieuwe containers voor de achtergronden te worden gemaakt. Normaal gesproken kunnen we dat oplossen met #wrap, maar ik ben gebruik een extra (en overbodige) container ter illustratie.

Voor een volledige beschrijving, kunt u deze twee gidsen bekijken:

• http://alistapart.com/articles/fauxcolumns/
• www.communitymx.com/content/article.cfm?page=1&cid=AFC58

In ons geval, is onze maximale breedte 960px, dus we beginnen met een afbeelding van die breedte. In de afbeeldings bronbestanden, is dat slidingcolumns.png. We exporteren vervolgens twee delen (ik gebruikte hetzelfde deel en verborg / liet, de zijkanten zien), een 960px breed met een 192px achtergrond op de linkerkant en een 960px breed met een 196px achtergrond aan de linkerkant.

De linker afbeelding dient te beschikken over een witte achtergrond en de rechter heeft behoefte aan een transparante achtergrond. Ik wijzigde de kleur van de achtergrond uitgevoerd omdat ik de beelden vanuit het bronbestand exporteerde.

Wij maken gebruik van de background-positie (background-position property) om de afbeeldingen op de juiste plek te plaatsen. Hier gebruiken we samengevoegd CSS formaat, zodat ze deel uitmaken van de achtergrond eigenschap:

#leftfauxcol {
background:url(../images/leftslidingcolumn.png) 20% 0;
}

#rightfauxcol {
background:url(../images/rightslidingcolumn.png) 80% 0;
}

In our index.php , we simply added an inner container inside the wrap:
<div id="wrap">
<?php if($this->countModules('left')) : ?>
<div id="leftfauxcol">
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
<div id="rightfauxcol">
<?php endif; ?>
<div id="header">

Nu moet er ook een voorwaardelijk slot <div>'s komen:
 

<?php if($this->countModules('left')) : ?>
</div>
<!--end of leftfauxcol-->
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
</div>
<!--end of rightfauxcol-->
<?php endif; ?> 

We moeten ook een achtergrond plaatsen in onze voettekst en onderaan modules / elementen, anders zou de kolom achtergrond worden getoond:

 #footer {
background:#212121;
color:#fff;
text-align:right;
clear:both;
}

#bottom {
background:#333;
color:#666;
padding:10px 50px;
}

We moeten de mogelijke verplaatsing bepalen, zodat de float container (de faux kolommen) zal worden uitgebreid tot de onderkant van de pagina. De traditionele methode om dit te doen was met de eigenschap :after ,15 Maar met de introductie van IE7 werkt deze methode niet volledig. We moeten de verlenging en verplaatsing apart verwerken voor Internet Explorer 6 en 7 en dit is waar het allemaal bij mekaar komt.

Een paar oplossingen zijn gevonden.

We gaan gebruik maken van de Float (nearly) Everything optie hier.

Zo voegen we een eenvoudige clear:both aan de #voettekst toe en we voegen zweven toe aan de fauxcol wrappers. We voegen deze toe aan een voorwaardelijke stylesheet specifiek voor IE6: 

 #leftfauxcol,#rightfauxcol,#footer {
float:left;
width:100%;
}

We zullen enige voorwaardelijke verklaringen moeten toevoegen in de kop van de index.php file: 

 <!--[if lte IE 6]>
<link href="/templates/<?php echo $this->template ?>/css/ie6only.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="/templates/<?php echo $this->template ?>/css/ie7only.css" rel="stylesheet" type="text/css" />
<![endif]-->

Flexibele Modules

In onze ontwerpen hebben we een groot initiëel module blok. We weten niet hoe lang de tekst zal zijn die nodig is. Om dat probleem op te lossen, hebben we de module jdoc:include statement in een element gevat en geven hem een achtergrond met dezelfde kleur als de afbeelding. Dit is dezelfde strategie die we gebruiken voor de koptekst:

<?php if($this->countModules('top')) : ?>
<div id="top">
<div class="inside">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php else : ?>
<div id="top"> </div>
<?php endif; ?> 

We hebben ook een voorwaardelijke commentaar, zodat als de boven-module locatie geen inhoud heeft, het oranje teaser beeld daar niet wordt getoond. Wat er zal zijn is een lege container met daarin een klein deel van de afbeelding op de achtergrond en 20px waard verticale padding. Dit is puur voor de esthetiek.
 

Het CSS moet gebruik maken van CSS specificiteit om de moduletabel stijlen te overschrijven die eerder zijn gedefinieerd:

#top {
background:#ea6800 url(../images/teaser.png) no-repeat;
padding:10px;
}

#top .moduletable h3 {
color:#fff;
background:none;
text-align:left;
font:2.5em Arial, Helvetica, sans-serif normal;
font-stretch:expanded;
margin:0;
padding:0;
}

#top .moduletable {
font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;
color:#fff;
border:0;
margin:0;
padding:0;
}

Nu moeten we ons focussen op de thypografie.

Typografie

Veel van de links zullen wit moeten zijn, dus defineren we die als globale en wijzigen de kleur van de centrale kolom:

a:link,a:visited {
text-decoration:underline;
color:#fff;
}

a:hover {
text-decoration:none;
}

#content60 a:link,#content60 a:visited,#content80 a:link,#content80 a:visited,#content100 a:link,#content100 a:visited {
color:#000;
}

De vormgeving heeft een gestileerde knop. Wij maken dit met behulp van een afbeelding op de achtergrond van de compilaite. Het is een dun plakje dat horizontaal is verdeeld:

.button {
border:#000 solid 1px;
background:#fff url(../images/buttonbackground.png) repeat-x;
height:25px;
cursor:hand;
margin:4px 0;
padding:0 4px;
} 

Voor tabellen zoals FAQ, kunnen we een eenvoudige achtergrond door middel van herhaald gebruiken van de afbeelding die we gebruiken voor de teaser. Hergebruik van het beeld wordt thematisch en bespaart ook bij het downloaden van de afbeelding, waardoor de pagina's sneller laden.

 sectiontableheader {
background:url(../images/teaser.png);
color:#fff;
font:1.2em bold Arial, Helvetica, sans-serif;
padding:5px;
}

Modules hebben slechts een eenvoudige herdefinitie en verbetering voor padding en margins (opvulling en marges):

 
.moduletable {
margin-bottom:1em;
color:#fff;
font-size:1.1em;
}

.moduletable h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}

Menu's, zoals altijd, hebben heel veel CSS stijlen. Hier houden wij het zo eenvoudig mogelijk te maken. We snijden een enkel beeld dat omvat zowel punten als de onderstreping. Niet dat de styling is "ingeschakeld" door het toepassen van een module achtervoegsel aan het menu op elke lijst van links waar we deze look op willen toepassen:

.moduletablemenu {
margin-bottom:1em;
}

.moduletablemenu h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}

.moduletablemenu ul {
list-style:none;
margin:5px 0;
}

.moduletablemenu li {
background:url(../images/leftmenu.png) bottom left no-repeat;
height:24px;
font:14px Tahoma,Arial, Helvetica, sans-serif;
margin:10px 0;
padding:0 0 0 10px;
}

.moduletablemenu a:link,.moduletablemenu a:visited {
color:#fff;
display:block;
text-decoration:none;
padding-left:5px;
}

.moduletablemenu a:hover {
text-decoration:none;
color:#fff;
background:#ADADAD;
} 

Als laatste is het Tab-menu rechts bovenaan. Als een toegankelijkheid verdediger willen we dat instellen, zodat de tabbladen verschalen als het lettertype wordt geresized. Gelukkig, is er een techniek ontwikkeld die dit doet, het is eigenlijk hetzelfde principe als we gebruiken voor onze kolommen, weer "de schuifdeuren"!

Wij zullen ook proberen om optimalisering voor een zekere snelheid van de template te doen En het gebruik van slechts een afbeelding voor de linker-en rechterzijde van de "deuren", alsook de in-en uitgeschakeld staat gebruiken. Dit staat bekend als het gebruik van sprites.

De CSS is niet moeilijk, we hoeven alleen maar te spelen met de verticale positie van de afbeelding in als achtergrond voor de stand:

.moduletabletabs {
font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.moduletabletabs ul {
list-style:none;
float:right;
background:#212121;
width:100%;
margin:0;
padding:0;
}

.moduletabletabs li {
float:right;
background:url(../images/tabs.png) no-repeat 0 -4px;
margin:0;
padding:0 0 0 12px;
}

.moduletabletabs a:link,.moduletabletabs a:visited {
float:left;
display:block;
color:#000;
background:url(../images/tabs.png) no-repeat 100% -4px;
text-decoration:none;
margin:0;
padding:7px 18px 5px 9px;
}

.moduletabletabs #current {
background:url(../images/tabs.png) no-repeat 0 -84px;
}

.moduletabletabs #current a {
color:#fff;
background: url('/../images/tabs.png') no-repeat 100% -84px;
}

We zullen ook het achtervoegsel van de module moeten toevoegen voor tabbladen van de module, voor het menu dat wij gebruiken. 

Als u terug kijkt naar het oorspronkelijke ontwerp, zult u merken dat er pictogrammen waren op deze tabbladen. Aangezien we reeds gebruik maken van twee achtergrondafbeeldingen, een op de li en een op de link, zouden we een derde element nodig hebben om het pictogram in de achtergrond te plaatsen. U kunt dit doen met een 'span', maar dit is gevorderd CSS Jujutsu.

Ik laat dat als huiswerk opdracht.

Het laatste wat overblijft is de herziening van het templateDetails.xml bestand. Het moet alle bestanden en beelden die gebruikt worden in de template, gebruikt worden, zodat het nog steeds goed te installeren is als een zip-bestand. Er bestaan een aantal tools, die doen dit automatisch doen, als er gebruik gemaakt wordt van 1.0.x, maar op het moment van schrijven, is er geeneen beschikbaar voor 1.5.

Ons uiteindelijke template zou eruit moeten zien als Figure 9.10.

Figure 9.10 Advanced template with typography
 

Wat u tenminste moet weten.

Het maken van een productie Joomla! template is meer een kwestie van grafische vormgeving en CSS manipulatie dan sommige speciale "Joomla! kennis."
 

CSSTemplateTutorialStep3

We hebben nu een template gebaseerd op een compilatie (of ontwerp). Enkele eenvoudige typografie zijn toegevoegd, maar wat nog belangrijker is, we hebben een pure CSS lay-out die dynamisch opvouwbare kolommen en een slick tabbladen menu bevat. Ik heb een installeerbare template beschikbaar in de Compass bibliotheek:
CSSTemplateTutorialStep3.zip
 

Nu we de basis van het gebeuren hebben, laten we vervolgens duiken in enkele van de geavanceerde functie mogelijk met 1.5 templates.