Accueil
Créer un forumIndex flottant à gauche
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Index flottant à gauche
par AryaLestrange Lun 10 Aoû 2020 - 8:33
Détails techniques
Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 10/08/2020
Lien du forum : https://avada-kedavrarpg.forumactif.com
Description du problème
Bien le bonjour à vous
(ou bonsoir, tout dépendra de l'heure à laquelle vous verrez ce message)Je me permets une nouvelle fois de faire appel à vos services :3
Je souhaiterai vous demander de l'aide concernant dans un premier temps un ou deux réglages concernant mon index flottant sur l'index même du forum.
Voici dans un premier temps le code :
- Code:
<!-- En-tête de la page --> <meta charset="utf-8" /> <title>Barre informations à gauche</title> <style>
.fond {background-image:url(https://zupimages.net/up/20/26/yutx.png); background-repeat:no-repeat; width: 150px; height:372px;}
.titre {
background-color:#1c1716;
border: 1px solid #34170e;
width: 125px!important;
font-family: 'Baskervville', italic!important;
color: #6e6e6d;
font-size: 16px;
line-height: 11px;
padding: 5px;
font-weight: bold;
text-align: center;
margin: auto;
margin-top:-5px;}
.liens {background-color:#1c1716;
border: 1px solid #34170e;
width: 135px!important;
margin: auto;
margin-top:-5px;
height: 155px;
line-height: 12px;
font-weight:700;
text-align: center!important;
display: block;
flex-flow: wrap; /* retour à la ligne de chaque balise */
align-content: center; /* le contenu est centré verticalement */
justify-content: center; /* le contenu est centré horizontalement */}
.liens a{
font-family: 'Libre Baskerville', serif!important;
color: #6e6e6d;
font-size: 10px;
text-decoration:none;
}
.membreMois{width: 62px; height: 100px; margin:auto; margin-bottom:5px; overflow:hidden; position: relative; box-sizing:border-box; color: #041028; text-align:center; background-repeat:no-repeat; font-family: 'Baskervville', italic!important; font-size:12px;margin-left: 8px; display: inline-block;}
.membreMois img{display:block; width: 100%; height:100%;}
.membreMois p{position:absolute; top:0; left:0; opacity:0;transition:1s;background:#34170e; width: 100%; height: 100%; margin: 0; text-align:center; font-weight:500;
color: #6e6e6d; background-repeat:no-repeat; font-family: 'Baskervville', italic!important; font-size:11px;line-height: 11px;
}
.membreMois:hover p{opacity:1;}
.membreMois span{font-style:italic; font-size:10px; color: #786655; transition:0.5s; text-transform:lowercase;}
/* ---------- FIN BARRE GAUCHE INFOS ---------- */
</style>
<link href="https://fonts.googleapis.com/css2?family=Baskervville:ital@1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap" rel="stylesheet">
<div class="fond">
<br/>
<div class="titre">Les liens <span style="color: #786655">utiles</span></div><br/>
<div class="liens">
<a target="_blank" href="" >Règlement</a><br /> <a target="_blank" href="" >Contexte</a><br /> <a target="_blank" href="" >Bottin des avatars</a><br /> <a target="_blank" href="" >Postes vacants</a><br /> <a target="_blank" href="" >Annexes</a><br />
<a target="_blank" href="" >Partenariats</a><br /> <a target="_blank" href="" >Invités</a><br /> </div><br/>
<div class="titre">Membres du <span style="color: #786655">mois</span></div><br/>
<div class="membreMois" style="background: url(https://i.imgur.com/XbmXYoO.gif); background-size:350px; background-position: 45% 30%;">
<p><br/><br/><br />Eliott Fergusson<br /><span>Le Meilleur voteur</span></p></div>
<div class="membreMois" style="background: url(https://i.imgur.com/XbmXYoO.gif); background-size:350px; background-position: 45% 30%;">
<p><br /><br/><br/>Alexander Finnigan<br /><span>Le plus actif</span></p></div>
</div>
Ce code est en iframe dans le template overall-header que voici :
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<link href="https://fonts.googleapis.com/css2?family=Baskervville:ital@1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
<meta http-equiv="content-script-type" content="text/javascript"/>
<meta http-equiv="content-style-type" content="text/css"/>
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/>
<link rel="search" type="application/opensearchdescription+xml"
href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/>
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/>
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch (tickerDirParam) {
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function () {
$('#fa_ticker_content').css('display', 'block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0) {
$('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item) {
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert) {
var height_max = h_perso;
$('ul#fa_ticker_content li').each(function () {
if ($(this).height() > height_max) {
height_max = $(this).height();
}
});
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
} else {
$('ul#fa_ticker_content li:not(:first)').css('display', 'none');
$('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if (pm != null) {
pm.focus();
}
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if (report != null) {
report.focus();
}
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function () {
Ticker.start({
height: {switch_ticker.HEIGHT},
spacing: {switch_ticker.SPACING},
speed: {switch_ticker.SPEED},
direction: '{switch_ticker.DIRECTION}',
pause: {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready(function () {
$(window).resize(function () {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth / 2 - popupWidth / 2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align: center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function (i, s, o, g, r, a, m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})
(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
ga('send', 'pageview');
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
ga('bis.send', 'pageview');
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap"
rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt=""/> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br/>
<span>{hitskin_preview.U_INSTALL_THEME}<a
href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}"/>
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<style>@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}</style>
<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>
<div id="page-header">
<a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<iframe frameborder="0" src="https://avada-kedavrarpg.forumactif.com/h1-index" style="position:absolute; top: auto; left: 0;overflow: hidden; width: 170px; height: 390px;"></iframe> <div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
Comme vous pourrez le constater que je l'ai placé au centre de la page quelque soit l'ordinateur que nous pouvons emprunter. Je souhaiterai cependant savoir s'il est possible de le placer d'avantage comme sur ma maquette juste ici : https://www.zupimages.net/up/20/26/4b2p.png
J'ai une question qui émerge, est-il possible d'avoir un affichage identique sur mobile/ordinateur ?
Voici un forum où j'ai réussi à la placer correctement mais je ne sais pas comment m'y prendre : https://mimbulus-mimbletonia.forumactif.org/
J'ai ensuite une autre demande, comment puis-je avoir le même rendu que sur ma maquette au niveau des liens (liens utiles).
Pour conclure, j'ignore si vous avez la possibilité de me donner un avis sur le code en lui-même ? ça clarté ? y-a-t-il des choses en doublon qui sont inutiles ? ce genre de chose
D'avance merci à vous
Bonne journée
AryaLestrange- *
- Messages : 40
Inscrit(e) le : 14/06/2020 -
Re: Index flottant à gauche
par Invité Lun 10 Aoû 2020 - 18:38
Hello AryaLestrange,
pourquoi passer par une iframe,
tu peux placer le code html directement dans le template ainsi que la c.s.s:
Ensuite, il suffit de placer la div receveuse là tu le désires:
Exemple sur mon fofo de tests:
https://m14phpbb2.forumactif.org/
Ton template modifié (juste pour le code thml et la css, rien d'autre n'a été modifié):
Sur ordi, oui, ensuite la version mobile, je laisserais d'autres membres répondre car ce n'est pas ma tasse de thè.
Il va falloir me donner des détails car c'est un peu contradictoire cette histoire.
Si tu l'as fais sur un forum pourquoi demander de l'aide?
Sinon rien a dire sur ton code de mon côté
.
a++
pourquoi passer par une iframe,
tu peux placer le code html directement dans le template ainsi que la c.s.s:
Ensuite, il suffit de placer la div receveuse là tu le désires:
- Code:
.fond
{
background-image:url(https://zupimages.net/up/20/26/yutx.png);
background-repeat:no-repeat;
width: 150px;
height:372px;
position: absolute;
margin-left: 80%;
margin-top: 350px;
}
Exemple sur mon fofo de tests:
https://m14phpbb2.forumactif.org/
Ton template modifié (juste pour le code thml et la css, rien d'autre n'a été modifié):
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<link href="https://fonts.googleapis.com/css2?family=Baskervville:ital@1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
<meta http-equiv="content-script-type" content="text/javascript"/>
<meta http-equiv="content-style-type" content="text/css"/>
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/>
<link rel="search" type="application/opensearchdescription+xml"
href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/>
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/>
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch (tickerDirParam) {
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function () {
$('#fa_ticker_content').css('display', 'block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0) {
$('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item) {
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert) {
var height_max = h_perso;
$('ul#fa_ticker_content li').each(function () {
if ($(this).height() > height_max) {
height_max = $(this).height();
}
});
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
} else {
$('ul#fa_ticker_content li:not(:first)').css('display', 'none');
$('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if (pm != null) {
pm.focus();
}
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if (report != null) {
report.focus();
}
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function () {
Ticker.start({
height: {switch_ticker.HEIGHT},
spacing: {switch_ticker.SPACING},
speed: {switch_ticker.SPEED},
direction: '{switch_ticker.DIRECTION}',
pause: {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready(function () {
$(window).resize(function () {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth / 2 - popupWidth / 2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align: center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function (i, s, o, g, r, a, m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})
(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
ga('send', 'pageview');
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
ga('bis.send', 'pageview');
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap"
rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt=""/> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br/>
<span>{hitskin_preview.U_INSTALL_THEME}<a
href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}"/>
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<style>@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}</style>
<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>
<div id="page-header">
<a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div class="fond">
<br/>
<div class="titre">Les liens <span style="color: #786655">utiles</span></div><br/>
<div class="liens">
<a target="_blank" href="" >Règlement</a><br /> <a target="_blank" href="" >Contexte</a><br /> <a target="_blank" href="" >Bottin des avatars</a><br /> <a target="_blank" href="" >Postes vacants</a><br /> <a target="_blank" href="" >Annexes</a><br />
<a target="_blank" href="" >Partenariats</a><br /> <a target="_blank" href="" >Invités</a><br /> </div><br/>
<div class="titre">Membres du <span style="color: #786655">mois</span></div><br/>
<div class="membreMois" style="background: url(https://i.imgur.com/XbmXYoO.gif); background-size:350px; background-position: 45% 30%;">
<p><br/><br/><br />Eliott Fergusson<br /><span>Le Meilleur voteur</span></p></div>
<div class="membreMois" style="background: url(https://i.imgur.com/XbmXYoO.gif); background-size:350px; background-position: 45% 30%;">
<p><br /><br/><br/>Alexander Finnigan<br /><span>Le plus actif</span></p></div>
</div>
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
<style>
.fond
{
background-image:url(https://zupimages.net/up/20/26/yutx.png);
background-repeat:no-repeat;
width: 150px;
height:372px;
position: absolute;
margin-left: 80%;
margin-top: 350px;
}
.titre {
background-color:#1c1716;
border: 1px solid #34170e;
width: 125px!important;
font-family: 'Baskervville', italic!important;
color: #6e6e6d;
font-size: 16px;
line-height: 11px;
padding: 5px;
font-weight: bold;
text-align: center;
margin: auto;
margin-top:-5px;}
.liens {background-color:#1c1716;
border: 1px solid #34170e;
width: 135px!important;
margin: auto;
margin-top:-5px;
height: 155px;
line-height: 12px;
font-weight:700;
text-align: center!important;
display: block;
flex-flow: wrap; /* retour à la ligne de chaque balise */
align-content: center; /* le contenu est centré verticalement */
justify-content: center; /* le contenu est centré horizontalement */}
.liens a{
font-family: 'Libre Baskerville', serif!important;
color: #6e6e6d;
font-size: 10px;
text-decoration:none;
}
.membreMois{width: 62px; height: 100px; margin:auto; margin-bottom:5px; overflow:hidden; position: relative; box-sizing:border-box; color: #041028; text-align:center; background-repeat:no-repeat; font-family: 'Baskervville', italic!important; font-size:12px;margin-left: 8px; display: inline-block;}
.membreMois img{display:block; width: 100%; height:100%;}
.membreMois p{position:absolute; top:0; left:0; opacity:0;transition:1s;background:#34170e; width: 100%; height: 100%; margin: 0; text-align:center; font-weight:500;
color: #6e6e6d; background-repeat:no-repeat; font-family: 'Baskervville', italic!important; font-size:11px;line-height: 11px;
}
.membreMois:hover p{opacity:1;}
.membreMois span{font-style:italic; font-size:10px; color: #786655; transition:0.5s; text-transform:lowercase;}
/* ---------- FIN BARRE GAUCHE INFOS ---------- */
</style>
J'ai une question qui émerge, est-il possible d'avoir un affichage identique sur mobile/ordinateur ?
Sur ordi, oui, ensuite la version mobile, je laisserais d'autres membres répondre car ce n'est pas ma tasse de thè.
Voici un forum où j'ai réussi à la placer correctement mais je ne sais pas comment m'y prendre : https://mimbulus-mimbletonia.forumactif.org/
J'ai ensuite une autre demande, comment puis-je avoir le même rendu que sur ma maquette au niveau des liens (liens utiles).
Il va falloir me donner des détails car c'est un peu contradictoire cette histoire.
Si tu l'as fais sur un forum pourquoi demander de l'aide?
Sinon rien a dire sur ton code de mon côté
.a++
Invité- Invité
Re: Index flottant à gauche
par AryaLestrange Lun 10 Aoû 2020 - 19:07
Hello
Merci tout d'abord pour ton retour, je commence avec le dernier point : initialement le second code n'a pas été fait pas moi directement ni placé, je me suis mal exprimée, j'aurais plutôt dû dire qu'on a réussi à le faire pour moi sur mon autre fofo qui va fermer et non l'inverse alors que cet index c'est moi qui l'est fait
Je sais pas si c'est plus claire, car je ne savais pas réellement où le placer au début, sur mimbulus, il était dans une iframe dans le PA et non dans un template, mais sur ce forum, j'ai tenté de l'insérer à l'intérieure pour voir ce qui serait le plus pratique et le moins compliqué à modifier non seulement pour moi mais également pour ma co-admin.
vous pensez donc que ce serait mieux de le placer dans le template directement ?
Pour en revenir à ma maquette et au rendu, que puis-je faire pour avoir les liens au centre ? et pour placer d'avantage la page à gauche et au milieu entre le bord gauche et la page d’accueil ?
(encore merci pour ce point), j'attends un retour également par le biais d'un autre membre pour le rendu sur mobile au moins pour savoir si c'est ou non possible).
Sinon merci pour ton avis
Merci tout d'abord pour ton retour, je commence avec le dernier point : initialement le second code n'a pas été fait pas moi directement ni placé, je me suis mal exprimée, j'aurais plutôt dû dire qu'on a réussi à le faire pour moi sur mon autre fofo qui va fermer et non l'inverse alors que cet index c'est moi qui l'est fait
Je sais pas si c'est plus claire, car je ne savais pas réellement où le placer au début, sur mimbulus, il était dans une iframe dans le PA et non dans un template, mais sur ce forum, j'ai tenté de l'insérer à l'intérieure pour voir ce qui serait le plus pratique et le moins compliqué à modifier non seulement pour moi mais également pour ma co-admin.
vous pensez donc que ce serait mieux de le placer dans le template directement ?
Pour en revenir à ma maquette et au rendu, que puis-je faire pour avoir les liens au centre ? et pour placer d'avantage la page à gauche et au milieu entre le bord gauche et la page d’accueil ?
(encore merci pour ce point), j'attends un retour également par le biais d'un autre membre pour le rendu sur mobile au moins pour savoir si c'est ou non possible).
Sinon merci pour ton avis
AryaLestrange- *
- Messages : 40
Inscrit(e) le : 14/06/2020 -
Re: Index flottant à gauche
par Invité Lun 10 Aoû 2020 - 19:22
Re ,
Ce n'est que mon avis, mais perso, c'est plus facile de jouer avec une div qu'une iframe.
en déposant un height auto:
et supprimer ceci:
Hum, je ne connais pas le visu de ton forum et encore moins la page d'accueil:
J'ai répondu ici:
https://forum.forumactif.com/t403799-index-flottant-a-gauche#3368286
Il faut diminuer ces valeurs:
a++
,vous pensez donc que ce serait mieux de le placer dans le template directement ?
Ce n'est que mon avis, mais perso, c'est plus facile de jouer avec une div qu'une iframe.
Il faut modifier le style de cette class:que puis-je faire pour avoir les liens au centre ?
- Code:
.liens
en déposant un height auto:
et supprimer ceci:
- Code:
display: block;
flex-flow: wrap;
align-content: center;
justify-content: center;
- Code:
.liens {
background-color: #1c1716;
border: 1px solid #34170e;
width: 135px !important;
margin: auto;
margin-top: auto;
margin-top: -5px;
max-height: 155px;
line-height: 12px;
font-weight: 700;
text-align: center !important;
padding: 2px;
}
Pour en revenir à ma maquette et au rendu, que puis-je faire pour avoir les liens au centre ? et pour placer d'avantage la page à gauche et au milieu entre le bord gauche et la page d’accueil ?
Hum, je ne connais pas le visu de ton forum et encore moins la page d'accueil:
J'ai répondu ici:
https://forum.forumactif.com/t403799-index-flottant-a-gauche#3368286
Milouze14 a écrit:
Ensuite, il suffit de placer la div receveuse là tu le désires:
- Code:
.fond
{
background-image:url(https://zupimages.net/up/20/26/yutx.png);
background-repeat:no-repeat;
width: 150px;
height:372px;
position: absolute;
margin-left: 80%;
margin-top: 350px;
}
Il faut diminuer ces valeurs:
- Code:
margin-left: 80%;
margin-top: 350px;
a++
Invité- Invité
Re: Index flottant à gauche
par AryaLestrange Lun 10 Aoû 2020 - 19:51
Merci
J'ai écouté tes conseils
j'ai tout mis dans le template
N'y-a-t-il pas un code css à mettre dans la partie fonds pour placer les éléments à gauche ? (exactement comme là mais à gauche et un peu plus haut > je dois bouger le margin-top que tu as indiqué ? et le margin-left ?)
j'attends pour le rendu sur mobile (si certains connaissent la réponse)
merci
J'ai écouté tes conseils
j'ai tout mis dans le template
N'y-a-t-il pas un code css à mettre dans la partie fonds pour placer les éléments à gauche ? (exactement comme là mais à gauche et un peu plus haut > je dois bouger le margin-top que tu as indiqué ? et le margin-left ?)
j'attends pour le rendu sur mobile
(si certains connaissent la réponse)merci
AryaLestrange- *
- Messages : 40
Inscrit(e) le : 14/06/2020 -
Re: Index flottant à gauche
par Invité Lun 10 Aoû 2020 - 20:03
Re,
testes ceci:
Il faut jouer avec les valeurs du margin-left (en pourcentage)
et les valeurs du margin-top (en px)
a++
testes ceci:
- Code:
.fond
{
background-image:url(https://zupimages.net/up/20/26/yutx.png);
background-repeat:no-repeat;
width: 150px;
height:372px;
position: absolute;
margin-left: 15%;
margin-top: 130px;
}
Il faut jouer avec les valeurs du margin-left (en pourcentage)
et les valeurs du margin-top (en px)
a++
Invité- Invité
Re: Index flottant à gauche
par AryaLestrange Lun 10 Aoû 2020 - 20:56
Merci :p
Je pense déclarer forfait pour la soirée car je vois même plus mon header aléatoire qui apparaît :/
je sais pas ce qu'il se passe :/
bref, je tente de revoir demain :=à
Je pense déclarer forfait pour la soirée car je vois même plus mon header aléatoire qui apparaît :/
je sais pas ce qu'il se passe :/
bref, je tente de revoir demain :=à
AryaLestrange- *
- Messages : 40
Inscrit(e) le : 14/06/2020 -
Re: Index flottant à gauche
par Invité Mar 11 Aoû 2020 - 8:02
Hello AryaLestrange,
tes images sont très lourdes 1,5 mo environ chacune.
Le script n'est pas fonctionnel sur mon fofo de tests, utilises plutôt celui-ci:
https://forum.forumactif.com/t223082-banniere-aleatoire-ou-defilante#2064775
Ensuite on peut mettre le code html dans un script
car les admins n'ont pas accès aux templates.
Puis le script va s'occuper de déposer le contenu dans la div présente dans le template.
Je me suis permis de modifier la class (trop banale et afin de ne pas déposer le contenu dans une autre div ayant le même nom, je l'ai renommé en "Widget_fond".
Ton template modifié( avec aussi l'effet au survol des liens
Pour que le hover fonctionne ,
il faut supprimer le hack "!important" dans la feuille de style:
Puis le script:
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposes ceci:
Penses à cliquer sur le bouton VALIDER
a++
tes images sont très lourdes 1,5 mo environ chacune.
Le script n'est pas fonctionnel sur mon fofo de tests, utilises plutôt celui-ci:
https://forum.forumactif.com/t223082-banniere-aleatoire-ou-defilante#2064775
- Code:
$(function() {
var a = ["https://www.zupimages.net/up/20/24/ozq5.png", "https://www.zupimages.net/up/20/24/naak.png",];
$('#logo img').attr("src", a[Math.floor(Math.random() * a.length)])
});
Ensuite on peut mettre le code html dans un script
car les admins n'ont pas accès aux templates.
Puis le script va s'occuper de déposer le contenu dans la div présente dans le template.
Je me suis permis de modifier la class (trop banale et afin de ne pas déposer le contenu dans une autre div ayant le même nom, je l'ai renommé en "Widget_fond".
Ton template modifié( avec aussi l'effet au survol des liens
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<link href="https://fonts.googleapis.com/css2?family=Baskervville:ital@1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
<meta http-equiv="content-script-type" content="text/javascript"/>
<meta http-equiv="content-style-type" content="text/css"/>
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/>
<link rel="search" type="application/opensearchdescription+xml"
href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/>
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/>
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch (tickerDirParam) {
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function () {
$('#fa_ticker_content').css('display', 'block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0) {
$('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item) {
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert) {
var height_max = h_perso;
$('ul#fa_ticker_content li').each(function () {
if ($(this).height() > height_max) {
height_max = $(this).height();
}
});
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
} else {
$('ul#fa_ticker_content li:not(:first)').css('display', 'none');
$('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if (pm != null) {
pm.focus();
}
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if (report != null) {
report.focus();
}
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function () {
Ticker.start({
height: {switch_ticker.HEIGHT},
spacing: {switch_ticker.SPACING},
speed: {switch_ticker.SPEED},
direction: '{switch_ticker.DIRECTION}',
pause: {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready(function () {
$(window).resize(function () {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth / 2 - popupWidth / 2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align: center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function (i, s, o, g, r, a, m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})
(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
ga('send', 'pageview');
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
ga('bis.send', 'pageview');
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap"
rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt=""/> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br/>
<span>{hitskin_preview.U_INSTALL_THEME}<a
href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}"/>
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<style>@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}</style>
<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>
<div id="page-header">
<a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div class="Widget_fond"></div>
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
<style>
.Widget_fond
{
background-image:url(https://zupimages.net/up/20/26/yutx.png);
background-repeat:no-repeat;
width: 150px;
height:372px;
position: absolute;
margin-left: 80%;
margin-top: 350px;
}
.titre {
background-color:#1c1716;
border: 1px solid #34170e;
width: 125px!important;
font-family: 'Baskervville', italic!important;
color: #6e6e6d;
font-size: 16px;
line-height: 11px;
padding: 5px;
font-weight: bold;
text-align: center;
margin: auto;
margin-top:-5px;}
.liens
{background-color:#1c1716;
border: 1px solid #34170e;
width: 135px!important;
margin: auto;
margin-top:-5px;
height:auto;
padding:2px;
line-height: 12px;
font-weight:700;
text-align: center!important;
/*display: block;*/
/*flex-flow: wrap;*/
/* retour à la ligne de chaque balise */
align-content: center; /* le contenu est centré verticalement */
justify-content: center; /* le contenu est centré horizontalement */
}
.liens a
{
font-family: 'Libre Baskerville', serif!important;
color:#6e6e6d;
font-size: 10px;
text-decoration:none;
transition: color 0.5s ease-in;
}
.liens a:hover{color:#EF59F6!important;}
.membreMois{width: 62px; height: 100px; margin:auto; margin-bottom:5px; overflow:hidden; position: relative; box-sizing:border-box; color: #041028; text-align:center; background-repeat:no-repeat; font-family: 'Baskervville', italic!important; font-size:12px;margin-left: 8px; display: inline-block;}
.membreMois img{display:block; width: 100%; height:100%;}
.membreMois p{position:absolute; top:0; left:0; opacity:0;transition:1s;background:#34170e; width: 100%; height: 100%; margin: 0; text-align:center; font-weight:500;
color: #6e6e6d; background-repeat:no-repeat; font-family: 'Baskervville', italic!important; font-size:11px;line-height: 11px;
}
.membreMois:hover p{opacity:1;}
.membreMois span{font-style:italic; font-size:10px; color: #786655; transition:0.5s; text-transform:lowercase;}
/* ---------- FIN BARRE GAUCHE INFOS ---------- */
</style>
Pour que le hover fonctionne ,
il faut supprimer le hack "!important" dans la feuille de style:
- Code:
a:link
{
color: #9A9C9B!important;
font-family: 'Baskervville', italic;
font-size: 11px;
font-weight: bold;
}
Puis le script:
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposes ceci:
- Code:
$(function(){
var t='<br/>
<div class="titre">Les liens <span style="color: #786655">utiles</span></div><br/>
<div class="liens">
<a class="M14_link" target="_blank" href="/faq" >Règlement</a><br />
<a class="M14_link" target="_blank" href="" >Contexte</a><br />
<a class="M14_link" target="_blank" href="" >Bottin des avatars</a><br />
<a class="M14_link" target="_blank" href="" >Postes vacants</a><br />
<a class="M14_link" target="_blank" href="" >Annexes</a><br />
<a class="M14_link" target="_blank" href="" >Partenariats</a><br />
<a class="M14_link" target="_blank" href="" >Invités</a><br /> </div><br/>
<div class="titre">Membres du <span style="color: #786655">mois</span></div><br/>
<div class="membreMois" style="background: url(https://i.imgur.com/XbmXYoO.gif); background-size:350px; background-position: 45% 30%;">
<p><br/><br/><br />Eliott Fergusson<br /><span>Le Meilleur voteur</span></p>
</div>
<div class="membreMois" style="background: url(https://i.imgur.com/XbmXYoO.gif); background-size:350px; background-position: 45% 30%;">
<p><br /><br/><br/>Alexander Finnigan<br /><span>Le plus actif</span></p></div>';
$('.Widget_fond').html(t);
});
Penses à cliquer sur le bouton VALIDER
a++
Invité- Invité
Re: Index flottant à gauche
par AryaLestrange Mar 11 Aoû 2020 - 10:20
Coucou
Je m'excuse pour hier, j'étais complètement crevée et du coup je savais plus ce que je faisais
Il s'avère que le JS relatif à mon QEEL faisait buguer le header du coup au bout du compte, je l'ai modifié et remplacer de tel sorte à ce qu'il ne bugue plus enfin pour partie car du coup l'avatar du dernier inscrit n'apparaît plus, mais je vais retravailler ce que tu m'as suggéré pour l'index dans le template
Du coup je m'excuse pour la frayeur que j'ai eu ^^ tout fonctionne tel que tu me l'as suggéré
J'ai pas encore beaucoup les idées claires, pourrais-tu davantage m'expliquer ton dernier post ? cela concerne quelle partie ? c'est pour alléger la page ?
merci
Je m'excuse pour hier, j'étais complètement crevée et du coup je savais plus ce que je faisais
Il s'avère que le JS relatif à mon QEEL faisait buguer le header du coup au bout du compte, je l'ai modifié et remplacer de tel sorte à ce qu'il ne bugue plus enfin pour partie car du coup l'avatar du dernier inscrit n'apparaît plus, mais je vais retravailler ce que tu m'as suggéré pour l'index dans le template
Du coup je m'excuse pour la frayeur que j'ai eu ^^ tout fonctionne tel que tu me l'as suggéré
J'ai pas encore beaucoup les idées claires, pourrais-tu davantage m'expliquer ton dernier post ? cela concerne quelle partie ? c'est pour alléger la page ?
merci
AryaLestrange- *
- Messages : 40
Inscrit(e) le : 14/06/2020 -
Re: Index flottant à gauche
par Invité Mar 11 Aoû 2020 - 10:41
Re,
ah ben vi, je n'en ai pas dormi de la nuit
,
ne t'excuses pas, cela m'arrive aussi .
Tu n'as qu'à me donner le template .
Alors pour en revenir à mes modifications:
Dans le template, je n'ai déposé que la div receveuse en modifiant la class (modifié aussi pour le style) :
Pourquoi cette modification?
Tout simplement pour que le ou les admins puissent aussi faire des modifications sur le code html
fournit dans le script.
Seul le fondateur du forum à accès aux templates.
Ensuite au survol des liens , le style suivant dans ta feuille de style:
Il faut supprimer le hack "!important" afin d'avoir l'effet au survol avec la transition.
J’espère avoir était plus clair cette fois ci.
a++
Je m'excuse pour hier, j'étais complètement crevée et du coup je savais plus ce que je faisais
ah ben vi, je n'en ai pas dormi de la nuit
, ne t'excuses pas, cela m'arrive aussi
.Il s'avère que le JS relatif à mon QEEL faisait buguer le header du coup au bout du compte, je l'ai modifié et remplacer de tel sorte à ce qu'il ne bugue plus enfin pour partie car du coup l'avatar du dernier inscrit n'apparaît plus,
Tu n'as qu'à me donner le template
.Alors pour en revenir à mes modifications:
Dans le template, je n'ai déposé que la div receveuse en modifiant la class (modifié aussi pour le style) :
- Code:
<div class="Widget_fond"></div>
Pourquoi cette modification?
Tout simplement pour que le ou les admins puissent aussi faire des modifications sur le code html
fournit dans le script.
Seul le fondateur du forum à accès aux templates.
Ensuite au survol des liens , le style suivant dans ta feuille de style:
Il faut supprimer le hack "!important" afin d'avoir l'effet au survol avec la transition.
- Code:
a:link
{
color: #9A9C9B!important;
font-family: 'Baskervville', italic;
font-size: 11px;
font-weight: bold;
}
J’espère avoir était plus clair cette fois ci.
a++
Invité- Invité
Re: Index flottant à gauche
par AryaLestrange Mar 11 Aoû 2020 - 11:02
Je vois xD
moi ça va j'ai très bien dormi
Pour en revenir à mon index, j'ai suivi les instructions pour placer les éléments dans le template, j'avais du coup ce rendu qui sortait comme je le souhaitais :
Si je comprends bien, il est préférable que je le modifie de nouveau pour que les admins puissent modifier ? Alors sur ce point, nous ne serons que deux donc deux à avoir accès au compte fondateur, mais je peux faire l'essai
Puis-je le laisser ainsi ? il me convient parfaitement je chercherai juste à plus centrer les membres du mois avec le bloc mais rien d'autres, je m'excuse du coup pour l'éventuel temps perdu
je pense clore cette demande qui est pour moi régler
j'en profite du coup pour faire régler cette histoire de QEEL si tu as du temps bien évidemment :
JS :
petit plus j'ai deux questions concernant mes catégories :
> je ne parviens pas à faire des retours à la ligne pour certaines catégories (j'ai suivi un tuto sur NU pour retirer de base les virgules car j'en avais et voilà le rendu) :/
> comment faire des retours à la ligne quand tes postes datent par exemple d'hier et que du coup j'ai le pseudo collé avec la date du message ?
> autre point que jeviens de faire : https://avada-kedavrarpg.forumactif.com/t2-second-test#8 dernier post, comment régler la possibilité de c/c le code et d'arranger l'intérieure et le contenu ?
encore merci je pourrai clôturer ensuite je pense :3
moi ça va j'ai très bien dormi
Pour en revenir à mon index, j'ai suivi les instructions pour placer les éléments dans le template, j'avais du coup ce rendu qui sortait comme je le souhaitais :
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<link href="https://fonts.googleapis.com/css2?family=Baskervville:ital@1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
<meta http-equiv="content-script-type" content="text/javascript"/>
<meta http-equiv="content-style-type" content="text/css"/>
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/>
<link rel="search" type="application/opensearchdescription+xml"
href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/>
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/>
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch (tickerDirParam) {
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function () {
$('#fa_ticker_content').css('display', 'block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0) {
$('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item) {
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert) {
var height_max = h_perso;
$('ul#fa_ticker_content li').each(function () {
if ($(this).height() > height_max) {
height_max = $(this).height();
}
});
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
} else {
$('ul#fa_ticker_content li:not(:first)').css('display', 'none');
$('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if (pm != null) {
pm.focus();
}
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if (report != null) {
report.focus();
}
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function () {
Ticker.start({
height: {switch_ticker.HEIGHT},
spacing: {switch_ticker.SPACING},
speed: {switch_ticker.SPEED},
direction: '{switch_ticker.DIRECTION}',
pause: {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready(function () {
$(window).resize(function () {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth / 2 - popupWidth / 2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align: center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function (i, s, o, g, r, a, m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})
(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
ga('send', 'pageview');
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
ga('bis.send', 'pageview');
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap"
rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt=""/> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br/>
<span>{hitskin_preview.U_INSTALL_THEME}<a
href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}"/>
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<style>@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}</style>
<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>
<div id="page-header">
<a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div class="fond">
<br/>
<div class="titre">Les liens <span style="color: #786655">utiles</span></div><br/>
<div class="liens">
<a target="_blank" href="" >Règlement</a><br /> <a target="_blank" href="" >Contexte</a><br /> <a target="_blank" href="" >Bottin des avatars</a><br /> <a target="_blank" href="" >Postes vacants</a><br /> <a target="_blank" href="" >Annexes</a><br />
<a target="_blank" href="" >Partenariats</a><br /> <a target="_blank" href="" >Invités</a><br /> </div><br/>
<div class="titre">Membres du <span style="color: #786655">mois</span></div><br/>
<div class="membreMois" style="background: url(https://i.imgur.com/XbmXYoO.gif); background-size:350px; background-position: 45% 30%;">
<p><br/><br/><br />Eliott Fergusson<br /><span>Le Meilleur voteur</span></p></div>
<div class="membreMois" style="background: url(https://i.imgur.com/XbmXYoO.gif); background-size:350px; background-position: 45% 30%;">
<p><br /><br/><br/>Alexander Finnigan<br /><span>Le plus actif</span></p></div>
</div>
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
<style>
.fond
{
background-image:url(https://zupimages.net/up/20/26/yutx.png);
background-repeat:no-repeat;
width: 150px;
height:300px;
position: absolute;
margin-left: 5%;
margin-top: 135px;
}
.titre {
background-color:#1c1716;
border: 1px solid #34170e;
width: 135px!important;
font-family: 'Baskervville', italic!important;
color: #6e6e6d;
font-size: 16px;
line-height: 11px;
padding: 5px;
font-weight: bold;
text-align: center;
margin: auto;
margin-top:-5px;}
.liens {
background-color: #1c1716;
border: 1px solid #34170e;
width: 135px !important;
margin: auto;
margin-top: auto;
margin-top: -5px;
max-height: 155px;
line-height: 12px;
font-weight: 700;
text-align: center !important;
padding: 2px;
}
.liens a{
font-family: 'Libre Baskerville', serif!important;
color: #6e6e6d;
font-size: 10px;
text-decoration:none;
}
.membreMois{width: 62px; height: 100px; margin:auto; margin-bottom:5px; overflow:hidden; position: relative; box-sizing:border-box; color: #041028; text-align:center; background-repeat:no-repeat; font-family: 'Baskervville', italic!important; font-size:12px;margin-left: 8px; display: inline-block;}
.membreMois img{display:block; width: 100%; height:100%;}
.membreMois p{position:absolute; top:0; left:0; opacity:0;transition:1s;background:#34170e; width: 100%; height: 100%; margin: 0; text-align:center; font-weight:500;
color: #6e6e6d; background-repeat:no-repeat; font-family: 'Baskervville', italic!important; font-size:11px;line-height: 11px;
}
.membreMois:hover p{opacity:1;}
.membreMois span{font-style:italic; font-size:10px; color: #786655; transition:0.5s; text-transform:lowercase;}
/* ---------- FIN BARRE GAUCHE INFOS ---------- */
</style>
Si je comprends bien, il est préférable que je le modifie de nouveau pour que les admins puissent modifier ? Alors sur ce point, nous ne serons que deux donc deux à avoir accès au compte fondateur, mais je peux faire l'essai
Puis-je le laisser ainsi ? il me convient parfaitement
je chercherai juste à plus centrer les membres du mois avec le bloc mais rien d'autres, je m'excuse du coup pour l'éventuel temps perdu je pense clore cette demande qui est pour moi régler
j'en profite du coup pour faire régler cette histoire de QEEL si tu as du temps bien évidemment :
- Code:
<div class="lienscategories"><ul class="linklist top">
<!-- BEGIN switch_user_logged_in -->
<li>
<a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
</li>
<li>
<a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
</li>
<!-- END switch_user_logged_in -->
<li>
<a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
</li>
<!-- BEGIN switch_user_logged_in -->
<li>
<a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
</li>
<!-- END switch_user_logged_in -->
</ul></div>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<center><div class="title" width="683px" height="51px">{catrow.tablehead.L_FORUM}</div></center>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<center><div class="categorie">
<dl class="imgcategorie" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
<dd class="dterm1">
<div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
<div class="sousforum"> <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</div>
<div class="descriptionforum">{catrow.forumrow.FORUM_DESC}</div>
<div class="listeforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
</div>
</dd>
<div class="avatardernierposteur"> <!-- BEGIN avatar -->
<div class="avatardernierposteur" style="border: 1px solid #34170e;">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
<!-- END avatar --> </div>
<div class="derniermessage">
<a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
{catrow.forumrow.ads.DATE}<br />
{catrow.forumrow.ads.LOCATION}
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>{catrow.forumrow.USER_LAST_POST}<br/></div>
<div class="nbsujetsmessages">{catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn> et {catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn></div>
</center>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
<!-- END tablefoot -->
<!-- END catrow -->
<div class="lienscategories"><div style="margin-left: 100px";>
<!-- BEGIN switch_on_index -->
<ul class="linklist bottom">
<li>
<a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
</li>
<li>
<a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
</li>
<li>
<a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
</li>
<!-- BEGIN switch_delete_cookies -->
<li>
<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
</li>
<!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->
</div> </div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var btn_collapse = $('<div></div>', {
class: 'btn-collapse'
});
var btn_collapse_show = $('<i></i>', {
class: 'ion-android-add-circle hidden',
'data-tooltip': '{L_EXPEND_CAT}'
}).appendTo(btn_collapse);
var btn_collapse_hide = $('<i></i>', {
class: 'ion-android-remove-circle',
'data-tooltip': '{L_HIDE_CAT}'
}).appendTo(btn_collapse);
var collapsed = [];
if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
collapsed = readCookie('collapsed').split(',');
}
$(document).on('click', '.btn-collapse', function() {
$(this).children('.ion-android-add-circle').toggleClass('hidden');
$(this).children('.ion-android-remove-circle').toggleClass('hidden');
$(this).parents('.forabg').toggleClass('hidden');
if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
collapsed = readCookie('collapsed').split(',');
}
if (!$(this).parents('.forabg').hasClass('hidden')) {
removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);
createCookie('collapsed', collapsed);
} else {
collapsed.push('' + $(this).parents('.forabg').data('cindex'));
createCookie('collapsed', collapsed);
}
});
$('.forabg').each(function(i) {
$(this).data('cindex', '' + i);
$(btn_collapse)
.clone()
.attr('id', 'forabg' + i)
.appendTo($(this).find('.header'));
if ($.inArray('' + i, collapsed) > -1) {
$(this).toggleClass('hidden');
$('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
$('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
}
});
});
function removeFromArray(item, array) {
var i = array.indexOf(item);
if (i > -1) {
array = array.splice(i, 1);
}
}
function createCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = encodeURIComponent(name) + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
}
return null;
}
//]]>
</script>
JS :
- Code:
$(document).ready(function() {
var classes = ["https://www.zupimages.net/up/20/24/ozq5.png", "https://www.zupimages.net/up/20/24/naak.png", ];
$('#logo').find('img').attr('src', classes[~~(Math.random() * classes.length)])
});
$(function() {
var lastMember = $("#dernier_membre a[href^='/u']")[0];
if (lastMember != null) {
$.get(lastMember.href, function(d) {
(a = $("#avatar_membre img", $(d))).length && $("#avatar_dernier_membre").html(a)
})
}
});
petit plus j'ai deux questions concernant mes catégories :
> je ne parviens pas à faire des retours à la ligne pour certaines catégories (j'ai suivi un tuto sur NU pour retirer de base les virgules car j'en avais et voilà le rendu) :/
> comment faire des retours à la ligne quand tes postes datent par exemple d'hier et que du coup j'ai le pseudo collé avec la date du message ?
> autre point que jeviens de faire : https://avada-kedavrarpg.forumactif.com/t2-second-test#8 dernier post, comment régler la possibilité de c/c le code et d'arranger l'intérieure et le contenu ?
encore merci
je pourrai clôturer ensuite je pense :3
AryaLestrange- *
- Messages : 40
Inscrit(e) le : 14/06/2020 -
Re: Index flottant à gauche
par AryaLestrange Mar 11 Aoû 2020 - 13:09
Double poste :
Tout est réglé j'attends juste un retour d'un membre pour savoir si je peux regler l'apparence sur mobile ? Pour pas que ça se chevauche ou autre
Merci :3
Tout est réglé j'attends juste un retour d'un membre pour savoir si je peux regler l'apparence sur mobile ? Pour pas que ça se chevauche ou autre
Merci :3
AryaLestrange- *
- Messages : 40
Inscrit(e) le : 14/06/2020 -
Re: Index flottant à gauche
par Chacha Lun 17 Aoû 2020 - 9:31
 | Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu » |
Chacha- Modéractif
-
Messages : 69440
Inscrit(e) le : 21/08/2010 -
Re: Index flottant à gauche
par Chacha Mar 18 Aoû 2020 - 9:20
 | Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées. |
Chacha- Modéractif
-
Messages : 69440
Inscrit(e) le : 21/08/2010 -
Sujets similaires» Créer un encart flottant sur l'index du forum
» Bannière sur la gauche, index sur la droite
» Comment déplace t-on le profil sur l'index à la barre à gauche?
» onglet flottant au passage de la souris
» Onglet flottant
» Bannière sur la gauche, index sur la droite
» Comment déplace t-on le profil sur l'index à la barre à gauche?
» onglet flottant au passage de la souris
» Onglet flottant
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum