Purity III possède son propre style pour les pages 404 et hors ligne. Ils sont personnalisés à partir de pages par défaut de Joomla.

Page 404

Page Hors-ligne

Si vous souhaitez personnaliser les 2 pages, suivez les instructions ci-dessous.

 

Trouvez où définir quel fichier CSS sont à charger

Ouvrir les fichiers error.php et offline.php dans templates/purity_iii/.

Fichier error.php - page 404

<link rel="stylesheet" href="/<?php echo $this->baseurl; ?>/templates/purity_iii/css/error.css" type="text/css" />

La page 404 charge le fichier error.css dans templates/purity_iii/css/.

Fichier offline.php – page Hors-ligne

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/purity_iii/css/offline.css" type="text/css" />  <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/purity_iii/css/general.css" type="text/css" />

La page Hors-ligne charge les fichiers offline.css et general.css dans templates/purity_iii/css/.

Ouvrez les 2 fichiers CSS pour personnaliser le style des pages 404 et Hors-ligne.

#frame {  background: #fcfcfc;  border: 1px solid #ddd;  margin: 100px auto 0; width: 600px;} /* Logo */#frame h1 {  background: #07b;  color: #fff;  margin: 0;  padding: 15px 0;  text-align: center;}

Remarque:

Les fichiers offline.css et error.css ne sont pas remplacées lorsque vous compilez LESS vers CSS donc vous pouvez personnaliser le style des 2 pages directement dans les 2 fichiers .css.

Personnaliser le Bouton Retour en haut de page

Dans le site de démonstration, Purity III n'a pas de bouton "Retour en haut de page", mais vous pouvez ajouter le bouton à votre site. Pour ce guide, vous pouvez également vous référer à la documentation de T3, il est le même pour tous les templates développés avec le framework T3.

http://t3-framework.org/documentation/bs3-customization#back-to-top

Étape 1: activez le bouton "Retour vers le haut"

Pour ajouter ce bouton dans votre site, ouvrez le fichier templates/t3_bs3_blank/tpls/blocks/footer.php puis ajoutez le code suivant au fichier.

<!-- BACK TOP TOP BUTTON --> <div id="back-to-top" data-spy="affix" data-offset-top="300" class="back-to-top hidden-xs hidden-sm affix-top">   <button class="btn btn-primary" title="Back to Top"><i class="fa fa-angle-up"></i></button> </div>   <script type="text/javascript"> (function($) {      // Back to top  $('#back-to-top').on('click', function(){               $("html, body").animate({scrollTop: 0}, 500);           return false;   }); })(jQuery); </script> <!-- BACK TO TOP BUTTON -->

Etape 2: ajoutez du style au bouton"Retour vers le haut"

Ouvrez le fichier templates/t3_bs3_blank/less/style.less puis ajouter la règle de style :

// Back to Top// -----------#back-to-top {  position: fixed;  right: @t3-global-margin;  top: auto;  z-index: 999;  display: none;  bottom: -60px;   @media (min-width: @screen-sm-min) {    display: block;  }   .btn {    background: none;    border: 2px solid @brand-primary;    color: @brand-primary;    height: 40px;    width: 40px;    border-radius: 50%;    line-height: 1;    padding: 0;    text-align: center;    .opacity(0.7);    .transition(0.2s);     &:hover, &:active, &:focus {      background: none;      outline: none;      .opacity(1);    }  }   &.affix {    bottom: @t3-global-margin * 2;  }   a {    outline: none;  }   i {    font-size: @font-size-large + 10;    line-height: 22px;  }}