Accueil
Créer un forumScript/Widget sur Page d'Accueil : Derniers Sujets
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
Script/Widget sur Page d'Accueil : Derniers Sujets
par Amidamaru Lun 11 Mar 2019 - 2:36
Détails techniques
Version du forum : phpBB2Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : C'est un problème que je rencontre depuis des semaines déjà.
Lien du forum : (lien masqué, vous devez poster pour le voir)
Description du problème
Bonjour/Bonsoir,Après avoir lu un bon paquet de sujets/tutoriels et l'annonce faite par le staff de Forumactif concernant ce widget (postée en 2015 si je ne m'abuse), je n'arrive toujours pas à placer les derniers sujets ayant eu une réponse dans une div sur ma page d'accueil.
Le javascript utilisé :
- Code:
jQuery.get('/portal',function(data){jQuery('#recent_topics').html(jQuery(data).find('.forumline td.row1').html());});
L'appel dans le html fait :
- Code:
<div id="recent_topics"></div>
Le CSS lié à l'id #recent_topics :
- Code:
#recent_topics {
position:absolute;
background: #fff;
width:248px;
height:235px;
top:-10px;
right:-4px;
padding:2px;
border: 1px solid #9acae5;
font-family: 'Leto', sans-serif;
text-align: left;
}
Précisions :
- j'ai activé le portail mais il n'est pas affiché;
- j'ai supprimé tous les widgets et les afficher ou non ne change rien au problème (quand ils sont affichés, une colonne se créer à côté de ma page d'accueil avec le widget fonctionnel);
- j'ai essayé en plaçant le script directement dans le html mais rien n'y fait;
- ma page d'accueil est une frame (avec une page html inclue à l'intérieur donc) appelée et non un codage placé directement sur la page d'accueil;
- c'est mon seul script faisant appel à ce widget;
Merci à vous !
Dernière édition par Amidamaru le Lun 11 Mar 2019 - 17:49, édité 1 fois
Amidamaru- Nouveau membre
- Messages : 8
Inscrit(e) le : 11/03/2019 -
Re: Script/Widget sur Page d'Accueil : Derniers Sujets
par Invité Lun 11 Mar 2019 - 16:18
Hello Amidamaru,
juste pour savoir, tes derniers sujets sur le portail défilent ils ou sont ils stables ?
Tu peux donner le code html de ton Iframe stp.
a++
juste pour savoir, tes derniers sujets sur le portail défilent ils ou sont ils stables ?
Tu peux donner le code html de ton Iframe stp.
a++
Invité- Invité
Re: Script/Widget sur Page d'Accueil : Derniers Sujets
par Amidamaru Lun 11 Mar 2019 - 16:25
Bonjour !
Alors, le code demandé :
(je remarque quelques fautes et que la tabulation est en sueurs en le postant mais rien en rapport avec mon problème)
En ce qui concerne le portail, oui les sujets défilent bien et s'arrêtent quand je passe ma souris dessus. Je l'ai activé pour que tu puisses constater sur l'index du forum.
Merci pour la réponse rapide!
Alors, le code demandé :
- Code:
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body {
margin:0px;
padding:0px;
}
/*Taille et couleur de la PA*/
#pa-wrap {
width: 1022px;
height: 400px;
font-family: 'Leto', sans-serif;
margin-top :8px;
}
/*Bloc etiquettes*/
ul.etiquettes{
margin:0;
padding:0;
list-style:none;
text-align:center;
}
ul.etiquettes li {
display:inline-block;
position:relative;
bottom:24px;
left:0px;
list-style-type:none;
text-align:center;
margin:0 6px 0 0;
padding:6px;
box-sizing:border-box;
font-family:calibri;
font-size:13px;
letter-spacing:1px;
color:#fff;
text-transform:uppercase;
}
ul.etiquettes li > div{
padding:2px 8px;
border:#fff solid 1px;
}
/*Intérieur PA*/
#pa {
width: 100%;
height: 93%;
background: #fff;
position: relative;
bottom: -26px;
}
/*Style des liens*/
#pa a {
text-decoration: none;
color: #9d9bb9;
transition: all 0.3s;
}
#pa a:hover {
color: #ccc;
}
/*Style des titre*/
#pa-wrap h1 {
text-transform: uppercase;
font-size: 22px;
font-family: 'calibri', sans-serif;
color: #ff9018;
margin:0px;
letter-spacing:0px;
text-shadow: 1px 1px white;
font-style:italic;
}
#pa-wrap h2 {
text-align:center;
font-size: 14px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
background: #ff9018;
font-family: 'Leto";
white-space: nowrap;
vertical-align: middle;
}
#pa-wrap h3 {
text-transform: uppercase;
color: #ccc;
font-size: 12px;
letter-spacing: 1.5px;
}
#pa-wrap h4 {
text-align: center;
font-size: 8px;
color: #82818e;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
font-family: 'Leto', sans-serif;
}
/*Bloc etiquettes*/
#pa-contexte {
width: 452px;
height: 80px;
position: absolute;
left:15px;
top:20px;
}
#pa-contexte div,
#pa-news {
width: 100%;
height: 110px;
background: #fff;
border: 1px solid #f0dcc2;
box-sizing: border-box;
padding: 6px;
overflow: auto;
text-align: justify;
font-size: 12px;
color:#1f537d;
line-height: 150%;
}
/*Bloc Staff*/
#votrestaff{
width:60px;
position: absolute;
left:275px;
top:140px;
}
#pa-staff {
width: 270px;
position: absolute;
left: 425px;
top: 202px;
text-align: center;
display: flex;
}
#pa-staff .pa-staff-block {
transform: rotate(45deg);
position: absolute;
top:-60px;
left:-75px;
height: 50px;
width: 50px;
padding:2px;
overflow: hidden;
background: #93c0e6;
}
#pa-staff .pa-staff-block2 {
position: absolute;
transform: rotate(45deg);
top:-60px;
left:2px;
height:50px;
width:50px;
padding:2px;
overflow: hidden;
background: #93c0e6;
}
#pa-staff .pa-staff-block3 {
position: absolute;
transform: rotate(45deg);
top:-60px;
left:79px;
height:50px;
width:50px;
padding:2px;
overflow: hidden;
background: #93c0e6;
}
#pa-staff .pa-staff-block4 {
position: absolute;
transform: rotate(45deg);
top:-60px;
left:156px;
height:50px;
width:50px;
overflow: hidden;
padding:2px;
overflow: hidden;
background: #93c0e6;
}
#pa-staff .pa-staff-block5 {
position: absolute;
transform: rotate(45deg);
top:-60px;
left:233px;
height:50px;
width: 50px;
padding:2px;
overflow: hidden;
background: #93c0e6;
}
#pa-staff .pa-staff-content {
position: absolute;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.8);
top: 0;
left: 0;
font-size: 10px;
box-sizing: border-box;
padding-top: 20px;
transform: translate(0, 100%);
transition: all 0.3s;
}
#pa-staff .pa-staff-content2 {
position: absolute;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.8);
top: 0;
left: 0;
font-size: 8px;
box-sizing: border-box;
padding-top: 2px;
transform: translate(0, 100%);
transition: all 0.3s;
}
#pa-staff .pa-staff-block:hover .pa-staff-content {
transform: translate(0, 0);
}
#pa-staff .pa-staff-block2:hover .pa-staff-content {
transform: translate(0, 0);
}
#pa-staff .pa-staff-block3:hover .pa-staff-content2 {
transform: translate(0, 0);
}
#pa-staff .pa-staff-block4:hover .pa-staff-content2 {
transform: translate(0, 0);
}
#pa-staff .pa-staff-block5:hover .pa-staff-content2 {
transform: translate(0, 0);
}
#pa-staff .pa-staff-block6:hover .pa-staff-content2 {
transform: translate(0, 0);
}
/*Bloc Slide */
#slide {
left:268px;
top:208px;
position:absolute;
width:480px;
height:150px;
border:1px solid #d3dfed;
}
/*Bloc Sujets*/
#recent_topics {
position:absolute;
background: #fff;
width:248px;
height:235px;
top:-10px;
right:-4px;
padding:2px;
color:#000;
border: 1px solid #9acae5;
font-family: 'Leto', sans-serif;
text-align: left;
}
#activite{
text-align:center;
font-size: 14px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
background: #9acae5;
font-family: 'Leto";
white-space: nowrap;
vertical-align: middle;
width:254px;
position: absolute;
right:-4px;
top:-30px;
height:20px;
vertical-align: middle;
}
a.dm_titre, a.dm_pseudo {
color: #151515;
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
}
span.dm_par {
font-size: 10px;
font-style: italic;
margin: 0 1em;
}
.dm_time {
text-transform: uppercase;
font-size: 9px;
font-weight: 500;
color: #6f6f6f;
line-height: .8;
margin: 0 0 1em 0;
}
/*Bloc des news*/
#nouveautes{
width:250px;
position: absolute;
left:15px;
top:130px;
height:25px;
}
#pa-news {
width: 250px;
position: absolute;
left: 15px;
top: 160px;
height: 200px;
}
#pa-news div {
margin-bottom: 10px;
}
#pa-news div b {
color: #acacb4;
}
/*Bloc des partenaires*/
#pa-part {
width: 270px;
position: absolute;
left: 474px;
top: 13px;
text-align: left;
}
#pa-part div {
display: flex;
width: 95%;
flex-wrap: wrap;
justify-content: space-between;
}
#pa-part div a {
padding:0px;
}
#partenaires_ecrit {
width: 100%;
height: 65px;
background: #fff;
border: 1px solid #ccc;
box-sizing: border-box;
padding: 8px;
overflow: auto;
text-align: justify;
font-size: 10px;
line-height: 150%;
}
/*Bloc des prédéfinis*/
#pa-pred {
width: 250px;
position: absolute;
right: 20px;
top: 50px;
}
#pa-predef .pa-predef-bloc {
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#pa-predef a.lien-pred {
letter-spacing: 1px;
font-size: 10px;
text-transform: uppercase;
}
#pa-predef .pa-pred {
height: 70px;
display: inline-block;
position: relative;
overflow: hidden;
margin-bottom: 5px;
max-width: 80px;
}
#pa-predef .pa-pred-content {
position: absolute;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.8);
top: 0;
font-size: 11px;
box-sizing: border-box;
padding-top: 23px;
transform: translate(0, 100%);
transition: all 0.3s;
text-align: center;
}
#pa-predef .pa-pred:hover .pa-pred-content {
transform: translate(0, 0);
}
#predef {
position:absolute;
right:20px;
top:265px;
}
.lien-pred{
position:absolute;
right:23px;
top:300px;
}
/*Bloc des top-sites*/
#pa-top {
text-align:right;
width: 253px;
position: absolute;
top: 233px;
}
#pa-top #pa-top-content {
width: 100%;
height: 80px;
overflow: hidden;
position: relative;
display: flex;
justify-content: space-between;
}
/*Crédit*/
#pa-credit {
position: absolute;
bottom: 8px;
left: 20px;
font-size: 9px;
color: #d6d6d6;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div id="pa-wrap">
<div id="pa">
<div id="pa-contexte">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac leo tempor, tristique orci et, venenatis nibh. Phasellus congue nunc enim, vel efficitur nisi dignissim vitae. Vivamus efficitur, ligula sed efficitur pharetra, lorem diam pellentesque risus, volutpat congue leo ipsum vitae odio. Nunc mattis diam sodales erat consectetur, a tempor ante pellentesque.
</div>
</div>
<div>
<h1 id="votrestaff">Votre<br/>Staff</h1>
</div>
<div id="pa-staff">
<div class="pa-staff-block">
<img src="https://i.servimg.com/u/f62/19/84/20/09/screen11.png" style="width:50px; height:50px;" alt="" />
<div class="pa-staff-content">
<h4>Tarumi Meruem</h4>Design | <a href="http://reiryoku-no-shigen.forumactif.com/privmsg?mode=post&u=2">MP</a>
</div>
</div>
<div class="pa-staff-block2">
<img src="http://placehold.it/80x60" style="width:50px; height:50px;" alt="" />
<div class="pa-staff-content">
<h4>Barzaqh</h4>Contexte | <a href="#">MP</a>
</div>
</div>
<div class="pa-staff-block3">
<img src="http://placehold.it/80x60" style="width:50px; height:50px;" alt="" />
<div class="pa-staff-content2">
<h4>Balthier von Rosen</h4>Technique | <a href="#">MP</a>
</div>
</div>
<div class="pa-staff-block4">
<img src="http://placehold.it/80x60" style="width:50px; height:50px;" alt="" />
<div class="pa-staff-content2">
<h4>...</h4>Technique | <a href="#">MP</a>
</div>
</div>
<div class="pa-staff-block5">
<img src="http://placehold.it/80x60" style="width:50px; height:50px;" alt="" />
<div class="pa-staff-content2">
<h4>...</h4>Technique | <a href="#">MP</a>
</div>
</div>
</div>
<div>
<h2 id="nouveautes">Nouveautés</h2>
</div>
<div id="pa-news">
<div><b>08/03</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
<div><b>08/03</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<div><b>08/03</b> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div id="pa-part">
<h1 id="partenaires">Partenaires</h1>
<div>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<h3>Si vous êtes QLF, vous ne pouvez passer à côté d'eux!</h3>
</div>
</div>
<div id="pa-pred">
<div id="activite">Activité récente</div>
<div id="recent_topics"></div>
<div id="pa-top">
<h1>Top-sites</h1>
<div id="pa-top-content">
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
</div>
</div>
</div>
<ul class="etiquettes">
<a href="...">
<li style="background:#1f537d;">
<div>Nouveautés</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Règlement</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Contexte</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Guide de l'aspirant</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Votre Staff</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Partenaires</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Crédits</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Discord</div>
</li>
</a>
</ul>
<div id="slide">
<div id="slide-content">
</div>
</div>
</div>
</body>
(je remarque quelques fautes et que la tabulation est en sueurs en le postant mais rien en rapport avec mon problème)
En ce qui concerne le portail, oui les sujets défilent bien et s'arrêtent quand je passe ma souris dessus. Je l'ai activé pour que tu puisses constater sur l'index du forum.
Merci pour la réponse rapide!
Amidamaru- Nouveau membre
- Messages : 8
Inscrit(e) le : 11/03/2019 -
Re: Script/Widget sur Page d'Accueil : Derniers Sujets
par Invité Lun 11 Mar 2019 - 16:30
Re,
ok merci, as tu modifié ce template mod_recent_topics ?:
Affichage/Templates/Portail/mod_recent_topics
Je regarde ce que je peux faire
.
a++
ok merci, as tu modifié ce template mod_recent_topics ?:
Affichage/Templates/Portail/mod_recent_topics
Je regarde ce que je peux faire
.a++
Invité- Invité
Re: Script/Widget sur Page d'Accueil : Derniers Sujets
par Amidamaru Lun 11 Mar 2019 - 16:32
Re!
Mon mod_recent_topics (modifié en adéquation avec l'annonce faite par FA sur le module en question) :
Haha merci, je galère depuis un bon moment là-dessus mais je n'en démord pas pour autant. En espérant qu'on puisse trouver la solution un moment donné
Mon mod_recent_topics (modifié en adéquation avec l'annonce faite par FA sur le module en question) :
- Code:
<!-- BEGIN scrolling_row -->
{MARQUEE_JS_SRC}
<table class="forumline genmed" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="catLeft" height="25">
<span class="genmed module-title">{L_RECENT_TOPICS}</span>
</td>
</tr>
<tr>
<td class="row1" style="height:{SCROLL_HEIGHT}px;">
<div class="marquee" align="left" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
<!-- BEGIN recent_topic_row -->
» <a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}">{scrolling_row.recent_topic_row.L_TITLE}</a><br />
<img src="{ICON_TIME}" alt="" />{scrolling_row.recent_topic_row.S_POSTTIME} {BY}
<!-- BEGIN switch_poster -->
<a href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a><br /><br />
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
{scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}<br /><br />
<!-- END switch_poster_guest -->
<!-- END recent_topic_row -->
</div>
</td>
</tr>
</table>
<script>
$(".marquee").marquee();
</script>
<!-- END scrolling_row -->
Haha merci, je galère depuis un bon moment là-dessus mais je n'en démord pas pour autant. En espérant qu'on puisse trouver la solution un moment donné
Amidamaru- Nouveau membre
- Messages : 8
Inscrit(e) le : 11/03/2019 -
Re: Script/Widget sur Page d'Accueil : Derniers Sujets
par Invité Lun 11 Mar 2019 - 16:36
Re,
oki merci,
Tu peux remplacer ceci:
Par:
Par contre dans ton Iframe, les sujets de défileront pas, ce sera remplacé un défilement manuel.
a++
oki merci,
Tu peux remplacer ceci:
- Code:
<!-- BEGIN scrolling_row -->
{MARQUEE_JS_SRC}
<table class="forumline genmed" width="100%" border="0" cellspacing="1" cellpadding="0">
Par:
- Code:
<!-- BEGIN scrolling_row -->
{MARQUEE_JS_SRC}
<table id="M14_ID_Recents"class="forumline genmed" width="100%" border="0" cellspacing="1" cellpadding="0">
Par contre dans ton Iframe, les sujets de défileront pas, ce sera remplacé un défilement manuel.
a++
Invité- Invité
Re: Script/Widget sur Page d'Accueil : Derniers Sujets
par Amidamaru Lun 11 Mar 2019 - 16:43
Re,
pour l'iframe j'en ai bien conscience je préfère avoir un défilement manuel.
Je viens de remplacer le code comme indiqué et je ne constate aucun changement (en affichant ou non les widgets). Je suis peut-être passé à côté de quelque chose concernant ce module, il y aurait une documentation quelconque à disposition ? (je ne l'ai toujours pas trouvé si c'est le cas)
Encore merci pour la rapidité de ta réponse!
pour l'iframe j'en ai bien conscience je préfère avoir un défilement manuel.
Je viens de remplacer le code comme indiqué et je ne constate aucun changement (en affichant ou non les widgets). Je suis peut-être passé à côté de quelque chose concernant ce module, il y aurait une documentation quelconque à disposition ? (je ne l'ai toujours pas trouvé si c'est le cas)
Encore merci pour la rapidité de ta réponse!
Amidamaru- Nouveau membre
- Messages : 8
Inscrit(e) le : 11/03/2019 -
Re: Script/Widget sur Page d'Accueil : Derniers Sujets
par Invité Lun 11 Mar 2019 - 16:47
Re,
oui , il reste plus que le code de l'iframe ou j"ai apporté des modifications pour pouvoir afficher
les derniers sujets.
Voilà pourquoi je t'ai donné une modification a apporter au template afin que l'on prenne la bonne information sur le portal.
a++
oui , il reste plus que le code de l'iframe ou j"ai apporté des modifications pour pouvoir afficher
les derniers sujets.
Voilà pourquoi je t'ai donné une modification a apporter au template afin que l'on prenne la bonne information sur le portal.
a++
Invité- Invité
Re: Script/Widget sur Page d'Accueil : Derniers Sujets
par Invité Lun 11 Mar 2019 - 16:55
Re,
alors remplaces tout le contenu de ta page html par celui-ci:
Les modifications effectuées:
L'appel de la bibliothèque jQuery
Ce que j'ai apporté pour l'apparence du contenu:
Ce que j'ai ajouté à l'id #recent_topics
Puis le script qui va rechercher sur le portail l'id que l on a ajouté dans le template:
Et voilou .
a++
alors remplaces tout le contenu de ta page html par celui-ci:
- Code:
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style>
body {
margin:0px;
padding:0px;
}
/*Taille et couleur de la PA*/
#pa-wrap {
width: 1022px;
height: 400px;
font-family: 'Leto', sans-serif;
margin-top :8px;
}
/*Bloc etiquettes*/
ul.etiquettes{
margin:0;
padding:0;
list-style:none;
text-align:center;
}
ul.etiquettes li {
display:inline-block;
position:relative;
bottom:24px;
left:0px;
list-style-type:none;
text-align:center;
margin:0 6px 0 0;
padding:6px;
box-sizing:border-box;
font-family:calibri;
font-size:13px;
letter-spacing:1px;
color:#fff;
text-transform:uppercase;
}
ul.etiquettes li > div{
padding:2px 8px;
border:#fff solid 1px;
}
/*Intérieur PA*/
#pa {
width: 100%;
height: 93%;
background: #fff;
position: relative;
bottom: -26px;
}
/*Style des liens*/
#pa a {
text-decoration: none;
color: #9d9bb9;
transition: all 0.3s;
}
#pa a:hover {
color: #ccc;
}
/*Style des titre*/
#pa-wrap h1 {
text-transform: uppercase;
font-size: 22px;
font-family: 'calibri', sans-serif;
color: #ff9018;
margin:0px;
letter-spacing:0px;
text-shadow: 1px 1px white;
font-style:italic;
}
#pa-wrap h2 {
text-align:center;
font-size: 14px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
background: #ff9018;
font-family: 'Leto";
white-space: nowrap;
vertical-align: middle;
}
#pa-wrap h3 {
text-transform: uppercase;
color: #ccc;
font-size: 12px;
letter-spacing: 1.5px;
}
#pa-wrap h4 {
text-align: center;
font-size: 8px;
color: #82818e;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
font-family: 'Leto', sans-serif;
}
/*Bloc etiquettes*/
#pa-contexte {
width: 452px;
height: 80px;
position: absolute;
left:15px;
top:20px;
}
#pa-contexte div,
#pa-news {
width: 100%;
height: 110px;
background: #fff;
border: 1px solid #f0dcc2;
box-sizing: border-box;
padding: 6px;
overflow: auto;
text-align: justify;
font-size: 12px;
color:#1f537d;
line-height: 150%;
}
/*Bloc Staff*/
#votrestaff{
width:60px;
position: absolute;
left:275px;
top:140px;
}
#pa-staff {
width: 270px;
position: absolute;
left: 425px;
top: 202px;
text-align: center;
display: flex;
}
#pa-staff .pa-staff-block {
transform: rotate(45deg);
position: absolute;
top:-60px;
left:-75px;
height: 50px;
width: 50px;
padding:2px;
overflow: hidden;
background: #93c0e6;
}
#pa-staff .pa-staff-block2 {
position: absolute;
transform: rotate(45deg);
top:-60px;
left:2px;
height:50px;
width:50px;
padding:2px;
overflow: hidden;
background: #93c0e6;
}
#pa-staff .pa-staff-block3 {
position: absolute;
transform: rotate(45deg);
top:-60px;
left:79px;
height:50px;
width:50px;
padding:2px;
overflow: hidden;
background: #93c0e6;
}
#pa-staff .pa-staff-block4 {
position: absolute;
transform: rotate(45deg);
top:-60px;
left:156px;
height:50px;
width:50px;
overflow: hidden;
padding:2px;
overflow: hidden;
background: #93c0e6;
}
#pa-staff .pa-staff-block5 {
position: absolute;
transform: rotate(45deg);
top:-60px;
left:233px;
height:50px;
width: 50px;
padding:2px;
overflow: hidden;
background: #93c0e6;
}
#pa-staff .pa-staff-content {
position: absolute;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.8);
top: 0;
left: 0;
font-size: 10px;
box-sizing: border-box;
padding-top: 20px;
transform: translate(0, 100%);
transition: all 0.3s;
}
#pa-staff .pa-staff-content2 {
position: absolute;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.8);
top: 0;
left: 0;
font-size: 8px;
box-sizing: border-box;
padding-top: 2px;
transform: translate(0, 100%);
transition: all 0.3s;
}
#pa-staff .pa-staff-block:hover .pa-staff-content {
transform: translate(0, 0);
}
#pa-staff .pa-staff-block2:hover .pa-staff-content {
transform: translate(0, 0);
}
#pa-staff .pa-staff-block3:hover .pa-staff-content2 {
transform: translate(0, 0);
}
#pa-staff .pa-staff-block4:hover .pa-staff-content2 {
transform: translate(0, 0);
}
#pa-staff .pa-staff-block5:hover .pa-staff-content2 {
transform: translate(0, 0);
}
#pa-staff .pa-staff-block6:hover .pa-staff-content2 {
transform: translate(0, 0);
}
/*Bloc Slide */
#slide {
left:268px;
top:208px;
position:absolute;
width:480px;
height:150px;
border:1px solid #d3dfed;
}
/*Bloc Sujets*/
#recent_topics {
position:absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #fff;
width:248px;
height:235px;
overflow-y:auto;
top:-10px;
right:-4px;
padding:2px;
color:#000;
border: 1px solid #9acae5;
font-family: 'Leto', sans-serif;
text-align: left;
}
/*on donne une taille de police identique a tout le contenu*/
#recent_topics , #recent_topics a[href^="/t"], #recent_topics a[href^="/u"]
{
font-size:12px;
}
/*on donne une couleur au texte hors lien*/
#recent_topics
{
color: #1f537d;
}
/*on donne une couleur aux liens*/
#recent_topics a[href^="/t"]
{
color: #ff9018;
}
/*on donne une couleur aux Pseudos*/
#recent_topics a[href^="/u"],#recent_topics a[href^="/u"] span
{
color:#1f537d !important;
}
#activite{
text-align:center;
font-size: 14px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
background: #9acae5;
font-family: 'Leto";
white-space: nowrap;
vertical-align: middle;
width:254px;
position: absolute;
right:-4px;
top:-30px;
height:20px;
vertical-align: middle;
}
a.dm_titre, a.dm_pseudo {
color: #151515;
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
}
span.dm_par {
font-size: 10px;
font-style: italic;
margin: 0 1em;
}
.dm_time {
text-transform: uppercase;
font-size: 9px;
font-weight: 500;
color: #6f6f6f;
line-height: .8;
margin: 0 0 1em 0;
}
/*Bloc des news*/
#nouveautes{
width:250px;
position: absolute;
left:15px;
top:130px;
height:25px;
}
#pa-news {
width: 250px;
position: absolute;
left: 15px;
top: 160px;
height: 200px;
}
#pa-news div {
margin-bottom: 10px;
}
#pa-news div b {
color: #acacb4;
}
/*Bloc des partenaires*/
#pa-part {
width: 270px;
position: absolute;
left: 474px;
top: 13px;
text-align: left;
}
#pa-part div {
display: flex;
width: 95%;
flex-wrap: wrap;
justify-content: space-between;
}
#pa-part div a {
padding:0px;
}
#partenaires_ecrit {
width: 100%;
height: 65px;
background: #fff;
border: 1px solid #ccc;
box-sizing: border-box;
padding: 8px;
overflow: auto;
text-align: justify;
font-size: 10px;
line-height: 150%;
}
/*Bloc des prédéfinis*/
#pa-pred {
width: 250px;
position: absolute;
right: 20px;
top: 50px;
}
#pa-predef .pa-predef-bloc {
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#pa-predef a.lien-pred {
letter-spacing: 1px;
font-size: 10px;
text-transform: uppercase;
}
#pa-predef .pa-pred {
height: 70px;
display: inline-block;
position: relative;
overflow: hidden;
margin-bottom: 5px;
max-width: 80px;
}
#pa-predef .pa-pred-content {
position: absolute;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.8);
top: 0;
font-size: 11px;
box-sizing: border-box;
padding-top: 23px;
transform: translate(0, 100%);
transition: all 0.3s;
text-align: center;
}
#pa-predef .pa-pred:hover .pa-pred-content {
transform: translate(0, 0);
}
#predef {
position:absolute;
right:20px;
top:265px;
}
.lien-pred{
position:absolute;
right:23px;
top:300px;
}
/*Bloc des top-sites*/
#pa-top {
text-align:right;
width: 253px;
position: absolute;
top: 233px;
}
#pa-top #pa-top-content {
width: 100%;
height: 80px;
overflow: hidden;
position: relative;
display: flex;
justify-content: space-between;
}
/*Crédit*/
#pa-credit {
position: absolute;
bottom: 8px;
left: 20px;
font-size: 9px;
color: #d6d6d6;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div id="pa-wrap">
<div id="pa">
<div id="pa-contexte">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac leo tempor, tristique orci et, venenatis nibh. Phasellus congue nunc enim, vel efficitur nisi dignissim vitae. Vivamus efficitur, ligula sed efficitur pharetra, lorem diam pellentesque risus, volutpat congue leo ipsum vitae odio. Nunc mattis diam sodales erat consectetur, a tempor ante pellentesque.
</div>
</div>
<div>
<h1 id="votrestaff">Votre<br/>Staff</h1>
</div>
<div id="pa-staff">
<div class="pa-staff-block">
<img src="https://i.servimg.com/u/f62/19/84/20/09/screen11.png" style="width:50px; height:50px;" alt="" />
<div class="pa-staff-content">
<h4>Tarumi Meruem</h4>Design | <a href="http://reiryoku-no-shigen.forumactif.com/privmsg?mode=post&u=2">MP</a>
</div>
</div>
<div class="pa-staff-block2">
<img src="http://placehold.it/80x60" style="width:50px; height:50px;" alt="" />
<div class="pa-staff-content">
<h4>Barzaqh</h4>Contexte | <a href="#">MP</a>
</div>
</div>
<div class="pa-staff-block3">
<img src="http://placehold.it/80x60" style="width:50px; height:50px;" alt="" />
<div class="pa-staff-content2">
<h4>Balthier von Rosen</h4>Technique | <a href="#">MP</a>
</div>
</div>
<div class="pa-staff-block4">
<img src="http://placehold.it/80x60" style="width:50px; height:50px;" alt="" />
<div class="pa-staff-content2">
<h4>...</h4>Technique | <a href="#">MP</a>
</div>
</div>
<div class="pa-staff-block5">
<img src="http://placehold.it/80x60" style="width:50px; height:50px;" alt="" />
<div class="pa-staff-content2">
<h4>...</h4>Technique | <a href="#">MP</a>
</div>
</div>
</div>
<div>
<h2 id="nouveautes">Nouveautés</h2>
</div>
<div id="pa-news">
<div><b>08/03</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
<div><b>08/03</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<div><b>08/03</b> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div id="pa-part">
<h1 id="partenaires">Partenaires</h1>
<div>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<h3>Si vous êtes QLF, vous ne pouvez passer à côté d'eux!</h3>
</div>
</div>
<div id="pa-pred">
<div id="activite">Activité récente</div>
<div id="recent_topics">
<script>
$(function(){
$.get('/portal',function(data){$('#recent_topics').html($(data).find('#M14_ID_Recents .marquee').html());
});
});
</script></div>
<div id="pa-top">
<h1>Top-sites</h1>
<div id="pa-top-content">
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
<a href="#"><img src="http://placehold.it/50x50" alt="" />
</a>
</div>
</div>
</div>
<ul class="etiquettes">
<a href="...">
<li style="background:#1f537d;">
<div>Nouveautés</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Règlement</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Contexte</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Guide de l'aspirant</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Votre Staff</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Partenaires</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Crédits</div>
</li>
</a>
<a href="...">
<li style="background:#1f537d;">
<div>Discord</div>
</li>
</a>
</ul>
<div id="slide">
<div id="slide-content">
</div>
</div>
</div>
</body>
Les modifications effectuées:
L'appel de la bibliothèque jQuery
- Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Ce que j'ai apporté pour l'apparence du contenu:
- Code:
/*on donne une taille de police identique a tout le contenu*/
#recent_topics , #recent_topics a[href^="/t"], #recent_topics a[href^="/u"]
{
font-size:12px;
}
/*on donne une couleur au texte hors lien*/
#recent_topics
{
color: #1f537d;
}
/*on donne une couleur aux liens*/
#recent_topics a[href^="/t"]
{
color: #ff9018;
}
/*on donne une couleur aux Pseudos*/
#recent_topics a[href^="/u"],#recent_topics a[href^="/u"] span
{
color:#1f537d !important;
}
Ce que j'ai ajouté à l'id #recent_topics
- Code:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-y:auto;
Puis le script qui va rechercher sur le portail l'id que l on a ajouté dans le template:
- Code:
<script>
$(function(){
$.get('/portal',function(data){$('#recent_topics').html($(data).find('#M14_ID_Recents .marquee').html());
});
});
</script>
Et voilou
.a++
Invité- Invité
Re: Script/Widget sur Page d'Accueil : Derniers Sujets
par Amidamaru Lun 11 Mar 2019 - 17:43
Re
Mon sauveur haha ! alors j'ai apporté toutes les modifications (bien vu l'effort sur les couleurs, artiste dans l'âme) et cela marche nickel à un détail près : le widget reste affiché à gauche de la page d'accueil. Alors, si je décide de ne pas afficher les widgets, rien ne fonctionne. Si je l'active, j'ai les derniers sujets en double. J'ai tenté de masquer la colonne des widgets avec du css mais rien n'y fait, à moins que je ne m'y prenne pas correctement. Ou alors qu'une autre valeur soit demandée en ce qui concerne la colonne de gauche (pour les widgets).
Le css ajouté sur la iframe :
Je ne sais pas si j'ai été compréhensible x) mais un grand merci pour les précisions apportées pour mon problème jusque-là, tu gères !
Mon sauveur haha ! alors j'ai apporté toutes les modifications (bien vu l'effort sur les couleurs, artiste dans l'âme) et cela marche nickel à un détail près : le widget reste affiché à gauche de la page d'accueil. Alors, si je décide de ne pas afficher les widgets, rien ne fonctionne. Si je l'active, j'ai les derniers sujets en double. J'ai tenté de masquer la colonne des widgets avec du css mais rien n'y fait, à moins que je ne m'y prenne pas correctement. Ou alors qu'une autre valeur soit demandée en ce qui concerne la colonne de gauche (pour les widgets).
Le css ajouté sur la iframe :
- Code:
#left {
display:none;
}
Je ne sais pas si j'ai été compréhensible x) mais un grand merci pour les précisions apportées pour mon problème jusque-là, tu gères !
Amidamaru- Nouveau membre
- Messages : 8
Inscrit(e) le : 11/03/2019 -
Re: Script/Widget sur Page d'Accueil : Derniers Sujets
par Amidamaru Lun 11 Mar 2019 - 17:48
My bad, double-post!
Le css est à mettre dans celui du forum et non l'iframe! Je passe tout ça en résolu du coup et un grand merci pour ton aide !
En espérant que cela serve à autrui à l'avenir, à la revoyure Milouze
Ps (pour éviter un autre post) : j'ai déjà zieuter un peu ton forum et je risque d'y retourner, quelques sujets ont piqué ma curiosité!
Le css est à mettre dans celui du forum et non l'iframe! Je passe tout ça en résolu du coup et un grand merci pour ton aide !
En espérant que cela serve à autrui à l'avenir, à la revoyure Milouze
Ps (pour éviter un autre post) : j'ai déjà zieuter un peu ton forum et je risque d'y retourner, quelques sujets ont piqué ma curiosité!
Dernière édition par Amidamaru le Lun 11 Mar 2019 - 17:50, édité 1 fois
Amidamaru- Nouveau membre
- Messages : 8
Inscrit(e) le : 11/03/2019 -
Re: Script/Widget sur Page d'Accueil : Derniers Sujets
par Invité Lun 11 Mar 2019 - 17:49
Re,
de rien mon ami .
Tu as activé les derniers sujets sur le forum,tu peux supprimer ce dernier.
Le script va rechercher sur le portail et ce dernier n'est pas visible sur ton forum ???
Est-ce normal?
Ceci:
S'active seulement si tu actives les Widgets sur le forum .
Si tu veux venir faire un tour sur mon fofo,tu verras qu'il est assez spécial .
A bientôt alors .
a++
de rien mon ami
.Tu as activé les derniers sujets sur le forum,tu peux supprimer ce dernier.
Le script va rechercher sur le portail et ce dernier n'est pas visible sur ton forum ???
Est-ce normal?
Ceci:
- Code:
#left {
display:none;
}
S'active seulement si tu actives les Widgets sur le forum
.
mais un grand merci pour les précisions apportées pour mon problème jusque-là, tu gères !
Si tu veux venir faire un tour sur mon fofo,tu verras qu'il est assez spécial
.Ps (pour éviter un autre post) : j'ai déjà zieuter un peu ton forum et je risque d'y retourner, quelques sujets ont piqué ma curiosité!
A bientôt alors
.a++
Invité- Invité
Sujets similaires» [Widget] Pouvoir rendre invisible certains sujets dans le widget "derniers sujets"
» Script derniers sujets
» Widget Derniers Sujets
» Widget derniers sujets
» Déplacer le script "Derniers sujets".
» Script derniers sujets
» Widget Derniers Sujets
» Widget derniers sujets
» Déplacer le script "Derniers sujets".
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