[smallads]United Colors et mini module Petites Annonces [Réglé]
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Je viens d'installer le module Petites Annonces v 4.1.3 sur mon PBT 4.1.3 et ton super thème United Colors.
J'ai un petit souci avec le mini module car il semble ne pas être pris en compte par ton thème.
Dans l'exemple ci-dessous j'ai mis le mini module entre la Galerie et le Calendrier pour que tu puisses te rendre compte :

Peux-tu m'aider ?
Édité par Mipel Le 17/06/2016 à 15h45
Olivier


babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
Oops je n'ai pas fini la doc
.il faut porter le template du module dans le thème et modifier le tpl du mini-module, en rajoutant 2 classes css
SmalladsModuleMiniMenu.tpl
Code HTML :
devient
Code HTML :
color-sub peut être remplacé par color-01, color-02, ..., color-05
pour les pages du module, il suffit d'ajouter la classe de couleur que tu as choisie au header (-sub, -01, ... )
smallads.tpl
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Merci pour ce petit cours bien que n'ayant rien compris j'ai juste modifié selon tes instructions. Le résultat est très bien mais (il y a toujours un "mais" en informatique
) le type d'annonce (ici "Vend") reste à gauche :
Sais-tu ce qu'il faut modifier ici ?
Édité par olivierb Le 04/01/2015 à 18h52
Olivier


ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Normalement, le module-mini centre avec un text-align:center;
As tu ajouté un text-align:left après ?
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Je n'ai ajouté aucun text-align, j'en trouve un ligne 262 du smallads.tpl, à moins que cela soit ailleurs ?
Voici le contenu du SmalladsModuleMiniMenu.tpl
Code HTML :
<div class="module-mini-container color-main"# IF C_HORIZONTAL # style="width:auto;"# ENDIF #> <div class="module-mini-top color-sub"> <h5 class="sub-title">{L_TITLE}</h5> </div> <div class="module-mini-contents"> {L_INFO} <br /> # START item # # IF C_LIST_ACCES # <fieldset onclick="document.location.href='{PATH_TO_ROOT}/smallads/smallads.php#smallads_{item.ID}'" onmouseover="this.style.cursor='pointer'" onmouseout="this.style.cursor='default'"> # ELSE # <fieldset> # ENDIF # <legend>{item.TYPE}</legend> # IF item.C_PICTURE # <img src="{item.PICTURE}" height="50" alt="" /> # ENDIF # <br />{item.TITLE} <div class="small"> <br />{item.PRICE} {L_PRICE_UNIT} <br />{item.DATE} </div> </fieldset> # END item # # IF C_LIST_ACCES # <a class="small" href="{U_HREF}">{L_ALL_SMALLADS}</a> # ENDIF # </div> <div class="module-mini-bottom"></div> </div>
et celui du smallads.tpl
Caché :
Code HTML :
# IF C_VIEW # # START item # <article> <header class="color-sub"> <h1> <span>{item.TYPE} - {item.TITLE}</span> <span class="actions"> # IF item.C_EDIT # <a href="{PATH_TO_ROOT}/smallads/smallads{item.URL_EDIT}&token={TOKEN}" title="${LangLoader::get_message('edit', 'main')}" class="fa fa-edit"></a> # ENDIF # # IF item.C_DELETE # <a href="{PATH_TO_ROOT}/smallads/smallads{item.URL_DELETE}&token={TOKEN}" title="${LangLoader::get_message('delete', 'main')}" class="fa fa-delete" data-confirmation="delete-element"></a> # ENDIF # </span> </h1> </header> <div class="content"> # IF NOT item.C_DB_APPROVED # <p style="font-weight:bold; font-size:large; color:red">{L_NOT_APPROVED}</p> # ENDIF # # IF item.C_PICTURE # <div style="float:left;margin:10px"> <img src="{item.PICTURE}" /> </div> # ENDIF # <div>{item.CONTENTS}</div> <br /> <div class="small"> <p>{L_PRICE} : {item.PRICE} {L_PRICE_UNIT}</p> # IF item.C_SHIPPING #<p>{L_SHIPPING} : {item.SHIPPING} {L_SHIPPING_UNIT}</p># ENDIF # <p>{item.DB_CREATED}<br />{item.DB_UPDATED}</p> <p>id #{item.ID}</p> # IF item.VID # <p>Contribution de modification de #{item.VID}</p> # ENDIF # </div> <br /> <span style="float:left;"> {item.USER} {item.USER_PM} {item.USER_MAIL} </span> </div> <footer></footer> </article> # END item # # ENDIF # # IF C_LIST # <script> <!-- function radioClicked(Nom) { var r = false; var d = document.getElementsByName(Nom); for(var i=0; i<d.length; i++) { if(d[i].type=='radio' && d[i].checked) { r = d[i].value; break; } } return r ? r : 0; } function change_order() { window.location = "{TARGET_ON_CHANGE_ORDER}sort=" + document.getElementById("sort").value + "&mode=" + document.getElementById("mode").value + "&type=" + radioClicked("radio_type"); } function change_filter() { window.location = "{TARGET_ON_CHANGE_ORDER}type=" + radioClicked("radio_type"); } function view_not_approved() { window.location = "{TARGET_ON_CHANGE_ORDER}ViewNotApproved=1"; } --> </script> <section> <header> <h1> {L_TITLE} </h1> </header> <div class="content"> # IF C_DESCRIPTION # {DESCRIPTION} <hr style="margin-top:25px;margin-bottom:10px;" /> # ENDIF # <p> # START type_options # <input type="radio" name="radio_type" value="{type_options.VALUE}" {type_options.CHECKED}> {type_options.NAME}</input> # END type_options # <button class="button" onclick="change_filter()" value="true">OK</button> </p> <p style="margin-top:1.5em"><button class="button" onclick="view_not_approved()" value="true">{L_LIST_NOT_APPROVED}</button></p> <hr style="margin-top:10px;" /> <div class="spacer"> </div> # IF NOT C_NB_SMALLADS # <div class="center"> {L_NO_SMALLADS} </div> # ELSE # <div style="float:right;" id="form"> {L_ORDER_BY} <select name="sort" id="sort" class="nav" onchange="change_order()"> # START sort_options # <option value="{sort_options.VALUE}" {sort_options.SELECTED}>{sort_options.NAME}</option> # END sort_options # </select> <select name="mode" id="mode" class="nav" onchange="change_order()"> # START mode_options # <option value="{mode_options.VALUE}" {mode_options.SELECTED}>{mode_options.NAME}</option> # END mode_options # </select> </div> <div class="spacer"> </div> # START item # <div id="smallads_{item.ID}" class="block-container" style="margin-bottom:20px;"> <div class="block_contents"> <p style="margin-bottom:10px"> <a href="{PATH_TO_ROOT}/smallads/smallads{item.URL_VIEW}" style="font-size:large">{item.TYPE} - {item.TITLE}</a> # IF item.C_EDIT # <a href="{PATH_TO_ROOT}/smallads/smallads{item.URL_EDIT}&token={TOKEN}" title="${LangLoader::get_message('edit', 'main')}" class="fa fa-edit"></a> # ENDIF # # IF item.C_DELETE # <a href="{PATH_TO_ROOT}/smallads/smallads{item.URL_DELETE}&token={TOKEN}" title="${LangLoader::get_message('delete', 'main')}" class="fa fa-delete" data-confirmation="delete-element"></a> # ENDIF # </p> # IF NOT item.C_DB_APPROVED # <p style="font-weight:bold; font-size:large; color:red">{item.L_NOT_APPROVED}</p> # ENDIF # # IF item.C_PICTURE # <div style="float:left;margin:10px"> <img src="{item.PICTURE}" /> </div> # ENDIF # <div>{item.CONTENTS}</div> <br /> <div class="small"> <p>{L_PRICE} : {item.PRICE} {L_PRICE_UNIT}</p> # IF item.C_SHIPPING #<p>{L_SHIPPING} : {item.SHIPPING} {L_SHIPPING_UNIT}</p># ENDIF # <p>{item.DB_CREATED}<br />{item.DB_UPDATED}</p> <p>id #{item.ID}</p> # IF item.VID # <p>Contribution de modification de #{item.VID}</p> # ENDIF # </div> <br /> <span style="float:left;"> {item.USER} {item.USER_PM} {item.USER_MAIL} </span> <div class="spacer"></div> </div> </div> # END item # # ENDIF # </div> <footer># IF C_PAGINATION # # INCLUDE PAGINATION # # ENDIF #</footer> </section> # ENDIF # # IF C_FORM # <script> <!-- function trim(stringToTrim) { return stringToTrim.replace(/^s+|s+$/g,""); } function check_item(i, n) { i.value = trim(i.value); if(i.value == "") { alert(n + " : "+"{L_ALERT_TEXT}"); i.focus(); return false; } return true; } function check_num(i, n) { i.value = trim(i.value); if(i.value != "" && isNaN(i.value)) { alert(n + " : " + "{L_ALERT_FLOAT}"); i.focus(); return false; } return true; } function check_upload(i, n) { fname = trim(i.value); var recherche = /.(jpeg|jpg|gif|png)$/i; if(fname != "" && recherche.test(fname)==false) { alert(n + " : " + "{L_ALERT_UPLOAD}"); i.value = ''; i.focus(); return false; } return true; } function check_checkbox(i, msg) { if( i.checked == false ) { alert(msg); return false; } return true; } function check_form(o){ if (!check_item(o.smallads_title, "{L_DB_TITLE}")) return false; if (!check_item(o.smallads_contents, "{L_DB_CONTENTS}")) return false; if (!check_num(o.smallads_price, "{L_DB_PRICE}")) return false; if (!check_num(o.smallads_shipping, "{L_DB_SHIPPING}")) return false; if (!check_upload(o.smallads_picture, "{L_DB_PICTURE}")) return false; if (!check_checkbox(o.usage_agreement, "{L_CGU_NOT_AGREED}")) return false; return true; } <!-- Original: Ronnie T. Moore --> <!-- Dynamic 'fix' by: Nannette Thacker --> function textCounter(field, countfield, maxlimit) { if (field.value.length > maxlimit) // if too long...trim it! field.value = field.value.substring(0, maxlimit); // otherwise, update 'characters left' counter else countfield.value = maxlimit - field.value.length; } --> </script> # INCLUDE MSG # <div> <form action="smallads.php?token={TOKEN}" method="post" onsubmit="return check_form(this);" class="fieldset-content" enctype="multipart/form-data" > <p class="center">{L_REQUIRE}</p> # IF C_USAGE_TERMS # <fieldset> <legend> {L_USAGE_LEGEND} </legend> <br /> <div style="width:auto;height:250px;overflow-y:scroll;border:1px solid #DFDFDF;background-color:#F1F4F1"> {CGU_CONTENTS} </div> <div style="text-align:center;margin:1.5em;"> <label style="cursor:pointer;"> <input type="checkbox" name="usage_agreement" id="usage_agreement" class="valign-middle" /> {L_AGREE_TERMS} </label> </div> </fieldset> # ENDIF # <fieldset> <legend>{L_LEGEND}</legend> <div class="form-element"> <label for="smallads_type">* {L_DB_TYPE}</label> <div class="form-field"> <label> <select id="smallads_type" name="smallads_type"> # START type_options_edit # <option value="{type_options_edit.VALUE}" {type_options_edit.SELECTED}>{type_options_edit.NAME}</option> # END type_options_edit # </select> </label> </div> </div> <div class="form-element"> <label for="smallads_title">* {L_DB_TITLE}</label> <div class="form-field"> <label><input type="text" id="smallads_title" name="smallads_title" value="{DB_TITLE}" class="field-large" /></label> </div> </div> <div class="form-element-textarea"> <label for="smallads_contents">* {L_DB_CONTENTS}</label> {KERNEL_EDITOR} <label><textarea rows="10" cols="50" id="smallads_contents" name="smallads_contents" onKeyDown="textCounter(this.form.smallads_contents,this.form.remLen,{DB_MAXLEN});">{DB_CONTENTS}</textarea></label> <br /> <center> <font size="1">car. restants : <input readonly="readonly" type=text name="remLen" id="remLen" size="4" maxlength="3" value="{DB_CONTENTS_REMAIN}"></font> </center> <br /> </div> <div class="form-element"> <label for="smallads_picture">{L_DB_PICTURE} <span class="field-description">Max : {MAX_FILESIZE_KO} ko</span> </label> <div class="form-field"> # IF C_PICTURE # <div style="float:left"> <img src="{DB_PICTURE}" /> <a href="{PATH_TO_ROOT}/smallads/smallads.php?delete_picture={ID}&token={TOKEN}" title="${LangLoader::get_message('delete', 'main')}" class="fa fa-delete" data-confirmation="delete-element"></a> </div> # ENDIF # <label><input type="file" id="smallads_picture" name="smallads_picture" value="" accept="image/jpeg,image/png,image/gif" /></label> </div> </div> <div class="form-element"> <label for="smallads_price">{L_DB_PRICE}</label> <div class="form-field"> <label><input type="text" maxlength="10" size="10" id="smallads_price" name="smallads_price" value="{DB_PRICE}" /> {L_PRICE_UNIT}</label> </div> </div> <div class="form-element"> <label for="smallads_shipping">{L_DB_SHIPPING}</label> <div class="form-field"> <label><input type="text" maxlength="10" size="10" id="smallads_shipping" name="smallads_shipping" value="{DB_SHIPPING}" /> {L_SHIPPING_UNIT}</label> </div> </div> # START checkbox # <div class="form-element"> <label for="{checkbox.NAME}">{checkbox.L_LABEL}</label> <div class="form-field"> <label><input type="checkbox" name="{checkbox.NAME}" id="{checkbox.NAME}" value="{checkbox.VALUE}" {checkbox.CHECKED}/></label> </div> </div> # END checkbox # <div class="form-element"> <label for="smallads_max_weeks">{L_DB_MAX_WEEKS}</label> <div class="form-field"> <label><input type="text" size="3" maxlength="2" id="smallads_max_weeks" name="smallads_max_weeks" value="{DB_MAX_WEEKS}" /> {L_MAX_WEEKS_DEFAULT}</label> </div> </div> # IF C_CAN_APPROVE # <div class="form-element"> <label for="smallads_approved">{L_DB_APPROVED}</label> <div class="form-field"> <label><input type="checkbox" name="smallads_approved" id="smallads_approved" {DB_APPROVED} /></label> </div> </div> # ENDIF # <div class="small"> <p>{DB_CREATED}<br />{DB_UPDATED}</p> </div> </fieldset> # IF C_CONTRIBUTION # <fieldset> <legend>{L_CONTRIBUTION}</legend> <div class="message-helper notice"> <i class="fa fa-notice"></i> <div class="message-helper-content">{L_CONTRIBUTION_NOTICE}</div> </div> <div class="form-element-textarea"> <label for="contribution_counterpart">{L_CONTRIBUTION_COUNTERPART}</label> <span class="field-description">{L_CONTRIBUTION_COUNTERPART_EXPLAIN}</span> {CONTRIBUTION_COUNTERPART_EDITOR} <label><textarea rows="20" cols="40" id="contribution_counterpart" name="contribution_counterpart">{CONTRIBUTION_COUNTERPART}</textarea></label> </div> </fieldset> # ENDIF # <fieldset class="fieldset-submit"> <legend>{L_SUBMIT}</legend> <button type="submit" name="submit" value="true">{L_SUBMIT}</button> <button onclick="XMLHttpRequest_preview();" type="button">{L_PREVIEW}</button> <button type="reset" value="true">{L_RESET}</button> <input type="hidden" name="id" value="{ID}" /> <input type="hidden" name="token" value="{TOKEN}" /> </fieldset> </form> </div> # ENDIF #
Avez-vous une idée ?
Olivier


ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Parce que si c'est le cas, c'est déja centré : http://prntscr.com/5owjd8
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Tu connais la meilleure ?
Depuis Ubuntu 14.04 et FF 34.0 : c'est à gauche
Depuis W7 Chrome 39 : c'est centré
Depuis W7 IE 11 : c'est à gauche
Depuis W7 FF 34.0.5 : c'est à gauche
et j'ai vidé complètement les caches IE, FF et Chrome et site.
Mais je dirais que ce n'est pas grave en soi
Édité par olivierb Le 05/01/2015 à 21h38
Olivier


janus57 Membre non connecté
-
Booster Fusée
- Voir le profil du membre janus57
- Inscrit le : 07/12/2007
- Groupes :
-
Equipe Assistance
ElenWii :C''est sur ce site ? http://braslou.lescigales.org/
Parce que si c'est le cas, c'est déja centré : http://prntscr.com/5owjd8
Bonjour,
chez moi sous firefox le "Vend" n'est pas centré, il est collé à gauche.
Pour firefox (et d'autre navigateur surement) la balise HTML <legend> est une balise "sans positionnement", tu aura beau lui mettre un text-align:center le navigateur va littéralement te dire "non pas utilisable avec cette balise, j'ignore".
Solution alternative tu applique ce CSS au HTML legend :
Code CSS :
position: relative; left: 45%;
EDIT :
Voici ce qu'une personne a dit sur <legend> (date de 2004 je crois)
Citation :Probably the only difficulty in styling semantic forms is the legend tag. It is insufferably variable across browsers. In Mozilla, the legend tag is not left-indented from the body of the fieldset, in IE and Opera it is. In Mozilla, the legend tag is positioned in between the fieldset's border and its content, in IE and Opera it is positioned inside the content. This makes it very hard to move the legend inside the fieldset border, or position it flush to the left of the fieldset, as you get varying effects across browsers
Cordialement, janus57
Édité par janus57 Le 05/01/2015 à 21h49
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Sais pas pourquoi mais je pensais à toi avant de voir ta réponse

Bon, là, tu parles en termes techniques incompréhensibles pour moi mais je suppose que tu t'adresses aux graphistes !
Ah oui, je sais pourquoi je pensais à toi, je viens de recevoir un mail de PulseHeberg. Pas tout compris mais j'ai l'impression qu'ils augmentent leur infra

Donc, pour ce qui concerne ce topic, et à la lecture de Janus, je considère le sujet non résolu mais clos. Qu'en pensez-vous ?
Olivier


janus57 Membre non connecté
-
Booster Fusée
- Voir le profil du membre janus57
- Inscrit le : 07/12/2007
- Groupes :
-
Equipe Assistance
non c'est pas vraiment technique, en gros <legend> n'est pas gérer de la même façons par tous les navigateur (IE/Firefox/Opera/chrome/chromium etc...).
Donc j'ai donné plus haut un code qui centre (+/-) le texte sous Firefox, sinon voir avec les graphiste si il ne serait pas plus simple de virer <legend> et utiliser autre chose qui soit pareil sur tout les navigateurs.
Sinon pour PH perso j'ai pas reçus de mail (mise à part celui de la TVA) donc je ne sais pas de quoi tu parle
"Cordialement, janus57
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Olivier


ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
FF last version : http://prntscr.com/5oxpz9
FF developper : http://prntscr.com/5oxqh8
et un text-align:center; pour IE qui ne prend pas le width:100%
IE last version : http://prntscr.com/5oxvqu
A mettre dans le css du module smallads :
Code CSS :
.module-mini-contents legend { text-align: center; width: 100%; }
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Je viens de parcourir les dossiers /smallads mais je ne trouve aucun CSS.
Pour confirmer les manipulations demandées par babsolune, j'ai copié le dossier /smallads/template dans /template/unitedcolors/module/ et je l'ai renommé smallads puis j'ai modifié les deux fichiers tpl indiqués.
Olivier


ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Ajoute le dans le contents.css alors
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Vous êtes un pro !
Olivier


Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie
