Page 1 sur 1

phpBB 3.0/3.2 [Prosilver] Barre verticale flottante

Posté : 12 avr. 2019 19:20
par eventstorm
Barre verticale flottante Création d'une barre verticale flottante
  • Sous le thème noir, il y a une Barre verticale flottante à droite , voici la marche à suivre.
  1. Enregistrer ses trois images Dans le dossier styles/prosilver/theme/images/
  2. Ouvrir : styles/votre thème/template/overall_header.html
    • trouver

      Code : Tout sélectionner

      	<div id="page-header">
    • Ajouter après

      Code : Tout sélectionner

      		<div id="vertical_links">
      			<div id="vertical_link_top">
      				<a href="#page-header"><img alt="" src="{T_THEME_PATH}/images/top.png"></a>
      			</div>
      			<div id="vertical_link_central">
      				<a href="{U_INDEX}" title="Accueil"><img src="{T_THEME_PATH}/images/home.png" alt="Accueil"></a>
      			</div>
      			<div id="vertical_link_bottom">
      				<a href="#page-footer"><img alt="" src="{T_THEME_PATH}/images/bottom.png"></a>
      			</div>
      		</div>
  3. Ouvrir : styles/votre thème/theme/forms.css (je ne suis pas sur mais sa marche)
    • trouver

      Code : Tout sélectionner

      allez à la fin de page
    • Ajouter après

      Code : Tout sélectionner

      /* special barre verticale flottante- start (voir aussi colours.css*/
      #vertical_links {
      	display:block !important;
      	height:76px;
      	position:fixed;
      	right:0;
      	text-align:center;
      	top:46%;
      	width:30px;
      	z-index:1; padding-left:0; padding-right:0; padding-top:12px; padding-bottom:11px
      }
      
      #vertical_link_top {
      	padding:0 0 3px 8px;
      }
      
      #vertical_link_central {
      	padding:6px 0 5px 8px;
      }
      
      #vertical_link_bottom {
      	padding:5px 0 0 8px;
      }
      /* special barre verticale flottante- start*/
  4. Ouvrir : styles/votre thème/theme/colours.css
    • trouver

      Code : Tout sélectionner

      a.top {
      	background-image: url("{IMG_ICON_BACK_TOP_SRC}");
      }
      
      a.top2 {
      	background-image: url("{IMG_ICON_BACK_TOP_SRC}");
      }
    • Remplacer par

      Code : Tout sélectionner

      /* special barre verticale flottante- start
      a.top {
      	background-image: url("{IMG_ICON_BACK_TOP_SRC}");
      }
      
      a.top2 {
      	background-image: url("{IMG_ICON_BACK_TOP_SRC}");
      }
      special barre verticale flottante- End*/
:idea: Ce tutoriel a été modifié pour ici, mais reste fonctionnel dans l’état.