Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

La date/heure actuelle est Dim 29 Mar 2020 - 23:55

30 résultats trouvés pour FF0000

Installation du SCSS/SASS dans notre stylesheet.

Bonsoir Neptunia,

Le lien que j'ai donné plus haut, donne clairement les exemples de ce que le scss peut permettre de faire et nous l'avons expliqués aussi à plusieurs reprises. Le SASS nous permet de faire beaucoup plus de choses concrètes que le CSS.

Pour expliquer ce que raconte le site, donc, sait-on jamais qu'on ne lise pas anglais ^^

Variable : en effet, en css, on peut le faire avec une base :root, je parlerai donc ici surtout de la manière SCSS pour expliquer les utilités entières (ou essayer Wink).

Les variables sur le SCSS nous permettraient donc de créer une base de code et de l'écrire une seule fois. Exemple :

$backgroundisred:#ff0000;

Je répéterai donc donc mon background souhaité background:$backgroundisred.

A chaque mise à jour de notre site, au lieu de revenir sur nos 50 (pour grossir le trait mais l'idée y est) background de notre stylesheet, nous changerons juste $backgroundisred:#000; et le background changerait donc automatiquement partout sans avoir à nous retaper les 50 lignes. Evidemment si ce n'est que pour changer un background, ce n'est pas bien grave. Maintenant, imaginez une fiche de style où vous personnalisez chaque chose sur votre forum. Vous n'auriez qu'à modifier vos variables plutôt que revérifier vos milliers de ligne de CSS. La variable ne nous permettrait pas de modifier qu'un simple background mais on peut créer un corps entier qu'on éviterait de répéter un chaque fois. Je pense aux rôlistes notamment avec leur nombreuses fiches, que ce soit des fiches d'inscription, d'écriture, de lien et j'en passe, pour personnaliser le forum et garder la même idée de style partout, ce serait un gain de temps mais aussi de ligne.

Mais soit, on va dire que ça, :root nous permet de le faire.

Donc je vais passer au nesting.

Admettons que vous souhaitiez modifier, une fiche et une boîte de fiche, qu'on nommerait ficheForum.

Au lieu de bêtement taper :
Code:
ficheForum p{code}
ficheForum a{code}
ficheForum:hover{code}


(Et c'est évidemment un exemple ultra simple, mais faut voir plus loin avec Wink) nous n'aurions qu'à taper :
Code:
ficheForum {
p {code}
a {code}
:hover{code}
}


Là encore, c'est un exemple simple, mais je vous laisse imaginer s'il y avait plus de choses à traiter, la répétition. En se rappelant surtout que nous avons un nombre de caractères limités. Et bien avec cette méthode, je nous épargne déjà au moins 20 caractères. Ca paraît rien ? Je vous assure que si on s'épargne 20 caractères par-ci, 50 par là etc, on se fait une place monstrueuse dans notre fiche de style et dans un autre sens, on s'épargne aussi du temps de chargement.

Parce que, oui, disons le. Quand vous importez d'ailleurs votre fiche de style parce que vous faites une fiche html et une fiche css, faut l'appeler, la fiche css.

Le site nous parle ensuite de Partials et Modules. Je doute que nous puissions, malheureusement, l'utiliser sur forumactif, car cela s'applique surtout à des codes pouvant être importés d'un fichier, sauf que ForumActif n'autorise pas la création de multiples fiches css mais d'une seule et unique où nous étouffons tout, donc soit (dommage d'ailleurs qu'on puisse avec le JS et le HTML mais pas le CSS mais c'est un problème qui a déjà été soulevé). En gros, avec cette méthode, nous n'aurions qu'à créer des "fiches" css que nous aurions appelés (ou pas) ou importés (ou pas) dans les autres fiches souhaitées plutôt qu'appeler toute une fiche css à chaque chargement de page alors que c'est pas forcément nécessaire. Bah, oui, je m'en fous d'appeler le design de mon "Qui Est En Ligne" quand je suis dans un sujet, la répartition des scss évitait ça - mais oui, concrètement, sur ForumActif, ça ne nous serait pas forcément utile à l'heure actuelle, avec le système actuel.

Si ce n'était toujours pas clair, j'aurais pu crée deux fiches scss :
- base où je mets mon style comme mes couleurs par exemple
- qeel, j'ai besoin d'utiliser des couleurs de base, j'ai juste à écrire @use 'base' dans mon fichier "qeel" et ça m'appelle mes couleurs et mes variables installées dans base.

Mais oui, ça, c'était + pour l'information, mais j'ai bien conscience que cet aspect pourtant très utile du SASS, ne pourrait pas être concrétisé à l'heure actuelle.

Pour les Mixins désormais... Enorme gain de temps aussi lorsque c'est utilisé correctement, plus ou moins semblable aux variables et, je pense, non utilisable avec le CSS qu'on connaît.

Tag ff0000 sur Forum gratuit : Le forum des forums actifs 26QVV4P

Leur exemple est parfait donc je le réutilise, tant qu'à faire. Laughing

Alors si sur le screen cela paraît plus long en SCSS... Il faut toujours garder à l'esprit qu'une variable et un mixin ont pour but d'être réutilisable et d'éviter sur le long terme les répétitions et on y gagne énormément en place.

Operators, pour ceux qui veulent tenter la responsivité (qui est une norme dans le monde du développement), vous savez qu'on code de + en + en %. Je vois souvent mes amis et collègues se casser la tête à sortir leur calculatrice pour savoir quelle taille devrait faire telle boîte et j'en passe. L'Operator permet de réaliser des calculs directement dans votre fiche de style. Ca permet aussi à ceux qui sont habitués à coder en px et qui tiennent à rester en px à le faire et juste adapter un % dans leur fiche de style, comme l'indique le site ;

Tag ff0000 sur Forum gratuit : Le forum des forums actifs D5DTMyM

Concrètement, ces derniers exemples hors des variables, nous ne pouvons pas les faire avec la fiche CSS et je pointe juste que le :root est très peu connu du publique.

Pour faire simple, le but du SCSS/SASS (mais je dis SASS mais comme dis avec Nyxbanana, on peut parler d'autres préprocesseurs, je ne fais mention de SASS que parce que c'est le prépro le plus connu/utilisé depuis quelque années), c'est de nous faire gagner du temps et de la place, nous faire donc gagner en fluidité. Etant développeuse web, on a plus ou moins un dicton qui dit que nous sommes des feignants et que nous chercherons toujours à coder le moins possible et donc trouver des raccourcis à chaque fois. C'est exactement ce que fait le SCSS ; ça nous fait gagner du temps, de la place et l'entretien est bien plus rapide puisqu'il nous permet de ne changer que quelque petites choses pour réussir à changer tout un forum. Je ne pense pas beaucoup me tromper en disant que les gens iraient bien plus dans leur fiche de style du forum si celles-ci étaient plus simples et moins répétitives. Evidemment la façon dont on s'en sert en entreprise ne pourra pas être 100% applicable puisque nous nous servons aussi de l'avantage des Modules qui nous permet de créer plusieurs fiches ; pour nos variables, pour ci et ça et pour les réutiliser ensuite, exemple ; nous avons les variables, les commandes primordiales de scss puis ensuite nos autres fichiers scss sont pour gérer nos pages html, js, php, qu'importe, nous allons créer une boîte ? on aura le fichier de la boîte et son fichier scss. Ca épure, on s'y retrouve mieux. Mais évidemment dans notre système actuel, tout serait dans la feuille de style et même là, on s'y retrouverait déjà tous beaucoup mieux qu'actuellement.

Pour faire simple :
- Utiliser des variables.
- Imbriquer nos codes.
- Nous éviter de répéter des codes et donc prendre de la place, rendre plus difficile l'entretien de notre code et nous sucrer un nombre incroyable de caractères.
- Qui dit moins de caractère, dit feuille de style allégée, dis temps de chargement moins long puisqu'il y a moins de choses à traiter
- On pourrait gagner encore plus en fluidité en ayant des fiches de style comme nous avons des feuilles html et JavaScript puisqu'au lieu d'appeler toute notre feuille de style même pour des lieux où on en a pas besoin, seuls les fichiers concernés seraient appelés. Mais comme dis, ça, ce n'est pas le plus important, c'est plus "dans l'idéal de l'utilisation du scss" sans pour autant être quelque chose d'impératif pour l'utilisation du SCSS, j'ai surtout eu cette idée d'application grâce aux suggestions déjà postées. Et il va de soi que je prends en compte l'appel entre le css et les templates qui ne serait pas applicable de la même façon, d'où mon "dans l'idéal" et non "il faudrait aussi axer sur cette possibilité".

En espérant que ce soit clarifié Smile sinon il me semble que le site Sass est trouvable aussi en français, au cas où ! Je n'ai pas vérifié si les explications françaises étaient aussi claires qu'en anglais.
par IvyDTyler
le Mar 17 Mar 2020 - 19:56
 
Rechercher dans: Vos suggestions pour vos forums (sondages)
Sujet: Installation du SCSS/SASS dans notre stylesheet.
Réponses: 23
Vues: 903

couleurs des liens dans le widget " derniers sujets "

Bonjour à tous...

J'ai trouvé ce code :

 td#comments_scroll_div a {
   color: #ff0000;
   font-weight: bold;
   }

pour modifier la couleur des liens dans le widget " Derniers sujets " mais ce code fonctionne seulement si oui est coché dans :

Tag ff0000 sur Forum gratuit : Le forum des forums actifs Captur54

il ne fonctionne pas si " non " est choisi... Vous avez une idée pour changer cela?
par 1bernard1
le Lun 14 Oct 2019 - 5:43
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: couleurs des liens dans le widget " derniers sujets "
Réponses: 3
Vues: 283

Barre d'avertissement (BANNIS DÉFINITIVEMENT)

Informations générales
Nature de la création : Icones
Lien du forum Forumactif : https://www.aquariophiliefacile.com
Taille de la création (en pixels) : 143×21
Couleur de fond : {#}FF0000{/#}



Textes
Texte à insérer : BANNIS DÉFINITIVEMENT
Police à utiliser : Non fourni(e)
Couleur de la police : {#}FFFFFF{/#}



Images

    Non fourni(e)


Précisions
Bonjour , j'aimerais avoir une barre d'avertissement pour mon forum forumactif , j'aimerais que elle soit le plus moderne possible svp Smile

Merci bien à vous Smile
par Invité
le Mar 8 Jan 2019 - 17:31
 
Rechercher dans: Corbeille & Titres non explicites
Sujet: Barre d'avertissement (BANNIS DÉFINITIVEMENT)
Réponses: 1
Vues: 490

demande d'icones de message

Informations générales
Nature de la création : Icones
Lien du forum Forumactif : [Vous devez être inscrit et connecté pour voir ce lien]
Taille de la création (en pixels) : 55x20
Couleur de fond : Non fourni(e)


Textes
Texte à insérer : questions , présentation , en cours , résolu, tuto , doc ,important
Police à utiliser : au choix
Couleur de la police : au choix


Images


    Non fourni(e)


Précisions
bonjour
j'aurais besoin de vos services pour me créer des icones de message

QUESTION  [Vous devez être inscrit et connecté pour voir ce lien]
 
PRESENTATION  ( ou PREZ ) [Vous devez être inscrit et connecté pour voir ce lien]
 
EN COURS  [Vous devez être inscrit et connecté pour voir ce lien]
 
RESOLU [Vous devez être inscrit et connecté pour voir ce lien]

TUTO  [Vous devez être inscrit et connecté pour voir ce lien]

DOC  [Vous devez être inscrit et connecté pour voir ce lien]
 
IMPORTANT  [Vous devez être inscrit et connecté pour voir ce lien]

merci pour votre aide
par fred9545
le Jeu 3 Jan 2019 - 21:52
 
Rechercher dans: Demandes terminées
Sujet: demande d'icones de message
Réponses: 2
Vues: 1149

Problème pour modifier la couleur de l'arrière plan du profil.

Bonjour OVANOVIC, pour changer la couleur des intitulés, dans votre PA>Utilisateurs & Groupes>Utilisateurs>Profils>Champs du profil>Éditez chaque champ et réglez la couleur que vous souhaitez, cela modifiera aussi la couleur dans les profils de message. Pour modifier la couleur de police d'écriture de ce qui est écrit, il faudra ajouter un code CSS :

Code:
.inner,#cp-main h1,.inner label,.inner label a{color:#ff0000 ;}
J'ai mis rouge #ff0000, vous pouvez mettre ce que vous souhaitez.

Pour retirer les séparations, encore un code CSS :

Code:
.panel .separator{display:none;}


Pour l'intérieur du cadre que vous demandez, ce sera en plusieurs parties :

Code:
#profile-advanced-details,#cp-main .panel,#profile-advanced-right,#profile-advanced-right .module{background-color:#000;}

J'ai mis le fond noir #000, vous pouvez changer, la partie #profile-advanced-details,#cp-main .panel correspond à la partie à gauche et la partie #profile-advanced-right,#profile-advanced-right .module correspond à la parie droite ou il y a l'avatar.

Bien à vous.
par ◦Jay◦
le Mer 3 Jan 2018 - 8:49
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Problème pour modifier la couleur de l'arrière plan du profil.
Réponses: 6
Vues: 917

[ModernBB] Fond du message sur la page d'acceuil

Bonjour Feyy, pour rendre le fond de votre annonce transparent :

Code:
.panel.introduction{background-color:transparent;
box-shadow:none;}


Pour changer la couleur de la ligne :

Code:
.panel.introduction .h3{border-color:#ff0000;}


J'ai mis rouge(#ff0000), vous mettrez ce que vous souhaitez.

Si vous souhaitez supprimer cette ligne :

Code:
.panel.introduction .h3{border:none;}


Bien à vous.
par ◦Jay◦
le Ven 27 Oct 2017 - 6:49
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: [ModernBB] Fond du message sur la page d'acceuil
Réponses: 2
Vues: 448

[ModernBB] Déplacer la barre de navigation et la rendre figée en dessous du logo du forum

De rien, pour changer la couleur au survol de la souris :

Code:
.navbar a:hover {
    background-color: #FF0000;
    color: #000;
}


background-color: #FF0000; = couleur du fond
color: #000; = couleur de la police d'écriture

Bien à vous.
par ◦Jay◦
le Dim 15 Oct 2017 - 15:22
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: [ModernBB] Déplacer la barre de navigation et la rendre figée en dessous du logo du forum
Réponses: 6
Vues: 1020

ModernBB: Impossible de modifier certaines couleurs + fond rubriques

Bonjour Ejayremy, par CSS, les titres des forums :

Le lien normal :

Code:
a.forumtitle:link {
    color: #ff0000;}


Le lien une fois visité :

Code:
a.forumtitle:visited {
    color: #ff0000;
}


Le lien au passage de la souris :

Code:
a.forumtitle:hover {
    color: #ff0000;
}


Pour la partie en bleu une fois déployée :

Code:
.forabg.hidden {
    background-color:#ff0000;
}


J'ai mis rouge #ff0000 partout, vous mettrez ce que vous souhaitez. Wink


Bien à vous.
par ◦Jay◦
le Dim 8 Oct 2017 - 8:15
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: ModernBB: Impossible de modifier certaines couleurs + fond rubriques
Réponses: 2
Vues: 420

Commande Rang type MMO

En bref...

Nature de la création : Rang
Taille de la création (en pixels) : 160x50 (Environ)
Couleur de fond : [Vous devez être inscrit et connecté pour voir ce lien]

Image(s)

Lien(s) image(s) :

[Vous devez être inscrit et connecté pour voir ce lien]
Visualiser:
[Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]


[Vous devez être inscrit et connecté pour voir ce lien]
Visualiser:
[Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]


Texte

Texte à insérer : Maître de Guilde
Police à utiliser : Au choix !
Couleur police : Noir ou autres ?

En détails...

Lien de mon forum Forumactif : [Vous devez être inscrit et connecté pour voir ce lien]
Commentaire(s) supplémentaire(s) : Bonjour, Bonsoirs

J'aimerais avoir des rangs pour l'équipe du forum.
J'ai insérée un image qui pourrais vous servir d'inspiration
En résumée je demande un Rang Maître de Guilde qui est en accord avec le nouveau MMO Albion
Si possible, faire six variantes avec :

Bras Droit - [Vous devez être inscrit et connecté pour voir ce lien]
Grand Argentier - [Vous devez être inscrit et connecté pour voir ce lien]
Maître de Guerre - [Vous devez être inscrit et connecté pour voir ce lien]
Officier - [Vous devez être inscrit et connecté pour voir ce lien]
Garde#F01DF0
Membre - [Vous devez être inscrit et connecté pour voir ce lien]

Merci d'avance pour votre aide.
Cordialement,
Cédrick.


[Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]Votre commande a été vérifiée par un [Vous devez être inscrit et connecté pour voir ce lien] et est conforme au règlement. Elle peut dès à présent recevoir des propositions.

Merci de ne pas modifier votre commande après l'insertion de ce message, et de bien vouloir être patient. N'hésitez pas à remonter votre commande (UP) une fois par tranche de 24h.
par Cedrick Massie-Lajoie
le Lun 24 Juil 2017 - 0:38
 
Rechercher dans: Demandes terminées
Sujet: Commande Rang type MMO
Réponses: 2
Vues: 849

Modifier codage pour "CODE"

Bonjour Orwèn, vous souhaitez ajouter un fond de couleur ou une image ? Pour un fond de couleur, essayez comme ceci :

Code:
.code div.cont_code{background-color:#ff0000;
border:2px solid #000;
border-radius:10px;
padding:10px;}


J'ai mis un fond rouge(background-color:#ff0000) et une bordure de 2px noire(border:2px solid #000), mettez ce qui vous convient le mieux.

Bien à vous.
par ◦Jay◦
le Mer 3 Mai 2017 - 14:56
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Modifier codage pour "CODE"
Réponses: 5
Vues: 505

Redimensionnement automatique des images (non-souhaité)

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:
Tag ff0000 sur Forum gratuit : Le forum des forums actifs Image_10

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : hiver 2017
Lien du forum : http://entreelles.org

Description du problème

Bonjour,

je ne sais pas pourquoi ou ce que j'aurais pu changer, mais le forum redimensionne automatiquement les images à 800x256 pixels. J'ai besoin d'environ 1300x480 pour mon image de fond, alors c'est un problème.

Je n'avais pas ce problème avant, seulement depuis la dernière fois où j'ai changé l'image, il y a quelques semaines. Je viens de remarquer le problème hier car nous voulons changer l'image à nouveau.

Est-ce un problème dans mon CSS ? Comme je suis très novice, je n'arrive pas à décoder où serait le bobo. Quelqu'un peut m'aider ?

Je vous mets copie de mon CSS en entier :

Merci beaucoup ! Very Happy

***********************************************

/*REDIMENSIONNER LE LOGO À LA PAGE*/

/*TAILLE LOGO*/
#logo img {
max-width: 100%;
}

A:hover{text-transform:uppercase;}

/*BOUTON VOTER POUR CE MESSAGE (non-utilsé, va avec bouton j'aime (1)*/
div.vote .vote-no-bar, div.vote div.vote-bar + div.vote-button, div.vote div.vote-no-bar + div.vote-button { display: none; }
.vote-count {
background: url("https://i.servimg.com/u/f43/14/33/98/96/button10.png") no-repeat scroll 0 0 transparent;
color: #4AAE00;
font-size: 10px;
font-weight: 700;
height: 17px;
padding-top: 2px;
text-align: center;
width: 27px;
}

/*remplacement Chatbox par clavardage dans la boîte de clavardage */
.chatbox-title a {
font-size:0;
}
.chatbox-title a:after {
font-size:18px;
content:"CLAVARDAGE";
}
/*Message Chatbox sur même ligne que Avatar */

#chatbox .user-msg .user, #chatbox .user-msg .msg {
display: inline;
}

/*TEXTE POUR REMERCIER L'AUTEUR D'UN MESSAGE*/
#fa_thanks_message img { vertical-align:middle }
#fa_thanks_message {
color:#280;
font-size:16px;
font-weight:bold;
text-align:center;
background-color:#DFD;
border:1px solid #BDB;
border-radius:6px;
padding:6px;
margin:6px;
}
/*LIMITER LA TAILLE DES AVATARS DANS LA CHATBOX*/
#chatbox_members .cb-avatar > img {
height:30px;width:30px;
vertical-align: middle;
}

/*MESSAGE DE BIENVENUE DANS LA CHATBOX*/
#chatbox.recently-connected:after {
font-family: "trebuchet ms", serif;
font-size: 1.5em; line-height:1.5em; font-weight: bold; color: #8BC34A;
box-shadow:0 0 5px #AED581; display:block; background: #F1F8E9; margin:auto;
width:80%; margin:1.5% auto; padding:1%; white-space: pre;
content: "Bienvenue dans la zone de clavardage !";
}
/*COLORISER LES CELLULES SUR L'INDEX LORSQU'UN NOUVEAU MESSAGE EST POSTÉ*/
dl.newpost {
background-color:#A2BCAB!important;
}

/*REDIMENSIONNER LES SIGNATURES*/
.signature_div img{
max-width: 500px !important;
max-height: 200px !important;
}

/*CHANGER LA COULEUR DES NOUVEAUX MESSAGES (EN ROUGE)*/
.new-message{
color: #E3170D;
}

/*CHANGER LA COULEUR AU SURVOL DES NOUVEAUX MESSAGES (EN BLEU)*/
.new-message:hover{
color: #1C86EE;
}

/*RACCOURCISSEMENT DES LIENS INTERNET DANS LES MESSAGES*/
.postbody a {
display: inline-block;
max-width: 400px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}

/*couleur des liens dans les messages*/
.postbody a{
color: blue;
font-weight: bold;}

/*couleur des titres des messages*/
.topic-title a{color: black;}

/*couleur du nom de l'auteur*/
.author a{
color: black;
font-weight: lighter;}

/*REDIMENSIONNER LES IMAGES À 90%*/
div.postbody img {
max-width: 100%;}

/*Bouton J'aime (0)*/
#rep_post .reput_vote {
-khtml-user-select: none;
-moz-transition: all,1s;
-moz-user-select: none;
-ms-user-select: none;
-o-transition: all,1s;
-webkit-touch-callout: none;
-webkit-transition: all,1s;
-webkit-user-select: none;
background: #667882 url(https://i.servimg.com/u/f68/16/87/83/03/u0as10.png) no-repeat 3px center;
background-size: 22px;
border-radius: 4px;
border-top: 1px solid #999;border-bottom:2px solid #999;
text-shadow: 1px 1px 1px #ccc, 0px 3px 3px #000;
box-shadow: -0 2px 4px #000;
clear: both;
color: #fff;
cursor: pointer;
display: table;
font-size: 11px;
font-weight: 700;
line-height: 18px;
margin: 5px;
padding: 3px 5px 3px 30px;
transition: all,1s;
user-select: none;
}
.reput_vote.zero {
background-color: #6a6a6a;
}

.BS_like {font-family:'arial';
-khtml-user-select: none;
-moz-transition: all,1s;
-moz-user-select: none;
-ms-user-select: none;
-o-transition: all,1s;
-webkit-touch-callout: none;
-webkit-transition: all,1s;
-webkit-user-select: none;
background: #667882 url(https://i.servimg.com/u/f68/16/87/83/03/u0as10.png) no-repeat 3px center;
background-size: 22px;
border-radius: 4px;
border-top: 1px solid #999;border-bottom:2px solid #999;
text-shadow: 1px 1px 1px #ccc, 0px 3px 3px #000;
box-shadow: -0 2px 4px #000;
clear: both;
color: #fff;
cursor: pointer;
display: table;
font-size: 11px;
font-weight: 700;
line-height: 18px;
margin: 5px;
padding: 3px 5px 3px 30px;
transition: all,1s;
user-select: none;
}
.BS_like:before {
content: "Si tu aimes ce message clique ici !";
}

#rep_post .bs_inline {
list-style: none;
}

#rep_post {white-space: nowrap;margin: 6px 4px;float: right;}
#rep_post .bs_inline {list-style: none;}
#rep_post .bs_inline > li {display: inline-block;margin: 0 3px;}
#rep_post .bs_inline > li:first-child {margin-left: 0;}
#rep_post .bs_inline img {display: none;}
#rep_post span img {cursor: pointer;}
.reput_vote.positive {background-color: #8db13e;}
.reput_vote.zero {background-color: #6a6a6a;}
#rep_post .reput_vote:before {
content: " ";
}


/*Gras rouge pour " vous devez vous présenter avant d'écrire dans ce forum*/
.grasRouge {
font-weight: bold;
color: #FF0000;
}

par Chedis
le Lun 1 Mai 2017 - 17:58
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Redimensionnement automatique des images (non-souhaité)
Réponses: 7
Vues: 1137

Code et taille de police d’Écriture.

Bonjour IriXa, vous pouvez mettre le code comme ceci, j'ai mis une taille de 12px et une couleur rouge #ff0000 :

Code:
$(function()  {
  $("#page-footer,#gfooter,#pun-foot").eq(0).append("<div style='text-align:center;font-size:12px;color:#ff0000;'>  Reproduction totale ou partielle interdite, sans l\'autorisation de l\'Administrateur. </div>");
        });


Bien à vous.
par ◦Jay◦
le Dim 1 Jan 2017 - 17:36
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Code et taille de police d’Écriture.
Réponses: 2
Vues: 425

Demande de Rang

En bref...

Nature de la création : Rang
Taille de la création (en pixels) : Je ne sais toujours pas ^^
Couleur de fond : N/A

Image(s)

Lien(s) image(s) :N/A

Texte

Texte à insérer : Fondateur, Fondatrice, Administrateur, Administratrice, Modérateur, Modératrice, Technicien, Technicienne et Staff
Police à utiliser : N/A
Couleur police : N/A

En détails...

Lien de mon forum Forumactif : [Vous devez être inscrit et connecté pour voir ce lien]
Commentaire(s) supplémentaire(s) : Bonjour Jay [Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]

Je souhaiterai cette fois ci avoir des images de rang (je ne sais pas quelle dimension) :

Fondateur (couleur : [Vous devez être inscrit et connecté pour voir ce lien])
Fondatrice (couleur : [Vous devez être inscrit et connecté pour voir ce lien])
Administrateur (couleur : [Vous devez être inscrit et connecté pour voir ce lien])
Administratrice (couleur : [Vous devez être inscrit et connecté pour voir ce lien])
Modérateur (couleur : [Vous devez être inscrit et connecté pour voir ce lien])
Modératrice (couleur : [Vous devez être inscrit et connecté pour voir ce lien])
Technicien (couleur : [Vous devez être inscrit et connecté pour voir ce lien])
Technicienne (couleur : [Vous devez être inscrit et connecté pour voir ce lien])
Staff (couleur : [Vous devez être inscrit et connecté pour voir ce lien])

Je vous laisse réfléchir sur le choix de si c'est la couleur de Police ou couleur de Fond, si c'est la couleur de fond, mettez la Police blanche [Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]

Merci à l'avance pour votre travail et je reste à disposition.

Très Cordialement,

julie10902

[Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]Votre commande a été vérifiée par un [Vous devez être inscrit et connecté pour voir ce lien] et est conforme au règlement. Elle peut dès à présent recevoir des propositions.

Merci de ne pas modifier votre commande après l'insertion de ce message, et de bien vouloir être patient. N'hésitez pas à remonter votre commande (UP) une fois par tranche de 24h.
par julie10902
le Sam 24 Déc 2016 - 20:00
 
Rechercher dans: Demandes terminées
Sujet: Demande de Rang
Réponses: 2
Vues: 531

Mettre un effet neon au cadre du forum

Oh, oh ooooh, bonjour Unleash, vous pouvez ajouter ce code sur votre feuille de style CSS :

Code:
.bodyline{box-shadow:0 0 20px #ff0000;}


Vous pouvez changer la couleur, ici rouge : #ff0000

Passez de bonnes fêtes de fin d'année ! :Noel:

À bientôt.

par Père Noël
le Mar 20 Déc 2016 - 13:53
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Mettre un effet neon au cadre du forum
Réponses: 2
Vues: 351

Demande de dégradés pour messages

En bref...

Nature de la création : Autre
Taille de la création (en pixels) : 0x0 (je ne sais pas exactement combien cela fait)
Couleur de fond : Plusieurs (dans le contenu de la commande)

Image(s)

Lien(s) image(s) :Aucune

Texte

Texte à insérer : Aucun
Police à utiliser : Aucune
Couleur police : Aucune

En détails...

Lien de mon forum Forumactif : [Vous devez être inscrit et connecté pour voir ce lien]
Commentaire(s) supplémentaire(s) : Bonjour Jay et je viens un peu plus en avance que prévu (je reviendrai quand même en 2017 pour les icônes de messages) mais j'aimerais avoir, si possible, des dégradés pour les Membres de mon Staff.

Un avec cette couleur : [Vous devez être inscrit et connecté pour voir ce lien]
Un avec cette couleur : [Vous devez être inscrit et connecté pour voir ce lien]
Un avec cette couleur : [Vous devez être inscrit et connecté pour voir ce lien]
Un avec cette couleur : [Vous devez être inscrit et connecté pour voir ce lien]

Merci si vous acceptez et si vous y arriverez.

PS : bien entendu, je ne demande pas des dégradés de la couleur précisé mais un dégradé découlant de la couleur précisé (je sais pas si vous comprenez, j'ai tendance à me compliquer la vie ^^)

Très Cordialement, julie10902

[Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]Votre commande a été vérifiée par un [Vous devez être inscrit et connecté pour voir ce lien] et est conforme au règlement. Elle peut dès à présent recevoir des propositions.

Merci de ne pas modifier votre commande après l'insertion de ce message, et de bien vouloir être patient. N'hésitez pas à remonter votre commande (UP) une fois par tranche de 24h.
par julie10902
le Jeu 8 Déc 2016 - 21:33
 
Rechercher dans: Demandes terminées
Sujet: Demande de dégradés pour messages
Réponses: 11
Vues: 599

CSS qui ne charge pas avant le code JS.. ou je ne sais pas

Bonjour Arcadia-forum,

Pour appliquer du CSS seulement pour le membre 2, utiliser un code comme celui-ci.
[code]#ipbwrapper[data-userid="2"] { color: #FF0000; }[code]
par MasDan
le Mer 12 Oct 2016 - 7:31
 
Rechercher dans: Archives des problèmes avec un code
Sujet: CSS qui ne charge pas avant le code JS.. ou je ne sais pas
Réponses: 11
Vues: 606

Signature pour Victor-57

En bref...

Nature de la création : Signature
Taille de la création (en pixels) : 342x100
Couleur de fond : [Vous devez être inscrit et connecté pour voir ce lien]

Image(s)

Lien(s) image(s) :Aucune

Texte

Texte à insérer : [Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image].
Police à utiliser : La même qu'ici : [Vous devez être inscrit et connecté pour voir ce lien] même qu'ici : [Vous devez être inscrit et connecté pour voir ce lien]
Couleur police : Au choix.

En détails...

Lien de mon forum Forumactif : [Vous devez être inscrit et connecté pour voir ce lien]
Commentaire(s) supplémentaire(s) :

Bonjour !

J'aimerais une signature pour mon forum, et qui ressemblerait à peu près à celle-ci :
[Vous devez être inscrit et connecté pour voir ce lien]
Sauf que cela serait indiqué et qu'elle serait plus large.

Merci d'avance,
Cordialement. [Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]

[Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]Votre commande a été vérifiée par un [Vous devez être inscrit et connecté pour voir ce lien] et est conforme au règlement. Elle peut dès à présent recevoir des propositions.

Merci de ne pas modifier votre commande après l'insertion de ce message, et de bien vouloir être patient. N'hésitez pas à remonter votre commande (UP) une fois par tranche de 24h.
par Victor-57
le Sam 13 Aoû 2016 - 18:09
 
Rechercher dans: Demandes terminées
Sujet: Signature pour Victor-57
Réponses: 4
Vues: 582

Logo pour Victor-57

En bref...

Nature de la création : Bannière
Taille de la création (en pixels) : 376x365
Couleur de fond : [Vous devez être inscrit et connecté pour voir ce lien]

Image(s)

Lien(s) image(s) :
Spoiler:

[Vous devez être inscrit et connecté pour voir ce lien]
Visualiser:
[Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]


Texte

Texte à insérer : SpeedCraft
Police à utiliser : N/A
Couleur police : N/A

En détails...

Lien de mon forum Forumactif : [Vous devez être inscrit et connecté pour voir ce lien]
Commentaire(s) supplémentaire(s) : Bonjour,

J'aimerais un logo s'il vous plaît.
Ce logo, je l'ai déjà désigné au brouillon comme vous pouvez voir le croquis.
Et bien j'aimerais que le logo ressemble au croquis fait.

Pour les couleurs, prenez des tons qui se marient bien et pour la police, prenez en une similaire.

Il doit vraiment être fidèle au croquis.

Merci d'avance,
Cordialement. [Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]

[Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]Votre commande a été vérifiée par un [Vous devez être inscrit et connecté pour voir ce lien] et est conforme au règlement. Elle peut dès à présent recevoir des propositions.

Merci de ne pas modifier votre commande après l'insertion de ce message, et de bien vouloir être patient. N'hésitez pas à remonter votre commande (UP) une fois par tranche de 24h.
par Victor-57
le Mar 9 Aoû 2016 - 13:17
 
Rechercher dans: Demandes terminées
Sujet: Logo pour Victor-57
Réponses: 4
Vues: 566

Rang pour AnimeManga

En bref...

Nature de la création : Rang
Taille de la création (en pixels) : 174x35
Couleur de fond : N/A

Image(s)

Lien(s) image(s) :

[Vous devez être inscrit et connecté pour voir ce lien]
Visualiser:
[Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]


Texte

Texte à insérer : Administrateur, Administratrice, Modérateur, Modératrice, Animateur, Animatrice, Floodeuse Professionnelle, Membre, Banni
Police à utiliser : coolvetica rg.ttf
Couleur police : N/A

En détails...

Lien de mon forum Forumactif : [Vous devez être inscrit et connecté pour voir ce lien]
Commentaire(s) supplémentaire(s) : Couleur des polices a intégré :
- Administrateur, administratrice : [Vous devez être inscrit et connecté pour voir ce lien]
- Modératrice, modérateur : [Vous devez être inscrit et connecté pour voir ce lien]
- Animateur/trice et Floodeuse Professionelle : [Vous devez être inscrit et connecté pour voir ce lien]
- Membre : [Vous devez être inscrit et connecté pour voir ce lien]
- Banni : vers le blanc

Bonjour bonsoir,

Je souhaiterai pour les membres du staff des images de rangs sur le thème des mangas animés.
Je voudrais juste gardé le relief en arrière plan pour les rangs mais pas le bleu.

Lien de l'image du fond d'origine :
Image de fond original:
[Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]


Cordialement.
[Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image]Votre commande a été vérifiée par un [Vous devez être inscrit et connecté pour voir ce lien] et est conforme au règlement. Elle peut dès à présent recevoir des propositions.

Merci de ne pas modifier votre commande après l'insertion de ce message, et de bien vouloir être patient. N'hésitez pas à remonter votre commande (UP) une fois par tranche de 24h.
par MD2
le Sam 7 Mai 2016 - 2:49
 
Rechercher dans: Demandes terminées
Sujet: Rang pour AnimeManga
Réponses: 7
Vues: 973

Couleurs à des pseudos composés

Merci ! Smile Quand je parlais de pseudo composé c'était par exemple : Forum Actif. Un pseudo avec espace. Je n'arrivais pas à mettre les couleurs à ces pseudos mais j'ai trouvé comment faire, si on garde Forum actif, on ajoute </font><font color="#ff0000"> en plus de celui qui y était déjà entre avant la couleur du A. Merci ! ^^ Je mets le sujets en résolu.
par Bruny
le Mer 2 Mar 2016 - 18:35
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Couleurs à des pseudos composés
Réponses: 3
Vues: 534

Créer sa boutique

Attention, ce tuto a subi une mise à jour, la boutique est à présent en version 2.

Créer votre boutique (v2)

Ce tutoriel et les codes associés ont pour but de vous permettre de créer votre boutique en s'appuyant sur le système de points de votre forum, il est possible d'installer la boutique plus aisément en passant par l'installation simplifiée.
N'hésitez pas à lire les codes fournis afin de comprendre son fonctionnement, la rédaction de ce tutoriel a été faite de sorte à être accessible, toutes les possibilités ne peuvent être couvertes.
Tag ff0000 sur Forum gratuit : Le forum des forums actifs 09615175839Accès rapide:
-Quelques points clés.
-Installation de base.
-Description du code de la page HTML.
-Définition des articles.
-Création de la boutique.
-Personnaliser les couleurs de la boutique.
-Aller plus loin, personnaliser la boutique.
-Les variables d'affichage.

Tag ff0000 sur Forum gratuit : Le forum des forums actifs 09615175839Quelques points clés:

Il est important de noter que la boutique proposée ici:
n'est pas compatible avec Internet Explorer en version inférieure à 10, de par son utilisation des fonctions addEventListener, querySelector, querySelectorAll, Object.defineProperties...
n'est pas compatible avec les vieux forums dont l'encodage n'est pas en utf-8 SI le nom de l'administrateur ou des points comporte des caractères autres que ceux de l'alphabet de base (a-z) et _-
ne peut pas retirer le nombre de points (argent) au membre acheteur, c'est un administrateur qui doit s'en occuper.
envoie un MP indiquant les articles et le coût total de l'achat à l'admin de la boutique qui doit être un administrateur.
utilise pour l'affichage des articles et le contenu du panier la technique des templates, vous écrivez donc le même code html pour 1 article que pour 200.
ne dépend pas de jQuery.
est conçue de façon à être personnalisable.


Tag ff0000 sur Forum gratuit : Le forum des forums actifs 09615175839Installation de base:

Il vous faut dans un premier temps vérifier que votre forum est configuré pour autoriser les formulaires non officiels:
Panneau d'administration Tag ff0000 sur Forum gratuit : Le forum des forums actifs Arrow10 Général Tag ff0000 sur Forum gratuit : Le forum des forums actifs Arrow10 Sécurité


Interdire les formulaires non officiels à poster des messages et messages privés sur le forum:non

Il vous faut bien entendu utiliser le système de points
Une fois ceci fait, il faut ajouter un peu de code CSS à votre forum:
Panneau d'administration Tag ff0000 sur Forum gratuit : Le forum des forums actifs Arrow10 Affichage Tag ff0000 sur Forum gratuit : Le forum des forums actifs Arrow10 Couleurs Tag ff0000 sur Forum gratuit : Le forum des forums actifs Arrow10 Feuille de style CSS

Code:
.ma_boutique{
position:relative;
background:#B69A88;
color:#452E0A;
border-radius:5px;
text-align:center;
font-size:13px;
width:400px
}
.ma_boutique *{
color:#452E0A;
margin:0px;
padding:0px;
}
.ma_boutique [data-var][data-sans_contenu]:before{
content:attr(data-var)
}
.ma_boutique .titre_article_template_articles[data-var][data-sans_contenu]:before{
content:'(x' attr(data-var) ')'
}
.ma_boutique .titre_article_template_articles[data-var="0"]{
visibility:hidden
}
.ma_boutique h2,.ma_boutique h4,.ma_boutique h6{
border-bottom:1px solid #ECDFD5;
padding:0.3em;
color:#F5EFEB
}
.ma_boutique h2{
font-size:20px;
}
.ma_boutique h4{
font-size:13px;
}
.ma_boutique h6{
font-size:10px;
}
.ma_boutique .AJAX_erreur,.ma_boutique .AJAX_en_cours,.ma_boutique .AJAX_termine{
display:inline-block;
width:10px;
height:10px;
border-radius:50%;
border: 1px outset #AAAAAA
}
.ma_boutique .AJAX_erreur{
background:#FF0000
}
.ma_boutique .AJAX_en_cours{
background:#EAB956
}
.ma_boutique .AJAX_termine{
background:#25E100
}
.ma_boutique .articles{
border-bottom: 2px solid #D7BFB0;
max-height:300px;
overflow:auto
}
.ma_boutique .articles>div{
overflow:auto;
float:left;
text-align:center;
box-sizing:border-box;
border:2px #B69A88 solid;
border-radius:5px;
background:#D7BFB0;
padding:2px;
width:50%;
height:220px
}
.ma_boutique .articles>div>button{
display:block;
margin:auto
}
.ma_boutique .articles>div .proprietes{
height:50px;
overflow:auto
}
.ma_boutique .articles>div .proprietes>p[title]:before{
content:attr(title)': ';
}
.ma_boutique .articles>div .proprietes>p:empty{
visibility:hidden
}
.ma_boutique .img_article{
max-height:80px;
max-width:100px
}
.ma_boutique .alerte{
background:#FFF8F7;
padding:2px;
border-radius:3px;
border:solid 1px #FF0000;
}
.ma_boutique .alerte,.ma_boutique .alerte *{
color:red !important
}
.ma_boutique .bouton{
cursor:pointer;
display:inline-block;
width:1.1em;
height:1.1em;
font-size:1.1em;
line-height:1em;
text-align:center;
color:#FFFFFF;
border-radius:50%;
border:1px solid #DDDDDD
}
.ma_boutique .bouton_moins,.ma_boutique .bouton_plus{
background:#F8F8F8;
color:#452E0A;
border-radius:15% !important
}
.ma_boutique .bouton_sup{
background:#C50000
}
.ma_boutique .barre_options_panier{
height:24px;
}
.ma_boutique .ordre_panier,.ma_boutique .sup_panier{
height:100%;
float:right;
margin-left:5px;
cursor:pointer;
background:#D7BFB0;
border:1px solid #816938;
border-radius:3px
}
.ma_boutique .ordre_panier:hover,.ma_boutique .sup_panier:hover{
background:#F5EEEA
}
.ma_boutique input.champ_qte_art{
max-width:4em
}
.ma_boutique .ellipsis{
white-space:pre;
overflow:hidden;
text-overflow:ellipsis;
}
.ma_boutique .erreursCont,.ma_boutique .panierCont{
background:#ECDFD5;
text-align:left;
overflow:auto;
min-height:32px;
max-height:96px;
margin:5px;
padding:5px;
border-radius:5px
}
.ma_boutique .panier{
border-spacing:0px
}
.ma_boutique .panier tr>td:first-child{
padding-right:1em
}
.ma_boutique .panier tr>td:last-child{
padding-left:1em;
width:100%
}
.ma_boutique .panier tr>td{
vertical-align:middle
}
.ma_boutique .panier tr:hover{
background:#D7BFB0
}
.ma_boutique .achat_panier{
border:1px solid #816938;
border-radius:3px;
}
.ma_boutique .progressionCont{
padding-right:5px;
float:right
}
.ma_boutique .infoCont{
padding-left:5px;
float:left
}


Notez que toutes les déclarations commencent par .ma_boutique, ceci permet d'éviter tout impact du code CSS en dehors de la boutique.

Warning Une partie du contenu est affiché via CSS, à savoir:
-la quantité achetée de chaque article dans le template articles (x...), placée sous le titre.
-le nom des propriétés de chaque article dans le template articles.
-toutes les balises utilisées pour l'affichage des variables de boutique (voir en fin de tutoriel).


Créez un nouveau JavaScript qui vous permettra de changer les points du membre depuis le MP envoyé, pour ceci:
Panneau d'administration Tag ff0000 sur Forum gratuit : Le forum des forums actifs Arrow10 Modules Tag ff0000 sur Forum gratuit : Le forum des forums actifs Arrow10 Gestion des codes JavaScript

cliquez sur:
Ajout créer un nouveau JavaScript
Choisissez un titre explicite, définissez son placement sur "sur toutes les pages", enfin mettez pour Code JavaScript:
Code:
$(function(){
    if(document.location.pathname=='/privmsg'&&$(".formPointsBoutique").length)$.getScript('https://fa7up.fr/form_points_boutique_v2.js');
});

N'oubliez pas de valider.

Enfin créez une nouvelle page HTML qui contiendra la boutique, pour ceci, rendez-vous dans:
Panneau d'administration Tag ff0000 sur Forum gratuit : Le forum des forums actifs Arrow10 Modules Tag ff0000 sur Forum gratuit : Le forum des forums actifs Arrow10 Gestion des pages HTML

Cliquez sur:
Ajout Création en mode avancé (HTML)

Titre: à votre convenance.
Voulez-vous utiliser le haut et le bas de page de votre forum ?: oui.
Utiliser cette page en tant que page d'accueil ?: non.

Contenu de la page:
Code:
<div id="conteneur_boutique" class="ma_boutique">
<form action="#aucune_pour_le_moment">
<h2>Ma boutique</h2>
<div class="articles">
<!-- DEBUT TEMPLATE ARTICLE -->
<div data-id="article-%_{ID_ARTICLE}">
<h4 class="titre_article ellipsis" title="%_{NOM}">%_{NOM}</h4><h6 class="var_quantite_art titre_article_template_articles" data-sans_contenu="" data-id_article="%_{ID_ARTICLE}" style="border:none"></h6>
<img src="%_{IMAGE}" class="img_article" alt="image de %_{NOM}" title="%_{NOM}" />
<div class="proprietes">
<p title="Prix">%_{PRIX}</p>
<p title="Info">%_{DESCRIPTION}</p>
</div>
<button class="clic_achat_art" data-id_article="%_{ID_ARTICLE}" type="button">Acheter</button>
</div>
<!-- FIN TEMPLATE ARTICLE -->
</div>
<div>
<div class='infoCont'><p><span class="var_points"></span> <span class="var_nom_points"></span> disponibles.</p></div>
<div class='progressionCont'><em>Etat AJAX:</em><em class="progression"></em></div>
</div>
<h4 style="clear:both">Panier</h4>
<div class="barre_options_panier">
<button type="button" class="sup_panier" title="Supprimer le panier">Supp. panier</button>
<button type="button" class="ordre_panier" title="change l'ordre d'affichage du panier"><img alt="ordre du panier" src="https://fa7up.fr/img/ordre_panier.png"></button>
</div>
<div class="panierCont" style="clear:both" title="Cette zone est votre panier">
<table class="panier">
<!-- DEBUT TEMPLATE ARTICLE PANIER -->
<tr title="%_{NOM}"><td><span class="bouton bouton_sup sup_art" data-id_article="%_{ID_ARTICLE}" title="Supprimer cette ligne">✖️</span></td><td><span class="bouton bouton_moins clic_retrait_art" data-id_article="%_{ID_ARTICLE}" title="Retirer une unité de %_{NOM}">-</span></td><td><input class="champ_qte_art" data-id_article="%_{ID_ARTICLE}" type="text" value="%_{QUANTITE}"></td><td><span class="bouton bouton_plus clic_achat_art" data-id_article="%_{ID_ARTICLE}" title="Ajouter une unité de %_{NOM}">+</span></td><td><span class="ellipsis" style="display:inline-block;width:200px">%_{NOM}</span></td></tr>
<!-- FIN TEMPLATE ARTICLE PANIER -->
</table>
</div>
<strong>Coût total:</strong><em class="var_cout_total"></em>
<h4>Erreurs</h4>
<div class="erreursCont" title="En cas d'erreur(s), cette zone sera enrichie d'informations concernant l'/les erreur(s).">
<div class="erreurs"></div>
</div>
<input class="achat_panier" type="submit" value="Achat du panier">
</form>
</div>
<script type="text/javascript" src="https://fa7up.fr/boutique_v2.js"></script>
<script type="text/javascript">
var mes_articles={
"article "1", Chopin":{"prix":450,"image":"https://codexo.org/img/chopin_ex.jpg","description":"Interprétation par Luis Fernando Pérez"},
"article "2", Satie":{"prix":450,"image":"https://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},
"article "3", Dvorak":{"prix":450,"image":"https://codexo.org/img/dvorak_ex.jpg","description":"Interprétation par Philippe Herreweghe et le Royal Flemish Philharmonic"}
};
var ma_boutique=new boutique(mes_articles,{"nom_points":"NOM_DE_VOS_POINTS","admin":"VOTRE_PSEUDO"});
ma_boutique.demarrer();
</script>

Enfin cliquez sur valider.
Tag ff0000 sur Forum gratuit : Le forum des forums actifs 09615175839Description du code de la page HTML:

ligne 1Il s'agit du conteneur de la boutique, par défaut le script le cherche avec pour id "conteneur_boutique", vous pouvez modifier cet id, il suffira de le préciser dans la partie script à la fin du code.
ligne 2C'est là un formulaire qui n'est là que pour justifier l'usage de la balise input (zone de saisie), notez que le javascript (celui appelé à la fin) désactivera d'office son comportement par défaut à savoir envoyer les informations saisies sur un serveur.
ligne 3Il s'agit ni plus ni moins que du titre de la boutique.
ligne 4Cette balise sert de conteneur pour les articles, elle doit OBLIGATOIREMENT avoir pour classe "articles", son contenu est utilisé pour générer tous les articles, à la manière des templates, il suffit d'écrire une seule fois la structure désirée pour un article et celle-ci sera répétée pour chaque article.
ligne 5 à 15Le template pour chaque article.
ligne 18La balise ayant la classe "infoCont" voit son contenu changer pour l'affichage des points, ou pour signaler que le membre n'est pas connecté.
ligne 19La balise ayant la classe "progressionCont" est utilisée pour indiquer la progression des requêtes AJAX, elle permet donc d'indiquer par les signaux suivants:
-vert, la requête s'est terminée sans rencontrer de souci.
-orange, la requête est en cours.
-rouge, une erreur est survenue.
ligne 21Le titre du panier.
ligne 22Il s'agit de la barre d'options pour le panier.
ligne 23C'est un bouton qui permet la suppression totale du panier.
ligne 24C'est un bouton qui permet de modifier l'ordre d'achat des articles du panier.
ligne 27Cette balise sert de conteneur pour les articles du panier, elle doit OBLIGATOIREMENT avoir pour classe "panier", son contenu est utilisé pour générer tous les articles du panier.
ligne 29Le template pour chaque article du panier.
ligne 33Cette ligne affiche le coût total du panier, elle est mise à jour à chaque achat ou retrait d'un article.
ligne 34Le titre pour la zone dans laquelle le script tentera de signaler les erreurs rencontrées.
ligne 35Le conteneur pour la zone d'affichage des erreurs.
ligne 36La zone d'affichage des erreurs.
ligne 38Bouton de soumission qui lancera la procédure d'achat en envoyant un MP à l'admin de la boutique.
ligne 41Appel du script boutique.
ligne 42 jusqu'à la finIl s'agit là de la partie javascript dans laquelle:
-on définit les articles.
-on initialise la boutique avec les paramètres attendus.
-on démarre la boutique.


Tag ff0000 sur Forum gratuit : Le forum des forums actifs 09615175839Explications concernant la définition des articles:


Code:
var mes_articles={
"article "1", Chopin":{"prix":450,"image":"https://codexo.org/img/chopin_ex.jpg","description":"Interprétation par Luis Fernando Pérez"},
"article "2", Satie":{"prix":450,"image":"https://codexo.org/img/erik_satie_ex.jpg","description":"Interprétation par Aldo Ciccolini"},
"article "3", Dvorak":{"prix":450,"image":"https://codexo.org/img/dvorak_ex.jpg","description":"Interprétation par Philippe Herreweghe et le Royal Flemish Philharmonic"}
};


On définit une variable qu'on nomme mes_articles, suivie du signe =

Vous constatez juste après, une accolade, elle va de paire avec la dernière accolade (fermante) de cet extrait.
il s'agit là d'une façon de créer un objet, ainsi:
Code:
{}
est un objet vide !

Mais il ne nous intéresse pas vide, alors nous allons y ajouter quelques lignes en respectant rigoureusement la syntaxe suivante:
Code:
"nom de l'article":{"prix":nombre,"image":"url de l'image de l'article","description":"une petite description de l'article"}

Warning La notation objet est un ensemble de paires (propriétés et valeurs) séparées par une virgule, la propriété est à la gauche de : et la valeur de la propriété est donc à sa droite.
La syntaxe utilisée est à comprendre ainsi:

"nom de l'article":{"prix":nombre,"image":"url de l'image de l'article","description":"une petite description de l'article"}


propriété
valeur
objet utilisé pour définir les propriétés de l'article.

Le script rajoute lui-même quelques propriétés pour chaque article:
quantitepropriété correspondant à la quantité achetée, mise à 0 à l'initialisation.
nompropriété correspondant au nom de l'article, les caractères '"<> sont transformés en entités html ce qui permet de mettre le nom dans l'attribut d'une balise par exemple.
nom_de_basepropriété correspondant au nom de l'article fourni tel quel, vous ne devriez logiquement pas l'utiliser !!!
id_articlepropriété correspondant à l'identifiant de l'article, le premier article à comme id 0, le deuxième 1, le troisième 2 etc.


Warning Attention:
-la propriété "prix" est OBLIGATOIRE car utilisée par le script de la boutique.
-si vous ajoutez une propriété générée par le script (quantite, nom ...), elle sera écrasée.
-si vous ajoutez une propriété, elle doit être définie pour tous les articles, le nom de la propriété ne doit contenir que des lettres non accentuées (a-z) en minuscules, des chiffres, ou les caractères -_
-toutes les lignes doivent se terminer par une virgule exception faite de la dernière comme vous pouvez le voir dans l'exemple fourni.

Vous constaterez également la présence d'un antislash (\) devant chaque guillemet double, ceci est dû au fait qu'il faut échapper les guillemets dans le titre de l'article lorsque ceux-ci sont utilisés pour définir le texte lui-même, exemple avec le texte l'histoire sans "faim":
-"l'histoire sans "faim"", posera un problème car les guillemets doubles sont déjà utilisés pour définir le titre.
-"l'histoire sans \"faim\"", ne posera plus de problème car les guillemets doubles contenus dans le titre ont été échappés.
-'l'histoire sans "faim"', posera un problème car les guillemets simples sont déjà utilisés pour définir le titre.
-'l\'histoire sans "faim"', ne posera plus de problème car le guillemet simple contenu dans le titre a été échappé.

Notez que ceci vaut pour tous les textes, prenez garde, donc, lorsque vous remplissez la description de l'article.

Tag ff0000 sur Forum gratuit : Le forum des forums actifs 09615175839Explications concernant la création de la boutique:

Code:
var ma_boutique=new boutique(mes_articles,{"nom_points":"NOM_DE_VOS_POINTS","admin":"VOTRE_PSEUDO"});

On crée donc la variable ma_boutique dans laquelle on instancie une nouvelle boutique (new boutique(argument_1,argument_2)).
argument_1 est l'objet dans lequel se trouve vos articles (donc mes_articles dans le cas présent).
argument_2 est encore un objet mais utilisé pour passer des options à la boutique.

Les options possibles pour argument_2:
adminvous permet d'indiquer le pseudo de l'administrateur auquel le MP parviendra afin que ce dernier fasse le décompte des points et l'attribution des articles achetés, par défaut: "Admin".
id_conteneurvous permet de définir un id particulier pour le conteneur de la boutique, par défaut:"conteneur_boutique".
nom_pointsil s'agit là du nom des points sur votre forum, par défaut: "points", le script recherche toutes les entrées qui sont impossible à modifier via le template profile_view_body et compare les titres trouvés avec le nom des points fourni, en cas de succès, il y a extraction de la valeur des points, sinon l'erreur est signalée.
u_idvous permet de définir l'identifiant de l'acheteur, si vous utilisez le haut et le bas de votre forum vous n'avez pas à y toucher, par défaut:_userdata["user_id"].
ordre_inverse_paniermettez 1 pour que l'affichage du panier au démarrage de la boutique se fasse de l'article acheté le plus récent au dernier, 0 pour l'ordre naturel, par défaut 0, cette option n'empêche pas le membre de changer l'ordre d'affichage à sa convenance.


Warning
Il arrive que même en indiquant correctement le nom de vos points, la boutique ne trouve pas le nombre de points auquel cas elle vous indiquera toujours 0, il est possible de lui donner un coup de pouce pour trouver les points, pour cela, renommez le nom de vos points ainsi:
Code:
<span id="id_sp_nom">NOM_DE_VOS_POINTS</span>


Si vous êtes satisfait du fonctionnement de la boutique, vous pouvez vous arrêter là Wink

Tag ff0000 sur Forum gratuit : Le forum des forums actifs 09615175839Aller plus loin:


Personnaliser les couleurs de la boutique:

Il vous faut pour cela modifier le code CSS fourni plus haut que vous avez collé dans:
Panneau d'administration Tag ff0000 sur Forum gratuit : Le forum des forums actifs Arrow10 Affichage Tag ff0000 sur Forum gratuit : Le forum des forums actifs Arrow10 Couleurs Tag ff0000 sur Forum gratuit : Le forum des forums actifs Arrow10 Feuille de style CSS


Au vu du nombre de lignes de code CSS, voici une liste des couleurs utilisées et leur code couleur qu'il vous suffira de remplacer par le code de la couleur voulue.
CouleurCode couleurUtilisation
#B69A88Pour le fond de la boutique et la bordure des articles
#452E0APour le texte en général et le texte des boutons ronds - et +
#ECDFD5Pour la bordure soulignant les balises de titrage et le fond du conteneur du panier et des erreurs
#F5EFEBPour le texte des balises de titrage
#AAAAAAPour la bordure du bouton signalant l'état de la requête AJAX
#FF0000Pour le fond du bouton signalant l'état de la requête AJAX -> erreur, bordure de la zone d'alerte que le script peut être amené à créer si le membre n'est pas connecté ou si son navigateur est détecté comme incompatible
#EAB956Pour le fond du bouton signalant l'état de la requête AJAX -> en cours
#25E100Pour le fond du bouton signalant l'état de la requête AJAX -> terminée
#D7BFB0Pour la bordure en bas de la zone d'affichage des articles, le fond des articles,fond pour chaque ligne d'article dans le panier au survol, fond des boutons d'options pour le panier à savoir la suppression du panier et changer son ordre d'affichage
#FFF8F7Pour le fond de zone d'alerte que le script peut être amené à créer si le membre n'est pas connecté ou si son navigateur est détecté comme incompatible
#FFFFFFPour la couleur du texte du bouton rond X
#DDDDDDPour la bordure des boutons ronds X - +
#F8F8F8Pour le fond des boutons ronds - et +
#C50000Pour le fond du bouton rond X
#816938Pour la bordure du bouton d'achat et des boutons d'options pour le panier à savoir la suppression du panier et changer son ordre d'affichage


Modifier/traduire les textes utilisés par le script:

Pour modifier les divers textes utilisés par le script, il est possible d'écraser la propriété textes de la variable contenant la boutique (instance) soit ma_boutique si vous avez suivi ce tutoriel:
ajoutez le code suivant:
Code:
ma_boutique.textes={
      mp_achat:{
         sujet:"Achat",
         message:'Bonjour ! [url=%_{PROFIL}]%_{U_NAME}[/url] souhaite acheter les articles suivants:[table border="1"][tr][td]Produit[/td][td]Qté[/td][td]Prix unité[/td][td]Prix[/td][/tr]%_{RESUME}[/table]Le coût total doit être de: %_{COUT_TOTAL}. Si c\'est juste, il vous suffit de valider le formulaire suivant:[hr]%_{FORMMODPOINTSBOUTIQUE}',
         },
      alertes:{
         cout_trop_eleve:'/!\\ Message:\nCoût du panier trop élevé, il manque %_{NV_VAL_POINTS_ABS} %_{NOM_POINTS} !',
         panier_vide:'/!\\ Message:\nAucun article dans le panier !',
         achat_termine:'/!\\ Message:\nMerci de votre achat.\nVotre demande d\'achat a été soumise avec succès.',
         non_connecte:'/!\\ Message:\nAchat impossible !\nVous n\'êtes pas connecté.'
      },
      erreurs:{
         extraction_points_impossible:'Extraction des %_{NOM_POINTS} impossible.',
         ajax_delai_depasse:'La requête AJAX a pris trop de temps.',
         propriete_inexistante:'Propriété inexistante: ',
      },
      msg_html:{
         non_connecte:'<div class="alerte"><h4>ATTENTION</h4><strong>Vous n\'êtes pas connecté !</strong></div>',
         incompatibilite:'<div class="alerte"><h4>ATTENTION</h4><strong>Votre navigateur n\'est pas compatible avec le script de cette boutique !</strong></div>'
      }
   };

avant:
Code:
ma_boutique.demarrer();

Modifiez les textes à votre convenance, sachez que vous avez quelques variables disponibles:
%_{U_ID}identifiant du membre
%_{RESUME}Les lignes de la table résumant les articles achetés
%_{COUT_TOTAL}Le coût total des article achetés
%_{POINTS}Le nombre de points dont dispose le membre
%_{NOM_POINTS}Le nom des points
%_{NV_VAL_POINTS}La valeur des points du membre une fois le coût total soustrait, peut être en négatif, ex: -120
%_{NV_VAL_POINTS_ABS}La valeur absolue des points du membre une fois le coût total soustrait, ne peut pas être en négatif, ex: -120 devient 120
%_{PROFIL}Il s'agit là de l'url du profil du membre


Les écouteurs d'évènements:

Les écouteurs d'évènements permettent de détecter les actions de l'utilisateur telles que le clic, la saisie clavier etc.

Afin que vous n'ayez pas à gérer la création de ces écouteurs et leurs fonctions associées, le script les assigne automatiquement, pour cela il vous suffit d'attribuer une classe et/ou un attribut particulier à une balise html, voici la liste des écouteurs gérés nativement par le script:
Type d'évènementComportementSurActualise
clicAjout d'une unité à l'articletoutes les balises dans les templates articles et panier avec la classe clic_achat_art assignée et disposant de l'attribut data-id_article qui doit avoir comme valeur l'id de l'article dont la quantité doit être incrémentée.panier
clicRetrait d'une unité à l'articletoutes les balises dans les templates articles et panier avec la classe clic_retrait_art assignée et disposant de l'attribut data-id_article qui doit avoir comme valeur l'id de l'article dont la quantité doit être incrémentée.panier
clicSuppression d'un article du paniertoutes les balises dans les templates articles et panier avec la classe sup_art assignée et disposant de l'attribut data-id_article qui doit avoir comme valeur l'id de l'article dont la quantité doit être mise à 0.panier
clicSuppression de tous les articles du panierla première balise trouvée dans le conteneur avec la classe sup_panier.panier
clicChange l'ordre d'affichage du panierla première balise trouvée dans le conteneur avec la classe ordre_panier.panier
clicAchat du panierla première balise trouvée dans le conteneur avec la classe achat_panier.articles et panier
saisie clavierAssignation de la quantité désirée pour un articletoutes les balises input de type texte dans les templates articles et panier avec la classe champ_qte_art assignée et disposant de l'attribut data-id_article qui doit avoir comme valeur l'id de l'article dont la quantité doit être mise à jour à la saisie.panier


Voici un exemple avec l'écouteur pour l'achat du panier, comme indiqué dans le tableau, il est attaché à une balise ayant la classe achat_panier assignée, une balise dispose de cette classe en ligne 38 du code HTML fourni.

Vous pourriez être tentés d'utiliser une image à la place du bouton, pour ce faire, il suffit de remplacer:
Code:
<input class="achat_panier" type="submit" value="Achat du panier">

par:
Code:
<img src="url de votre image" class="achat_panier" title="Achat du panier" alt="Achat du panier">


Voyez, à partir du moment où vous respectez l'indication inscrite dans la colonne Sur, l'écouteur est ajouté, en l'occurence, l'écouteur déclenchant l'achat du panier n'est pas tracassier, la seule chose nécessaire étant d'avoir assigné la classe achat_panier à une balise.

Warning Tous les écouteurs qui se déclenchent au clic désactivent le comportement par défaut de la balise sur laquelle ils sont appliqués, concrètement cela veut dire que si vous mettez sur un lien le même écouteur que précédemment:
Code:
<a href="https://forumactif.com" class="achat_panier" title="Achat du panier">J'achète !</a>

Le clic sur le lien ne vous enverra pas sur https://forumactif.com


Tag ff0000 sur Forum gratuit : Le forum des forums actifs 09615175839Les variables d'affichage


Elles permettent d'afficher une variable ou une propriété, il peut être utile de lire le code HTML, afin de faciliter la compréhension, si mes explications ne sont pas assez claires.

Les variables de template:

Ce sont les plus simples, à savoir sur leur usage:
-se limitent aux templates articles et panier.
-peuvent être utilisées pour générer des valeurs pour des attributs de balises tels que class, id etc.
-ne se mettent à jour qu'au lancement de la boutique et lors du rafraîchissement des templates.
-ne nécessitent aucune balise ni attribut, elles fonctionnent exactement comme les variables des templates de votre forum.
-elles sont limitées aux propriétés des articles !

Leur syntaxe est la suivante:

%_{PROPRIETE}


Ecrivez toujours la propriété en majuscule afin de vous repérer aisément dans votre code HTML, le script convertira le nom en minuscule de lui même.

Vous vous souvenez que nous avons attribué 2 propriétés pour chaque article, à savoir prix et description, si vous souhaitez afficher le prix dans un template, il vous suffit donc d'écrire:
%_{PRIX}


Pour la description, ce serait:
%_{DESCRIPTION}


Facile n'est-ce pas?
Si vous indiquez une propriété qui n'existe pas un message vous le signalera.

Les variables de la boutique:

Elles sont moins aisées et disposent de quelques options, à savoir sur leur usage:
-elles sont toujours mises à jour selon les évènements vus au dessus et au démarrage de la boutique.
-elles ont une portée plus large, toutes les balises choisies contenues dans le conteneur de la boutique sont mises à jour.
-elles peuvent représenter certaines variables spécifiques au script.

Pour les afficher il suffit d'attribuer à une balise une classe avec le nom d'une variable précédé de "var_", voici les variables du script:
-version, la version du script, à ce jour le script est en 1.0 !
-points, le nombre de points du membre, récupéré par le script.
-nom_points, le nom des points.
-cout_total, le coût total des articles dans le panier.
-u_id, l'identifiant du membre.

Exemple pour afficher la version du script:
<b class="var_version"></b>


Il est bien sûr également possible d'afficher les propriétés d'un article spécifique, auquel cas il faut ajouter après le nom de la propriété _art et donner un attribut à la balise:data-id_article.
Dans pareil cas, vous ne devriez l'utiliser que dans les templates ex:
<b class="var_prix_art" data-id_article="%_{ID_ARTICLE}"></b>


Par défaut, cette solution met la valeur de la variable dans un nouvel attribut data-var et comme contenu de la balise, mais il est possible de lui signaler que vous ne souhaitez pas qu'elle place la valeur de la variable comme contenu de votre balise en ajoutant un deuxième attribut:data-sans_contenu.

Voici là encore un petit exemple:
<b class="var_prix_art" data-id_article="%_{ID_ARTICLE}" data-sans_contenu=""></b>


Et voila, nous avons mine de rien fait le tour de l'affichage des variables mais n'oubliez pas que chaque propriété ajoutée à vos articles se transforme automatiquement en variable d'affichage.

Ce tutoriel est à présent terminé, en espérant avoir été clair... bons achats ^^.
par no_way
le Ven 4 Déc 2015 - 10:26
 
Rechercher dans: Trucs et astuces
Sujet: Créer sa boutique
Réponses: 0
Vues: 10043

Changement d'image au survol de la souris

Bizarre :s

Dans le CSS :
.tablecalendrier {
background-image:url("https://redcdn.net/hpimg11/pics/253825essai1.png");
background-color:transparent;
font-size:1.1em;
color:#ff0000;
width:80%
height:500px;
}
.tablecalendrier:hover {background-image:url("https://redcdn.net/hpimg11/pics/345117essai1bis.png")}

Dans le message :
Cadeau

(et j'ai tenté une autre fois de mettre l'image mais pareil, ça ne change pas :s)
par Juliiie fOrever
le Mer 2 Déc 2015 - 8:44
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Changement d'image au survol de la souris
Réponses: 13
Vues: 924

une userbar

En bref...

Nature de la création : Autre
Taille de la création (en pixels) : 350x20
Couleur de fond : [Vous devez être inscrit et connecté pour voir ce lien]

Image(s)

Lien(s) image(s) :[url=

[url][Vous devez être inscrit et connecté pour voir ce lien][Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image][/url][/url]
Visualiser:
[img:42b3][Vous devez être inscrit et connecté pour voir ce lien][Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image][/url][/img]


Texte

Texte à insérer : hitman_xx_68
Police à utiliser : liquidism part 2
Couleur police : [Vous devez être inscrit et connecté pour voir ce lien]

En détails...

Lien de mon forum Forumactif :[Vous devez être inscrit et connecté pour voir ce lien]
Commentaire(s) supplémentaire(s) : Bonsoir,
Je souhaiterai avec une userbar animée sur fond noir avec l'image qui défile de haut en bas à gauche et le texte sur la droite...
Merci d'avance...

.[Vous devez être [Vous devez être inscrit et connecté pour voir ce lien] et [Vous devez être inscrit et connecté pour voir ce lien] pour voir cette image].
Commande validée
Votre commande a été vérifiée par un CréActif ou un ModérActif et est conforme au règlement. Elle peut dès à présent recevoir des propositions venant du Staff CréActif ou des membres.

Merci de ne pas modifier votre commande après l'installation de ce message.

Merci aussi de bien vouloir patienter mais n'hésitez pas à UPer votre commande une fois par tranche de 24h.
par hitman_xx_68
le Lun 16 Nov 2015 - 22:13
 
Rechercher dans: Demandes terminées
Sujet: une userbar
Réponses: 5
Vues: 1023

Couleur police des liens QEEL

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:
Tag ff0000 sur Forum gratuit : Le forum des forums actifs 861067tidiiiiiiiiiiiiiiiiiiiiiiii

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : modification du qeel x)
Lien du forum : http://test-v2.forumactif.com/

Description du problème

Bonjour à tous !

J'ai encore une question concernant mon QEEL .... Sad Je vous donne l'image.

Je vous donne le code du template j'imagine ^^

Code:
 <a href="http://lesdoublagesdisney.forumgratuit.be/g1-administrateurs" class="groupe1">♕ ADMINISTRATEURS</a>


Et le code du CSS:
.groupe1 {
font-size: 23px;
font-family: ;
text-shadow: #ff0000;
font-color: #ff0000}[code]

Font-size et font-family fonctionnent. Pour le reste, je m'y prends mal !? Je comprends pas pourquoi je n'arrive pas à changer les couleurs. Et j'ai absolument besoin de le faire en css parce que je n'aurai plus accès aux templates lorsque ce sera posté sur le forum "pas test"...

Vala vala.

Merci de votre aide, à très vite !
par Stella III
le Mer 2 Sep 2015 - 18:07
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Couleur police des liens QEEL
Réponses: 4
Vues: 533

petit soucis de scritp mais je ne trouve pas ou

Détails techniques


Version du forum : PunBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 08/06/2015
Lien du forum : http://xsa-77.tonempire.com/

Description du problème

bonsoir a tous en voulant modifier 2-3 bricole sur le script d'accueil de notre forum j'ai fait une erreur mais je ne trouve pas ou la date et l'heure (chiffré) a disparut.

le dit script :

<p>
<strong><br /><br /></strong>
</p>
<p>
<strong><strong></strong></strong>
</p>
<div align="center">
<strong><strong><span style="font-size: 18px;"></span> </strong></strong>
</div>
<div align="center">
<strong><strong><span style="font-size: 24px;">Bienvenue sur le forum de l'association</span></strong></strong>
<p style="">

</p><strong><strong><span style="font-size: 24px;"><br /></span></strong></strong>
<p style="">

</p><strong><strong><span style="font-size: 24px;"><br /><span style="font-size: 48px;"> X-treme Squad Airsoft 77 </span></span></strong></strong>
<p>

</p><strong><span style="font-size: 24px;"><br /><span style="font-size: 13px;"><br /></span></span></strong>
<div style="" align="center">

<!-- DEBUT SCRIPT DATE --><script language="JavaScript"></script>Today = new Date; Jour = Today.getDate(); Mois = (Today.getMonth()) + 1; Annee = Today.getFullYear(); Message = " " + Jour + "/" + Mois + "/" + Annee + ". ";
<!-- DEBUT SCRIPT HEURE --><script language="JavaScript"></script>Today = new Date; Heure = Today.getHours(); Min = Today.getMinutes(); Message2 = " " + Heure + "h" + Min + ".";
<!-- DEBUT AFFICHAGE TEXTE, DATE, HEURE -->
<marquee style="width: 800px; height: 40px;" scrolldelay="100">
<span class="ip"><strong><em><span style="color: reb(138, 3, 9); font-size: 24px;"></span></em></strong><strong><em><span style="color: red; font-size: 18px;">Nous sommes le<script language="JavaScript">document.write(Message);</script> . Il est <script language="JavaScript">document.write(Message2);</script> </span></em></strong></span>
</marquee><strong><span style="font-size: 24px;">
<!-- FIN DE SCRIPT TEXTE, DATE, HEURE --> </span></strong>
<p style="">

</p><strong><span style="font-size: 24px;"><br /><span style="font-size: 13px;"><br /></span></span></strong>
<div style="" align="center">

<div id="cont_98911735db12e05139666a257a82714d">

<h2 id="h_98911735db12e05139666a257a82714d">
<a href="http://www.tameteo.com/" title="Météo">Météo</a>
</h2>
<a id="a_98911735db12e05139666a257a82714d" href="http://www.tameteo.com/meteo_La+Ferte+sous+Jouarre-Europe-France-Seine+et+Marne--1-24618.html" target="_blank" title="Météo La Ferté-sous-Jouarre" style="color:#ff0000;font-family:1;font-size:14px;">Météo La Ferté-sous-Jouarre</a><script type="text/javascript" src="http://www.tameteo.com/wid_loader/98911735db12e05139666a257a82714d"></script>
</div>

<p>




merci du votre aide futur
par Takichiro
le Lun 8 Juin 2015 - 19:32
 
Rechercher dans: Archives des problèmes avec un code
Sujet: petit soucis de scritp mais je ne trouve pas ou
Réponses: 3
Vues: 839

Couleur du titre d'un widget

Bonjour , ajouter à votre CSS :

Code:
.module-title{color:#ff0000}


Changez #ff0000 par la couleur de votre choix.

Cordialement.
par ◦Jay◦
le Dim 29 Mar 2015 - 18:30
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Couleur du titre d'un widget
Réponses: 6
Vues: 659

Barre de navigation

Je viens apporter mon aide au CSS.

Voici ce que j'ai fais et qu'il marche bien sur du PHPBB3 :
Code:
a.mainmenu {
          font-family: Arial;
          font-size: 15;
       color: white
        }

Supprimez la ligne color: white si vous n'aimez pas.

"Vous pouvez fixer la couleur d'un texte comme suivant : color: valeur; Les différentes valeurs sont :

Nom de la couleur - exemple:(red, black...)
Nombre hexadecimal - exemple:(#ff0000, #000000)
Code RGB - exemple:(rgb(255, 0, 0), rgb(0, 0, 0))"

Si celui ci fonctionne retentez avec l'aide précédente de demeter1
Code:
</b>
.
par Destru723
le Jeu 25 Déc 2014 - 21:57
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Barre de navigation
Réponses: 7
Vues: 1175

Comment attribuer les couleurs à chaque rang ?

Bonsoir,

Ce tutoriel sur Les rangs l'explique. Wink

PA / Utilisateurs & groupes / Administration des rangs : cliquez sur edit pour éditer un rang.

Plus particulièrement à la fin dudit tutoriel :

Tag ff0000 sur Forum gratuit : Le forum des forums actifs 09615175839 5. Comment colorer un rang ?

Afin d'obtenir un rang coloré, insérez ce code dans le titre du rang :
Code:
<font color="#FF0000">Titre du rang</font>

Ce code aura pour résultat : Titre du rang

Vous pouvez modifier la couleur #FF0000 par celle de votre choix. Vous pouvez également mettre le rang en gras, en ajoutant les balises <b> et </b> en début et fin de rang :
Code:
<b>Titre du rang</b>

Rendra : Titre du rang

Vous pouvez combiner gras + couleur :
Code:
<font color=#FF0000><b>titre du rang</b></font>

Donnera : Titre du rang
D'autres nombreuses possibilités s'offrent à vous. Wink


Cordialement.
par Chacha
le Sam 20 Déc 2014 - 20:01
 
Rechercher dans: Archives des problèmes avec le panneau d'administration
Sujet: Comment attribuer les couleurs à chaque rang ?
Réponses: 15
Vues: 1447

Le HTML – Comment ça marche ?

Le HTML - Comment ça marche ?


Le HTML (HyperText Mark-Up Language) est le langage informatique le plus utilisé sur le web.
Très simple à comprendre et à apprendre, il est possible avec le HTML, de créer une page web complète facilement.
Il est souvent associer avec d’autres langages comme le CSS (feuilles de style en cascade) et le JavaScript.

Les balises rudimentaires

Nous allons voir les balises les plus simples que vous pourrez utiliser au quotidien dans le développement de votre forum.

  • Mettre un texte en Gras :
    Code:
    <strong>Texte</strong>

    Ce qui donnera :
    Texte

  • Mettre un texte en italique :
    Code:
    <em>Texte</em>

    Ce qui donnera :
    Texte

  • Souligner un texte :
    Code:
    <u>Texte</u>

    Ce qui donnera :
    Texte

  • Barrer un texte :
    Code:
    <s>Texte</s>

    Ce qui donnera :
    Texte

  • Mettre à gauche un texte :
    Code:
    <p align="left">Texte</p>

    Ce qui donnera :
    Texte

  • Centrer un texte :
    Code:
    <p align="center">Texte</p>

    Ce qui donnera :
    Texte

  • Mettre à droite un texte :
    Code:
    <p align="right">Texte</p>

    Ce qui donnera :
    Texte

  • Justifier un texte :
    Code:
    <p align="justify">Texte</p>

    Ce qui donnera :
    Texte

  • Taille du texte :
    Code:
    <font size="X">Texte</font>

    (Remplacer X par un nombre.)
    Ce qui donnera :
    Texte Texte

  • Changer la police d’un texte :
    Code:
    <font face="X">Texte</font>

    (Remplacer X par une police d’écriture, vous pouvez en mettre plusieurs à la suite en les séparant d’une virgule , si une personne qui visite votre page n’a pas la première police installée sur son ordinateur, ce sera la suivante qui sera utilisée et ainsi de suite par exemple : Times New Roman, Tahoma, Arial.)
    Ce qui donnera :
    Texte

  • Couleur du texte :
    Code:
    <font color="X">Texte</font>

    (Remplacer X par une couleur en anglais ou par un Code couleur (héxadécimal) par exemple pour le rouge : red ou #FF0000.)
    Ce qui donnera :
    Texte

Il faut savoir qu’il est possible via le CSS de remplacer ces balises de présentation du texte !

  • Un lien URL :
    Code:
    <a href="X">Texte</a>

    (Remplacer X par votre lien url : http://www.monlienurl.com )
    Ce qui donnera :
    Texte

  • Une image :
    Code:
    <img src="X" />

    (Remplacer X par le lien url de votre image : http://www.monlienurl.com/monimage.jpg )
    Ce qui donnera :
    Tag ff0000 sur Forum gratuit : Le forum des forums actifs Helpmo10

  • Un saut de ligne :
    Code:
    Forum<br>Actif

    Ce qui donnera :
    Forum
    Actif

  • Une liste :
    Code:
    <ul><li>ForumActif</ul>

    Ce qui donnera :

  • ForumActif

  • Un tableau :
    Code:
    <table border="1"><tr><td>Forum</td><td>Actif</td></tr><tr><td>C’est</td><td>Super !</td></tr></table>

    Ce qui donnera :
    ForumActif
    C’estSuper !



Les zones d’utilisation du HTML sur votre forum

Il vous est possible d’utiliser le HTML dans plusieurs parties de votre forum, et notamment les suivantes :

  • Dans les messages du forum – Lire le tutoriel : Activer le HTML.

  • Dans les annonces :
    Panneau d'administration  Général  Messages et emails - Annonces


  • Dans les newsletters (package Tag ff0000 sur Forum gratuit : Le forum des forums actifs 2398224970 uniquement) :
    Panneau d'administration  Général  Newsletter - Écrire et envoyer


  • Sur la page d’accueil :
    Panneau d'administration  Affichage  Page d'accueil - Généralités


  • Dans les pages HTML :
    Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des pages HTML


Apprendre le HTML

Pour aller plus loin, voici quelques sites pour apprendre le HTML.

Alsacréation - Le HTML.
OpenWeb - Les standards du HTML.
Code Academy - Les fondamentaux
Open Classrooms - Votre première page web en HTML

Et retrouvez également notre tutoriel sur le code CSS:
Tuto Tutoriel sur le CSS - Feuilles de style en cascade.

par Alex Fowl
le Dim 10 Avr 2011 - 19:45
 
Rechercher dans: Questions/Réponses fréquentes
Sujet: Le HTML – Comment ça marche ?
Réponses: 0
Vues: 11622

Les rangs

Les rangs

Qu'est ce qu'un rang ?

Le rang est un texte qui s'affiche juste en dessous du pseudo des membres dans leurs messages et sur leurs profils. Il permet de distinguer certains utilisateurs particuliers (notamment les administrateurs et modérateurs) ou de créer différentes distinctions entre les membres.

Il existe 2 types de rangs sur Forumactif :

  • les rangs normaux : ils dépendent du nombre de messages postés par le membre. A chaque fois qu'un membres a posté un certain nombre de message son rang change.
    Par exemple au départ (0 message) il a le rang "nouveau membre", avec 10 message il devient "débutant", avec 20 messages il devient "petit bavard", etc.

  • les rangs spéciaux : ils ne dépendent pas du nombres de messages et sont donc donnés manuellement par un administrateur du forum. Ce sont des rangs qui permettent de différencier des membres importants sur le forum.
    Par exemple : Administrateur, Modérateur, Banni, 1er avertissement, Membre le plus gentil du mois...

    Attention, ces rangs spéciaux ne confèrent aucun pouvoir de modération ou d'administration !


Comment créer un rang ?

Panneau d'administration  Utilisateurs & Groupes  Rangs - Administration des rangs


Cliquez sur le bouton "Créer un nouveau rang"

Tag ff0000 sur Forum gratuit : Le forum des forums actifs Tuto125

  • Titre du rang : correspond au texte du rang tel qui apparaitra sur votre forum. Ce champ accepte certaines balises de HTML telles que <strong> pour le gras ou <em> pour l'italique, s'agissant des plus simples.

  • Définir en tant que rang spécial : vous permet de choisir si ce nouveau rang sera attribué automatiquement en fonction du nombre de messages postés (choix "non"), ou s'il devra être attribué manuellement par un administrateur (choix "oui"),

  • Nombre minimum de messages : ce champ ne s'applique qu'à un rang qui n'est pas défini comme rang spécial, et vous permet d'établir le seuil à partir duquel l'utilisateur portera ce rang.

  • URL de l'image du rang : permet de joindre à un rang une image qui s'affichera en dessous de celui-ci dans les messages et profils des utilisateurs porteurs du rang


Comment attribuer un rang ?

Seuls les rangs spéciaux nécessitent d'être attribués manuellement par un administrateur : les autres s'afficheront automatiquement en fonction du nombre de messages postés.

Pour les rangs spéciaux :
Panneau d'administration  Utilisateurs & Groupes  Utilisateurs - Gestion des utilisateurs


Recherchez le membre en tapant son pseudo, et cliquez sur edit face à son pseudo. Une fois sur la page d'édition de cet utilisateur, vous trouverez en pied de page l'option relative aux rangs :

Tag ff0000 sur Forum gratuit : Le forum des forums actifs Tuto222

ATTENTION : attribuer un rang spécial à quelqu'un ne lui donne aucun droit, cela permet juste de mettre un mot sous son pseudo. Si vous voulez que la personne soit modératrice ou administratrice, vous devez lui donner ces pouvoirs indépendamment du rang.



Personnaliser les rangs

Puis-je styliser les rangs ?

C'est tout à fait possible : pour cela, insérer dans le champ "titre du rang" le code suivant :

Code:
<span class="rank_1">Titre du rang</span>


Puis ajoutez à votre CSS le code suivant (une seule fois) :
Panneau d'administration  Affichage  Couleurs - onglet Feuille de style CSS


Code:
span.rank_1 {
    color: #FF0000;
}


Le résultat sera le suivant : Titre du rang

Vous pouvez créer autant de rangs colorés que souhaitez, vous devrez alors répéter l'opération ci-dessous. Une fois que ce code est dans le CSS, il n'a plus besoin d'y être placé à chaque fois. Si vous voulez créer un autre rang de la même couleur, vous pourrez alors simplement l'intituler :
Code:
<span class="rank_1">Titre du nouveau rang</span>


Si vous souhaitez une autre couleur, vous devrez changer la class rank_1 par une autre, par exemple rank_2 et ajouter un nouveau code dans le CSS déterminant un style à ce rang. Par exemple :
Code:
span.rank_2 {
    color: #0000ff;
}


Vous pouvez bien entendu modifier les couleurs (#FF0000, #0000ff) par celles de votre choix.

Notez que vous pouvez utiliser de nombreuses propriétés de CSS pour donner une apparence personnalisée à vos rangs : gras, italique, cadre, couleur de fond...
Pour plus d'informations à ce sujet, nous vous invitons à lire ce sujet : le CSS, comment ça marche ?

N'afficher que l'image du rang et non son texte

Vous pouvez vouloir n'afficher que l'image du rang sans que le texte ne figure sur les profils des utilisateurs.
Pour ce faire, vous devez créer un nouveau rang en spécifiant une image de rang, et lui donner le titre suivant :

Code:
<span class="rank_no_text">Titre du rang</span>


Puis ajoutez à votre CSS le code suivant (une seule fois) :
Panneau d'administration  Affichage  Couleurs - onglet Feuille de style CSS


Code:
span.rank_no_text {
    display:none;
}


De cette façon, le texte du rang continuera à apparaitre sur votre panneau d'administration (plus pratique pour bien gérer les utilisateurs) mais ne s'affichera plus sur le forum.

par Maélya
le Ven 29 Oct 2004 - 20:10
 
Rechercher dans: Questions/Réponses fréquentes
Sujet: Les rangs
Réponses: 0
Vues: 22950

Revenir en haut

Sauter vers: