KoalaVolant
Lun 13 Mai 2024 - 9:58
Version du forum : ModernBB
Ceci est un code appartenant à un thème complet. Vous pouvez
Voir le thème complet "Glassormophism"
Si vous utilisez d'autres codes de ce thème, vous n'avez pas besoin de recopier-coller la partie "couleurs".
Voir le thème complet "Glassormophism"
Si vous utilisez d'autres codes de ce thème, vous n'avez pas besoin de recopier-coller la partie "couleurs".
clique pour voir le survol
Particularités du code :
- Crédits : KoalaVolant
- Les images se redimensionnent toutes seules
- Les champs de profil apparaissent au survol de l'avatar
- Crédits : KoalaVolant
- Les images se redimensionnent toutes seules
- Les champs de profil apparaissent au survol de l'avatar
Couleurs & Fonts
- Pour rappel, ce code appartient à un thème complet. Si vous utilisez déjà d'autres codes de ce thème, vous pouvez esquiver cette partie. Elle concerne les couleurs, et les polices d'écriture.
Sinon : les couleurs sont à placer où vous voulez dans le CSS, mais quand vous les modifierez, elles se modifieront partout où les "variables" sont utilisées.
Ce code utilise un système de “variables de couleurs". En gros, vous modifiez les couleurs directement dans les variables, et elles se modifient partout où cette variable aura été placée.
Exemple : Si vous modifiez --color1:#fff; par --color1:black; tous les endroits du CSS qui possèdent --color1 en variable seront en noir.
Si l'agencement ne vous plais pas, vous pouvez bien sûr changer le nom des variables, changer qui a quel variable (changer color1 en color2).
Note : Si vous voulez qu’on modifie les codes pour vous, suivez un de ces boutons
Personnaliser mon code
Signaler un souci - Pour copier coller le ":root" il faut aller dans le Panneau d'administration > Affichage > Couleurs et CSS > Feuille de style CSS et copier coller ça :
- Code:
:root{
--color1:#C8BBDE;
--color2: #806E9F;
--font1:Montserrat;
--fond1: linear-gradient(90deg, #3C395B 50%, #3F2E3A 73.23%);
--fond2: rgba(103, 100, 148, 0.50);
--fond3: linear-gradient(180deg, rgba(201, 137, 190, 0.20) 0%, rgba(146, 131, 176, 0.16) 100%);
--fond3hover:linear-gradient(-180deg, rgba(201, 137, 190, 0.40) 0%, rgba(146, 131, 176, 0.40) 100%);
--fond4:rgba(255,255,255,0.3);
--fond5: rgba(156, 115, 144, 0.30);
--fond6: rgb(94,68,86);
--txt1:#DEDEDE;
--txt2:#E1BCDB;
--txt3:#fff;
--border1:#847FC1;
--border2: #AF86A3;
}
- Attention, la police d'écriture utilisées sur ce thème est "Montserrat". Elle est déjà installée dans le HTML, mais si vous voulez la changer, il suffit de remplacer ça :
- Code:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
HTML
- Avec le compte fondateur, il faut aller dans Panneau d'administration > Affichage > Templates > viewtopic_body
Appuyez sur la roue crantée pour le modifier - Copier coller ça à l'intérieur :
- 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>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<div class="sub-header">
<div class="sub-header-buttons">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="ion-edit button1">{L_POST_NEW_TOPIC}</a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}" class="ion-reply button1">{L_POST_REPLY_TOPIC}</a>
<!-- END switch_user_authreply -->
</div>
<div class="sub-header-path">
<a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
{NAV_CAT_DESC}
</div>
</div>
<div class="topic-actions">
<!-- BEGIN topicpagination -->
<div class="pagination">
{PAGINATION}
</div>
<!-- END topicpagination -->
</div>
{POLL_DISPLAY}
<!-- BEGIN postrow -->
<!-- BEGIN hidden -->
<div class="post {postrow.hidden.ROW_COUNT}">
<p style="text-align:center">{postrow.hidden.MESSAGE}</p>
</div>
<!-- END hidden -->
<!-- BEGIN displayed -->
<div id="p{postrow.displayed.U_POST_ID}" class="postotal 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 style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
<!-- DEBUT DE PROFIL -->
<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
<!-- div class="online2"></div-->
<!-- PROFIL GAUCHE -->
<div class="profiltotal">
<!-- AVATAR DE LA PERSONNE -->
<div class="postprofile-avatar">
{postrow.displayed.POSTER_AVATAR}
</div>
<!-- FIN AVATAR DE LA PERSONNE -->
<!-- RANG DE LA PERSONNE -->
<div class="postprofile-rank">
{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
</div>
<!-- FIN RANG DE LA PERSONNE -->
<!-- CHAMP PROFIL -->
<div class="labelprofile"><!-- 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}</div>
<!-- FIN CHAMP PROFIL -->
<div class="iconsmess">
{postrow.displayed.PROFILE_IMG}
{postrow.displayed.PM_IMG}
{postrow.displayed.EMAIL_IMG}
<!-- BEGIN contact_field -->
{postrow.displayed.contact_field.CONTENT}
<!-- END contact_field -->
</div>
</div>
</div>
<!-- INFOS PROFIL AVANT MESSAGE -->
<div class="infosprofil">
<!-- TITRE SUJET -->
<h1 class="page-title">
<a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</h1>
<!-- FIN SUJET -->
<div class="infosprofil-flex">
<!-- PSEUDO -->
<div class="postprofile-name">
{postrow.displayed.POSTER_NAME}
</div><!-- FIN PSEUDO -->
<!-- DATE -->
<div class="topic-date">
{postrow.displayed.POST_DATE_NEW}
<!-- BEGIN switch_vote_active -->
<div class="vote">
<!-- BEGIN switch_vote -->
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-plus-circled"></a>
<!-- END switch_vote -->
<!-- BEGIN switch_vote -->
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-minus-circled"></a>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
<div class="vote-bar-desc">
{postrow.displayed.switch_vote_active.L_VOTE_TITLE}
</div>
<div class="vote-bars">
<!-- BEGIN switch_vote_plus -->
<div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
<!-- END switch_vote_minus -->
</div>
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
<!-- END switch_no_bar -->
</div>
<!-- END switch_vote_active -->
<!-- FIN DATE --> </div>
<!-- FIN INFO FLEX --> </div>
<!-- FIN INFO PROFIL --> </div>
<!-- MESSAGE -->
<div class="postbody"><div class="post-head">
<!-- ICONS CITER EDITER ETC-->
<div class="buttonscontent"><ul class="profile-icons">
<li class="btn-thank">
<a href="{postrow.displayed.THANK_URL}">
<i class="ion-heart"></i>
</a>
</li>
<li class="btn-quote-multi">
<span onclick="{postrow.displayed.MULTIQUOTE_URL}" id="post_mq{TOPIC_ID}_{postrow.displayed.U_POST_ID}">
<i class="ion-quote"></i>
<i class="ion-ios-plus-empty"></i>
</span>
</li>
<li class="btn-quote">
<a href="{postrow.displayed.QUOTE_URL}">
<i class="ion-quote"></i>
</a>
</li>
<li class="btn-edit">
<a href="{postrow.displayed.EDIT_URL}">
<i class="ion-edit"></i>
</a>
</li>
<li class="btn-delete">
<a href="{postrow.displayed.DELETE_URL}">
<i class="ion-trash-a"></i>
</a>
</li>
<li class="btn-ip">
<a href="{postrow.displayed.IP_URL}">
<i class="ion-ios-information"></i>
</a>
</li>
<li class="btn-report">
{postrow.displayed.REPORT_IMG}
</li>
</ul>
</div></div>
<div class="content">
<div>{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">
<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 class="edited-message">
{postrow.displayed.EDITED_MESSAGE}
</div>
<!-- BEGIN switch_signature -->
<div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
<!-- END switch_signature -->
</div>
</div></div>
<!-- BEGIN first_post_br -->
<hr id="first-post-br" />
<!-- END first_post_br -->
<!-- END displayed -->
<!-- END postrow -->
</div>
<a name="bottomtitle"></a>
<div class="quick-nav-topics bottom">
<!-- BEGIN switch_isconnect -->
<a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
<!-- END switch_isconnect -->
<a href="#top">{L_BACK_TO_TOP}</a>
<!-- BEGIN switch_isconnect -->
<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
<!-- END switch_isconnect -->
</div>
<div class="topic-actions bottom">
<!-- BEGIN topicpagination -->
<div class="pagination">
{PAGINATION}
</div>
<!-- END topicpagination -->
<div class="topic-actions-buttons">
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
{S_WATCH_TOPIC}
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="ion-edit button1">{L_POST_NEW_TOPIC}</a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}" class="ion-reply button1">{L_POST_REPLY_TOPIC}</a>
<!-- END switch_user_authreply -->
</div>
</div>
<!-- BEGIN promot_trafic -->
<div class="block" id="ptrafic_close" style="display: none;">
<div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-plus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
</div>
<div class="block" id="ptrafic_open" style="display:'';">
<div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-minus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
<ul class="ptrafic">
<!-- BEGIN link -->
<li>
<a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">
<i class="ion-ios-chatbubble-outline"></i>{promot_trafic.link.TITLE}
</a>
</li>
<!-- END link -->
</ul>
</div>
<!-- END promot_trafic -->
<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
<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>
</div>
<!-- END switch_forum_rules -->
<div class="sub-header">
<div class="sub-header-buttons">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="ion-edit button1">{L_POST_NEW_TOPIC}</a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}" class="ion-reply button1">{L_POST_REPLY_TOPIC}</a>
<!-- END switch_user_authreply -->
</div>
<div class="sub-header-path">
<a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
{NAV_CAT_DESC}
</div>
</div>
<div class="topic-actions">
<!-- BEGIN topicpagination -->
<div class="pagination">
{PAGINATION}
</div>
<!-- END topicpagination -->
</div>
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->
<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}
<input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->
<!-- BEGIN show_permissions -->
<div class="block">
<div class="h3">{L_TABS_PERMISSIONS}</div>
{S_AUTH_LIST}
</div>
<!-- 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 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
$(document).ready(function() {
$('pre, code').each(function(i, block) {
hljs.highlightBlock(block);
});
$('.post').each(function() {
if (!$(this).find('.postprofile-avatar').html().length) {
$(this).find('.postprofile-rank').css('border-bottom', 'none');
$(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
}
});
});
</script>
- Validez une fois que c'est bon (il faut confirmer la modification une fois de retour dans la page des templates)
CSS
- Allez dans Panneau d'administration > Affichage > Couleurs & CSS > Feuille de style CSS
- Copier coller ça à l'intérieur et c'est tout :
- Code:
/* PROFIL ET MESSAGE */
/* Haut avant le message */
.sub-header{ display:flex; align-items:center; }
.sub-header-buttons{ float:none; width:34%; }
.sub-header-buttons a:before{ display:none; }
.sub-header-buttons a{ background:var(--fond1); padding:5px 10px;
box-shadow:none; font-family:var(--font1); font-weight:bold; }
.sub-header-buttons a:hover{ box-shadow:none; background:var(--fond2); }
.sub-header-path{ width:69%;
background:var(--fond2); color:var(--txt3); padding:5px; border-radius:5px; font-weight:bold;}
.sub-header-path .nav{ color:var(--txt3); font-family:var(--font1); display:flex; align-items:center;}
.sub-header-path .nav p{ line-height:12px; font-size:13px; }
.sub-header-path .nav:hover{ color:var(--txt2); }
.postotal{ font-family:var(--font1); background:none !important; display:flex; box-shadow:none; border:none; }
.postotal .postprofile{ width:30%; }
.postotal .postbody{ width:70%; margin-right:0;}
.profiltotal{ position:relative; z-index:85; left:0px;}
.profiltotal .postprofile-avatar img{ border-radius:0; border:none; box-shadow:none;
width:200px; height:320px; object-fit:cover; }
.profiltotal .postprofile-avatar{ width:220px; height:340px; padding:5px; padding-top:10px;
border-radius:10px; border:1px solid var(--border1); margin:0 auto; }
.profiltotal .postprofile-rank{ font-weight:bold; margin-top:10px; color:#E1BCBC; border:none; }
.profiltotal .labelprofile{ background:var(--fond6); color:var(--txt3); padding:10px;
width:200px; height:320px; overflow:auto; position:absolute; top:11px; left:10px; font-size:11px;
text-align:justify; transform:scale(0); transition:500ms;}
.profiltotal:hover .labelprofile{ transform:scale(1); transition:500ms; }
.profiltotal .labelprofile .label span{ color:var(--txt2) !important; }
.profiltotal .labelprofile img{ width:200px }
.profiltotal .iconsmess{ display:flex; justify-content:center; }
.profiltotal .iconsmess a{ margin:0 5px;}
.postotal{ position:relative; font-family:var(--font1); }
.postotal .infosprofil{ position:absolute; top:0; left:0; width:100%; padding:15px;
background:var(--fond3); border-radius:20px; z-index:80;}
.postotal .infosprofil h1.page-title{ margin-left:250px; font-family:var(--font1);
font-weight:bold; font-size:20px;
border:1px solid var(--txt2); border-radius:10px; padding:10px;}
.postotal .infosprofil h1.page-title a{ color:var(--txt2); }
.postotal .infosprofil .infosprofil-flex{ position:relative; display:flex; margin-left:250px;
margin-top:10px; justify-content:space-between; color:var(--txt1); align-items:center; }
.postotal .postbody{ margin-top:105px; position:relative; left:-3px; width:100%; }
.postotal .postbody .post-head{ border:none; display:flex; margin:0; padding:10px 0; }
.postotal .postbody .post-head .buttonscontent li{ background:var(--fond3); border-radius:5px; }
.postotal .postbody .post-head .buttonscontent li a{ color:var(--txt2); }
.postotal .postbody .content{ border-radius:10px; text-align:justify;
padding:20px; background:var(--fond2); color:var(--txt1); font-family:var(--font1); }
/* BAS DU FORUM */
.topic-actions.bottom, .topic-actions.bottom *{
font-family:var(--font1); color:var(--txt1); font-style:normal; }
.topic-actions.bottom .button1{ background:var(--fond2); }
#ptrafic_open{ background:var(--fond2);
font-style:normal; font-family:var(--font1); }
.h3{ color:var(--txt1) !important; border-color:var(--border1); }
#ptrafic_open a{ color:var(--txt1); }
input[type="submit"], .button, .button1, .button2{ background:var(--fond2); font-family:var(--font1); }
.block{ background:var(--fond2); color:var(--txt2); }
.block a{ color:var(--txt1); }