Bonjour à tous,

Je viens d'installer l'extension dans la barre latérale de mon forum mais j'ai quelques soucis.

Comme à la base elle n'est pas vraiment destiné à ça, le résultat est assez moche :


Lorsque je fais "Examiner l'élément" sous Firefox, tous les aspect visuels sont hérités de mon style. Que dois je modifier dans le css pour :
1) dégager le style par défaut pour n'avoir plus qu'une simple boite blanche ?
2) afficher les élément en ligne et non plus en colonne pour que ça ressemble grosso modo à un truc comme ça (hors smiley et personnes de connectées vu que ce n'est pas compris dans le pack de l'extension) :


Merci d'avance pour votre patience et pour votre aide ^^"

Hello,

On va faire les choses proprement et créer un répertoire dédié au style dans l'extension.

Crée un dossier portant le même nom que celui de ton style dans le répertoire style/ de l'extension.

On aura besoin :

1. de modifier le fichier ajax_shoutbox_body.html
   
   • crée un répertoire template/ dans le dossier du style de l'extension
   • fais une copie du fichier ajax_shoutbox_body.html dans ce répertoire
2. de tripatouiller le CSS du style de l'extension
   
   • crée un répertoire theme/ dans le style de l'extension
   • fais une copie du contenu du dossier prosilver/theme/ de l'extension dans le répertoire tonstyle/theme/

Une fois que ce sera fait, on attaquera les modifs.

Voila, tout est en place, j'attends maintenant le plan de bataille :]

Ouvre ajax_shoutbox_body.html, remplace l'intégralité du contenu par :

Code: Tout sélectionner

<div class="forabg sidechat"> <div class="inner"> <h3>{L_AJAX_SHOUTBOX}</h3> <div id="shoutbox_scroll"> <ul class="topiclist shoutboxlist forums" id="shoutbox_content"> <li class="row" id="copy"> <dl> <dt data-type="user" class="ajaxshoutbox_user"></dt> <dd data-type="date" class="ajaxshoutbox_date"></dd> <dd data-type="delete" class="ajaxshoutbox_delete"> <form action="{U_DELETE_SHOUTBOX}" data-type="submit-delete" method="post"> <input type="hidden" name="sid" value="{SESSION_ID}" /> <input data-type="delete-id" type="hidden" name="id" value="" /> <input data-type="delete-form-time" type="hidden" name="creation_time" value="" /> <input data-type="delete-form-token" type="hidden" name="form_token" value="" /> <input type="submit" name="delete" value="X" title="{L_DELETE}" class="button2" /> </form> </dd> <dd data-type="message" class="ajaxshoutbox_message"></dd> </dl> </li> </ul> <ul class="topiclist waitinglist forums" id="ajaxshoutbox_loadafter"> <li class="row"> <dl> <dt><div class="ajaxshoutbox_loadingbar"></div></dt> </dl> </li> </ul> </div> <!-- IF S_CAN_POST_SHOUT --> <form action="{U_SUBMIT_SHOUTBOX}" id="ajaxshoutbox_post" method="post"> <input type="hidden" name="sid" value="{SESSION_ID}" /> {S_FORM_TOKEN} <ul class="topiclist ajaxshoutboxpost forums"> <li class="row"> <dl> <dt>{L_AJAX_SHOUTBOX_MESSAGE}{L_COLON} <input type="text" name="text_shoutbox" id="text_shoutbox"/> <input type="submit" name="submit" value="{L_SUBMIT}" class="button2 grosbouton" id="submit_shoutbox"> </dt> <dd><div class="ajaxshoutbox_loadingbar" id="ajaxshoutbox_loadbefore"></div></dd> </dl> </li> </ul> </form> <!-- ENDIF --> <!-- INCLUDEJS @paul999_ajaxshoutbox/js/ajax_shoutbox.js --> <script> var AJAX_SHOUTBOX_POSTS = "{UA_GET_POST_ACTION}"; var AJAX_SHOUTBOX_POSTS_NEW = "{UA_GET_POST_ACTION_NEW}"; var AJAX_SHOUTBOX_POSTS_OLD = "{UA_GET_POST_ACTION_OLD}"; </script> <noscript> <ul class="topiclist forums"> <li class="row"> <dl> <dt>{L_NO_JS}</dt> </dl> </li> </ul> </noscript> </div> </div>

Ouvre ajax_shoutbox.css, remplace l'intégralité du contenu par :

Code: Tout sélectionner

.ajaxshoutbox_loadingbar { background-image: url("./images/ajax-loader.gif"); height: 16px; width: 16px; margin-left: auto ; margin-right: auto ; } #ajaxshoutbox_loadbefore, #ajaxshoutbox_loadafter { display: none; } #ajaxshoutbox_loadbefore { height: 16px; width: 16px; } ul.waitinglist dt { width: 100%; } #shoutbox_scroll { max-height: 200px; overflow-y: scroll; } #copy { /* This element is used to copy data from. Do not show */ display: none; } ul.shoutboxlist { display: block; list-style-type: none; margin: 0; } ul.shoutboxlist li { color: #4d4d4d; display: block; list-style-type: none; margin: 0; } ul.shoutboxlist li.row dl { padding: 2px 0; } ul.shoutboxlist dl { position: relative; } ul.shoutboxlist dt { width: auto; font-size: 1.1em; } ul.shoutboxlist dt, ul.shoutboxlist dd.ajaxshoutbox_date, ul.shoutboxlist dd.ajaxshoutbox_message, ul.shoutboxlist dd.ajaxshoutbox_delete, ul.ajaxshoutboxpost dd { margin-right: 5px; padding-left: 5px; padding-top: 0px; padding-bottom: 0px; margin-bottom: 0px; margin-top: 0px; min-height: 20px; } ul.shoutboxlist dd.ajaxshoutbox_delete { display: none; float: right; margin-right: 0; } ul.ajaxshoutboxpost dt { width: 75%; margin-right: 5px; padding-left: 5px; min-height: 25px; } ul.ajaxshoutboxpost dd { float: right; min-height: 25px; min-width: 25px; } ul.shoutboxlist dd.ajaxshoutbox_message { font-size: 11px; clear: both; } ul.shoutboxlist dd.ajaxshoutbox_message_with_delete { } #text_shoutbox { width: 100%; } .rtl ul.shoutboxlist dt.ajaxshoutbox_user { margin-left: 0px; } .sidechat li.row:hover dd { border-color: transparent; } .ajaxshoutbox_delete .button2 { font-size: 0.8em; font-weight: bold; color: #fff; background: #A0A0A0; padding: 0; border-color: #fff; box-shadow: none; } .sidechat { background: url("./images/shoutbox_top.jpg") repeat-x; padding: 0; border-radius: 0; } .sidechat h3 { margin-top: 5px; padding: 10px 0 2px; } @media only screen and (max-width: 700px), only screen and (max-device-width: 700px) { ul.shoutboxlist dd.ajaxshoutbox_date { display: none; } ul.shoutboxlist dd.ajaxshoutbox_message { display: block; } ul.shoutboxlist dt { padding-left: 1px; margin-right: 5px !important; } #text_shoutbox { width: 75%; } }

Ho WOW, ça en fait des modifs O.O

C'est bon, j'ai tout appliqué :]

Du coup on s'arrête là on je peux demander quelques peaufinages ?

Ah oui oui bien sûr, surtout que je t'ai filé les modifs adaptées à mon intégration donc on ne doit pas avoir le même code (approche différente, classes différentes, toussa).

HideShow

cabot a écrit:Ah oui oui bien sûr, surtout que je t'ai filé les modifs adaptées à mon intégration donc on ne doit pas avoir le même code (approche différente, classes différentes, toussa).

Effectivement, mais si j'ai bien compris ce qu'on devait faire ici (non non, je n'ai pas oublié, c'est juste que je te laisse respirer un peu ), ne dois je pas moi aussi à la fin avoir plus ou moins la même chose que toi ?
Surtout qu'en plus, je n'ai pas vraiment d'approche hein, je cherche juste à ce que ça colle au mieux ^^"

Alors sinon, dans l'idéal de ce qui pourrait être réalisé :
- enlever tous les traits rouge et gris qui entourent la boite "poster un message" et qui trainent encore ça et là
- faire apparaitre l'avatar du posteur (si c'est faisable) ?
- dans un message : mettre le nom en haut, puis le message au milieux, puis la date/heure tout en bas et la croix de "delete" en dessous du nom du posteur ? (cf 2nd image de référence)

Ensuite, pour les changements que j'ai déjà effectués :
- J'ai modifié le bouton "Envoyer" et j'ai voulus le placer tout à droite. Sauf que comme il ne s'y collait pas complètement, j'ai dû changer cette ligne de ton code :

Code: Tout sélectionner

ul.ajaxshoutboxpost dt { width: 100%; (au lieux de 75%) }

Je me demande si ça ne va pas poser problème avec le slide (recouvrement quand on diminue la taille de la page) et le côté responsive du forum ? Ou alors je rajoute une exception dans la règle de "@media" ?
- toujours sur le bouton "Envoyer", je n'arrive pas à lui mettre la bordure blanche puis la grise
- la boite de texte pour poster le message est bizarre : je l'ai agrandi mais le texte dedans réagi comme s'il s'agissait toujours des anciennes dimensions (petite et sur une seule ligne).
Il y aurait une propriété à ajouter de façon à ce que le texte écrit prenne toute la place de la boite ? Ou je dois aussi modifier le code html ?
Pour le moment j'ai ça :

Code: Tout sélectionner

#text_shoutbox { width: 230px; height: 80px; border: 1px solid #b21810; border-radius: 2px; }

Merci pour tout :]

HideShow

Myrphak a écrit:Surtout qu'en plus, je n'ai pas vraiment d'approche hein, je cherche juste à ce que ça colle au mieux ^^"

Ouais enfin jusqu'à maintenant c'est surtout moi qui m'en charge. :/

HideShow

Myrphak a écrit:enlever tous les traits rouge et gris qui entourent la boite "poster un message" et qui trainent encore ça et là

Il n'est pas possible d'accéder à la shoutbox en tant qu'invité, donc je ne peux pas voir le problème.

HideShow

Myrphak a écrit:faire apparaitre l'avatar du posteur (si c'est faisable) ?

Non, il voir ça avec le développeur de l'extension.

HideShow

Myrphak a écrit:dans un message : mettre le nom en haut, puis le message au milieux, puis la date/heure tout en bas et la croix de "delete" en dessous du nom du posteur ? (cf 2nd image de référence)

C'est cette portion de code qui est concernée :

Code: Tout sélectionner

  <dl> <dt data-type="user" class="ajaxshoutbox_user"></dt> <dd data-type="date" class="ajaxshoutbox_date"></dd> <dd data-type="delete" class="ajaxshoutbox_delete"> <form action="{U_DELETE_SHOUTBOX}" data-type="submit-delete" method="post"> <input type="hidden" name="sid" value="{SESSION_ID}" /> <input data-type="delete-id" type="hidden" name="id" value="" /> <input data-type="delete-form-time" type="hidden" name="creation_time" value="" /> <input data-type="delete-form-token" type="hidden" name="form_token" value="" /> <input type="submit" name="delete" value="X" title="{L_DELETE}" class="button2" /> </form> </dd> <dd data-type="message" class="ajaxshoutbox_message"></dd> </dl>

HideShow

Myrphak a écrit:Je me demande si ça ne va pas poser problème avec le slide (recouvrement quand on diminue la taille de la page) et le côté responsive du forum ?

Nivo Slider est censé être responsive.

HideShow

Myrphak a écrit:toujours sur le bouton "Envoyer", je n'arrive pas à lui mettre la bordure blanche puis la grise

Si tu as déjà déclaré les propriétés sur les boutons du style de base, elles devraient s'appliquer automatiquement à celui de l'extension.

HideShow

Myrphak a écrit:la boite de texte pour poster le message est bizarre : je l'ai agrandi mais le texte dedans réagi comme s'il s'agissait toujours des anciennes dimensions (petite et sur une seule ligne).

Ce champ est un input/text et il n'est pas possible de modifier son comportement, il faudrait utiliser un textarea comme champ de saisi.

HideShow

cabot a écrit:Ouais enfin jusqu'à maintenant c'est surtout moi qui m'en charge. :/

J'en ai bien conscience et j'en suis sincèrement désolé. Si j'avais moyen de trouver autrement mes réponses aussi efficacement, ça fait longtemps que je vous aurais laissé tranquille :[

HideShow

Il n'est pas possible d'accéder à la shoutbox en tant qu'invité, donc je ne peux pas voir le problème.

J'ai modifié les permissions du forum en ligne, à voir si ça marche ? Sinon le screen donne ça :

HideShow

Non, il voir ça avec le développeur de l'extension.

Ok déjà vu donc et sa réponse est non. Je vais devoir chercher ça de mon côté.

HideShow

C'est cette portion de code qui est concernée :

Merci, je vais regarder :]

HideShow

Ce champ est un input/text et il n'est pas possible de modifier son comportement, il faudrait utiliser un textarea comme champ de saisi.

Ok merci !

Enfin quelques questions pour m'aiguiller un peu sur mes futures modifications :
- si je veux faire apparaitre ceux qui participent au chat (comme montré sur la seconde image mise dans le premier post) à la place du titre "shoutbox", je dois modifier quoi ? Le php ? l'HTML ? Les 2 ?
Si je cherche sur internet à "chat online status" ça suffit ou il y a des mots clés plus pertinent ? (parce que là je ne trouve pas grand chose ^^")
- si je veux rajouter la liste de smiley du forum (toujours comme sur l'image) dans un bloc en dessous, je dois modifier quoi ? Php ou html ? Est il possible que j'aille récupérer le bout de code d'une extension qui l'aurait et que je le remette là ?

Bonjour ici !

Alors, j'ai trouvé ce que je cherchais pour les barres mais il me reste quelques soucis :
1) si je met ça dans le css du chatbox :

Code: Tout sélectionner

.forabg li.row:first-child:before { background: #ffffff; height: 1px; }

Ça m'enlève les barres du forum aussi. Je dois mettre quoi devant pour qu'il ne modifie que le chat et non le forum en entier ?

EDIT : c'est bon, j'ai trouvé

2) j'aimerais enlever cette portion de code :

Code: Tout sélectionner

<ul class="topiclist waitinglist forums" id="ajaxshoutbox_loadafter"> <li class="row"> <dl> <dt><div class="ajaxshoutbox_loadingbar"></div></dt> </dl> </li> </ul>

Si j'ai bien compris ça affiche la barre de rechargement du chat : je trouve que ça prend de la place pour pas grand chose au final à moins qu'il y ai une réelle fonctionnalité derrière que je n'ai pas vu ?
J'ai évidemment essayé de supprimer le code mais assez étonnamment le petit rond en dessous du bouton "envoyer" s'affiche toujours ?!
J'ai purgé le cache du forum plusieurs fois, rafraichis le style, désactivé et remis, je ne comprend pas pourquoi ça persiste ? C'est hérité du style de base ?

2) dans ce code :

Code: Tout sélectionner

<dt data-type="user" class="ajaxshoutbox_user"> </dt> <dd data-type="message" class="ajaxshoutbox_message"> </dd> <dd data-type="date" class="ajaxshoutbox_date"> </dd>

J'aimerais mettre <dd data-type="message" class="ajaxshoutbox_message"> </dd> en paragraphe de façon à ce qu'il soit bien indépendant du reste des informations (date, croix delete, etc). Je l'ai mis entre les balise <p></p> dans le fichier html mais ça n'a rien changé.
Comment dois je m'y prendre alors ?

HideShow

Myrphak a écrit:EDIT : c'est bon, j'ai trouvé

D'où l'utilité de la classe sidechat ajoutée sur la div.forabg.

2/ Et ben dans le doute tu ne supprimes rien et tu déclares une hauteur de 0 sur la div .ajaxshoutbox_loadingbar.

3/ Une liste dl ne peut avoir que des balises dt et dd comme enfants directs.

D'accord !

Merci pour tout :]

Sujet résolu donc.