It is currently Wed 28 Sep 2016 - 19:03 - créer un forum

Boutons réactifs

Skip to content

Post new topic Reply to topic Goto page: 1, 2  >

Boutons réactifs
Author Message
Eleo
Membre


Offline
Membre

Joined: 14 Dec 2015
Posts: 27
Niveau:
Point(s): 19
Moyenne: 0.70
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Vierge (24aoû-22sep)

PostPosted: Mon 14 Dec 2015 - 12:24    Post subject: Boutons réactifs Reply with quote

PublicitéSupprimer les publicités ?
Bonjour, j'ai un forum xooit, qui à été fraîchement monté, toute fois je bloque à un niveau ou j'aimerai changer complètement la barre de tâches du forum pour quelques choses de similaires à celui de xooit.xooit.com, avec des boutons qui changerai de couleurs et de forme quand on passerai la souris dessus, mais je ne sais pas comment m'y prendre... Si quelqu'un à une petite idée...

Le forum sur lequel j'aimerai appliqué ça est celui-ci : http://full-of-mass.bestoof.com/index.php

Je tiens à préciser que c'est une base du thème Appalchia qui à été modifié...


Last edited by Eleo on Mon 1 Feb 2016 - 16:53; edited 2 times in total
Forum
Author Message
Gu!gan
VIP


Offline
VIP

Joined: 17 Jun 2004
Posts: 1,081
Niveau:
Point(s): 1,333
Moyenne: 1.23
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Taureau (20avr-20mai) 龍 Dragon

PostPosted: Sun 27 Dec 2015 - 12:23    Post subject: Boutons réactifs Reply with quote

Yo

En mode facile, en modifiant directement le template :

Code: Sélectionner - Agrandir
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE' " onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE' " /></a>


Y a d'autres méthodes mais c'est plus difficile.
_______________________
(\__/)
(='.'=)
(")_(")
Voici Lapin. Copiez Lapin dans votre signature pour l'aider à concrétiser sa domination du monde


Forum
Author Message
Guig Esprit du Sage
Membre


Offline
Membre

Joined: 06 Feb 2015
Posts: 35
Niveau:
Point(s): 35
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Sat 30 Jan 2016 - 21:59    Post subject: Boutons réactifs Reply with quote

Bonjour,
si tu parles bien de de la série de boutons du haut (index, FAQ, rechercher etc), ils utilisent la classe "mainmenu".
Si tu modifie le html du template, le résultat va être un code tout sale et lourds car tu va devoir le faire pour chaque bouton quand l'utilisateur est connecté, puis pour quand il est déconnecté. Chez nous, cela fait 16 fois...

A la place, il te faut modifier le(s) template(s) qui contiens le "css".
Pour cela, je te conseilles d'installer le logiciel notepad++ ou équivalent.

    Il y a plusieurs fichiers templates qui contiennent du code css:
  • Dans le "overall_header.tpl", délimité par les balises <style type="text/css" media='screen'> et </style>
    il s'agit de la zone qui a priorité.
  • Mais utiliser le fichier css normal peut sauvegarder de la bande passante (pas de support des variables de couleur/font du panneau de configuration). Le fichier css normal est [nom_du_theme].css , donc chez toi ça doit être "Appalchia.css".
  • Ceux qui commencent par "formie" et ont l'extension .css, sont spéciaux pour les anciennes versions d'internet explorer, ne les touche pas.


Le css est un langage, prévu pour être utilisé avec le html qui gère la mise en forme du style et de la mise en forme.

donc depuis ton panneau d'administration, tu télécharge "overall_header.tpl", tu l'ouvre avec notepad++, tu choisis le langage "css", et dedans tu cherches ".mainmenu". si tu ne le trouve pas, c'set qu'il est dans le css normal "Appalchia.css".
tu doit trouver un truc comme ça:
Code: Sélectionner - Agrandir
.mainmenu, .Alerte      { font-size : {T_FONTSIZE2}; color:#FFFFFF;}
a.mainmenu, a.Alerte      { text-decoration: underline; color : {T_FONTCOLOR3};  }
a.mainmenu:hover, a.Alerte:hover { text-decoration: underline; color : {T_BODY_HLINK}; }


".mainmenu" c'est le début de la déclaration de la classe, le ", .Alerte" c'est une autre classe que j'ai rajouté pour l'exemple, qui a le même style. Le style se trouve entre les deux accolades {}. tu n'est pas obligé de tout avoir sur une même ligne, par exemple comme ici:
Code: Sélectionner - Agrandir
.code {
   font-family: {T_FONTFACE3}; font-size: {T_FONTSIZE2}; color: {T_FONTCOLOR2};
   background-color: {T_TD_COLOR1}; border: {T_TH_COLOR1}; border-style: solid;
   border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

le "a.mainmenu" c'est pour définir le style qui s'applique en plus à la classe "mainmenu" si l'élément set de type "a", c'est à dire un lien.
si plus loin dans ton code, (après la fin des déclarations css, dans le html du overall_header.tpl) tu as du code qui ressemble à ça: "
Code: Sélectionner - Agrandir
<a href="url ou variable entre accolade" class="mainmenu">contenu du bouton</a>
ce dernier cas te concerne.
Le "a.mainmenu:hover" c'est pour définir la style qui s'applique quand un lien de type mainmenu (normalement tes boutons de menu donc) est survolé par la souris.
Le "a.mainmenu:active" c’est la style du bouton lorsque l'on clique dessus.

Concernant le contenu des styles:
"color: couleur;" définie la couleur des lettres, comme couleur, tu peux utiliser un nom de couleur standard (white, gold red etc), un code couleur HTML hexadécimal (#FFFFFF), un code rgb, ou rgba "rgba (255,255,255,1)" entre autre.
"background-color: couleur;" c'est pour la couleur de fonds de ton bouton.
"background-image: image;" c'est pour une image de fonds.
exemple:
Code: Sélectionner - Agrandir
background-image: url(http://img.xooimage.com/files58/e/f/2/barrev1.3-3b5d62d.png);


Pour plus de détails, tu va devoir googler un peut, aussi tu peux aller voir http://www.w3schools.com

Modifie ton code étape par étape dans notepad++, et cpoie-colle-le dans le template dans le panneau de configuration. Fait attention de ne pas te tromper de fichier car tu ne pourra pas revenir en arrière une fois la modification validée!!

Tu as maintenant tout ce qu'il faut pour te débrouiller tout seul, bon courage à toi!
Following members like this message:
Eleo (31/01/16)


Forum
Author Message
Guig Esprit du Sage
Membre


Offline
Membre

Joined: 06 Feb 2015
Posts: 35
Niveau:
Point(s): 35
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Sat 30 Jan 2016 - 22:11    Post subject: Boutons réactifs Reply with quote

INFOS supplémentaire, qui fonctionne pour les déclarations css qui ne sont pas dans "Appalchia.css".

Dans le panneau d'admin, si vous allez dans l'onglet thème puis modifier les couleurs, vous voyez une liste de styles que vous pouvez changer, ainsi que leur description.

Voici dans l'ordre, la liste ds variables correspondantes dans le code, ainsi que la description affichée, ce qui permet de modifier leur effet si on le souhaite:

Code: Sélectionner - Agrandir
T_BODY_BGCOLOR Couleur d’arrière plan

T_BODY_TEXT Couleur du texte

T_BODY_LINK Couleur des liens
T_BODY_VLINK Couleur des liens visités
T_BODY_ALINK Couleur des liens actifs
T_BODY_HLINK Couleur des liens survolés

T_TR_COLOR1 Couleur de lignes 1
T_TR_COLOR2 Couleur de lignes 2
T_TR_COLOR3 Couleur de lignes 3

T_TH_COLOR1 Couleur d’entêtes 1
T_TH_COLOR2 Couleur d’entêtes 2
T_TH_COLOR3 Couleur d’entêtes 3

T_TD_COLOR1 Couleur de cellules 1
T_TD_COLOR2 Couleur de cellules 2
T_TD_COLOR3 Couleur de cellules 3

T_FONTFACE1 Style de police 1
T_FONTFACE2 Style de police 2
T_FONTFACE3 Style de police 3

T_FONTSIZE1 Taille de police 1
T_FONTSIZE2 Taille de police 2
T_FONTSIZE3 Taille de police 3

T_FONTCOLOR1 Couleur de texte 1
T_FONTCOLOR2 Couleur de texte 2
T_FONTCOLOR3 Couleur de texte 3

NON TROUVÉ  Couleur du statut «En ligne»
NON TROUVÉ Couleur du statut «Hors ligne»
Following members like this message:
Eleo (31/01/16)


Forum
Author Message
Eleo
Membre


Offline
Membre

Joined: 14 Dec 2015
Posts: 27
Niveau:
Point(s): 19
Moyenne: 0.70
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Vierge (24aoû-22sep)

PostPosted: Sun 31 Jan 2016 - 12:26    Post subject: Boutons réactifs Reply with quote

Alors bien évidemment merci de ta réponse, cependant y'a énormééééément de termes technique, et je suis pas sûr d'avoir tout compris, et même pas sûr que vous même ayez compris, j'ai l'impression que vous parler du fait de remplacer des les liens vers les menu (Accueil, membres, groupes, mail etc...) du thème Appalchia, par des images, c'est bien ce que je veux faire, mais je veux également, que mes images, quand on survole avec la souris, qu'il y ai une animation (Changement de couleur, flèche en plus, glissement vers le haut etc... ) Est-ce qu'avec ces codes, on obtient ce dit résultat ? Embarassed

Forum
Author Message
Guig Esprit du Sage
Membre


Offline
Membre

Joined: 06 Feb 2015
Posts: 35
Niveau:
Point(s): 35
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Sun 31 Jan 2016 - 13:57    Post subject: Boutons réactifs Reply with quote

Oui, c'est bien cela.
voici un forum en cours de création pour test pour notre clan et dont les boutons du menu principal mais aussi d'autres éléments bougent quand on passe la souris dessus (à noter que les boutons, cadres et titres sont générés à 100% par du code:
http://guigburningtest.clicforum.com/index.php?theme=test
Vs notre forum actuel (très peut réactif, mais qui utilise des images pour presque tout):
http://burningphoenixteam.vraiforum.com/index.php


Forum
Author Message
Eleo
Membre


Offline
Membre

Joined: 14 Dec 2015
Posts: 27
Niveau:
Point(s): 19
Moyenne: 0.70
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Vierge (24aoû-22sep)

PostPosted: Sun 31 Jan 2016 - 15:03    Post subject: Boutons réactifs Reply with quote

Purée ! C'est un xooit ça à la base ?  Shocked

Il est super sympa ton forum ! 
Et en effet c'est bien ça comme boutons que je cherches ! Impressionnant !


Forum
Author Message
Guig Esprit du Sage
Membre


Offline
Membre

Joined: 06 Feb 2015
Posts: 35
Niveau:
Point(s): 35
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Sun 31 Jan 2016 - 16:12    Post subject: Boutons réactifs Reply with quote

Oui, c'est que du xooit, c’est langage css qui permet cela (avec un tout petit peut de html5 pour l'affichage sur tablettes et smartphones).
La limite c'est la prise en charge par le navigateur plus que la prise en charge par xooit, mais j'ai modifié le code en profondeur.

De toute façon, on est lié à eux pour ne pas perdre notre base de donnée (tout les sujets et messages) qui a bien grossi depuis 2008.

Concernant notre nouveau thème on a encore beaucoup de travail, on n'a travaillé que sur la page d’accueil pour l'instant.

Concernant le thème xooit.xxoit.com, en image de fonds, ils ont mis une image de 1pixel de large, répétée sur toute la largeur, ce qui dessine une barre. Le texte de la barre est constitué de simples liens.

tu peux toi même regarder comment les sites et forum sont fait , avec ton navigateur. Sous firefox, tu fait bouton droit "Examiner l'élément", internet explorer, c'est "inspecter l'élément" mais IE n'est pas pratique car il ne te positionne pas tout seul au bon endroit du code, avec chrome, je ne sais pas, mais le raccourcis touche F12 semble commun à la plupart des navigateurs.


Forum
Author Message
Guig Esprit du Sage
Membre


Offline
Membre

Joined: 06 Feb 2015
Posts: 35
Niveau:
Point(s): 35
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Sun 31 Jan 2016 - 16:39    Post subject: Boutons réactifs Reply with quote

Guig Esprit du Sage wrote:
Par exemple, si tu examine la page de xooit.xooit.com, tu clique sur la barre à droite ou à gauche, tu obtiens ces infos:
Code: Sélectionner - Agrandir
élément {
}
#body {
    background: transparent url("/pics/menu.bg.png") repeat-x scroll center top;
    height: auto;
    min-height: 100%;
    margin: 0px auto -87px;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
    margin: 0px;
    padding: 0px;
}
body, th, td {
    text-align: left;
}
body {
    font-family: "Lucida Grande",Arial,Garuda;
    font-size: 11px;
}
html {
    color: #000;
}


Ce qui est important, c'est çe code css:
Code: Sélectionner - Agrandir
#body {
    background: transparent url("/pics/menu.bg.png") repeat-x scroll center top;
    height: auto;
    min-height: 100%;
    margin: 0px auto -87px;
}

qui s'applique, dans le html à
Code: Sélectionner - Agrandir
<div id="body>[le gros du code de ta page]</div>


Si tu veux réutiliser exactement la même image, il te faudra remplacer "/pics/menu.bg.png" par "http://xooit.xooit.com/pics/menu.bg.png".
en ce qui concerne le margin, il te faudra tatoner, essaye d'abrd de remplacer le 87px par 0px.




GROS EDIT:
Pour l'appliquer chez toi:

Tu télécharges l'image http://xooit.xooit.com/pics/menu.bg.png , tu l'édite il faut que tu enlève la partie transparente, tu l'étire ou la compresse pour avoir la hauteur désirée. Pour cela, tu peux par exemple utiliser le logiciel paint.net
Ensuite tu l'héberge chez xooit, et tu récupère son adresse, soit en rajoutant l'image dans ton panneau d'administration, soit en la postant dans un message via "envoyer une image".

Dans ton css, tu rajoute:
Code: Sélectionner - Agrandir
.tablemainmenu {
     background-image: url("LIEN_DIRECT_VERS_TON_IMAGE") repeat-x;
     width: 1000px;
}

Si tu veux que ta barre prenne tout l'écran ,tu remplace 1000px par 100%.
Tu cherches (probablement dans "overrall_header.tpl) une ligne qui ressemble à:
Code: Sélectionner - Agrandir
<table align="center" background="http://img.xooimage.com/files110/3/4/2/barreheader-4dbf394.jpg" border="0" cellpadding="0" cellspacing="0" width="1000">

Il est possible, que ce ne soit pas dans le même ordre, alors je te conseilles de faire la recherche sur background="http://img.xooimage.com/files110/3/4/2/barreheader-4dbf394.jpg"
tu la remplace par:
Code: Sélectionner - Agrandir
<table class="tablemainmenu" align="center" border="0" cellpadding="0" cellspacing="0" >

plus bas dans ton code, tu as:
Code: Sélectionner - Agrandir
<td align="center" nowrap="nowrap" height="28">
ou
Code: Sélectionner - Agrandir
<td height="28" nowrap="nowrap" align="center">

Il FAUT que la hauteur définie par "height="28" corresponde à la hauteur en pixel de ton image, ce chiffre est donc à changer à ta convenance.


Forum
Author Message
Eleo
Membre


Offline
Membre

Joined: 14 Dec 2015
Posts: 27
Niveau:
Point(s): 19
Moyenne: 0.70
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Vierge (24aoû-22sep)

PostPosted: Sun 31 Jan 2016 - 19:09    Post subject: Boutons réactifs Reply with quote

Mais la barre de 1px ça ne peut pas être la barre grise, 1px c'est vraiment casi-invisible, je comprends même si elle est répété sur une ligne, ça ne devrait faire qu'un trait...

Je suis une bille en codage  Embarassed


Forum
Author Message
Guig Esprit du Sage
Membre


Offline
Membre

Joined: 06 Feb 2015
Posts: 35
Niveau:
Point(s): 35
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Sun 31 Jan 2016 - 19:22    Post subject: Boutons réactifs Reply with quote

Une image de 1px de large mais de 170px de haut répétée en largeur ça te fait une barre de 170px de haut et de largeur égale au nombre de fois où tu l'as répétée.

Fait bouton droit sur la barre et afficher l'image de fonds...


Forum
Author Message
Eleo
Membre


Offline
Membre

Joined: 14 Dec 2015
Posts: 27
Niveau:
Point(s): 19
Moyenne: 0.70
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Vierge (24aoû-22sep)

PostPosted: Mon 1 Feb 2016 - 10:03    Post subject: Boutons réactifs Reply with quote

Bon comme je me doutais que ça marche du premier coups, j'ai essayé et cherché pourquoi ça fonctionnais pas, mais j'avoue que je bloque là, alors voilà ce que ça me fait :

http://image.noelshack.com/fichiers/2016/05/1454313524-sans-titre.jpg
L'image Accueil devrait être grise (c'est une image test) et quand "mouseover" elle apparait rouge, or là, j'ai un code dégeux qui s'affiche, et l'image grise ne s'affiche même pas, pourtant même hébergeur, même lien c'est les deux mêmes images excepté la couleurs...

Dans le screen que j'ai mis, j'ai aussi encadré en rouge les parties que j'aimerai voir disparaître si c'est possible, j'aimerai que le header touche de 0px le haut de la page et ne plus voir la deuxième barre de forum ou c'est écrit : Forum ; Sujet ; Message, c'est une information qui met inutile et qui foire un peu la vu que je veux donner.

Je souhaiterais également que il y ai de l'espace entre chaque module de catégories (environ 20px) 

Merci en tous cas, j'ai pas mal bataillé tout de même et c'est pas gagné !  Razz

<Message modéré - Merci de ne pas afficher d'images trop larges>


Forum
Author Message
Eleo
Membre


Offline
Membre

Joined: 14 Dec 2015
Posts: 27
Niveau:
Point(s): 19
Moyenne: 0.70
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Vierge (24aoû-22sep)

PostPosted: Mon 1 Feb 2016 - 10:06    Post subject: Boutons réactifs Reply with quote

Information complémentaire : Je vais vous donner l'addresse ça iras plus vite  Razz  http://nextart.majz.com/index.php

Forum
Author Message
Eleo
Membre


Offline
Membre

Joined: 14 Dec 2015
Posts: 27
Niveau:
Point(s): 19
Moyenne: 0.70
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Vierge (24aoû-22sep)

PostPosted: Mon 1 Feb 2016 - 14:59    Post subject: Boutons réactifs Reply with quote

Rectification, j'y arrive avec la méthode de Gu!gan merci à toi !  Smile

Forum
Author Message
Guig Esprit du Sage
Membre


Offline
Membre

Joined: 06 Feb 2015
Posts: 35
Niveau:
Point(s): 35
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Mon 1 Feb 2016 - 15:04    Post subject: Boutons réactifs Reply with quote

Bonjour,
Pour enlever le barre noire de description du forum, il te faut, dans "index_body.tpl" supprimer ou mettre en commentaire ( <!-- --> ) ceci:
Code: Sélectionner - Agrandir
<tr>
<th colspan="2" class="thCornerL" nowrap="nowrap" height="25">&nbsp;Forum&nbsp;</th>
<th class="thTop" nowrap="nowrap" width="10">&nbsp;Sujets&nbsp;</th>
<th class="thTop" nowrap="nowrap" width="50">&nbsp;Messages&nbsp;</th>
<th class="thCornerR" nowrap="nowrap">&nbsp;Derniers Messages&nbsp;</th>
</tr>


EDIT: bon, c'est bien alors, bonne chance à toi.


Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 19:03    Post subject: Boutons réactifs

Display posts from previous:   
Reply to topic Page 1 of 2 Goto page: 1, 2  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401