Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB3] Afficher une barre au dessus des messages façon EDGE


2 participants

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

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 27 Oct 2024 - 19:55

Salut à toutes et à tous,

voici une astuce pour cette version phpbb3 concernant une barre qui sera à l'indentique de la version EDGE concernant une barre ou se trouvera
l'icône du sujet(si activé) , le titre du sujet et la numérotation des messages.

Actuellement vous avez un affichage qui ressemble à ceci:

[PHPBB3] Afficher une barre au dessus des messages façon EDGE Captu314

Le visuel après les modifications:

[PHPBB3] Afficher une barre au dessus des messages façon EDGE Edge10

Les profils sont d'office paramètrés pour afficher au dessus de l'avatar si le membre est en ligne ou non  super


Pour avoir ce rendu, il faudra faire des modifications dans template viewtopic_body:

Dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body

Recherchez ceci:
Code:
<div class="inner"><span class="corners-top"><span></span></span>

Remplacez par:
Code:
<div class="inner">

recherchez ceci:

Code:
 <div style="position: relative; top: -60px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>

Juste avant déposez ceci:
Code:
 
 <div class="M14_barre_viewtopic"><h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}" title="{postrow.displayed.POST_SUBJECT}"class="M14_viewtopic_href">{postrow.displayed.POST_SUBJECT}</a></h2>
<a class="M14_barre_num"href="{postrow.displayed.POST_URL}">Message n° {postrow.displayed.COUNT_POSTS}</a>
    
      </div>

Recherchez ceci:
Code:

<h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>


Remplaçez par:
Code:
<br />



Pensez a enregistrer puis à valider en cliquant respectivement sur Enregistr puis Ajout

Voir cette page pour être certain d'avoir validé votre template:

https://www.milouze14.net/h2-diverses-aides





Si votre template n'a pas été modifié, voici ce dernier en totalité:
Code:

<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
 //<![CDATA[
 var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }

        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
 {
 if( $(this).is(":visible") )
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 }
 else
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    }
    catch(e) { }

 return false;
};
//]]>
</script>
<!-- BEGIN switch_push_direct_send -->
<div id="push-answer" class="jqmWindow"></div>
<script src="{JQUERY_DIR}jqmodal/jqmodal.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function() {
 $('#push-answer').jqm({toTop: true});

 $('#push-bell').click(function () {
 return sendWebPush({TOPIC_ID});
 });
 function sendWebPush(tId){
 $.get("/ajax_push.php?topicID=" + tId ).done(showPushAnswer);
 }

 function showPushAnswer(data) {
 $('#push-answer').html(data).jqmShow();
 $('.jqmOverlay').bgiframe();
 $('#push-answer').bgiframe();
 }
 });
 //]]>
</script>
<!-- END switch_push_direct_send -->

<h1 class="page-title">
 <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
 <!-- BEGIN switch_push_direct_send --> <span id="push-bell" title="{switch_push_direct_send.L_PUSH_SEND}"></span><!-- END switch_push_direct_send -->
</h1>
{POSTERS_LIST}
<div class="topic-actions">
 <div class="buttons">

 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   
 <!-- END switch_user_authpost -->

 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
 <!-- END switch_user_authreply -->
 </div>

 <div class="pathname-box">
 <p>
            <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
            <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
            {NAV_CAT_DESC}
        </p>
 </div>

 <p class="right"></p>

 <div class="pagination">
 {PAGE_NUMBER}
 <!-- BEGIN switch_plus_menu -->
  • 
 <div id="addthis-toolbar" style="display: inline-block; margin-right:5px;">
 <div class="btn-floating-left" tabindex="100">
                {L_SHARE}
 </div>
 <div class="addthis-toolbar-btn" style="display:none;">
                {switch_plus_menu.SOCIAL_BUTTONS}
 </div>
 </div>
  • 
 <script type="text/javascript">//<![CDATA[
 var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
 var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
 var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
 var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
 var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
 insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
 //]]>
 </script>
        {switch_plus_menu.JS_SOCIAL_BUTTONS}
 <!-- END switch_plus_menu -->
 </div>
 <div class="clear"></div>
</div>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->
<p class="left-box">
    <!-- BEGIN switch_isconnect -->
    <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> 
    <!-- END switch_isconnect -->
    <a href="#bottom">{L_GOTO_DOWN}</a>
</p>
<div class="clear"></div>
{POLL_DISPLAY}

<!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <div class="post {postrow.hidden.ROW_COUNT}">
 <div class="inner">
 
 <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
 <div class="clear"></div>
 <span class="corners-bottom"><span></span></span>
 </div>
 </div>
 <!-- END hidden -->
 <!-- BEGIN displayed -->
 
 

<div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
        
    <div class="M14_barre_viewtopic"><h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}" title="{postrow.displayed.POST_SUBJECT}"class="M14_viewtopic_href">{postrow.displayed.POST_SUBJECT}</a></h2>
<a class="M14_barre_num"href="{postrow.displayed.POST_URL}">Message n° {postrow.displayed.COUNT_POSTS}</a>
    
      </div>
  <div style="position: relative; top: -60px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
              
 <div class="inner">


 <div class="postbody">

 <ul class="profile-icons">
 <li>{postrow.displayed.THANK_IMG}</li>
 <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
 <li>{postrow.displayed.QUOTE_IMG}</li>
 <li>{postrow.displayed.EDIT_IMG}</li>
 <li>{postrow.displayed.DELETE_IMG}</li>
 <li>{postrow.displayed.IP_IMG}</li>
 <li>{postrow.displayed.REPORT_IMG_NEW}</li>
                              
 </ul>

                          <br />
 <p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" />
                                   {L_TOPIC_BY} {postrow.displayed.POSTER_NAME} <span class="M14_date_topic">{postrow.displayed.POST_DATE_NEW}</span></p>
 <div class="clearfix"></div>

 
 <div style="display:none"></div>
 <div class="content clearfix">
 <div class="M14_message">{postrow.displayed.MESSAGE}</div>
 <!-- BEGIN switch_attachments -->
 <dl class="attachbox">
 <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
 <dd class="attachments">
 <!-- BEGIN switch_post_attachments -->
 <dl class="file clearfix">
 <dt>
 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
 </dt>
 <dd>
 <!-- BEGIN switch_dl_att -->
 <span><a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}</span>
 <!-- END switch_dl_att -->

 <!-- BEGIN switch_no_dl_att -->
 <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}</span>
 <!-- END switch_no_dl_att -->

 <!-- BEGIN switch_no_comment -->
 <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</span>
 <!-- END switch_no_comment -->

 <!-- BEGIN switch_no_dl_att -->
 <span><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></span>
 <!-- END switch_no_dl_att -->

 <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
 </dd>
 </dl>
 <!-- END switch_post_attachments -->
 </dd>
 </dl>
 <!-- END switch_attachments -->
 </div>
 {postrow.displayed.EDITED_MESSAGE}
 <!-- BEGIN switch_signature -->
 <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->
 </div>

 <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
 <!-- div class="online2"></div-->
                          <br />
 <dl>
                                        
 <dt>
 {postrow.displayed.POSTER_AVATAR}
 <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
 </dt>
 <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
 <dd {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">
                        {postrow.displayed.AWARDS}
 </dd>
 <dd class="award_more"></dd>
 <dd><br /></dd>
 <dd>
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </dd>
 <dd><br /></dd>
 <dd>
 {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
 </dd>
 </dl>
 </div>

 <div class="clear"></div>

 <!-- BEGIN switch_likes_active -->
 <div class="fa_like_div">
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 </div>
 <!-- END switch_likes_active -->

 <p class="right"><a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a></p>

 <span class="corners-bottom"><span></span></span></div>
 </div>
 <!-- BEGIN first_post_br -->
 <hr id="first-post-br" />
 <!-- END first_post_br -->
 <!-- END displayed -->
<!-- END postrow -->

<a name="bottomtitle"></a>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->

<p class="left-box">
    <!-- BEGIN switch_isconnect -->
    <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> 
    <!-- END switch_isconnect -->
    <a href="#top">{L_BACK_TO_TOP}</a>
</p>

<div class="clear"></div>

<div class="noprint">
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<p class="right">{S_WATCH_TOPIC}</p>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</div>

<!-- BEGIN promot_trafic -->
<div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em">
 <span class="corners-top"><span></span></span>
 <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></span>
 <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
 <span class="corners-bottom"><span></span></span>
</div>
<div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em">
 <span class="corners-top"><span></span></span>
 <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></span>
 <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
 <div class="clear"></div>
 <div>
 <!-- BEGIN link -->
 » <a href="{promot_trafic.link.U_HREF}" title="{promot_trafic.link.TITLE}" >{promot_trafic.link.TITLE}</a><br />
 <!-- END link -->
 </div>
 <span class="corners-bottom"><span></span></span>
</div>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
 <span class="corners-top"><span></span></span>
 <div class="h3"> {L_FORUM_RULES}</div>
 <div class="clear"></div>
 <table class="postbody">
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" alt="" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules content">
 {RULE_MSG}
 </td>
 </tr>
 </table>
 <span class="corners-bottom"><span></span></span>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<hr />

<div class="topic-actions">
 <div class="buttons">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   
 <!-- END switch_user_authpost -->

 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
 <!-- END switch_user_authreply -->
 </div>

 <div class="pathname-box">
 <p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
 </div>

 <div class="pagination">
 {PAGE_NUMBER}
 </div>
</div>
<div class="clear"></div>

<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<fieldset class="jumpbox">
 <label>{L_JUMP_TO}: </label>
 {S_JUMPBOX_SELECT} 
 <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
<fieldset class="quickmod">
 <input type="hidden" name="t" value="{TOPIC_ID}" />

 <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
 <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
 <label>{L_MOD_TOOLS}: </label>
 {S_SELECT_MOD}&nbsp;
 <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<div class="clear"></div>
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN show_permissions -->
 <div class="h3">{L_TABS_PERMISSIONS}</div>
 {S_AUTH_LIST}
<!-- END show_permissions -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->


Un peut de CSS a déposer dans votre feuille style:


Dans la feuille de style:

Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutez ceci:

Code:

/*on cache l image en ligne*/
div[id^="p"][class*="post--"].online {background-image:none!important;}
/*on ajoute un espace entre chaque message*/
div[id^="p"][class*="post--"]{margin-top:30px}
/*on donne une apparence sur la barre*/
.M14_barre_viewtopic{height:30px;line-height:30px;background:#333;color:#fff!important;position:relative;top:-25px;left:-10px;letter-spacing:1px;padding: 6px 10px 6px;width:100%;border-radius: 5px 5px 0px 0px;}
/* on oblige un display inline block et un margin a 0 sur les titres de messages*/
.M14_barre_viewtopic h2{display:inline-block!important;margin:0px!important;}
/*on donne une apparence sur le lien du titre du sujet*/
.M14_viewtopic_href{color:#fff!important;font-size:15px;position: relative;top: -3px;}
/*on donne une apparence sur le nombre de messages*/
.M14_barre_num{float:right;margin-right: 20px;color:#fff!important;font-size:15px;}

/* Les boutons Hors ligne et Hors ligne*/
div[id^="p"][class*="post--"] dl:before {
position: absolute;
height: 26px;
line-height: 26px;
top: -30px;
text-align:center;
}
/*profil a droite*/
div[id^="p"][class*="post--"] .float-right dl:before {left:-1px;right:-10px;}
/*profil a gauche*/
div[id^="p"][class*="post--"] .float-left dl:before {left:-10px;right:-1px;}
  
/*Le bouton Hors ligne*/
div[id^="p"][class*="post--"]:not(.online) dl:before{content:"HORS LIGNE";color:#fff;background:#A92E13;opacity:0.5;}
/*le bouton en ligne*/
div[id^="p"][class*="post--"].online dl:before{content: "EN LIGNE";background: #8b5;color:#fff;}



Pensez à cliquer sur le bouton Valider




Puis un script qui va déterminer si le profil est à gauche ou à droite afin de corriger la css pour le hors ligne et en ligne:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript Créer un nouveau javascript
Mettre un titre explicite.

Sur les sujets



Déposez ceci:


Code:


$(function(){
$('.postprofile ').each(function(){
var $this=$(this);
  $this.filter(function(){return $(this).css('float') === 'left';}).addClass('float-left');
  $this.filter(function(){return $(this).css('float') === 'right';}).addClass('float-right');
});});


Penses à cliquer sur le bouton Valider


Dernière édition par Milouze14 le Ven 1 Nov 2024 - 9:04, édité 7 fois (Raison : Corrections diverses + Ajout script profil à gauche ou à droite)

Bri, fred9545 et Freedom Sun aiment ce message

Chéryl
Chéryl
https://graphismelesangesden.forumactif.org/

MessageChéryl Lun 28 Oct 2024 - 9:09

c'est super , je cois que ça plait a certains membres

Milouze14, Bri, fred9545 et Freedom Sun aiment ce message

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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