CSS Template tutorial 1.5 - Kolommen verbergen

Kolommen verbergen

Tot nu toe hebben we onze lay-out zodanig opgebouwd dat we altijd drie kolommen, ongeacht of er sprake is van enige content. Vanuit het perspectief van een CMS-template, dit is niet erg nuttig. In een statische site zal de inhoud zou nooit veranderen, maar we willen onze site-beheerders de mogelijkheid geven om hun content, altijd en zonder zich zorgen te maken over het bewerken van CSS layouts, te kunnen veranderen. We willen in staat zijn om een automatische  "turn off" kolom of "inklap" kolom te krijgen, indien er geen inhoud is.

Gedurende de ontwikkeling van het Joomla! 1.5 template-engine, waren er een aantal veranderingen en verbeteringen. Deze quote komt rechtstreeks uit de ontwikkeling Joomla! blog:

"The changes to the template system in Joomla 1.5 can be divided into two categories. First of all there are changes to the way things where done in Joomla 1.0, for example the new way modules are loaded, and second there are also a bunch of extra features, like template parameters[el]a quick overview:

mosCountMoules
The mosCountModules function has been replaced by the $this->countModules function and support for conditions has been added. This allows designers to easily count the total number of modules in multiple template positions in just one line of code, for example $this->countModules('user1 + user2'); which will return the total number of modules in position user1 and user2."

Vertaald:  
"De wijzigingen in het template systeem in Joomla! 1.5 kan worden onderverdeeld in twee categorieën. Allereerst zijn er wijzigingen aangebracht in de manier waarop dingen gebeurde in Joomla! 1.0, bijvoorbeeld de nieuwe manier van modules laden en ten tweede zijn er ook een heleboel extra functies, zoals template parameters [el] een kort overzicht:

mosCountMoules
De mosCountModules functie is vervangen door de $this->countModules functie en ondersteuning voor voorwaarden is toegevoegd. Hierdoor kunnen ontwerpers eenvoudig het totale aantal modules tellen in meerdere template posities met maar een regel code, bijvoorbeeld $this->countModules('user1 + user2'); die zal het totale aantal modules geven in positie user1 en user2 ".

Meer informatie is ook beschikbaar in de Joomla! forum.

Dus het algemene gebruik van mosCountModules zou zijn: 

<?php if($this->countModules('condition')) : ?>
   do something
<?php else : ?>
   do something else
<?php endif; ?>

Er zijn vier mogelijke voorwaarden. Als voorbeeld laten we het aantal modules in Figuur 9.7 tellen. We kunnen deze code ergens in de index.php invoegen.

left=<?php echo $this->countModules('left');?><br />
left and right=<?php echo $this->countModules('left and right');?><br />
left or right=<?php echo $this->countModules('left or right');?><br />
left + right=<?php echo $this->countModules('left + right');?>

• countModules('left'). Geeft 4; er 4 modules aan de linkerkant.
• countModules('left and right'). Geeft 1; er sprake is van een module in linkse en rechtse positie.
• countModules('left or right'). Geeft 1; er sprake is van een module in links of rechts standpunt.
• countModules('left + right'). Geeft 7; tellen van de modules van linker en rechter positie.

In deze situatie moeten we gebruik van de functie die het mogelijk maakt om te tellen hoeveel modules aanwezig zijn in een specifieke locatie. Dus bijvoorbeeld, als er geen inhoud gepubliceerd wordt in de rechterkolom, kunnen we de kolom breedte aanpassen om die ruimte op te vullen.

Er zijn verschillende manieren om dit te doen. We zouden bijvoorbeeld een voorwaardelijk statement in de body zetten over het niet tonen van de inhoud en daarna over een andere stijl voor de inhoud gebruiken, gebaseerd op welke kolommen er zijn. Om het zo makkelijk mogelijk te maken, heb ik een serie van voorwaardelijke verklaringen in de head-tag voor het (her)definiëren een aantal CSS-stijlen:

<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>

Dus wij rekenen met:

• Als er niets in links of rechts, zijn we 100%.
• Als er iets naar links of rechts, we zijn 80%.
• Als er iets in iets naar links en naar rechts, we zijn 60%.

Vervolgens hebben we nodig om het bestand index.php in de inhoud div naar:

<div id="content<?php echo $contentwidth; ?>">

Verander de layout css naar:

# content60 (float: links; breedte: 60%; overflow: hidden;)
# content80 (float: links; breedte: 80%; overflow: hidden;)
# content100 (float: links; width: 100%; overflow: hidden;)

De PHP voorwaardelijke verklaringen in de kop moet verschijnen na de regel die aan het template.css bestand linkt. Dit is omdat, indien er twee identieke CSS style regels worden gebruikt; degene die als laatste gelezen wordt alle andere zal overschrijven.

Dit kan ook, op een soortgelijke, gebeuren door middel van het 'if' statement om een sub CSS-bestand te importeren.

Terwijl u probeert uw voorwaardelijke statement te verbeteren, kunt u een regel code in uw index.php gebruiken, om te laten zien wat de waarde is:
Deze inhoud column <? Php echo $contentwidth;?>% Breed

We zijn halverwege, maar hebben nu lege <div>'s waar de kolommen zijn.

Verbergen van module code

Bij het aanmaken van opvouwbare kolommen, is het een goede gewoonte om in te stellen dat de modules niet moeten worden gegenereerd als er geen inhoud is. Als dit niet gebeurt en de pagina's hebben lege <div>'s in hen, wat kan leiden tot cross browser kwesties.

Het volgende if statement wordt gebruikt bij lege <div>'s:

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

Met behulp van deze code zal, wanneer er niets verschijnt in 'left', de <div id="sidebar"> niet worden gebruikt cq getoond.

Met behulp van deze technieken voor onze linker en rechter kolommen ziet ons index.php bestand er nu met de volgende code uit. We zullen ook aan een include voor het broodkruimel module, die module toont de huidige pagina en de route.

Merk op dat dit moet worden opgenomen in het index.php bestand en ook gepubliceerd worden als een module. 

<? php / / geen directe toegang gedefinieerd ( '_JEXEC') or die ( 'Verboden toegang');?>
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0
Transitional / / EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml"
xml: lang = "<? php echo $ this-> language;?>"
lang = "<? php echo $ this-> language;?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel = "stylesheet" href = "/ templates / <? php echo $ this-> template?> / css / template.css" type = "text / css" />
if ($ this-> countModules ( 'links en rechts ") == 0) $ contentwidth =" 100 "; if ($ this-> countModules (' links of naar rechts') == 1) $ contentwidth =" 80 "; if ($ this-> countModules ( 'links en rechts') == 1) $ contentwidth =" 60 ";?>
</ head>
<body>
<div id="wrap">
<div id="header"> <div class="inside"> <h1> <? php echo $ mainframe-> getCfg ( 'sitename');?></ h1>
<jdoc:include type="modules" name="top" style="xhtml" /> </ div>
</ div>
if ($ this-> countModules ( 'links')):?>
<div id="sidebar"> <div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" /> </ div>
</ div>
<? php endif;?>
<div id = "content <? php echo $ contentwidth;?>"> <div class="inside">
<jdoc:include type="module" name="breadcrumbs" style="none" />
<jdoc:include type="component" /> </ div>
</ div>
if ($ this-> countModules ( 'rechts')):?>
<div id="sidebar-2"> <div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" /> </ div>
</ div>
<? php endif;?>
if ($ this-> countModules ( 'footer')):?>
<div id="footer"> <div class="inside">
<jdoc:include type="modules" name="footer" style="xhtml" /> </ div>
</ div>
<? php endif;?>
<! - einde wrap ->
</ body>
</ html>

Wat u tenminste moet weten

Elementen zoals kolommen of module locaties kunnen worden verborgen (of inklappen) wanneer er geen inhoud aanwezig is. Dit gebeurt met behulp van PHP voorwaardelijke regels (conditional PHP statements) die zijn gekoppeld aan verschillende CSS-stijlen.

Ik zou aanraden een iets andere manier voor het maken van de voettekst te gebruiken. In de hier getoonde manier is het vaak hard gecodeerd in het bestand index.php, waardoor het moeilijk wordt om dit snel te veranderen. Op dit moment toont de "voettekst" (footer) module in de backend de Joomla! auteursrechten en kan niet gemakkelijk worden bewerkt. Het zou veel meer zin hebben om een aangepaste (X) HTML module te plaatsten in de voettekst locatie, zodat de beheerder van de site deze makkelijker kan veranderen. Wilt u uw eigen voettekst maken, Depubliceer dan die module en maak een aangepaste html-module met elke tekst en taal die u wenst.

In dit geval zouden we :

 <jdoc:include type="modules" name="footer" style="xhtml" />

kunnen vervangen met :

 <jdoc:include type="modules" name="bottom" style="xhtml" />

We moeten ook niet vergeten om deze positie toe te voegen aan het templateDetails.xml bestand.

Er zijn verschillende namen die verband houden met de modules in Joomla!: Banner, left, right, user1 of voettekst en ga zo maar door. Een belangrijk ding om te beseffen is dat de namen niet overeenkomen met een bepaalde locatie. De locatie van een module wordt volledig gecontroleerd door de template ontwerper, zoals we hebben gezien. Het is een goede gewoonte de locatie te koppelen aan de naam, maar het is niet noodzakelijk. 

Dit basis template laat de fundamentele principes zien voor het maken van een Joomla! template 

We hebben nu een basis, maar functioneel template. Somige simpele typografie is toegevoegd, maar belangrijker: we hebben een pure CSS layout gemaakt, met dynamische inklapbare kolommen. Ik heb een installeerbare tempalte gemaakt die beschikbaar is in de Compass blibiotheek 
CSSTemplateTutorialStep2.zip 
 

Nu dat we de basis gedaan hebben, laten we een iets meer attractieve template maken met de technieken die we hebben geleerd.