Changer le curseur en survol des boutons et de "Sélectionner le contenu"

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

Résolu Changer le curseur en survol des boutons et de "Sélectionner le contenu"

Message par SweetGumiho le Mar 3 Mar 2015 - 15:06

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://thewitcher.jdrforum.com/

Description du problème

Bonjour,

A l'aide du tutoriel du Forum des Forums j'ai réussi à changer mon curseur par défaut, celui au survol des liens et celui au survol des images. Maintenant j'aimerais vraiment pouvoir avoir le même bouton que j'ai au survol des liens au survol des boutons "Citer", "Editer", "Supprimer", de "Sélectionner le contenu", ou quand je suis sur la sélecteur au niveau des outils de modération sauf que je ne connais pas la classe / nom de tag / propriété lui correspondant pour modifier mon CSS.

Merci d'avance pour vos réponses


Dernière édition par SweetGumiho le Mar 3 Mar 2015 - 15:56, édité 1 fois

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer le curseur en survol des boutons et de "Sélectionner le contenu"

Message par Alzufen le Mar 3 Mar 2015 - 15:14

Re'

Pour les boutons nouveau/répondre/verrouiller (je suppose que tu veux aussi ceux là) c'est :

Code:
.button img

Pour Citer/Editer/Supprimer/etc. c'est :

Code:
.postbody ul.profile-icons img

Et pour les boutons de modération :

Code:
p.right a img

Tu peux tout regrouper en un seul en remplaçant :

Code:
a {
cursor: url(http://i.imgur.com/Ut1cSFd.png), help;
}

par :

Code:
a, .button img,.postbody ul.profile-icons img, p.right a img{
cursor: url(http://i.imgur.com/Ut1cSFd.png), pointer;
}

Tu noteras que j'ai remplacé le "help" par "pointer" pourquoi ? Parce que le curseur "pointer" est équivalent à la main avec le doigt tendu quand tu survoles un lien à la base. De ce fais, si l'image ne marche plus ou pas, il remettra le curseur par défaut, mais avec "help" il aurait mis la flèche avec un "?" en dessous, ce n'est pas du tout le bon curseur Wink J'aurais aussi pu mettre "auto" il aurait détecté automatiquement le bon curseur, mais il aurait mis la flèche pour les images.

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

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

Résolu Re: Changer le curseur en survol des boutons et de "Sélectionner le contenu"

Message par SweetGumiho le Mar 3 Mar 2015 - 15:19

OK, merci, j'ai donc mon CSS comme ça :

Code:
/****** GENERAL ******/
 
#wrap {
  border:0;
}
body {
  background-position:top center;
  background-attachment:scroll;
  background-repeat:no-repeat;
  cursor: url(http://i.imgur.com/b11hENL.png), auto;
}

a {
cursor: url(http://i.imgur.com/Ut1cSFd.png), help;
}

a, .button img, .profile_icons img, p.right a img{
cursor: url(http://i.imgur.com/Ut1cSFd.png), pointer;
}

.inputbox {
  background:#3c3c3c;
  color:#ffffff;
  padding:2px;
  border:1px solid #BCBCBC;
  border-radius:10px;
  cursor:text;
}
 
dl.codebox {
  background:#1E1D1B;
  font-size:1em;
  padding:3px;
  border:1px solid #878787;
  border-radius:10px;
}
 
.forabg {
  background:url(http://imageshack.com/a/img838/9827/fsga.png) #262627;
  margin-bottom:4px;
  padding:0px 5px;
  border-radius:10px;
  border:1px solid #101010;
  box-shadow:0 0 9px #000000;
  clear:both;
}
 
.forabg .lastpost {
  width:15%;
}
div.forabg ul.topiclist dd.dterm {
  width: 70%;
}
 
.panel {
  background:#000000;
  padding:0px 10px;
  margin-bottom:4px;
  border-radius:10px;
  border:1px solid #101010;
  box-shadow:0 0 9px #000000;
}
 
#search-box input,#search-box input.button1,input.search,#smiley-box {
  display:none;
}
 
.slidesmile {
  position:relative;
  top:39px;
  left:705px;
  z-index:4;
}
 
/****** NAVIGATION *******/
 
.navig {
  position:fixed;
  background:#000;
  width:100%; /*couleur de fond de la barre de navigation*/
  top:0;
  box-shadow:0 2px 10px #000; /*effet d'ombre sous la barre de navigation*/
}
.navig a {
  font-family:'Alegreya SC'; /*police des liens*/
  font-size:14px; /*taille police des liens*/
  color:#6F7D7D; /*couleur des liens*/
}
.navig a:hover {
  color:#4D7999; /*couleur des liens au survol*/
  letter-spacing:1px;/*espacement des lettres au survol (0=normal)*/
}
.navig li {
  display:inline-block;
  padding:12px; /*marge autour des liens*/
}
a.mainmenu span.new-message{
color: #EAC117;
}
a.mainmenu span.new-message:hover{
color: #A#FDD017;
}
h2.chatbox-title:after { content: "Le Foyer"; } /*titre de la chatbox*/
a.chat-title { display: none;
}
body.chatbox #chatbox_header .chatbox-title,
body.chatbox #chatbox_header .chatbox-title a.chat-title {
    font-size: 14px !important;
}
#chatbox.recently-connected:after {
  font-family: "trebuchet ms", serif;
  font-size: 1em; line-height:1.5em; font-weight: bold; color: #8BC34A;
  box-shadow:0 0 5px #AED581; display:block; background: #000000; margin:auto;
  width:80%; margin:1.5% auto; padding:1%; white-space: pre;
  content: "Bienvenue dans le Foyer. Si vous êtes seul(e), n'oubliez pas de remettre une bûche dans le feu.";
}
/****** PAGE DES SUJETS ******/
 
.post {
  background:#262627;
  padding:0 10px;
  margin-bottom:4px;
  border-radius:10px;
  box-shadow:0 0 9px #000000;
}
.postbody /*justification automatique des posts*/ {
  display:block;
  text-align:justify;
  padding:10px;
}
.postprofile {
  position:relative;
  min-height:80px;
  width:17%;
  background:rgba(0,0,0,0.4);
  margin:5px 0 0;
  padding:5px;
  color:#999;
  text-align:center;
  word-wrap:break-word;
  border:1px solid rgba(0,0,0,0.25);
  border-radius:5px;
  box-shadow:0 1px 3px rgba(0,0,0,0.6) inset,0 0 0 1px rgba(255,255,255,0.05),0 1px 0 rgba(255,255,255,0.1);
}
 
ul.profile-icons {
  margin-top:10px;
  list-style:none;
  border-radius:10px;
}
 
.module {
  background:url(http://i60.servimg.com/u/f60/14/70/09/25/gradie22.png) repeat-x #262627;
  border:1px solid #101010;
  border-radius:10px;
  box-shadow:0 0 9px #000000;
}
.signature {
  border-radius:10px;
}
 
/****** CASE DES TABLEAUX DE FORUMACTIF ******/
 
.row2,.row1 {
  background:url(http://imageshack.com/a/img690/452/q962.png) center top repeat-x #0D0C0B;
}
 
/***** BALISE BLOCKQUOTE ******/
 
blockquote {
  background:url(http://imageshack.com/a/img809/2250/voys.png) no-repeat scroll 0 0 #C1A780;
  border:0;
  border-radius:10px;
  padding-right:25px;
}

/***** SELECTION CODE ******/

.selectCode {
float:right; text-transform: uppercase; cursor: pointer;
}
 
/****** BUTTON ET INPUT *******/
 
a.button1,a.button2,button.button2,input.button1,input.button2 {
  background:url(http://imageshack.com/a/img849/7503/zow4.png) #1E1D1B;
  border:0;
  color:#B89E7D;
}
 
/****** CATEGORIE ******/
 
.gauche {
  float:left;
}
.linklist {
  text-align:center; /*pour centrer les liens au dessus des catégories*/
  color: #463F23;
}
.linklist a {
  color: #463F23; /*couleur des liens en-tête et pied de page*/
}

/****** SIGNATURES ******/

  .signature_div img{
    max-width: 400px !important; /*pour redimensionner les signaturess*/
    max-height: 100px !important;
}

/****** MESSAGES ******/

.spoiler_closed, .spoiler_closed.hidden, .spoiler_content, .spoiler_content.hidden {
  background-color: black;
  text-align : justify; /* alignement standart d'un spoiler */
  border-color: transparent; /* c'est ceci qui fera disparaître votre cadre */
  -moz-border-radius: none; /* bien entendu vous pouvez lui donner une courbure si vous le désirez */
  border-radius: none;/* bien entendu vous pouvez lui donner une courbure si vous le désirez */
  padding:10px; /* espacement entre le bord de votre cadre et votre texte */
}
/****** PIED DE PAGE ******/

ul.linklist.clearfix li{float: none;} /* Enlève le flottement */
ul.linklist.clearfix{text-align: center; color: #222325;} /* Centre le texte */
ul.linklist.clearfix li.rightside strong:first-child:before {content: " ▴ ";} /* Ajoute une séparation avant "Créer un forum", à remplacer par ce que tu veux */

Pourtant j'ai toujours la main blanche qui s'affiche sur les boutons, le "Sélectionner le contenu" et les outils de modération. Un conflit de code ? Sachant qu'il est vrai que j'ai pris un thème tout fait sur Hitskin, mais que je suis en train de le reprendre petit à petit pour tout changer... :/

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer le curseur en survol des boutons et de "Sélectionner le contenu"

Message par Alzufen le Mar 3 Mar 2015 - 15:26

Remplace ça :

Code:
a {
cursor: url(http://i.imgur.com/Ut1cSFd.png), help;
}

a, .button img, .profile_icons img, p.right a img{
cursor: url(http://i.imgur.com/Ut1cSFd.png), pointer;
}[/code]

par ça :

Code:

a, .buttons img, .postbody ul.profile-icons img, p.right a img{
cursor: url(http://i.imgur.com/Ut1cSFd.png), pointer;
}

Pour ce qui est de "Sélectionner le contenu" tu parles du texte qui s'affiche quand on mets une balise code ?

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

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

Résolu Re: Changer le curseur en survol des boutons et de "Sélectionner le contenu"

Message par SweetGumiho le Mar 3 Mar 2015 - 15:30

Oui c'est ça, c'est moi qui ait fait le codage de "sélectionner le contenu" pour que ce soit plus facile avec les codes. ^^

Alors ça marche sur tous les boutons mais pas quand je clique à ces endroits-là :




SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer le curseur en survol des boutons et de "Sélectionner le contenu"

Message par Alzufen le Mar 3 Mar 2015 - 15:36

C'est pas une fonction trop dur à ajouter le "Sélectionner le contenu" vu quelle y est même sur le FdF Razz Tu as un lien où je pourrais voir une balise code justement ? ^^

Pour le reste, tu vas remplacer le code CSS que je t'ai donné par :

Code:
 a, .buttons img, .postbody ul.profile-icons img, p.right a img, fieldset.jumpbox select, fieldset.jumpbox input, fieldset.quickmod select, fieldset.quickmod input{
cursor: url(http://i.imgur.com/Ut1cSFd.png), pointer;
}

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

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

Résolu Re: Changer le curseur en survol des boutons et de "Sélectionner le contenu"

Message par SweetGumiho le Mar 3 Mar 2015 - 15:42

Je ne l'ai pas créé, j'ai bien suivi un tutoriel oui et c'était simple. Ce que je voulais dire par là c'est que ce n'était pas pré-installé avec mon thème, puisque c'est du javascript :

Code:
function selectCode(a){a=$(a).closest("dl").find(".cont_code,code")[0];if(window.getSelection){var c=window.getSelection();if(c.setBaseAndExtent)c.setBaseAndExtent(a,0,a,a.innerText.length-1);else{window.opera&&a.innerHTML.substring(a.innerHTML.length-4)=="<BR>"&&(a.innerHTML+=" ");var b=document.createRange();b.selectNodeContents(a);c.removeAllRanges();c.addRange(b)}}else document.getSelection?(c=document.getSelection(),b=document.createRange(),b.selectNodeContents(a),
c.removeAllRanges(),c.addRange(b)):document.selection&&(b=document.body.createTextRange(),b.moveToElementText(a),b.select())}
 
$(function(){
    $("dl.codebox:not(.spoiler,.hidecode)  > dd.code, dl.codebox:not(.spoiler,.hidecode)  > dd > code").closest("dl").find('dt').append('<span onClick="selectCode(this)" class="selectCode">>> Sélectionner le contenu </span>');
});

Et voilà. Wink

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Changer le curseur en survol des boutons et de "Sélectionner le contenu"

Message par Alzufen le Mar 3 Mar 2015 - 15:49

C'est normal, ForumActif n'a pas installé la fonction de base, je comprends pas pourquoi d'ailleurs, mais les fonctions du FdF sont vraiment chouette, leur code en couleurs à la manière d'un éditeur de texte c'est super pratique ^^ Mais sinon pourquoi tu changes pas le "span" qui entoure le "sélectionner le contenu" par une balise "a" (lien) plutôt ?

Ou sinon remplaces une dernière fois le CSS que je t'ai donné par :

Code:
a, .buttons img, .postbody ul.profile-icons img, p.right a img, fieldset.jumpbox select, fieldset.jumpbox input, fieldset.quickmod select, fieldset.quickmod input, span.selectCode{
cursor: url(http://i.imgur.com/Ut1cSFd.png), pointer;
}

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

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

Résolu Re: Changer le curseur en survol des boutons et de "Sélectionner le contenu"

Message par SweetGumiho le Mar 3 Mar 2015 - 15:56

Ça marche niquel ! Merci mille fois ! ♥
Résolu !

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum