Membres connectés récemment
[PUNBB] Codage qeel
2 participants
Page 1 sur 2
Page 1 sur 2 • 1, 2
- 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
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
Hello Christelle,
dans un premier temps, il me faudrait le template index_body:
Affichage/Templates/Général/index_body
Seulement si ce dernier a été modifié :
Comment interpréter les templates?
Ensuite mettre le code (si modifié) entre les balises codes:
https://www.milouze14.com/t32647-comment-inserer-du-contenu-entre-les-balises-codes#621665
Pour le reste je verrais suivant ta version afin de s'y rapprocher le plus possible.
Edit:
comment veux tu positionner les 4 carrés (ordre) ?
dans un premier temps, il me faudrait le template index_body:
Affichage/Templates/Général/index_body
Seulement si ce dernier a été modifié :
Comment interpréter les templates?
Ensuite mettre le code (si modifié) entre les balises codes:
https://www.milouze14.com/t32647-comment-inserer-du-contenu-entre-les-balises-codes#621665
Pour le reste je verrais suivant ta version afin de s'y rapprocher le plus possible.
Edit:
comment veux tu positionner les 4 carrés (ordre) ?
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:
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:
Penses a cliquer sur le bouton
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}" /> {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
Coucou Christelle,
ce n'est pas un bandeau mais la bordure du haut dans ce cas.
Qui va être interprétée ainsi dans la css:
tu peux remplacer tous le style donné précédemment:
https://www.milouze14.com/t32666-punbb-codage-qeel#622041
Par celui-ci:
ce n'est pas un bandeau mais la bordure du haut dans ce cas.
Qui va être interprétée ainsi dans la css:
- Code:
border-top:20px solid #420400;
tu peux remplacer tous le style donné précédemment:
https://www.milouze14.com/t32666-punbb-codage-qeel#622041
Par celui-ci:
- Code:
/*DEBUT DU QEEL*/
/*TOUS LES BLOCS*/
div[class^="M14_qeel"]
{
padding:20px;
border-top:20px solid #420400;
border-right:2px solid #420400;
border-bottom:2px solid #420400;
border-left:2px solid #420400;
border-radius: 4px;
}
/*LE BLOC DES STATS*/
.M14_qeel.stats
{
float: left;
margin-top: 40px;
margin-left: 30px;
width: 20%;
height: 20%;
}
/*LE BLOC DES GROUPES*/
.M14_qeel.groupe
{
float:right;
margin-left:30px;
width: 60%;
height: 20%;
}
.M14_groupes b
{
text-transform: uppercase;
font-variant: small-caps;
}
.M14_groupes a[href^="/g"]
{
text-decoration:none!important;
}
/*LE BLOC QUI EST EN LIGNE*/
.M14_qeel.online
{
float:right;
margin-left:30px;
width: 60%;
height: 20%;
margin-top: 10px;
}
/*LE BLOC DES ANNIVERSAIRES*/
.M14_qeel.anniv
{
float:right;
margin-left:30px;
width: 60%;
height: 20%;
margin-top:10px;
}
/*LES LEGENDES*/
div[class^="M14_qeel"] span.M14_titre
{
background-color: #420400;
color: white;
font-size: 16px;
font-style: italic;
margin-top: -50px;
position: absolute;
padding: 2px 20px 0px 20px;
height: 20px;
border-radius: 4px;
}
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:
Penser a cliquer sur le bouton
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
Page 1 sur 2 • 1, 2
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum