Aanpassen Offline pagina Joomla!

In dit artikel beschrijf ik hoe je de vormgeving van de offline pagina kunt aanpassen van Joomla.


Je hebt hiervoor kennis van HTML, PHP en CSS voor nodig, je kunt kladblok of notepad++http://notepad-plus-plus.org/ hiervoor gebruiken of een WYSIWYG editor zoals bijvoorbeeld DreamWeaverhttp://notepad-plus-plus.org/.

Er kunnen verschillende redenen zijn om een Joomlawebsite (tijdelijk) offline te zetten. denk hierbij aan:

  • Website is nog in aanbouw.
  • Onderhoud aan de website
  • Oplossen van een storing.
  • Andere redenen.

Als beheerder van de website kun je inloggen via de backend van je website, ook als je website offline is.
Je kunt ook met een beheerder account inloggen via de front-end van je website, ook als je website offline is.

Offline brengen website

In dit hoofdstuk beschrijf ik hoe je de website offline zet.

  1. Log in met je beheerder account via de backend van je website (www.<jedomein.nl>/administrator).
  2. Klik in het menu linksboven op Systeem / System.
  3. Kies dan Algemene instellingen / Global Configuration.
  4. Klik vervolgens op Ja bij Website offline / Site Offlince (Tabblad Website \ Site tab)

    Joomla website offline zetten
  5. Klik daarna op Opslaan & sluiten / Safe & close.
  6. Log uit, door rechtsboven op het tandwieltje te klikken. 
  7. Om het resultaat te bekijken van de offline pagina klik je linksonder op Ga naar de startpagina van de website.

    Ga naar de startpagina

  8. Hieronder het resultaat van de standaard pagina.

    Offline pagina joomla

Indien je de website weer online wil brengen, lees dan het hoofdstuk, Weer online brengen website.

Aanpassen layout standaard offline pagina

De standaard vormgeving van de offline pagina kan niet aansluiten bij de vormeging van de website, je wil een andere pagina maken voor je bezoekers. 
Je kunt deze aanpassen naar je eigen wens en vormgeving. Om de standaard layout aan te passen kun je Template overrides gebruiken.
In het voorbeeld maken we gebruik van het standaard template dat in Joomla gebruikt wordt, het Protostar Template.

De offline pagina bevat de volgende bestanden en is terug te vonden op deze locatie:

/templates/system/offline.php
/templates/system/css/offline.css
/templates/system/css/offline_rtl.css

Kopieer bovenstaande bestanden naar je eigen template folder.
Hieronder als voorbeeld de bestandslocatie voor het Protostar Template.

/templates/protostar/offline.php
/templates/protostar/css/offline.css
/templates/protostar/css/offline_rtl.css

Om een eigenvormgeving te gebruiken kun je de offline.php en de bijbehorende CSS file aanpassen. 
De offline_rtl.css is voor talen die van links naar rechts gelezen worden. Je kunt deze bestanden bewerken in kladblok of Notepad++ alsook via de backend van Joomla.

  1. Klik hiervoor op Extensies / Extensions gevolgd door Template beheer / Template manager.
  2. Klik aan de linkerkant op Templates / Templates.
  3. Klik dan op de naam van je eigen template.
  4. Klik op offline.php om deze aan te passen.
  5. Indien je het bestand hebt aangepast, klik dan op Opslaan & sluiten / Safe & close.
  6. Klik daarna op Sluiten / Close.
  7. Bekijk het resultaat van de offline pagina, indien je de website nog niet offline gezet hebt, ga dan naar het hoofdstuk, Offline brengen website.

Helemaal zelf een offline pagina maken

Je kunt ook helemaal zelf een offline pagina maken (offline.php) met een compleet eigen look and feel zoals het template dat je gebruikt.
Plaats het offline.php bestand in de root van het eigen template. Joomla zal deze pagina weergeven indien de website offline is.

Opmerking: Plaats geen links naar interne pagina's om te navigeren naar artikelen op je website, deze zullen niet werken als de website offline is.

Als je ervoor kiest om een eigen offline pagina te maken, dan kan het zijn dat je niet in staat zult zijn om in te kunnen loggen op het front-end gedeelte van he website.
Je kunt een inlogvenster opnemen in je offline pagina door onderstaande code op te nemen in het bestand.

<form action="<?php echo JRoute::_('index.php', true);
?>" method="post" id="form-login">

<fieldset class="input">

<p id="form-login-username">

<label for="username"><?php echo JText::_('JGLOBAL_USERNAME')
?></label>

<input name="username" id="username"
type="text" class="inputbox" alt="<?php echo
JText::_('JGLOBAL_USERNAME') ?>" size="18" />

</p>

<p id="form-login-password">

<label for="passwd"><?php echo JText::_('JGLOBAL_PASSWORD')
?></label>

<input type="password" name="password"
class="inputbox" size="18" alt="<?php echo
JText::_('JGLOBAL_PASSWORD') ?>" id="passwd" />

</p>

<?php if (count($twofactormethods) > 1) : ?>

<p id="form-login-secretkey">

<label for="secretkey"><?php echo JText::_('JGLOBAL_SECRETKEY')
?></label>
<input type="text" name="secretkey" class="inputbox" size="18" alt="<?php echo JText::_('JGLOBAL_SECRETKEY') ?>" id="secretkey" />

</p>

<?php endif; ?>

<?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>

<p id="form-login-remember">

<label for="remember"><?php echo
JText::_('JGLOBAL_REMEMBER_ME') ?></label>

<input type="checkbox" name="remember"
class="inputbox" value="yes" alt="<?php echo
JText::_('JGLOBAL_REMEMBER_ME') ?>" id="remember" />

</p>

<?php endif; ?>

<p id="submit-buton">

<label>&nbsp;</label>

<input type="submit" name="Submit" class="button
login" value="<?php echo JText::_('JLOGIN') ?>" />

</p>

<input type="hidden" name="option"
value="com_users" />

<input type="hidden" name="task" value="user.login"
/>

<input type="hidden" name="return" value="<?php
echo base64_encode(JUri::base()) ?>" />

<?php echo JHtml::_('form.token'); ?>

</fieldset>

</form>

Weer online brengen website

In dit hoofdstuk beschrijf ik hoe je de website weer inline zet.

  1. Log in met je beheerder account via de backend van je website (www.<jedomein.nl>/administrator).
  2. Klik in het menu linksboven op Systeem / System.
  3. Kies dan Algemene instellingen / Global Configuration.
  4. Klik vervolgens op Nee bij Website offline / Site Offlince (Tabblad Website \ Site tab)
    Joomla website offline zetten
  5. Klik daarna op Opslaan & sluiten / Safe & close.
  6. Log uit, door rechtsboven op het tandwieltje te klikken. 
  7. Het front-end gedeelte van de website zal er weer uitzien zoals gebruikelijk is.