Handleidingen Vormgeving - Design

voor Joomla 3

Tekst en layout aanpassen Offline pagina in Joomla 3

In deze handleiding beschrijf ik hoe je de vormgeving van de offline pagina kunt aanpassen van je Joomla website. 

Indien je de offline functionaliteit inschakeld, kunnen je bezoekers je website niet bezoeken. Je hebt voor het aanpassen een beetje kennis van HTML, PHP en CSS nodig. Je hebt aanvullende programma's nodig, je kunt hiervoor kladblok, notepad++ of een WYSIWYG editor zoals bijvoorbeeld Brackets gebruiken.

Er kunnen verschillende redenen zijn om een Joomla website (tijdelijk) offline te zetten. Denk hierbij aan:

  • Website is nog in ontwikkeling.
  • 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 beheeraccount inloggen (met SuperUser rechten) via de front-end van je website, ook als je website offline is. Als eerste leg ik uit hoe jij je website offline kunt zetten. Daarna leg ik uit hoe je de pagina kunt visueel kunt aanpassen.

Stappen 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.
  3. Kies dan Algemene instellingen.
  4. Klik vervolgens op Ja bij Website offline (Tabblad Website \ Site tab)

    Joomla website offline zetten
  5. Klik daarna op Opslaan & sluiten.
  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. Dus je wilt een andere look and feel geven aan de offline pagina voor je bezoekers.  Je kunt deze aanpassen naar je eigen wensen 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 eigen vormgeving 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, Notepad++ of Brackets, maar ook via de backend van Joomla.

  1. Login op de backend van je Joomla!website.  
  2. Klik hiervoor op Extensies gevolgd door Template beheer.
  3. Klik aan de linkerkant op Templates.
  4. Klik dan op de naam van je eigen template.
  5. Klik op offline.php om deze aan te passen.
  6. Indien je het bestand hebt aangepast, klik dan op Opslaan & sluiten.
  7. Klik daarna op Sluiten.
  8. 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, waarmee het front-endgedeelte weer beschikbaar voor je bezoekers.

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

    Joomla website offline zetten
  5. Klik daarna op Opslaan & sluiten.
  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.

 

Terug naar het overzicht    Terug naar categorie Vormgeving - Design

 

Delen op social media?

Nieuwsbrief

Schakel javascript in om dit formulier in te dienen

We use cookies

Wij gebruiken cookies op onze web site. Sommigen zijn essentieel voor het correct functioneren van de site, terwijl anderen ons helpen om de site en gebruikerservaring te verbeteren (tracking cookies). U kan zelf kiezen of u deze cookies wil toestaan of niet. Let op dat als u onze cookies weigert mogelijk niet alle functies van de site beschikbaar zijn.