Barre séparateur pour les widgets.

[musicvice]

Bonjour et merci pour vote temps ! ^^

Voilà, je me suis créé un menu à partir des widgets et voulais savoir si il était possible de mettre une barre séparateur qui partais d'en haut complètement de la page jusqu'en bas ?!

Voilà un petit exemple :


* La barre rouge est le séparateur que j'aimerais mettre *

J'aimerais vraiment qu'elle parte de la bannière jusqu'en bas de la page dans le but de séparer mon menu ( Widget ) du reste de contenu du site.

Merci beaucoup !

[Dr. Karlos]

Bonsoir,

Le meilleur résultat possible est réalisable à l'aide du template (pensez à changer le phpBB3 dans votre profil. ).

Trouvez cette partie dans votre template overall_header:

Code:

<td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>

Et remplacez-la par ce code:

Code:

<td valign="top" width="{C1SIZE}" style="border-right: 0px solid #couleur;">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>

La partie modifiable est celle-ci:

Code:

<td valign="top" width="{C1SIZE}" style="border-right: 0px solid #couleur;">

Remplacez 0px par une valeur et #couleur par la couleur désirée sur la bordure.


Cordialement.

[musicvice]

Mais si je change pour phpbb2 je dois tout refaire à 0 niveau apparence du forum ?!

[musicvice]

Re: Désolé pour le double post.

Bon, toute mes excuses mais j'ai pas totalement bien compris..

Disons une étape à la fois... J'ai trouvé cette partie dans mes templates :

Code:

<td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>

Je dois remplacer cette partie par quoi exactement ?!

Merci !

[Dr. Karlos]

Bonsoir,

Vous remplacez cette partie par ce code:

Code:

        <td valign="top" width="{C1SIZE}" style="border-right: 0px solid #couleur;">
                                      <div id="{ID_LEFT}">
                                        <!-- BEGIN giefmod_index1 -->
                                        {giefmod_index1.MODVAR}
                                            <!-- BEGIN saut -->
                                            <div style="height:{SPACE_ROW}px"></div>
                                            <!-- END saut -->
                                        <!-- END giefmod_index1 -->
                                      </div>
                                  </td>

Vous modifiez "0px" et "#couleur" par ce que vous désirez. Le 0px correspond à la largeur de la séparation et #couleur à la couleur de celle-ci.


Cordialement.

[musicvice]

Parfait ça la fonctionné !!

Y'a t'il un moyen de le décollé un peu ?! Car il est très collé sur le contenu :
Mon Forum Test

J'aimerais le rapprocher un peu plus des widgets. Est-ce possible ?!

[Dr. Karlos]

Content que ça fonctionne ^^.

Passons par les templates pour réaliser le tout.
Commencez par agrandir la largeur de votre forum à 85% en allant dans votre
> PA
> Général
> Configuration
> Largeur du forum.


Par la suite, trouvez cette partie dans votre template overall_header:

Code:

<!-- END giefmod_index1 -->
                                      </div>
                                  </td>
                           <td valign="top" width="100%">

Et remplacez-la par ce code:

Code:

<!-- END giefmod_index1 -->
                                      </div>
                                  </td>
                           <td class="homepage" valign="top" width="75%">

Insérez ce code dans votre CSS:

Code:

.homepage {
padding-left: 70px;
}


Modifiez la valeur afin d'éloigner les colonnes de la bordure.


Cordialement.

[musicvice]

Est-ce normal que je ne trouve pas cette partie dans mes O.H dans les templates ?!

Code:


<!-- END giefmod_index1 -->
                                      </div>
                                  </td>
                          <td valign="top" width="100%">

[Dr. Karlos]

Bonsoir,

Pouvez-vous poster ici votre template overall_header? Cherchez simplement END giefmod_index1 dans la barre de recherche du template et vous trouverez la suite par après.


Cordialement.

[musicvice]

Oh bonne solution, j'ai trouvé comme vous me l'avez montré ! y'a t'il moyen de mettre un ombre à cette bar ?

Merci doc !

[Dr. Karlos]

Bonsoir,

Dans le premier code que nous avons inséré dans votre template, utilisez plutôt ce code à la place de l'autre:

Code:

<td valign="top" width="{C1SIZE}" style="border-right: 0px solid #couleur; -webkit-box-shadow: 10px 0px 12px  #000000; -moz-box-shadow: 1px 0px 12px #000000; box-shadow: 1px 0px 12px #00000;">
                              <div id="{ID_LEFT}">
                                <!-- BEGIN giefmod_index1 -->
                                {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                <!-- END giefmod_index1 -->
                              </div>
                          </td>

Remplacez #couleur par la couleur de la bordure. Si vous voulez changer l'ombre, modifiez #000000 partout sur le code par la couleur désirée.


Cordialement.

[musicvice]

Tout marche ! Mercii beaucoupp !