Modules comme le FdF ?

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

Résolu Modules comme le FdF ?

Message par RCAnnonce le Jeu 15 Mar 2012 - 17:03

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 Mr. Green


Dernière édition par RCAnnonce le Sam 17 Mar 2012 - 8:11, édité 1 fois

RCAnnonce
***

Masculin
Messages : 172
Inscrit(e) le : 24/12/2010

http://www.rcannonce.com
RCAnnonce a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Modules comme le FdF ?

Message par Dr. Karlos le Jeu 15 Mar 2012 - 22:07

Bonsoir,

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

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


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: Modules comme le FdF ?

Message par RCAnnonce le Jeu 15 Mar 2012 - 22:16

Bonsoir,

Et vous avez bien raison, le travail c'est la santé Mr. Green
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.

RCAnnonce
***

Masculin
Messages : 172
Inscrit(e) le : 24/12/2010

http://www.rcannonce.com
RCAnnonce a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Modules comme le FdF ?

Message par Dr. Karlos le Ven 16 Mar 2012 - 1:14

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://illiweb.com/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. Wink Le #couleur est à remplacer par la couleur de la bordure voulue. Wink

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.

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: Modules comme le FdF ?

Message par RCAnnonce le Ven 16 Mar 2012 - 13:04

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://illiweb.com/fa/optimisation_fdf/fr/bg_pannel.png);
        background-position: center bottom;
        background-repeat: repeat-x;
        }
div.post {
        background-image: url(http://illiweb.com/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://i47.servimg.com/u/f47/16/07/46/88/ombre_10.jpg

Merci

RCAnnonce
***

Masculin
Messages : 172
Inscrit(e) le : 24/12/2010

http://www.rcannonce.com
RCAnnonce a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modules comme le FdF ?

Message par Dr. Karlos le Ven 16 Mar 2012 - 13:15

Re,

Désolé, je ne voyais pas l'ombre sous Google Chrome. Wink 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. 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: Modules comme le FdF ?

Message par RCAnnonce le Ven 16 Mar 2012 - 13:26

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://i43.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 ?


RCAnnonce
***

Masculin
Messages : 172
Inscrit(e) le : 24/12/2010

http://www.rcannonce.com
RCAnnonce a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modules comme le FdF ?

Message par Dr. Karlos le Ven 16 Mar 2012 - 21:56

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. Wink Ils permettent tous l'affichage des arrondis sous différents navigateurs, ils doivent donc avoir la même valeur pour un affichage optimal. Very Happy


Cordialement.


Dernière édition par Dr. Karlos le Sam 17 Mar 2012 - 2:22, édité 1 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: Modules comme le FdF ?

Message par RCAnnonce le Ven 16 Mar 2012 - 22:40

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://i47.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

RCAnnonce
***

Masculin
Messages : 172
Inscrit(e) le : 24/12/2010

http://www.rcannonce.com
RCAnnonce a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modules comme le FdF ?

Message par Dr. Karlos le Sam 17 Mar 2012 - 2:25

Re,

J'ai inséré une accolade de trop. Wink 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.

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: Modules comme le FdF ?

Message par RCAnnonce le Sam 17 Mar 2012 - 8:10

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

RCAnnonce
***

Masculin
Messages : 172
Inscrit(e) le : 24/12/2010

http://www.rcannonce.com
RCAnnonce 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