Header
Partagez | 

[FA] Astuces en vrac

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: [FA] Astuces en vrac   Ven 28 Mar - 11:17

Salut les SoPiens !

Parmi nous, beaucoup possèdent un forum sous ForumActif et, chaque jour, nous voulons faire en sorte que celui-ci soit au top, agréable visuellement, et qui se démarquent un peu des autres.

SoP vous propose beaucoup de tutoriels complets, vous expliquant de A à Z comment faire de grosses modifs, mais, il nous manquant un tutoriel bric-à-brac rassemblant des astuces. C'est donc ce que nous allons essayer de faire ici.

Si tu veux ajouter une astuce, n'hésite pas à la transmettre à nos intervenants.

Sommaire


MàJ du 28/03/2014





Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].


Dernière édition par Miettes le Dim 31 Jan - 8:23, édité 4 fois
Revenir en haut Aller en bas
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Re: [FA] Astuces en vrac   Ven 28 Mar - 11:18

Sur l'index


Aucune astuce pour le moment.
Revenir en haut Aller en bas
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Re: [FA] Astuces en vrac   Ven 28 Mar - 11:18

Dans vos forums


Aucune astuce pour le moment.
Revenir en haut Aller en bas
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Re: [FA] Astuces en vrac   Ven 28 Mar - 11:18

Dans un message


Scrollbar aux signatures


Mettre une scrollbar aux signature, c'est pas très compliqué et très pratique ! En effet, ça permet de mettre une hauteur maximale imposée, sans restreindre les membres et sans déformation du forum : trop cool quoi !

Bon c'est pas compliqué en plus, ça se fait en CSS. Pour cela on va dans PA -> Affichage -> Couleurs -> Feuille de style CSS
La class par défaut sur forumactif pour les signatures est "signature_div"
Du coup on va lui mettre une scroll comme on peut le faire pour n'importe quoi : on lui met une hauteur minimal, et un overflow !
Code:
    .signature_div {
    max-height:150px;
    overflow-y:auto;
    }


Et voilà :
Revenir en haut Aller en bas
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Re: [FA] Astuces en vrac   Ven 28 Mar - 11:18

La ChatBox


Quelques codes CSS


Voyons quelques codes CSS qui vont vous permettre de changer les apparences des messages de la ChatBox.

Tout d'abord changeons le style des phrases de connexion et de déconnexion. Cela va se faire comme ça :
Code:
.chatbox .msg span[style="color:green;"] strong {
color: purple;
font-size : 14px;
font-family:comic sans ms;
}
Expliquons ce code. On dit à notre feuille : tu vas dans la class chatbox puis dans la classe msg qu'elle contient. Ici, tu vas sélectionner le span qui a le style color:green; et qui est en gras et à la place tu lui appliques ce style.

Du coup voici le résultat :
Avant
Après
Pour les messages de déconnexion, c'est pareil sauf qu'on prend le span qui a le style color:red; :
Code:
.chatbox .msg span[style="color:red;"] strong {
color:blue;
font-size : 16px;
}
Et le résultat :
Avant
Après
Pour la date et l'heure, la CSS à modifier est simple :
Code:
    .date-and-time {
    color:red;
    font-size: 12px;
    }
Ce qui donne:
Avant : Après :
Pour les phrases de modération et les phrases commençant pas "/me", le code est le même : on va toujours modifier la class chatbox qui contient msg mais cette fois on ne prend que ce qui est gras :
Code:
.chatbox .msg strong {
color : green;
}
Ce qui nous donne :


Voyons quelques codes CSS qui vont vous permettre de changer l'apparence de la ChatBox

D'abord, on peut changer le titre de la chat box :
Code:
    #chatbox_header .cattitle strong { display: none; } /*On cache l'ancien titre*/
    #chatbox_header .cattitle:before { content: "Nouveau titre"; }
Pour l'explication du code, c'est exactement la même technique que précédemment Smile

Ensuite on peut changer la couleur de ce titre :
Code:
    #chatbox_header .catBottom .cattitle {
        color: #$$$$$$;
    }

Et on peut changer aussi le fond de la Chatbox :
Code:
    body.chatbox {
    background-image: url('URL DE L'IMAGE');
    }
ou simplement mettre une autre couleur :
Code:
body.chatbox {
    background-color: #$$$$$$;
}

Simple non ?

Personnaliser les phrases spéciales


~~ D'abord, que sont les phrases spéciales ? C'est très simple, ce sont les phrases de connexion, de déconnexion, d'absence, de modération de CB etc... Ici on ne s'intéresse pas à l'apparence mais bien au contenu !

~~ Où cela se change-t-il ? Tout va se passer dans la feuille de style CSS mais comme c'est un peu plus compliqué, on l'a séparé ^^

~~C'est parti ! D'abord, voyons comment masquer les phrases de connexion et de déconnexion (déconseillé) :
Comme pour l'apparence on va aller chercher ce qui correspond :
Code:
.chatbox .msg span[style="color:green;"] strong
pour les connexions et
Code:
 .chatbox .msg span[style="color:red;"] strong {
pour les déconnexions.
Et dans les propriétés on va juste mettre qu'on veut que ce soit caché :
Code:
visibility: hidden;

Ce qui va nous donner, pour la connexion :
Code:
    .chatbox .msg span[style="color:green;"] strong {
    visibility: hidden;
    }

Maintenant, voyons comment modifier la phrase et y ajouter sa touche personnelle :
Dans la CSS, on va préciser que l'on va changer ce contenu en l'ajoutant avant ou après le message de base. Donc :
Code:
    .chatbox .msg span[style="color:green;"] strong:before{
      content : "Ma phrase personnalisée";
    visibility: visible; /*Pour afficher la phrase personnalisée*
    }
Ou :
Code:
    .chatbox .msg span[style="color:green;"] strong:after{
      content : "Ma phrase personnalisée";
    visibility: visible; /*Pour afficher la phrase personnalisée*
    }
On peut même faire les deux ! Par exemple :
Bien entendu, pour le message de déconnexion, c'est pareil en changeant le contenu, et surtout le "green" en "red :
Code:
    .chatbox .msg span[style="color:red;"] strong:before{
      content : "Ma phrase personnalisée";
    visibility: visible; /*Pour afficher la phrase personnalisée*
    }

Cool n'est-ce pas ? Et pas très compliqué Wink
Revenir en haut Aller en bas
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Re: [FA] Astuces en vrac   Ven 28 Mar - 11:18

Autres astuces



Modifier les phrases prédéfinies par FA


Bonjour, Smile
Avec ForumActif, votre forum est constitué de nombreuses phrases prédéfinies comme la mention d'édition : "Dernière édition par ... le .., édité .. fois (Raison : ...)" ou encore la phrase au dessus de vos catégories : "Dernière visite le [date] - [heure]". Ce tutoriel utilise cette même technique pour modifier les phrases du QEEL.
Le panneau d'administration ne propose pas d'options pour modifier ces phrases. Vous pouvez cependant les modifier avec un tout petit peu de javascript. Vous allez voir, c'est très simple !

Dans un premier temps, on va mettre la variable qui génère cette phrase entre deux balises. Pour entourer les variables de balises, ça se joue dans les templates (Panneau d'administration, Affichage, Templates). Pour retrouver les variables, vous pouvez vous aider de ce listing. Une fois que vous avez trouvé la variable, voici ce que vous devez faire :
Code:
<span id="nom_de_votre_choix">{la variable}</span>
Faîtes attention à donner un id unique (une autre balise ne doit pas avoir cet id).
Juste après ce code, ajoutez :
Code:
<script type="text/javascript">document.getElementById('id_choisi_precedemment').innerHTML=document.getElementById('id_choisi_precedemment').innerHTML.replace(/texte à remplacer/,"Texte remplaçant");
</script>
Ce script permet de remplacer le texte de la phrase prédéfinie.

Enregistrez et validez le template et admirez le résultat ! Smile
Revenir en haut Aller en bas
[FA] Astuces en vrac
Page 1 sur 1
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Gestion d'un forum+