Modules comme le FdF ?

[RCAnnonce]

Bonjour,

J'aimerais savoir comment faire des modules, ou widgets, comme sur la nouvelle version du FdF.
J'ai cherché un sujet qui expliquerais quels sont les changements de la nouvelle version du FdF et comment les appliquer à nos forums néanmoins je n'ai pas trouvé.

Bref, si quelqu'un pouvait me filer le code CSS à mettre s'il vous plait

[Dr. Karlos]

Bonsoir,

Nous ne pouvons vous passer des codes sans vous faire travailler un peu.

Quel résultat désirez-vous exactement obtenir? Voulez-vous des widgets avec des coins arrondis, un fond bleu, des titres spéciaux..?


Cordialement.

[RCAnnonce]

Bonsoir,

Et vous avez bien raison, le travail c'est la santé
Mes modules ont déjà un coin arrondis, dans la mesure ou mon forum est en PHPBB3.
Ce que je recherche, c'est le fond bleu et les mêmes contours des modules (qui les font ressortir), enfin l'espèce d'ombre.

Si on peut appliquer ça aux sujets et messages aussi ce serait trop, comme sur le FdF.

[Dr. Karlos]

Bonsoir,

Insérez donc ce code dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS):

Code:

.module {
background-color: #E5F1F9;
border: 1px solid #couleur;
background-image: url(http://2img.net/i/fa/optimisation_fdf/fr/bg_pannel.png);
background-position: center bottom;
background-repeat: repeat-x;
}

L'ombre est appliquée à l'aide de cette partie du code:

Code:

background-image: url(ADRESSE DE L'IMAGE);
background-position: center bottom;
background-repeat: repeat-x;

L'image de l'ombre est centrée en bas du widget. Vous n'avez qu'à remplacer "ADRESSE DE L'IMAGE" par votre image permettant de faire l'ombrage. Le #couleur est à remplacer par la couleur de la bordure voulue.

Pour appliquer l'effet aux posts, insérez ce code à la suite de l'autre dans votre CSS:

Code:

div.post {
background-image: url(ADRESSE DE L'IMAGE)!important;
background-position: center bottom;
background-repeat: repeat-x;
border: 1px solid #couleur;
}

Cordialement.

[RCAnnonce]

Bonjour,

Merci de votre réponse.
En suivant vos instructions, j'ai réussis à mettre le fond bleu en bas des modules et messages néanmoins je n'arrive pas à mettre l'ombre.
Voici le CSS que j'ai mis :

Code:

 .module {
        background-color: #E5F1F9;
        border: 1px solid #couleur;
        background-image: url(http://2img.net/i/fa/optimisation_fdf/fr/bg_pannel.png);
        background-position: center bottom;
        background-repeat: repeat-x;
        }
div.post {
        background-image: url(http://2img.net/i/fa/optimisation_fdf/fr/bg_pannel.png)!important;
        background-position: center bottom;
        background-repeat: repeat-x;
        border: 1px solid #couleur;
        }

Pour l'ombre une image noir suffit ? par exemple :
https://i.servimg.com/u/f47/16/07/46/88/ombre_10.jpg

Merci

[Dr. Karlos]

Re,

Désolé, je ne voyais pas l'ombre sous Google Chrome. Ajoutez ceci à vos codes CSS avant les accolade fermées "}":

Code:

-webkit-box-shadow: 1px 2px 3px #000000;
-moz-box-shadow: 1px 2px 3px  #000000;
box-shadow: 1px 2px 3px #000000;

Le 1px correspond à la position de l'ombre par rapport à la gauche du cadre, le 2px à la position de l'ombre par rapport au haut du cadre et le 3px correspond au flou de l'ombre.


Cordialement.

[RCAnnonce]

Ah c'est beaucoup mieux merci.
En revanche, juste une dernière petite question si vous me le permettez.

En effet, tout est mis en place néanmoins il reste des coins blancs :
https://i.servimg.com/u/f43/17/33/09/59/sansno10.png

Il y en a sur les angles des modules, mais aussi ceux des messages.
J'aimerais bien les supprimer si vous avez une astuce, s'il vous plait.

EDIT : J'ai réussit à arrondir le coin des widgets en rajoutant ceci :

Code:

.module{
        border-radius: 13px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 15px;}
.forabg{
  border-radius: 13px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 15px;}
.bodyline{
  border-radius: 13px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 15px;}

Néanmoins, j'ai perdu l'arrondis du cadre du forum.
Et aussi, ce code n'a pas affecté les sujets et messages qui conservent toujours leurs angles blancs.
Par exemple : http://www.rcannonce.com/t1394-nouveau-partenaire-pro-savage#4401
Il y a les angles blancs, et l'ombre dépasse un peu en bas à gauche.
Que puis-je faire ?

[Dr. Karlos]

Re,

Pour arrondir les coins du forum, vous n'avez qu'à insérer ce code dans votre CSS:

Code:

#wrap {
border-radius: 0px;
moz-border-radius:  0px;
-webkit-border-radius: 0px;}


Par contre, dans votre code, les différents border-radius ont des valeurs différentes, ce qui ne devrait pas être le cas. Ils permettent tous l'affichage des arrondis sous différents navigateurs, ils doivent donc avoir la même valeur pour un affichage optimal.


Cordialement.

[RCAnnonce]

Bonsoir,

Merci ça fonctionne pour les contours du forum, j'ai mis tous les border radius a la même taille.
Néanmoins quand j'ai mis le code ça m'a mis ça :

Erreur détectée
Nous avons compté un nombre différent de "{" et de "}". Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code.

Ah et aussi, comment arrondir les angles des sujets et messages ? il ne me manque plus que ça.
Regardez :
https://i.servimg.com/u/f47/16/07/46/88/impr_e10.png

On voit pas parfaitement bien, mais à la place de l'arrondis y a du blanc.


Merci bcp

[Dr. Karlos]

Re,

J'ai inséré une accolade de trop. Utilisez plutôt ce code:

Code:

#wrap {
border-radius: 0px;
moz-border-radius:  0px;
-webkit-border-radius: 0px;}


Les coins blancs sont causés par l'ombre qui fait une bordure autour du post. Vous pouvez toujours tenter d'insérer ce code dans votre CSS, mais l'effet sera le même:

Code:

div.post  {
border-radius: 0px;
moz-border-radius:  0px;
-webkit-border-radius: 0px;}

Cordialement.

[RCAnnonce]

Bonjour,

Le dernier code que vous m'avez donné fonctionne parfaitement et permet à l'ombre de faire le contour des angles arrondis.

Milles merci pour votre aide qui, comme d'habitude, est très complète.

Bonne journée