Barre séparateur pour les widgets.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Barre séparateur pour les widgets.

Message par musicvice le Mer 15 Fév 2012 - 17:02

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 ! Smile


Dernière édition par musicvice le Sam 18 Fév 2012 - 5:12, édité 1 fois

musicvice
**

Masculin
Messages : 92
Inscrit(e) le : 27/09/2011

http://codfirst.1fr1.net/forum
musicvice a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre séparateur pour les widgets.

Message par Dr. Karlos le Mer 15 Fév 2012 - 23:35

Bonsoir,

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

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.


Dernière édition par Dr. Karlos le Jeu 16 Fév 2012 - 1:21, édité 2 fois

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre séparateur pour les widgets.

Message par musicvice le Mer 15 Fév 2012 - 23:55

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

musicvice
**

Masculin
Messages : 92
Inscrit(e) le : 27/09/2011

http://codfirst.1fr1.net/forum
musicvice a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre séparateur pour les widgets.

Message par musicvice le Jeu 16 Fév 2012 - 0:33

Re: Désolé pour le double post.

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

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 !

musicvice
**

Masculin
Messages : 92
Inscrit(e) le : 27/09/2011

http://codfirst.1fr1.net/forum
musicvice a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre séparateur pour les widgets.

Message par Dr. Karlos le Jeu 16 Fév 2012 - 1:23

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.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre séparateur pour les widgets.

Message par musicvice le Jeu 16 Fév 2012 - 1:46

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 ?!

musicvice
**

Masculin
Messages : 92
Inscrit(e) le : 27/09/2011

http://codfirst.1fr1.net/forum
musicvice a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre séparateur pour les widgets.

Message par Dr. Karlos le Jeu 16 Fév 2012 - 5:31

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.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre séparateur pour les widgets.

Message par musicvice le Ven 17 Fév 2012 - 4:57

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%">

musicvice
**

Masculin
Messages : 92
Inscrit(e) le : 27/09/2011

http://codfirst.1fr1.net/forum
musicvice a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre séparateur pour les widgets.

Message par Dr. Karlos le Ven 17 Fév 2012 - 5:08

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. Wink


Cordialement.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre séparateur pour les widgets.

Message par musicvice le Ven 17 Fév 2012 - 21:49

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 ! Smile

musicvice
**

Masculin
Messages : 92
Inscrit(e) le : 27/09/2011

http://codfirst.1fr1.net/forum
musicvice a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre séparateur pour les widgets.

Message par Dr. Karlos le Ven 17 Fév 2012 - 23:45

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. Wink


Cordialement.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre séparateur pour les widgets.

Message par musicvice le Sam 18 Fév 2012 - 5:12

Tout marche ! Mercii beaucoupp ! Very Happy

musicvice
**

Masculin
Messages : 92
Inscrit(e) le : 27/09/2011

http://codfirst.1fr1.net/forum
musicvice a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum