TEMPLATE PROTOSTAR

 

http://www.piccoliwebmaster.com/template-protostar/aggiungere-nuove-posizioni.html

Aggiungere nuove posizioni

Per inserire una nuova posizione bisogna modificare l'index.php del template. Qui ho aggiunto una posizione per avere la possibilità di pubblicare un modulo HTML personalizzato in cui inserire le icone e i link ai Social media.

position-slide PE qui una posizione per la slide sotto al top menù.

 

La prima posizione si inserisce così:

150    <div class="icone_social">

151    <jdoc:include type="modules" name="position-icone" style="none" />

152    </div>

Appena sotto la riga 149 <!-- Header -->

e questo il css da inserire nelpersonal.css:

 

.icone_social {

   float: right;

   margin-top: -10px;

}

La seconda così:

 

168

169

170

171

172

<?php if ($this->countModules('slide')) : ?>

<div class="slide">

<jdoc:include type="modules" name="position-slide" style="none" />

</div>

<?php endif; ?>

appena dopo la position-1

 

163

164

165

166

167

<?php if ($this->countModules('position-1')) : ?>

<nav class="navigation" role="navigation">

<jdoc:include type="modules" name="position-1" style="none" />

</nav>

<?php endif; ?>

e questo il css da inserire per modificare padding, margin o altro

Quindi si può scegliere uno dei tanti moduli slide tra le estensioni di Joomla!®. Qui è pubblicato questo modulo:Responsive Photo Gallery, modificato con il css:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

.es-carousel-wrapper, .rg-view, #buttons {

   display:none !important;

}

.rg-image-wrapper {

   -moz-border-radius: 0px !important;

   -webkit-border-radius: 0px!important;

   border-radius: 0px!important;

   box-shadow: 0 3px 12px #000000!important;

   margin-bottom: 15px!important;

   min-height: 0!important;

   padding: 0!important;

   position: relative!important;

}

 

Per inserire il modulo nella nuova posizione occorre scriverne il nome nella tendina delle posizioni, oppure si può inserirla nel file templateDetails.xml del template in questo modo:

 

27

28

29

30

31

<positions>

       <position>position-icone</position>

       <position>position-slide</position>

</positions>