animation dans titre de catégorie ne fonctionne pas (phbb2)
2 participants
Page 1 sur 1 • Partagez
animation dans titre de catégorie ne fonctionne pas (phbb2)
Détails techniques
Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 5 janvier 2019
Lien du forum : http://bulble-moon.forumactif.com/
Description du problème
Bonjour, bonsoir (et bonne année à tous) !!!je suis actuellement entrain de coder un forum rp dont le thème principal est la sorcellerie. Donc, je m'amuse à mettre des animations en css3 dans les liens hypertextes et dans les catégories. Et donc voilà mon soucis...
En faisant des recherches sur les animations, j'ai constaté qu'on pouvait bah en faire plus que changer le texte ou de forme. il suffit pour ça d'utiliser @keyframes. J'ai donc suivit un des tutoriels qu'on trouve sur le web en codant sur L'application LIVE CSS de Chrome, l’aperçut me plait bien. Je vais mettre le css dans la feuille de style pour le titre de catégorie et là, ça ne fonctionne plus... (désolée pour le roman).
Vérification du JS : l'erreur ne vient pas des deux scripts que j'ai sur le forum.
Vérification du CSS : j'ai déjà supprimé le css que j'avais installé mais l'erreur ne vient pas de là.
Vérification des templates : J'ai remis les templates de base et l'erreur ne vient pas de là non.
Alors, j'aimerai savoir où ai-je fait une erreur. Je vous joints le css et la template modifier.
CSS titre catégorie
- Code:
.catnom_tour{
height:40px;
overflow:hidden;
background-color:#cdcbc5;
margin-bottom:2px;
}
catnom{
text-align:center;
height:40px;
padding-top:5px;
text-align:center;
display:block;
background-color:#cdcbc5;
}
.catnom_tour .secondarytitle h2{
text-transform:uppercase;
color:#fff;
font-size:15px;
}
.secondarytitle:hover,
.secondarytitle:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-name: spaceboots;
animation-duration: 0.8s;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-name: spaceboots;
-moz-animation-duration: 0.8s;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
@keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.catnom_tour .secondarytitle h2::after {
border-top: 1px solid #fff;
color: #fff;
content: "un sous titre";
display: block;
font-size: 8px;
font-style: oblique;
font-weight: 400;
letter-spacing: 10px;
line-height: 16px;
margin: 3px auto 0;
text-shadow: 1px 1px 0 var(--couleur_0d);
text-transform: uppercase;
width: 300px;
}
Template de la catégorie modifier
- Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="forumline">
<div class="catnom_tour">
<catnom class="secondarytitle"> {catrow.tablehead.L_FORUM}</catnom></div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
</h{catrow.cathead.LEVEL}>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="forum">
<div class="gauche">
<div class="forum-stat">
<div>{catrow.forumrow.TOPICS} <span>S</span></div>
<div>{catrow.forumrow.POSTS} <span>M</span></div>
</div>
<div class="forum-image">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
</div>
<div class="centre">
<div class="forum-titre"><h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</span>
</h{catrow.forumrow.LEVEL}>
</div>
<div class="description">
<div class="desc">{catrow.forumrow.FORUM_DESC}</div>
<div class="forum-lien">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
</div>
</div>
<div class="droite">
<div class="der-forum">
<div class="forum-av">
<!-- BEGIN avatar -->
<span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->
</div>
<div class="der"><div>{catrow.forumrow.LAST_POST}</div></div>
</div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Merci beaucoup
Re: animation dans titre de catégorie ne fonctionne pas (phbb2)
coucou,
j'ai toujours besoin d'une explication pour comprendre l'erreur.
ayez pitié de moi svp
j'ai toujours besoin d'une explication pour comprendre l'erreur.
ayez pitié de moi svp
Re: animation dans titre de catégorie ne fonctionne pas (phbb2)
Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu » |
Re: animation dans titre de catégorie ne fonctionne pas (phbb2)
Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum. |
Sujets similaires
» Image dans le titre d'une catégorie
» LOGO dans le titre de la CATEGORIE
» Enlever la marge dans le titre de la catégorie
» Titre forum dans catégorie non aligné
» Retirer image titre catégorie dans le forum
» LOGO dans le titre de la CATEGORIE
» Enlever la marge dans le titre de la catégorie
» Titre forum dans catégorie non aligné
» Retirer image titre catégorie dans le forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum