[PUNBB] Codage qeel

croklivre Lun 25 Mai 2020 - 18:02

• Version du forum :
  PUNBB
• Templates modifiés :
  oui
• Navigateur :
  Firefox

Coucou,

serait-il possible d'avoir ce genre de qeel comme celui-ci?


Sauf j’aimerai beaucoup que le bloc en dessous reste transparent avec une bordure couleur #420400 avec un bandeau couleur #420400 pour écrire dans le bandeau Qui est en ligne en blanc.

A l'intérieur du bloc quatre carrés avec une bordure couleur #420400 et un bandeau un bandeau#420400  sur chacun pour écrire en blanc

Qui est en ligne
Statistiques
Groupes
Anniversaire


J'espère que c'est bien expliqué :)

Merci d'avance
Bisous

Milouze14 Lun 25 Mai 2020 - 18:14

croklivre Lun 25 Mai 2020 - 18:32

Recoucou Phil,

le template n'a pas été modifié.

Pour l'ordre des carrés :

Qui est en ligne  Statistiques

Groupes            Anniversaire

Milouze14 Lun 25 Mai 2020 - 18:36

croklivre Lun 25 Mai 2020 - 18:38

On part avec ce projet alors. Tu t'y connais mieux que moi

Milouze14 Lun 25 Mai 2020 - 18:40

Oki , je reviens vers toi dès que j'ai terminé .

Milouze14 Lun 25 Mai 2020 - 19:16

Hum, au fait, qu'appelles tu un bandeau Christelle ?


En attendant , voici une ébauche:

Remplaces le contenu du template index_body:
Affichage/Templates/Général/index_body

Par celui-ci:

Code:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
         <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
         <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
      <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
   </ul>
   <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
   <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
   <!-- BEGIN message_admin_titre -->
   <div class="main-head">
      <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
   </div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
   <div id="pun-announcement">
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
   </div>
   <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label>  
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label>  
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>  
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />

        <!-- BEGIN switch_social_login -->
        <div class="mt10">
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                 
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
        </div>
        <!-- END switch_social_login -->
   </div>
</form>
</div>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
 
<div class="M14_qeel stats">
  <span class="M14_titre">Les statistiques</span>
<p>{TOTAL_POSTS}</p>
<p>{TOTAL_USERS}</p>
<p>{NEWEST_USER}</p>
<p>{TOTAL_USERS_ONLINE}</p>
  <p>{LOGGED_IN_USER_LIST}</p>
</div>
 <div class="M14_qeel groupe">
 <span class="M14_titre">Groupes</span>
<p class="M14_groupes">{LEGEND} : {GROUP_LEGEND}<script type="text/javascript">$('.M14_groupes').each(function(){
$(this).html($(this).html().replace(/\[/g,"").replace(/\]/g,""));
});</script></p>
  </div>

<div class="M14_qeel online">
<span class="M14_titre">{L_WHO_IS_ONLINE}</span>
  <p>{L_CONNECTED_MEMBERS}</p>
</div>

  <div class="M14_qeel anniv">
<span class="M14_titre">Anniversaires</span>
 <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
  </div>

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

         

  </div>
      <!-- BEGIN switch_chatbox_activate -->
      <div id="onlinechat">
         <p class="page-bottom">
         {TOTAL_CHATTERS_ONLINE} : 
         {CHATTERS_LIST}<br />
         <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
               insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            </script>
         <!-- END switch_chatbox_popup -->
         </p>
      </div>
      <!-- END switch_chatbox_activate -->
   
</div>
<!-- END disable_viewonline -->

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label>  
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label>  
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>  
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />

        <!-- BEGIN switch_social_login -->
        <div class="mt10">
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                 
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
        </div>
        <!-- END switch_social_login -->
   </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<ul id="pun-legend">
   <li>
      <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /> {L_NEW_POSTS}
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /> {L_NO_NEW_POSTS}
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />&nbsp;{L_FORUM_LOCKED}
   </li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

Penses a enregistrer puis à valider en cliquant respectivement sur puis


Puis la css:


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


 
.M14_qeel.stats
{
  float: left;
margin-left: 30px;
width: 20%;
height: 20%;
padding:20px;
border:2px solid #420400 ;
}
.M14_qeel.groupe
{
float:right;
padding:20px;
border:2px solid #420400 ;
margin-left:30px;
width: 60%;
height: 20%;
}
.M14_qeel.online
{
float:right;
padding:20px;
border:2px solid #420400 ;
margin-left:30px;
width: 60%;
height: 20%;
  margin-top: 10px;
}
.M14_qeel.anniv
{
float:right;
padding:20px;
border:2px solid #420400 ;
margin-left:30px;
width: 60%;
height: 20%;
  margin-top:10px;
}
div[class^="M14_qeel"] span.M14_titre
{
font-style:italic; 
color:#5E9563;
font-size:20px;
    margin-top: -30px;
    background-color: white;
  position:absolute;
}


Penses a cliquer sur le bouton

croklivre Lun 25 Mai 2020 - 20:38

Ahhh. J'aime beaucoup l'ébauche.
Alors ce que j'appelle bandeau c'est comme ce tu as mis sur l'avatar le en ligne hors ligne. J’appelle ça un bandeau.


Phil.
Belle soirée.

Milouze14 Mar 26 Mai 2020 - 4:07

croklivre Mar 26 Mai 2020 - 11:42

Coucou Phil,

je suis épatée. ca fait super beau.

C'est possible de centrer ce qu'il y a tout en bas ?

c'est tout à gauche.

Milouze14 Mar 26 Mai 2020 - 15:19

Re Christelle,

merci , c'est toutjours agréable de le lire .

Pour centrer tout cela, on va ajouter ceci.


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


#pun-info.main
{
width: 80%;
margin-left: 10%;
padding: 30px 0px 30px 0px;
}


Penser a cliquer sur le bouton

croklivre Mar 26 Mai 2020 - 16:27

Milouze14 Mar 26 Mai 2020 - 16:30

Tu avais un truc qui empêché le bon fonctionnement.
Je viens de corriger Christelle.

J'ai totalement modifié les couleurs de fond.
Aimes tu cet affichage?
De plus j'en ai profité pour centrer ta barre tout en bas de ton fofo .

croklivre Mar 26 Mai 2020 - 16:39

Milouze14 Mar 26 Mai 2020 - 16:52

Milouze14 Mar 26 Mai 2020 - 17:01

croklivre Mar 26 Mai 2020 - 17:01

croklivre Mar 26 Mai 2020 - 17:03

Tu peux remettre en marron

Milouze14 Mar 26 Mai 2020 - 17:04

croklivre Mar 26 Mai 2020 - 17:06

Je dois faire souvent F5 pour avoir la déco actuelle.
On peut enlever l'espace vide qu'il y a tout en bas entre panneau admin et le bas du forum ?

Ah merci beaucoup. Du beau boulot.

Milouze14 Mar 26 Mai 2020 - 17:10

croklivre Mar 26 Mai 2020 - 17:16

Je vais regarder pour la couleur de fond. Faut que je trouve pour pas que les visiteurs et les membres aient mal aux yeux

Quand je vais sur le forum j'ai un fond blanc avant davoir le fond de page.

Milouze14 Mar 26 Mai 2020 - 17:23

croklivre Mar 26 Mai 2020 - 17:25

Milouze14 Mar 26 Mai 2020 - 17:26

Ah ben, je trouve cela mieux