Mettre la boîte de smileys sous la zone de texte

[sunray]

Ceci déplace la boîte de smileys sous la zone de texte lors de la création d’un sujet, blog ou groupe utilisant l’éditeur avancé. Ceci est obtenu uniquement en utilisant le CSS. Le plugin ajoute simplement le nouveau fichier de CSS au lien du fichier editor.css dans la page. Il peut aussi afficher la boîte de smileys dans la page du showthread au-dessous de la boîte de texte dans la réponse rapide si vous sélectionnez l’option d’édition comme ci-dessous.
Ce mode est supporté uniquement pour le style par défaut et a été testé avec FireFox, Safari et IE7.
Historique des versions :
1.0 2009-12-06: Sortie initiale par Lynne à vbulletin.org

Hack mis à jour en version 1.3 le 24/09/2010.

Remerciements et support


Ce Hack a été traduit en français pour vBulletin-Ressources avec l'autorisation explicite de son auteur. / This Hack was translated into French for vBulletin-Ressources with the explicit authorization of its author.




vBulletin-Ressources et son équipe offrira du support vis à vis des hacks traduits, bien sûr, dans la mesure du possible de chacun, autant en terme de temps que de connaissances/ vBulletin-Ressources and its team will offer support for the translated hacks, of course, as far as possible for everyone, as much in term of time that knowledge.



vBulletin-Ressources remercie l'auteur du hack pour avoir fourni son autorisation. / vBulletin-Ressources thanks the author for the hack to have provided its authorization.


Conception


Auteur du Hack / Author Of Hack :Lynne (http://www.vbulletin.org/forum/member.php?u=65230)
Source / Link of Thread: Move smilies to below text area (and optionally add to Quick Reply) (http://www.vbulletin.org/forum/showthread.php?t=229650)
Version du hack / Hack version : 1.3
Version vBulletin Requise / Version vBulletin Required : 4.0.1
Testé / Tested: oui sur 4.0.1

Traducteur / Translator: Sunray et Spider-Man
(http://www.vbulletin-ressources.com/forum/member.php?u=8678)
Copyright © 2006-2009 vBulletin-Ressources.com - Tous droits réservés Uniquement pour nos traductions / Copyright © 2006-2009 vBulletin-Ressources.com - All Rights Reserved Only for ours translations


Installation


Importer le fichier XML inclus dans le fichier ZIP à partir de votre panneau d'administration.
Paramètres vBulletin > Options vBulletin > Editeur des messages > Mettre la boîte de smileys sous la zone de texte > Oui
Actuellement, il n'y a aucun stylevars utilisé dans le CSS pour l’éditeur de la boîte de smileys. Ainsi, vous devez trouver ces lignes et les changer si vous n'utilisez pas les nombres par défaut.
Ouvrir le template editor.css et trouver les lignes suivantes :
Notez la hauteur (21px dans ce cas) la marge (2px dans ce cas) et la largeur (20px dans ce cas). Si vous changez ces valeurs ailleurs sur votre site, notez bien à quel endroit. C’ est important!!!!
Maintenant, ouvrez le template editor2.css et trouvez chacune de ces lignes :

height:{vb:math 2*{vb:math 21+2*2}}px;
height:{vb:math 21+2*2}px;
width:{vb:math 20+{vb:raw vboptions.smtotal}*{vb:math 20+2*2}}px;


.editor_smiliebox ul.smiliebox li {
float:{vb:stylevar left};
height:21px;
margin:2px;
overflow:hidden;
position:relative;
text-align:center;
width:20px;
}
Changez le 21 par la hauteur de vos smileys et le 2 (dans 2*2) par la marge que vous avez trouvé ci-dessus et le 20 (dans 20+2*2) par la largeur. Si l’une de ces valeurs n’est plus en px, alors vous devrez changer le px par ce qui est dans les lignes ci-dessus également.
Si vous n’avez jamais changé ces valeurs, alors vous pouvez laisser comme tel.
OPTIONNEL – Si vous souhaitez afficher la boîte de smileys dans la page showtherad sous la réponse rapide, vous devez faire ceci :

Cherchez :


<div class="editor_textbox quickreply">
<vb:if condition="$show['qr_require_click']">
<textarea name="message" id="{vb:raw editorid}_textarea" rows="10" cols="80" dir="{vb:stylevar textdirection}" disabled="disabled">{vb:raw click_quick_reply_icon}</textarea>
<vb:else />
<textarea name="message" id="{vb:raw editorid}_textarea" rows="10" cols="80" dir="{vb:stylevar textdirection}"></textarea>
</vb:if>
</div>

</div>
</div>Ajoutez la ligne suivante :


</div>
<vb:if condition="($vbulletin->options['lynne_sb_below'] AND $vbulletin->options['lynne_sb_below_2']) AND THIS_SCRIPT == 'showthread'"><div class="editor_smiliebox">{vb:raw smiliebox}</div></vb:if>
</div>
Paramètres vBulletin > Options vBulletin > Envoi et modifications de Message > Ajouter la boîte de smileys sous la réponse rapide dans la page showthread > Oui (Notez que l’option ci-dessus, Mettre la boîte de smileys sous la zone de texte doit également être sur Oui)
Editez le template "showthread_quickreply" et trouvez :

Désinstallation :


1. Désinstaller "Déplacer la boîte de smileys sous la zone de texte"
2. Si vous avez ajouté la boîte de smileys dans la page réponse rapide du showthread.php, vous devez supprimer les modifications effectuées ci-dessus.
Ceci ne fonctionne par pour la version pre-beta 5 vB4.

[Ombre]

Bonjour, merci Sunray pour cette traduction, par contre tu n'aurais pas de capture stp?

[Allan]

Merci de la trad Sunray :)

Screen ajouté ;)

[HICHEM TIGS]

Merci beaucoup pour ce hack, mais le soucis c'est que lors de création d'un nouveau sujet le hack fonctionne nikel:

http://img710.imageshack.us/i/screenshot003qs.png/ 13908

par contre lors d'ajout d'une réponse dans un sujet déjà créer le hack ne fonctionne pas:

13909



http://img20.imageshack.us/i/screenshot002n.png/http://www.vbulletin-ressources.com/forum/images/misc/pencil.png

[Ombre]

Bonsoir, c'est peut-être normal tu utilise un hack prévus pour une beta de vb4 sur vb 4.0.3, des changement on surement étaient apportés.

Essaye la version 1.1 prévus pour vb 4.0.1 sait on jamais: http://www.vbulletin.org/forum/showthread.php?t=229650

[HICHEM TIGS]

Ah ok je vais voir ca.

[Spider-Man]

Bonjour archive mise à jour au premier message;)

[Ombre]

Bonjour, merci pour cette mise à jour.

[HICHEM TIGS]

Slt et merci pour cette mise à jour.

[amine]

Bonsoir à tous,

Voila j'ai bien éssayé d'avancer mais impossible de suivre cette procédure.

Pouvez vous s'il vous plait m'aider, voici les deux templates :

editor.css
-----------


.formcontrols .blockrow.texteditor {
border-top:none;
}

.editor {
border-top:solid 1px #6b91ab;
}

.editor.quickreply,
.editor.quickedit {
border-top:none;
}

.editor_controls {
padding:6px 6px 6px 0;
_display:none; /* disabling clickable controls for IE6, although the form remains fully-functional, including keyboard-controls: select a word, hit control-b to bold a word in the editor. */
float:left;
width:100%;
}

.editor_controls > ul {
clear:left;
}

.editor_controls > ul.right li > * {
display:inline;
float:left;
}

.editor_controls > ul.right {
float:right;
}
.editor_controls ul.right {
_float:right;
}

.editor_controls > ul > li {
background:transparent url(images/element/editor/separator.gif) no-repeat left;
padding-left:6px;
float:left;
position: relative;
}
.editor_controls li , .editor_controls ul.right li, .editor_controls .popupmenu div.popupctrl {
_display: inline;
}
.editor_controls > ul > li:first-child {
background-image:none;
padding-left:0px;
}

.editor_controls a.popupctrl img,
.popupmenu .popupbody li img {
vertical-align:middle;
}

.editor_controls a.popupctrl {
text-decoration:none;
}

.editor_controls .imagebutton {
padding:1px;
}

.editor_controls .colorbutton {
float:left;
margin:1px;
border:0;
}

.editor_controls .colorbutton div {
border:1px solid #ACA899;
height:10px;
width:10px;
margin:2px;
}

.editor_controls .vbedit_colorbutton {
padding-bottom:4px;
}

.editor_controls .vbedit_colorbar {
position:absolute;
background-color:black;
top:15px;
left:6px;
}

.formcontrols .blockrow .editor_textbox textarea:focus {
background-color:rgb(244, 244, 244);
}

.editor_container {
float:left;
margin-right:-90px;
width:100%
}

.editor_smiliebox {
float:right;
width:75px;
height:200px;
_background-color:rgb(244, 244, 244);
_border:solid 1px #6b91ab;
padding:0 3px 3px 3px;
}

.editor_smiliebox .blocksubhead {
padding:0;
font-size:11px;
font-weight:normal;
text-align:center;
background:#f2f6f8;
border:solid 1px #6b91ab;
border-width:1px 0;
}

.editor_smiliebox ul.smiliebox {
height:190px;
overflow:hidden;
}

.editor_smiliebox ul.smiliebox li {
float:left;
height:20px;
width:20px;
margin:2px;
overflow:hidden;
position:relative;
text-align:center;
}

.editor_smiliebox ul.smiliebox li div.table {
display:table;
height:100%;
margin:auto;
/* IE8 needs the following, see https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=425785#tabs */
table-layout:fixed;
width:20px;
}

.editor_smiliebox ul.smiliebox li div.tablecell {
display:table-cell;
vertical-align:middle;
}

.editor_smiliebox ul.smiliebox li img {
height:auto;
max-width:20px;
width:auto !important;
}

.editor_smiliebox div.moresmilies {
text-align:center;
font-size:11px;
}

.editor_textbox_container {
width:100%;
float:left;
margin-right:-85px;
}

.editor_textbox_smilie {
margin-right:85px;
}

.editor_textbox textarea,
.editor_textbox iframe {
width:99%;
height:200px;
float:none;
background-color:rgb(244, 244, 244);
font: 13px Tahoma,Calibri,Verdana,Geneva,sans-serif;
}

.editor_textbox iframe {
margin:0;
padding:0;
height:206px;
}

.editor_textbox .hider {
background-color:rgb(244, 244, 244);
}

.editor_textbox.quickreply textarea {
height:100px;
}

.editor_textbox.quickreply iframe {
height:106px;
}

.editor_textbox .description {
float:none;
width:auto;
margin-top:2px;
}

.editorpopupbody {
max-height:250px;
*overflow:auto;
overflow-y:auto;
overflow-x:hidden;
}

.popupmenu.sizes .popupbody {
min-width:50px;
text-align:center;
}

.popupmenu.colors .popupbody {
min-width:144px;
}

.editor_controls .popupmenu .popupbody {
background:#FFFFFF none repeat scroll 0 0;
}

.editor_controls .category,
.editor_controls .smilie ,
.editor_controls .attachment {
font-size:11px;
border-top:none;
padding:1px;
position: relative;
}

.editor_controls .smilie,
.editor_controls .attachment,
.editor_controls .attach .category {
cursor:pointer;
}

.editor_controls .category {
background:#f2f6f8;
border:solid 1px #6b91ab;
border-width:1px 0;
}

.editor_controls .smilie div,
.editor_controls .category div,
.editor_controls .attachment div {
padding:2px;
white-space:nowrap;
overflow:hidden;
}

.editor_controls .fontsize,
.editor_controls .fontname {
padding:1px;
border-top:none;
font-size:14px;
}

.editor_controls .popupmenu .popupbody li > a {
padding:1px 3px;
overflow:hidden;
background:none;
-moz-border-radius:0;
-webkit-border-radius:0;
color:#000000;
}

.editor_controls .popupmenu .popupbody li > a:hover {
color:#000000;
}

.popupmenu.colors {
position:relative;
}

.popupmenu.fonts div.popupctrl {
width:91px;
}

.popupmenu.sizes div.popupctrl {
width:45px;
}

.editor_controls a.popupctrl {
border:1px solid #E1E1E2;
height:18px;
line-height:17px;
}

.editor_controls .popupmenu div.popupctrl {
height:18px;
border:1px solid #E1E1E2;
color:#000000;
line-height:17px;
background-color:#FFFFFF;
padding-right:10px;
background-image:url(images/element/misc/popupctrl.png);
background-position:right center;
background-repeat:no-repeat;
}

.popupmenu.imagemenu div.popupctrl {
padding:1px;
padding-right:10px;
border:none;
}

.popupmenu.imagemenu div.popupctrl.active {
padding:0px;
padding-right:10px;
margin-right:-1px;
}

.popupmenu.fonts div.popupctrl div,
.popupmenu.sizes div.popupctrl div {
font-size:11px;
font-family:tahoma;
overflow:hidden;
white-space:nowrap;
padding:0 3px 0 3px;
_display:inline;
}

.editor_controls .imagebutton_selected,
.editor_controls .imagebutton_hover,
.editor_controls .imagebutton_down,
.editor_controls a.popupmenu {
padding:0;
margin:0;
}

.editor_controls .popupmenu .popupctrl.active,
.editor_controls .imagebutton_selected,
.editor_controls .imagebutton_down,
.editor_controls .imagebutton_hover {
border:solid 1px #6b91ab;
}

.editor_controls .popupmenu .popupctrl.active,
.editor_controls .imagebutton_hover {
background-color:rgb(193,210,238);
}

.editor_controls .imagebutton_selected {
background-color:rgb(241,246,248);
}

.editor_controls .imagebutton_down {
background-color:rgb(151,181,226);
}

.editor_controls .imagebutton_disabled {
opacity:0.40;
-moz-opacity:0.40;
filter:alpha(opacity=40);
}

.controlgroup_3 button.imagebutton {
display:inline;
margin:0;
padding:2px;
text-align:left;
cursor:pointer;
border:0px;
}

.popupbody > li:first-child {}

body.wysiwyg {
margin:0;
padding:2px;
}

/* Used within the iframe */
.wysiwyg hr.previewbreak {
color:red;
background-color:red;
height:6px;
border:none;
}

.wysiwyg,
.wysiwyg.content {
font: 13px Tahoma,Calibri,Verdana,Geneva,sans-serif;
}

.wysiwyg.forum {
font: 13px Verdana;
}

.wysiwyg p {
margin:0;
}

.wysiwyg .inlineimg {
vertical-align: middle
}

.wysiwyg img.previewthumb {
max-width:150px;
max-height:150px;
height:auto !important;
width:auto !important;
width:150px;
height:150px;
margin:1px;
}

.wysiwyg ol.decimal li {
list-style:decimal outside;
}

.wysiwyg ol.upper-roman li {
list-style:upper-roman outside;
}

.wysiwyg ol.lower-roman li {
list-style:lower-roman outside;
}

.wysiwyg ol.upper-alpha li {
list-style:upper-alpha outside;
}

.wysiwyg ol.lower-alpha li {
list-style:lower-alpha outside;
}

/* IE createStyleSheet() falls over on img.previewthumb.active */
.wysiwyg img.previewthumbactive {
border:1px solid red;
margin:0;
}

.editoroverlay {
position:relative;
}

.editoroverlay.tableoverlay,
.editoroverlay.videooverlay {
width:350px;
}

.editoroverlay.uploadoverlay {
width:445px;
}

.editoroverlay.imageoverlay {
width:550px;
}

.editoroverlay hr {
border:solid 1px #6b91ab;
}

.editoroverlay .blockrow {
background:rgb(255, 255, 255) bottom repeat-x;
border:solid 1px #6b91ab;
margin:10px;
text-align: left;
}

.editoroverlay .blockrow .group {
width:72%;
float:right;
margin-top:10px;
}

.editoroverlay ul.group li {
float:left;
margin-left:10px;
font-size:11px;
}

.editoroverlay ul.group .textbox {
margin-top:0;
width:auto;
float:none;
}

.editoroverlay ul.group li:first-child {
margin-left:0;
}

.editoroverlay .cancelbutton {
position:absolute;
right:6px;
top:6px;
background-color:red;
color:white;
font-weight:bold;
border:1px solid black;
width:15px;
}

.editoroverlay .cancelbutton:hover {
background-color:crimson;
}

.editoroverlay input.textbox:focus,
.editoroverlay textarea:focus {
background-color:rgb(255,255,200);
}

.editoroverlay p.shade {
font-size:11px;
margin-bottom:10px;
}

.editoroverlay div.foot {
text-align:center;
padding:10px;
position:relative;
}

.editoroverlay.uploadoverlay div.foot {
padding-bottom:0;
}

.editoroverlay.videooverlay input.textbox {
width:95%;
margin-top:10px;
}

/* Table Overlay */
.editoroverlay.tableoverlay .primary,
.editoroverlay.tableoverlay ul.checkradio.group {
float:right;
width:45%;
margin-top:0;
margin-bottom:5px;
}

.editoroverlay.tableoverlay ul.group li {
margin-left:0;
float:none;
}

/* imageoverlay */
.editoroverlay.imageoverlay .blockrow {
width: 100%:
float: left;
clear: both;
}

.editoroverlay.imageoverlay .blockrow .fullwidth > label {
float:left;
clear:both;
width:25%;
overflow:hidden;
margin-top:10px;
}

.editoroverlay.imageoverlay .textbox {
margin-top:0;
width:95%;
}

.editoroverlay.imageoverlay div.imagetarget {
margin-left:25%;
border:solid 1px #6b91ab;
padding:5px;
font-size:11px;
background-color:#f2f6f8;;
}

.editoroverlay.imageoverlay #imageconfigtarget {
max-width:100px;
max-height:100px;
height:auto !important;
width:auto !important;
width:100px;
height:100px;
}

.editoroverlay.imageoverlay #imageconfigtarget.right {
float:right;
margin-left:5px;
}

.editoroverlay.imageoverlay #imageconfigtarget.left {
float:left;
margin-right:5px;
}

.editoroverlay.imageoverlay #imageconfigtarget.center {
display:block;
margin-left:auto;
margin-right:auto;
}

.editoroverlay.imageoverlay #imageoverlay_progress {
display:none;
position:absolute;
right:10px;
}

.editoroverlay.uploadoverlay h2 {
font-size: 123.1%;
font-weight:bold;
}

.editoroverlay.uploadoverlay p,
.editoroverlay.uploadoverlay h2 {
margin-bottom:5px;
}

.editoroverlay.uploadoverlay label {
margin-bottom:2px;
}
.editoroverlay.uploadoverlay input.textbox {
width:95%;
margin-bottom:5px;
}
.editor {
border-top-width: 0px;
}
.postpreview {
border: 1px solid #B5CCDB ;
border-top: 0px;
}editor2.css
------------


@charset "UTF-8";
/* editor2.css */
.editor_smiliebox {
clear:both;
height:{vb:math 2*{vb:math 21+2*2}}px;
position: relative;
float:left;
width: 100%;
}
.editor_smiliebox ul.smiliebox {
height:{vb:math 21+2*2}px;
margin:0 auto;
width:{vb:math 20+{vb:raw vboptions.smtotal}*{vb:math 20+2*2}}px;
}
.editor_textbox_smilie {
margin-right:0;
}

Merci pour une possible réponse ;)

[Ombre]

Bonsoir, @Sunray, j'ai corriger ton sujet, l'option du hack ce trouve dans l'option "Editeur des messages" et non pas dans "Envoi et modification des messages".

[mohanet]

Bonsoir, je crois que le tutorial n'est pas bien organisé je me suis trompé dans les explications par exemple :


Ouvrir le template editor.css et trouver les lignes suivantes :
Notez la hauteur (21px dans ce cas) la marge (2px dans ce cas) et la largeur (20px dans ce cas). Si vous changez ces valeurs ailleurs sur votre site, notez bien à quel endroit. C’ est important!!!!

Quelle classes à modifier ici ????



Maintenant, ouvrez le template editor2.css et trouvez chacune de ces lignes :

height:{vb:math 2*{vb:math 21+2*2}}px;
height:{vb:math 21+2*2}px;
width:{vb:math 20+{vb:raw vboptions.smtotal}*{vb:math 20+2*2}}px;
Code:
.editor_smiliebox ul.smiliebox li {
float:{vb:stylevar left};
height:21px;
margin:2px;
overflow:hidden;
position:relative;
text-align:center;
width:20px;
}

Changez le 21 par la hauteur de vos smileys et le 2 (dans 2*2) par la marge que vous avez trouvé ci-dessus et le 20 (dans 20+2*2) par la largeur. Si l’une de ces valeurs n’est plus en px, alors vous devrez changer le px par ce qui est dans les lignes ci-dessus également.
Si vous n’avez jamais changé ces valeurs, alors vous pouvez laisser comme tel.
j'ai rien compris !!!!



Editez le template "showthread_quickreply" et trouvez :

trouvé quoi ??

[amine]

Bonsoir,

Aprés avoir fait la mise à jour pour la version 4.0.5, je voulais installé ce hack, voila le genre de message que j'ai reçu :

http://img26.xooimage.com/files/7/b/a/importation-de-produits-205dafa.jpg

Et méme avec un autre hack c'est la méme chose s'il vous plait.

Trés bonne soirée ;)

[Ombre]

Bonsoir, le message me semble clair, tu as un conflit entre deux hack, donc soit tu désinstalle celui qui rentre en conflit sois tu contactes l'auteur du hack afin qu'il modifie son produit.

[amine]

Bonsoir, le message me semble clair, tu as un conflit entre deux hack, donc soit tu désinstalle celui qui rentre en conflit sois tu contactes l'auteur du hack afin qu'il modifie son produit.

Bonsoir trés cher Ombre :angel:,

Ou je peux trouvé ce hack pour le désinstallé puiseque dans le '' Produitd installés '' et '' Gestionnaire de modules '' il n'ya rien j'ai tout désinstaller.


Mais ou je peux trouver s'il vous plait ceux ci : Bitfield Collision: canadminblocks = canadminhide


Mes remerciements ;)

[Ombre]

Tu es sur de ne pas avoir utilisé un hack du type hide sur ton forum? voir laisser un fichier dans le dossier inludes/xml qui pourrais causé ce conflit?

[amine]

Tu es sur de ne pas avoir utilisé un hack du type hide sur ton forum? voir laisser un fichier dans le dossier inludes/xml qui pourrais causé ce conflit?

Bonsoir trés cher Ombre :angel:,

Oui dans la version 3.8.5 avant de passer à la v 4.0.5 s'il vous plait.

Je vais voir dans le ftp '' includes/xml

Trés bonne soirée ;)

[dkili]

Est ce que ça fonctionne pour la version 3.8.x ???

[Ombre]

Bonsoir, non ça ne fonctionne pas sous vb3.

[Billyboule]

Hack mis à jour en version 1.3.
Bonne installation. :)

[Ombre]

Merci pour cette mise à jour :)