https://www.facebook.com/tr?id=1475801249377226&ev=PixelInitialized
partage

Note de l'utilisateur: 0 / 5

Donnez une note !
0 sur 5 - 0 votes
Merci d'avoir noté cet article.

Il se peut que vous souhaitiez avoir une zone de contenu plus étendue ou de plus larges colonnes à gauche et à droite. Voici quelques suggestions sur la façon dont vous pourriez aborder cette question. Regardons quels sont les paramètres par défaut dans index.php et template.css du template Protostar.

Paramètres par défaut de Protostar pour les colonnes de droite, de gauche, et le centre.

Colonne de gauche - position-8

Si vous avez le template Protostar comme template frontal et que vous placez un module en position-8, il apparaîtra dans la colonne de gauche. Voici un extrait de l'index.php qui place ce module position-8 dans le div #sidebar et lui attribue la classe .span3

<div id="sidebar">
<div>
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>
</div>

Colonne de droite - position-7

Pour un module placé en position-7, voici le code dans index.php pour cette position :

<div id="aside">
<!-- Begin Right Sidebar -->
<jdoc:include type="modules" name="position-7" style="well" />
<!-- End Right Sidebar -->
</div>

Style dans Template.css pour .span3

Template.css donne la largeur à .span3 avec ce style (pour les moniteurs à écran large).

.row-fluid .span3 {
width: 23.4043%;
}

Paramètres par défaut pour la colonne centrale

Le contenu principal et les modules mis en position-3 et position-2 sont placés dans la page Web dans index.php selon les lignes suivantes :

<main id="content" role="main">
<!-- Begin Content -->
<jdoc:include type="modules" name="position-3" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="position-2" style="none" />
<!-- End Content -->
</main>

L'élément <main> se verra attribué une classe .span6 s'il existe des modules à sa gauche et à sa droite. L'élément <main> se verra attribuer une classe Span9 si seulement une des colonnes a des modules publiés à l'intérieur. L'élément <main>se verra attribué une classe .span12 si ni la colonne de gauche ni celle de droite n'a de module assigné. Cela se fait dans la section <? Php ...?> Du fichier index.php. Avec une série de déclarations if et elseif, le fichier teste quelles positions ont été assignées et définit la valeur de la variable $span en conséquence. Ce code php suppose que les deux position-7 et position-8 sont affectées d'une classe de .span3.

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span9";
}
else
{
$span = "span12";
}

Voici les styles pour ces classes span dans template.css

.row-fluid .span6 {
width: 100%;
}
.row-fluid .span9 {
width: 48.9362%;
}
.row-fluid .span12 {
width: 100%;
}

Comment modifier les paramètres par défaut pour les classes .span de Protostar

Il y a plusieurs approches possibles pour modifier ces paramètres par défaut afin de personnaliser votre site Web. Vous pouvez modifier les pourcentages des largeurs pour ces classes span dans votre feuille de style personnalisée de surcharge. Vous pouvez modifier le index.php afin qu'il assigne des classes .span plus larges ou plus étroites à la colonne de droite et de gauche.

Modifier les classes .span pour les colonnes gauche et droite vers .span2 et ajuster la zone Centrale

Créez une sauvegarde de votre index.php dans Protostar avant d'apporter des modifications au fichier d'origine. Ouvrez index.php dans un éditeur de texte.

Vous aurez besoin d'ajuster la déclaration <? php...? > if pour donner à la colonne du centre une classe .span correcte.

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span8";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span10";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span10";
}
else
{
$span = "span12";
}

Ensuite, vous devrez modifier les lignes de position-8 et position-7 pour qu'elles aient une classe .span2 :

<div id="sidebar" class="span2">
    <div class="sidebar-nav">
        <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div>
</div>

<div id="aside" class="span2">
    <!-- Begin Right Sidebar -->
        <jdoc:include type="modules" name="position-7" style="well" />
    <!-- End Right Sidebar -->
</div>

Enregistrez votre index.php dans votre répertoire Protostar sur le serveur d'hébergement. Ouvrez votre site dans un navigateur Web. Les colonnes de gauche et de droite doivent être plus étroites et la zone centrale devrait être plus large. Il peut y avoir d'autre style que vous aurez besoin d'adapter pour affiner le contenu dans ces modules.

Changer pour span2 sur la gauche et span4 sur la droite

Le même concept s'applique si vous voulez avoir une colonne plus étroite sur la gauche et une colonne plus large sur la droite, sauf que vous devrez être plus créatif avec la déclaration php if dans index.php.

// Adjusting content width

if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span8";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span10";
}
else
{
$span = "span12";
}
<div id="sidebar" class="span2">
    <div class="sidebar-nav">
        <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div>
</div>

<div id="aside" class="span4"> <!-- Begin Right Sidebar --> <jdoc:include type="modules" name="position-7" style="well" /> <!-- End Right Sidebar --> </div>
partage