Effet 3D

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

Résolu Effet 3D

Message par koum64 le Sam 31 Mai 2014 - 14:30

Bonjour,
Depuis hier je cherche mais en vain alors, dslé si cela a déjà été demandé  Confused 
Peut être que je n'écris pas les bons mots pour trouver la solution...

J'aimerais arrivé à faire un effet 3d/bulles pour "les derniers messages"et "forums" comme c le cas pour forumactif :



Merci beaucoup à celui ou celle qui voudra et pourra m'aiguiller  aidez moi

EDIT
J'ai vue ds les tutos comment faire un cadre pour derniers message : http://forum.forumactif.com/t346456-phpbb2-mettre-un-cadre-dans-les-derniers-messages#2957958

Mais pour les forums / sous catégories ?


Dernière édition par koum64 le Mar 3 Juin 2014 - 22:07, édité 1 fois

koum64
Nouveau membre

Messages : 8
Inscrit(e) le : 31/05/2014

http://outline2.forumactif.org
koum64 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par Neptunia le Sam 31 Mai 2014 - 15:41

Bonjour ^_^

@koum64 a écrit:
J'ai vue ds les tutos comment faire un cadre pour derniers message : http://forum.forumactif.com/t346456-phpbb2-mettre-un-cadre-dans-les-derniers-messages#2957958

Mais pour les forums / sous catégories ?

Pour les listes de sujets, il suffit de faire la même chose au niveau du topics_list_box

La portion de code qui vous intéresse est celle ci
Code:
      <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

            <span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
        </td>

Neptunia
+ Hyperactif +

Féminin
Messages : 10939
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par Kinotto le Sam 31 Mai 2014 - 16:09

Bonjour,

Pour ajouter une ombre (responsable, ici, de l'effet 3D), il vous suffit de remplacer, du code donné par Neptune- :

Code:
<div style="width: 200px;"></div>
par
Code:
<div style="width: 200px;box-shadow:Xpx Xpx Xpx X"></div>

Pour compléter les "X" :
http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html a écrit: Syntaxe

   La première valeur indique le décalage horizontal vers la droite
   le deuxième correspond au décalage vertical vers le bas
   le chiffre suivant indique la force du dégradé
   et enfin, la couleur

Je vous donne également un site pour trouver les codes couleur qui vous correspondent : http://code-couleur.com/

Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par koum64 le Sam 31 Mai 2014 - 21:07

Merci beaucoup à vous, Neptune- et Nightmare. pour votre aide et compléments d'informations, c'est crô gentil  Very Happy 

Je vais tester...

koum64
Nouveau membre

Messages : 8
Inscrit(e) le : 31/05/2014

http://outline2.forumactif.org
koum64 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par koum64 le Dim 1 Juin 2014 - 20:32

Confused  Après plusieurs et plusieurs essais, je n'arrive pas à faire un encadrement pour la description de la deuxième colonne (c'est à dire : catégorie).
Quelqu'un aurait il un tutoriel s'il vous plait ?  Embarassed

koum64
Nouveau membre

Messages : 8
Inscrit(e) le : 31/05/2014

http://outline2.forumactif.org
koum64 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par NousDeux(Admin) le Dim 1 Juin 2014 - 22:31

je cherche la meme chose en phpbb3

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par koum64 le Lun 2 Juin 2014 - 20:18

Bsoir,

Après des heures d'essais et de recherches d'explications j'ai réussi à faire l'encadrement des descriptions catégories. Mais en modifiant l'index_box et pas topics_list_box  Confused 
J'espère que ça ne boguera pas avec le temps et d'autres modifs...

Me reste l'ombre, couleur, centrer etc etc

Je laisse le topic ouvert pour NousDeux(Admin) ?


Dernière édition par koum64 le Lun 2 Juin 2014 - 21:17, édité 1 fois

koum64
Nouveau membre

Messages : 8
Inscrit(e) le : 31/05/2014

http://outline2.forumactif.org
koum64 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par NousDeux(Admin) le Lun 2 Juin 2014 - 21:01

Merci de laisser ouvert.

Pour l’ombre tu peux peut être créer une class pour ton cadre est dans ton css faire une boxshadow.

Qu’as-tu modifié pour ajouter le cadre ?

je m’approche du Graal en faisant une boxshadow sur la variable dd.lastpost dans le css

voici le résultat



Se qui me dérange c’est le titre derniers messages dans le bandeau de la catégorie qui est ombrée aussi.
on peut jouer sur la dimension de l'ombrage



Dernière édition par NousDeux(Admin) le Lun 2 Juin 2014 - 21:31, édité 2 fois

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par koum64 le Lun 2 Juin 2014 - 21:20

Je suis très débutante je commence à peine à comprendre certaine choses  Very Happy 

Je sais pas si j'ai le droit de mettre un lien....

Spoiler:
J'ai entre autre utilisé ce tuto libre d'accés : http://www.school-of-pub.net/t6683-forumactiftemplate-modifier-la-mise-en-page-des-descriptions

Bravo pour ton encadrement ça fait super beau ! !

koum64
Nouveau membre

Messages : 8
Inscrit(e) le : 31/05/2014

http://outline2.forumactif.org
koum64 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par NousDeux(Admin) le Lun 2 Juin 2014 - 21:32

voila problème résolu en travaillant la balise dd.lastpost mais que dans la section ul.topiclist.forums.



maintenant je cherche à centrer la box

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par NousDeux(Admin) le Lun 2 Juin 2014 - 21:51

voici la version finale



voici ce que j'ai ajouté au CSS pour arriver à ce resultat

       dd.lastpost {
       text-align:center;
       margin-left: 20px;
       }

       ul.topiclist.forums dd.lastpost {
       box-shadow: #000 0 0 4px;
       text-align:left;
       }

pour augmenter ou diminuer l'ombre il faut modifier le 4px dans box-shadow

je cherche maintenant à retirer le trait blanc entre le nombre de message et sujet



Mon forum est en phpbb3

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par NousDeux(Admin) le Lun 2 Juin 2014 - 22:16

j'apporte une modification pour que cela fonctionne sur toute les categories du forum car mon script precedent ne fonctinait que sur l'index.

/* contour effet 3D ombré dernier message */
dd.lastpost {
text-align:center;
margin-left: 20px;

}

ul.topiclist.forums dd.lastpost {
box-shadow: #000 0 0 4px;
text-align:left;
}
ul.topiclist.bg_none dd.lastpost {
box-shadow: #000 0 0 4px;
text-align:left;
}

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet 3D

Message par NousDeux(Admin) le Lun 2 Juin 2014 - 22:19



pour arrondir les angle il faut ajouter

border-radius: 5px; dans dd.lastpost

NousDeux(Admin)
***

Messages : 120
Inscrit(e) le : 14/05/2013

http://plaisir-croisiere.forumactif.org/
NousDeux(Admin) 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