Een eigen Joomla template maken (13) – logo, omschrijving en zoekveld

Joomla 1.5 Templates
Inmiddels zijn we gestart met een nieuwe serie over joomla templates in Joomla 1.5!

In de vorige aflevering heb je je index.php met includes gemaakt in je nieuwe Joomla template. Je bent nu toe aan de inhoud van deze includes. We beginnen met het logo (inclusief zoekveld).

Het doel voor nu
Aan het eind van dit tutorial kun je het volgende zelf maken:

Het insluiten van het logo
Het bestand met het logo sluit je in met de volgende PHP-code:

<?php include_once( $mosConfig_absolute_path.'/templates/' .$GLOBALS['cur_template'] .'/includes/logo.php' ); ?>

Even in herinnering – 2 shortcuts:
$mosConfig_absolute_path is de variabele die het server pad bevat.
$GLOBALS['cur_template'] is de variabele die het template pad bevat.

De indeling van logo.php
De inhoud van logo.php ziet er als volgt uit:

<!– 1) message variabele –>
<?php $message = "[je omschrijving hier]" ?>

<!– 2) start div + form –>
<div id="logo">
<form method="get" id="sform" action="<?php echo $mosConfig_live_site; ?>/index.php">

<!– 3) logoimage –>
<div id="logoimage">
<a href="index.php"><?php echo '<img src="' .$mosConfig_live_site. '/templates/' .$GLOBALS['cur_template']. '/images/whelp-logo.jpg" border="0" alt="logo" />'; ?></a>
</div>

<!– 4) logoname–>
<div id="logoname"><a href="<?php echo $mosConfig_live_site; ?>/" title="Home"><img src="<?php echo $mosConfig_live_site. '/templates/' .$GLOBALS['cur_template']; ?>/images/whelp-naam.gif" alt="WHELP! " title="WHELP! …" /></a></div>

<!– 5) longdescription–>
<div id="longdescription"><?php echo $message; ?><br/>

<!– 6) searchbox –>
<?php if (mosCountModules( "user4" )) { ?>
<?php mosLoadModules ( 'user4',-1); ?>
<?php } ?>
</div>

<!– 7) close form + div –>
</form>
</div>

Toelichting
De pagina bevat 7 onderdelen:
1) $message: met deze variabele kun je de omschrijving van je website bepalen. Ik heb deze hier apart gezet, zodat je dit eenvoudiger kunt onderhouden.
2) Een gedeelte waar je de DIV voor het logo opent en het formulier start. Dit formulier heb je nodig voor je zoekveld. De waarden binnen dit formulier (zoals method, id en action) zijn direct overgenomen van Joomla. Merk op dat jet met de variabele $mosConfig_live_site het internetadres van je eigen website kunt ophalen.
3 en 4) Het logo en de naam. Het logo van whelp heeft 2 onderdelen: het hondje en de naam WHELP. Het template is zo gemaakt dat het links zijn naar de homepage.
5) De omschrijving van Whelp.nl. Deze omschrijving zie je rechtsboven.
6) Het zoekvenster. Op deze plek gebruik je de exacte Joomla code, nl. het insluiten van module user4.
7) En tot slot sluit je het formulier en de DIV weer af.

De nodige CSS
Voeg voor de juiste weergave van dit blok de volgende code toe aan je CSS stylesheet:

/* logo and description */
#logo{
background-color:#FFFFFF;
border-bottom:1px solid #A8A8A8;
height:115px;
margin:0pt 10px;
text-align:left;
}

#logo img{
border:0pt none;
float:left;
margin:0pt 0pt 0pt 2em;
}

#logoimage{
text-align:left;
}

#logoname {
float:left;
line-height:1em;
margin:33px 30px 0pt 0pt;
}

#logoname img{
margin: 0;
}

#longdescription {
color:#444444;
line-height:1.5em;
padding:33px 20px 0pt 30px;
}

#longdescription a {
color:#DA023C;
text-decoration:none;
}

/* search */
.search{
margin:10px 10px 0pt 0px;
width: 131px;
text-align:right;
background:transparent url(../images/search.gif) no-repeat scroll left center;
float: right;
}

#mod_search_searchword{
width: 109px;
}

Toelichting
1) Voor de juiste indeling van de onderdelen maak je gebruik van de float:left en float:right commando's. Dit zorgt ervoor dat het logo en de naam goed uitlijnen.
2) Het zoekveld geef je een achtergrond mee. Hierdoor krijg je een klein loepje naast het veld. De tekst search… komt automatisch mee vanuit de Joomla module. Dit hebben we vooralsnog niet aangepast.

Hoe nu verder?
De volgende stap is de navigatie in te sluiten. Meer hierover in het volgende artikel in deze serie.

Download
De laatste versie van het template vind je op de whelp downloads pagina.

Artikelenserie - Een Joomla template maken

Vorig artikel in deze serie Volgend artikel in deze serie

Stem / Bookmark [?]

Vind je dit interessant? Neem dan een abonnement op mijn RSS feed [?] of e-mail service!
Heb je er veel aan gehad? Overweeg dan een donatie voor Dejana van Houten.
Heb je suggesties, aanvullingen of vragen? Reageer hieronder!

2 reacties

Naar het reactieformulier | reacties rss [?] | trackback adres [?]

Frits van Leeuwen
13.02.09 - 18:40
1
Hallo,
Ik lees net het hoofdstuk over een logo. Ik wil op de kop van mijn web pagina in Joomla 1.5 een plaatje met tekst in het plaatje plaatsen. Als ik dat i.p. van het logo doe, is het een vast plaatje.
Ik wil het bij het wisselen van taal ook laten veranderen. Hoe kan ik dat doen?
vriendelijek bedankt alvast,
Frits
Theo Bakker
23.02.09 - 21:57
2
Dag Frits,
Kijk eens bij de Joomla Extensions in de categorie image rotators.
Groet, Theo

Jouw reactie

Spelregels voor commentaar

XHTML: Je kunt de volgende HTML code gebruiken: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>