Accueil
Créer un forumLa date/heure actuelle est Ven 19 Avr 2024 - 12:31
71 résultats trouvés pour fff
Dark mode - image de fond en repeat
Il me semble qu'il existe d'autres techniques d'imbrication, mais que je connais moins ; Sinon a priori oui, chaque élément à modifier, vous devez ajouter [data-color-scheme="dark"] devant le sélecteur.(le bout de code a {color:#fff;} fonctionne-t-il en mode sombre ? sinon, vous devez l'extraire pour le placer plus bas ainsi :
[data-color-scheme="dark"] a {color:#fff;}
- le Mer 25 Oct 2023 - 20:44
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Dark mode - image de fond en repeat
- Réponses: 4
- Vues: 180
Changer la couleur de la partie publication
Bonjour !Dans le Panneau d'admin > Modules > Publications, configuration, il est possible d'écrire un peu de CSS pour les publications. Par contre, ça marche pour les publications, mais pas pour le formulaire.
Si cette méthode "facile" sans modification de Template (contrairement à ce que propose MlleAlys, sûrement plus complet que ce que je vais proposer de mon côté) vous intéresse, je pense que ce petit code suffira :
- Code:
body, article#main-page {
background: #000;
}
h1, p {
color: #FFF;
}
Le fond en #000 (noir) et le texte en #FFF (blanc), vous pouvez remplacer ces valeurs par celles que vous voudrez !
Edit : ne plus prendre en compte ce message du coup, celui de MlleAlys est plus complet !
- le Jeu 27 Juil 2023 - 13:40
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Changer la couleur de la partie publication
- Réponses: 13
- Vues: 435
Plugin Dark/Light mode qui ne fonctionne pas
Bonjour,Votre code installé fonctionne avec des variables css.
Vous avez ce code css fourni dans le tuto :
- Code:
/* VARIABLE DU MODE PAR DEFAUT */
:root {
--neutral: #FFF
--accentClr: blue;
}
/* VARIABLE DU MODE INVERSE (ici mode sombre) */
[data-color-scheme="dark"] {
--neutral: #000;
--accentClr: red;
}
@media (prefers-color-scheme: dark) {
[data-color-scheme=dark] {
--neutral: #000;
--accentClr: red;
}
}
"--neutral" est une variable qui correspond ici à une couleur :
En mode clair, il est indiqué : --neutral: #FFF, donc du blanc.
En mode sombre, il est indiqué : --neutral: #000; donc du noir.
Vous pouvez ensuite utiliser cette variable dans le css de votre forum, à la place d'une couleur.
Par exemple, en ajoutant ce code dans le css de votre forum :
- Code:
html, body {
background: var(--neutral);
}
Le fond de page aura la couleur "--neutral", donc comme indiqué plus haut, du blanc en mode clair, et du noir en mode sombre.
Ici, le tuto vous a défini deux variables : --neutral et --accentClr. Vous pouvez les renommer, et/ou changer les couleurs correspondantes dans les thèmes clairs ou sombres, et/ou en créer de nouvelles.
- le Mer 26 Juil 2023 - 17:28
- Rechercher dans: Archives des problèmes avec un code
- Sujet: Plugin Dark/Light mode qui ne fonctionne pas
- Réponses: 8
- Vues: 321
Comment faire pour que mon fond bouge
Oui bien surevoici
body .postbody {
text-align:center;
.sceditor-container iframe, .sceditor-container textarea {
background:url()https://i.servimg.com/u/f42/14/38/60/81/image412.jpg!important;}
body{background-attachment:scroll;}
body postbody {
}.postbody {postbody {text-align:center }
http://zufont.appspot.com/n/heart1.cur), auto;
} #page-footer
#navcontainer {
background-color: #B5854B;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
margin-right:0; /*marge droite*/
margin-left:0; /*marge gauche*/
} {
background-image:[url=http://www.hostingpics.net]
[/url;background-repeat: no-repeat;
background-position: bottom left;
width: 723;
height: 300px;
margin: 0px -10px -10px -10px;
}
body bgcolor="#FFFFFF" background="images/monImage.jpg" bgproperties="fixed">
$(function(){
$("body").append(' ');
});
$(function(){
$("body").append('');
});
.boutonhaut {
bottom: 70px;
right: 15px; /* remplacez right par left pour afficher les boutons à gauche */
position: fixed;
z-index: 100;
}
.boutonbas {
bottom: 20px;
right: 15px; /* remplacez right par left pour afficher les boutons à gauche */
position: fixed;
z-index: 100;
}
}
body{background-attachment:scroll;}
.postdetails.poster-profile img {
max-width: 200px;
max-height: 200px;
border-radius: 50%;
}
.postdetails.poster-profile img {
border-radius: 50%;
}.sceditor-button-hostimg div {
background-position: center center !important;
background-image: url('https://ahp.li/6f5f8ba6788785ab64b4.gif') !important;
background-size: 16px;
} body {
cursor:url('https://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Halloween/curseur-halloween-1.cur'),auto;
}
body bgcolor="#FFFFFF" background="images/monImage.jpg" bgproperties="fixed">
$(function(){
$("body").append('div class="boutonhaut">a href="#top">img src="https://i.goopics.net/03mpoz.png" alt="Aller en haut" />/a> /div>');
});
body {
background-attachment : fixed ;
}
$(function(){
$("body").append('div class="boutonbas">a href="#bottom">img src="https://i.goopics.net/wp46ju.png" />/a>');
- le Jeu 16 Fév 2023 - 16:12
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Comment faire pour que mon fond bouge
- Réponses: 22
- Vues: 505
Bonjour, quelques questions sur l'apparence
Bonjour "Christian9591"Comme le précise "marcophil" il faut aller dans > PA-->Affichage-->Images et couleurs-->Couleurs & CSS
Pour la Taille du logo du site en CSS copie et colle le code suivant:
- Code:
/* Changer la dimension du Logo*/
#i_logo {
transform: scale(0.8, 0.8) !important;
}
Tu peux changer la valeur 0.8 en ce que tu souhaites
Pour "changer la couleurs du texte "LE TRAIN ELECTRIQUE POUR LES NULS, ainsi que de La pratique calmement du train électrique, COMPRIS !!!!!!!"
Dans le CSS copie et colle le code suivant:
- Code:
/* Change couleur texte du Titre */
.maintitle h1 {
color: #fff !important;
}
/* Change la Couleur de la description du site */
.gen {
color: #fff !important;
}
/* Change la couleur de "Le train électrique pour les nuls" sous l'annonce" */
a.nav {
color: #fff !important;
}
Change la couleur #fff par celle de ton choix
Ne pas oublier en bas de page du CSS
Forcer le CSS de base du forum: COCHER > "NON"
Désactiver le CSS de base : COCHER > "NON"
Optimiser votre CSS : COCHER > "OUI"
Ensuite "VALIDER"
Faire déjà ces modifs, pour voir ensuite les autres
- le Mar 3 Jan 2023 - 0:03
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Bonjour, quelques questions sur l'apparence
- Réponses: 10
- Vues: 755
Problème avec l'avatar du dernier message.
Oui, quand je tape également dans le navigateur manuellement object-fit, il marche mais, pour une raison inconnue il ne semble pas la prendre en compte avec le CSS..lastpost-avatar {
position: relative;
width: 38px;
height: 38px;
border: 2px solid #fff;
border-radius: 50px;
overflow: hidden;
padding: 0 !important;
}
.lastpost-avatar img {
position: absolute;
height: initial !important;
border: none !important;
top: 50%;
left: 0;
transform: translateY(-50%);
object-fit:cover;
}
C'est ce que j'ai mis dans le CSS.
- Code:
n
- le Mer 28 Déc 2022 - 12:36
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Problème avec l'avatar du dernier message.
- Réponses: 12
- Vues: 437
lien sous forum qui se cache derrière l'image
Voici le CSS- CSS:
- /*Début STRUCTURE*/
/* Fond du forum*/
body
{
background-color: #ebe7e8;
background-image: url('https://images2.imgbox.com/fc/68/bk1QVt7r_o.jpg');
background-position: bottom;
background-repeat: no-repeat, repeat-y;
background-attachment: scroll, scroll;
margin: 0px;
}
/* Corps du forum*/
.bodyline
{
background-color: #887867;
border-left: 1px solid #443c33
border-right: 1px solid #443c33;
width: 948px;
margin: auto;
padding: 0px; /*Pas de marge intérieur dans le corps*/
box-shadow: 0px 0px 3px #000;
}
/* Soulignement liens */
a:link, a:link hover, a:link active, a:link target
{
text-decoration: none !important;
}
#left
{
display: none;
}
/*Fin STRUCTURE*/
/*Début HEADER*/
/* Bannière */
#i_logo
{
border-bottom: 1px solid #0b0e31;
width: 750px;
height: 400px;
}
/* Boite Navigation */
.Navigation
{
background-color: #887867;
border-left: 1px solid #095279;
border-bottom: 1px solid #095279;
width: 197px;
height: 400px;
}
/* Titre Navigation */
.NavigationTitle
{
background-color: #ebe7e8;
border-bottom: 1px solid #01121a;
width: 100%; /* Il prend toute la largeur dans la div */
height: 40px;
text-align: center; /* On center le texte dans la div */
color: #887867;
font-size: 30px; /* Taille de la police */
font-weight: bold; /* Titre en gras */
font-family: 'Georgia', 'Arial', serif; /* Police modifiée */
text-shadow: 0px 0px 3px #000; /*Ombre sur le texte */
}
/* Liens Navigation */
.Navigation a
{
display: block; /*Le Lien devient une boite et implique donc un retour à la ligne ! */
background-color: #ebe7e8;
border-bottom: 1px solid #372821;
width: 100%;
height: 36px;
font-size: 15px;
font-family: 'Arial', serif;
text-align: center;
text-shadow: 0px 0px 2px #000;
padding-top: 20px;
padding-bottom: 3px;
transition: 1s all;
}
.Navigation a:hover
{
background-color: #9c7765;
border-bottom: 1px solid #031c28;
color: #fff;
transition: 1s all;
}
/* Contenu Accueil*/
#accueil
{
background-color: #887867;
overflow: hidden;
background: url('https://images2.imgbox.com/b2/a3/oQFBBVyf_o.jpg') top left no-repeat;
border: 2px solid #ebe7e8;
width: 900px;
height: 400px;
margin: auto;
}
/* Page Survolée */
#page1:hover, #page3:hover, #page4:hover
{
}
/* Onglets */
#page1, #page3, #page4
{
float: left;
width: 40px;
height: 400px;
background: url('https://i.servimg.com/u/f59/19/33/44/09/barrel13.jpg') top left repeat-x;
overflow: hidden;
transition: 1s all;
}
/* Onglets survolés */
#page1:hover, #page3:hover, #page4:hover
{
overflow: hidden;
width: 80%;
height: 400px;
transition: 1s all;
}
/* Onglets survolés contenu devient */
#page1:hover .contenu, #page3:hover .contenu, #page4:hover .contenu
{
overflow: none;
width: 650px;
height: 380px;
margin-left: -180px;
opacity: 1;
transition: 1s all;
}
/* Tableau conteneur */
.contenu_page
{
width: 100%;
height: 400px;
background-color: #887867;
}
/* Contenu */
.contenu
{
overflow: hidden;
width: 0px;
height: 0px;
padding: 6px;
opacity: 0;
}
/* Titre Page */
.page_titre
{
display: inline-block;
width: 400px;
height: 40px;
text-align: center;
margin-left: -180px;
}
/* Fonds des pages */
/* Titre contexte et staff */
.accueilb, .accueilr
{
background-color: #ebe7e8;
width: 100%;
border-bottom: 2px solid #fff;
text-align: left;
font: 15px bold;
color: #0f3ff;
text-shadow: 1px 1px 0px #000000;
padding-left: 13px;
margin-top: 5px;
margin-bottom: 13px;
}
/* Boites Contexte */
.paboxb
{
overflow: auto;
float: left;
background-color: #ebe7e8;
border: 2px solid #fff;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
width: 280px;
height: 150px;
text-align: justify;
padding: 3px;
margin: 10px;
margin-top: 20px;
margin-left 25px;
}
/* Navigation Rapide */
.fastlinks
{
overflow: hidden;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
width: 80%;
height: 112px;
margin: auto;
margin-top: 5px;
border-radius: 70px;
}
/* Liens Navig Rapide */
.fastlinks a
{
display: block;
background-color: #ebe7e8;
border-bottom: 1px solid #fff;
width: 100%;
text-align: center;
font: 13px bold;
transition: 1s all;
}
/* Liens Navig Rapide Survolés */
.fastlinks a:hover
{
background-color: #fff;
transition: 1s all;
}
/* Titre boite Staff */
.RTitle
{
color: #443c33;
width: 100%;
font: 13px bold 'Georgia';
text-align: center;
text-shadow: 0px 0px 1px #fff;
text-transform: uppercase;
letter-spacing: 3px; /*Espace entre chaque lettres*/
}
/* Boite Staff */
.AccueilEffectifs
{
width: 600px;
height: 200px;
text-align: center;
color: #443c33
margin: auto;
margin-top: 10px;
margin-bottom: 13px;
box-shadow: 0px 0px 0px ;
border-radius: 13px;
}
.NomsAdmins
{color: #443c33;
width: 100%;
font: 13px bold 'Georgia';
text-align: center;
text-shadow: 0px 0px 1px #fff;
text-transform: uppercase;
letter-spacing: 3px;
}
/* Boite Staff */
.Amis
{
border: 1px solid #fff;
width: auto;
height: 13px;
padding-left: 13px;
padding-right: 13px;
margin-top: 13px;
border-radius: 5px;
}
/*Fin HEADER*/
/*Début CATEGORIES*/
/* Corps Catégorie */
.TopCategorie
{
background: url('https://images2.imgbox.com/4a/6a/6fOMPPi0_o.png') top center no-repeat;
height: 105px;
width: 865px;
margin: auto;
margin-top: 15px; /* Annule le margin: auto pour la marge extérieure du haut */
}
.MidCategorie
{
background-color: #887867;
width: 865px;
margin: auto;
}
.FootCategorie
{
background: url('https://images2.imgbox.com/b7/5f/JzCFO6ac_o.png') bottom center no-repeat;
height: 105px;
width: 865px;
margin: auto;
}
/* Titre des catégories */
.CategorieTitle
{
padding-top: 20px;
}
/* Affichage des Forums */
.Forums
{
width: 900px;
margin: auto;
}
.TheForum
{
float: left;
background-image: url('https://i.servimg.com/u/f59/19/33/44/09/20061011.png');
width: 389px;
height: 220px;
margin: 20px;
margin-bottom: 50px;
}
/* Description */
.ForumDescription
{
text-align: justify;
font-size: 11px;
height: 115px;
}
.ForumDImg
{
float: left;
margin: 5px;
}
.ForumDText
{
overflow: auto; /*Barre de défilement */
float: left;
border-left: 2px solid #053c5b;
width: 325px;
height: 100px;
margin: 5px;
padding: 2px;
}
/* Boite titre du Forum */
.ForumTitle
{
background-color: #0b0e31;
border-left: 1px solid #014165;
border-right: 1px solid #014165;
width: 387px;
font-size: 12px;
font-weight: bold;
font-family: 'Georgia', 'Arial', serif;
text-transform: uppercase; /* Lettres capitales */
text-align: center; /*Texte centré */
text-shadow: 0px 0px 2px #000; /* Ombre sur le texte */
margin-top: 5px;
margin-bottom: 5px;
}
/* Titre du Forum */
.ForumTitle a
{
color: #ebe7e8 !important;
transition: 1s all;
}
.ForumTitle a:hover
{
color: #887867 !important;
transition: 1s all;
}
/* Boite qui contient Sous-forums et Dernier Message */
.ForumStats
{
width: 419px;
height: 78px;
}
/* Sous-Forums */
.ForumSous
{
float: left;
overflow: auto;
width: 204px;
height: 78px;
text-align: right;
text-transform: lowercase;
}
/* Image New, No New et Lock */
.ForumIcone
{
position: absolute;
margin-left: -200px;
margin-top: -5px;
}
/* Boite des Derniers Messages */
.ForumLast
{
float: left; /* Flottement */
background-color: #021925;
border: 1px solid #053c5b;
width: 140px;
height: 68px;
text-align: center;
padding: 2px; /*Marge intérieure */
margin-left: 35px; /* Marge Extérieure sur la gauche pour être dans le coin droit */
box-shadow: 0px 0px 3px #000;
border-radius: 5px;
}
/*Fin CATEGORIES*/
/*Début SUJETS*/
/* Un Sujet */
.Sujet
{
background-color: #17344f;
border: 1px solid #095279;
width: 890px;
min-height: 30px;
padding: 5px;
padding-left: 15px; /*La marge intérieure devient de 15px uniquement à gauche*/
margin-top: 5px;
margin-bottom: 5px;
margin-left: 20px; /*On laisse de la place pour l'icone*/
border-radius: 20px;
box-shadow: inset 0px 0px 3px #000000;
}
/* Icone New/No New/Lock */
.SujetIcone
{
position: absolute;
}
/* Titre */
a.SujetTitle
{
font-size: 13px;
text-transform: uppercase;
text-shadow: 0px 0px 1px #000000;
}
/* Auteur */
.SujetAuteur
{
font-size: 13px;
font-style: italic;
}
/* Statistiques */
.SujetsStats
{
border-bottom: 1px solid #095279;
font-size: 13px;
margin-bottom: 1px;
}
/* Dernier Message */
.SujetsPosted
{
background-color: #052231;
border: 1px solid #095279;
width: 200px;
height: 50px;
font-size: 13px;
margin: 5px;
box-shadow: 0px 0px 3px #000000;
}
/*Redimension du titre catégorie*/
a.nav img
{
width: 150px;
}
/*Fin SUJETS*/
/*Début MESSAGES*/
/*Fin MESSAGES*/
/*Début QEEL*/
/*Titre QEEL*/
.QeelIMG
{
background: url('https://images2.imgbox.com/97/fd/TV78TC34_o.png') bottom center;
width: 884px;
height: 108px;
margin: auto;
}
.Qeel
{
position: relative; /*Position primordiale sur les autres éléments */
background-color: #887867;
border-bottom: 1px solid #372821;
width: 948px;
height: 330px;
margin-bottom: -28px;
}
.QeelTable
{
width: 848px;
margin: auto;
}
/*Colonne*/
.QeelRow
{
overflow: auto;
position: absolute;
z-index: 1;
background-color: #010f16;
border: 1px solid #372821;
width: 280px;
height: 300px;
font-size: 9px;
margin-left: 0px;
margin-top: 15px;
opacity: 0.5;
transition: 1s;
}
.QeelRow:hover
{
z-index: 99; /* Priorité d'affichage */
width: 350px;
height: 400px;
margin-top: -50px;
margin-left: -50px;
transition: 1s;
}
/*Connexions dernières 24h*/
.QeelConnected
{
overflow: auto;
width: 250px;
height: 190px;
transition: 1s;
}
.QeelRow:hover .QeelConnected
{
width: 340px;
height: 290px;
transition: 1s;
}
/*Stats Messages/Membres*/
.QeelStats
{
font-size: 11px;
font-weight: bold;
text-align: center;
}
/*Groupes*/
.gr1, .gr2, .gr3, .gr4, .gr5, .gr6, .gr7, .gr8, .gr9
{
font-size: 13px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
margin-left: 13px;
margin-right: 13px;
}
/*Administrateur*/
.gr1
{
color: #00f3ff !important;
}
/*Modérateurs*/
.gr2
{
color: #0051ff !important;
}
/*Créatures surnaturelles*/
.gr3
{
color: #c36ff5 !important;
}
/*Humains*/
.gr4
{
color: #0075ff !important;
}
/*Neos*/
.gr5
{
color: #00B0F0 !important;
}
/*Eglise Blanche*/
.gr6
{
color: #b5e5f0 !important;
}
/*L'étoile rouge*/
.gr7
{
color: #9248c6 !important;
}
/*Les Insoumis*/
.gr8
{
color: #4fb2c8 !important;
}
/*L'Ordre St Emeline*/
.gr9
{
color: #a6c0fc !important;
}
/*Fin QEEL*/
/*Début FOOTER*/
#page-footer
{
/*background: #17344f url('https://i.servimg.com/u/f59/19/33/44/09/11556310.jpg');
border-top: 1px solid #095279;
width: 948px;
height: 122px;
text-shadow: 1px 1px 1px #000 !important;
padding-top: 5px;
}
/*Liens du Footer*/
#page-footer a
{
font-size: 10px;
color: #086fe2 !important;
}
/*Fin FOOTER*/
/*Début CHATBOX*/
/*Fin CHATBOX*/
.code
{
background-color: #052231;
border: 1px solid #095279;
padding: 3px;
color: #658899;
box-shadow: 0px 0px 3px #000;
border-radius: 5px;
}
.quote
{
background-color: #052231;
border: 1px solid #095279;
padding: 3px;
color: #658899;
box-shadow: 0px 0px 3px #000;
border-radius: 5px;
}
.spoiler_closed hidden, .spoiler_content, .spoiler_closed
{
background-color: #052231;
border: 1px solid #095279;
padding: 3px;
color: #658899;
box-shadow: 0px 0px 3px #000;
border-radius: 5px;
}
.row3Right, .thHead, .thCornerL, .thCornerR, .thTop, .thLeft, .thRight, .catLeft, .catRight, .catHead, .catBottom
{
border: none !important;
border-left: none !important;
border-right: none !important;
}
textarea
{
background-color: #17344F;
border: 1px solid #095279;
}
input
{
background-color: #17344F;
border: 1px solid #095279;
text-shadow: 0px 0px 1px #000;
box-shadow: 0px 0px 3px #000;
border-radius: 5px;
}
/* --- TEST SWTCHEROO ---*/
:root {
--color-text: rgba(255, 255, 255, 0.87);
--color-bg: trans;
--color-delete: #e74c3c;
--color-tooltip: #010203;
--color-squircle:lightgrey;;
--color-accent: lightgrey;
--color-button: darkgrey;
--color-pill: darkgrey;
--gap-size: 16px;
--ease: cubic-bezier(0.4, 0.0, 0.2, 1);
--ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}
.switcheroo {
/* switcheroo barre et position */
position: fixed;
z-index: 999;
top: 0;
bottom: 300px;
margin-left:-5px;
color: var(--color-text);
background-color: var(--color-bg);
font-size: 14px;
margin-top:50px;
}
.switcheroo, .switcheroo *, .switcheroo *:before, .switcheroo *:after {
box-sizing: border-box;
}
.switcheroo__squircles {
/* liste flex des comptes et boutons */
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
padding: 0;
list-style: none;
background-color: var(--color-body);
padding: var(--gap-size);
gap: var(--gap-size);
}
.switcheroo__squircle {
/* compte ou bouton */
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-squircle);
width: 37px;
height: 37px;
border-radius: 50%;
cursor: pointer;
position: relative;
transition: border-radius 128ms var(--ease);
}
.switcheroo__squircle--button {
transition: border-radius 128ms var(--ease);
color: var(--color-button);
}
.switcheroo__squircle--button:hover {
color: black;
background-color: var(--color-button);
}
.switcheroo__squircle:hover {
border-radius: 36%;
}
.switcheroo__squircle:hover .switcheroo__popper {
/* tooltip hover */
opacity: 1;
transform: translateY(-50%) scale(1);
}
.switcheroo__squircle:hover:before {
/* puce hover */
opacity: 1;
transform: translate(-100%, -50%) scale(0.5);
}
.switcheroo__squircle:hover .switcheroo__delete {
/* delete button */
opacity: 1;
transform: scale(1);
}
.switcheroo__squircle:before {
/* puce */
content: "";
width: 100%;
height: 100%;
display: block;
background-color: var(--color-pill);
position: absolute;
border-radius: 4px;
top: 50%;
transform: translate(-100%, -50%) scale(0);
transition: transform 128ms, opacity 64ms;
pointer-events: none;
opacity: 0;
}
.switcheroo__squircle.active {
/* puce active */
border-radius: 36%;
cursor: default;
}
.switcheroo__squircle.active:before {
opacity: 1;
transform: translate(-85%, -50%) scale(0.2);
border-radius: 50%;
}
.switcheroo__link {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
display: flex;
align-items: center;
justify-content: center;
}
.switcheroo__link:hover {
text-decoration: none;
}
.switcheroo__popper {
/* tooltip */
background-color: var(--color-tooltip);
padding: 0.68rem 1rem;
position: absolute;
left: 155%;
top: 50%;
transform-origin: left;
transform: translateY(-50%) scale(0.98);
width: -webkit-max-content;
width: max-content;
border-radius: 4px;
z-index: 0;
opacity: 0;
transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
pointer-events: none;
color: white;
}
.switcheroo__popper:before {
/* tooltip arrow */
content: "";
position: absolute;
width: 24px;
height: 24px;
background-color: var(--color-tooltip);
left: -2px;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
z-index: -1;
}
.switcheroo__avatar {
/* avatars */
position: relative;
width: 100%;
height: 100%;
border-radius: inherit;
overflow: hidden;
}
.switcheroo__avatar img {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.switcheroo__logo {
/* button logo */
}
.switcheroo__logo img {
/* logo image taille */
width: 32px;
}
.switcheroo__logo:hover {
/* logo hover */
background-color: var(--color-accent);
}
.switcheroo__delete {
/* button delete */
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 16px;
height: 16px;
top: -2px;
right: -2px;
border-radius: 50%;
background-color: var(--color-delete);
transform: scale(0);
opacity: 1;
transition: transform 128ms var(--ease), opacity 64ms var(--ease);
cursor: pointer;
}
.switcheroo__delete i {
transform: scale(0.5);
pointer-events: none;
}
.switcheroo__divider {
/* petit divider apres logo */
width: 100%;
height: 2px;
background-color: var(--color-pill);
border-radius: 1px;
opacity: 0.06;
transform: scale(0.
;
}
.switcheroo__form {
/* formulaire de connexion */
padding: 48px;
}
.switcheroo__form-row {
display: flex;
flex-flow: column;
align-items: flex-start;
margin-bottom: 16px;
}
.switcheroo__form-label {
/* titre du champs */
margin-bottom: 8px;
font-size: 14px;
text-transform: uppercase;
color: var(--color-text) !important;
}
.switcheroo__form-input {
/* champs du formulaire */
padding: 6px !important;
font-size: 16px !important;
border-radius: 4px !important;
width: 100% !important;
border-bottom: 2px solid var(--color-accent) !important;
background-color: var(--color-bg) !important;
color: var(--color-text) !important;
cursor: text !important;
}
.switcheroo__form-button {
/* bouton pour envoyer */
border-radius: 8px;
padding: 8px;
border: none;
outline: none;
box-shadow: none;
text-transform: uppercase;
font-size: 14px;
align-self: flex-end;
color: #fff;
background-color: darkgrey;
}
.monomer-overlay {
position: fixed;
z-index: 999;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
transition: 0.2s opacity ease;
background: rgba(0, 0, 0, 0.6);
}
.monomer-modal {
position: fixed;
z-index: 999;
top: 50%;
left: 50%;
opacity: 0;
width: 94%;
padding: 24px 20px;
transition: 0.2s opacity ease;
transform: translate(-50%, -50%);
border-radius: 2px;
background: var(--color-squircle);
color: var(--color-text);
}
.monomer-modal.monomer-open.monomer-anchored {
top: 20px;
transform: translate(-50%, 0);
}
.monomer-modal.monomer-open {
opacity: 1;
}
.monomer-overlay.monomer-open {
opacity: 1;
}
/* Close Button */
.monomer-close {
font-family: Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 24px;
text-align: center;
width: 24px;
height: 24px;
position: absolute;
top: -5px;
right: -5px;
padding: 5px;
cursor: pointer;
color: #fff;
border: 0;
outline: none;
background: var(--color-delete);
border-radius: 50%;
padding: 0;
}
.monomer-close:hover {
opacity: 0.8;
}
/* --- FIN TEST SWTCHEROO ---*/
- le Dim 20 Nov 2022 - 21:47
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: lien sous forum qui se cache derrière l'image
- Réponses: 8
- Vues: 849
probleme couleur
Bonjour,Si ce n'est pas ça, alors cela signifie que c'est votre CSS personnalisé qui rechange la valeur donnée dans ces champs.
Dans votre CSS personnalisé, modifiez les valeurs de background-color dans les lignes suivantes :
- Code:
div.sceditor-toolbar {
background-color :peru!important;
}
.sceditor-container iframe, .sceditor-container textarea {
background-color: peachpuff!important;
}
Vous pouvez y mettre la valeur que vous souhaitez à la place : #fff!important; pour blanc, ou autres.
Exemple :
- Code:
div.sceditor-toolbar {
background-color: #fff!important;
}
.sceditor-container iframe, .sceditor-container textarea {
background-color: #fff!important;
}
Si vous n'y arrivez pas ou si ça ne fonctionne pas encore totalement, n'hésitez pas à fournir votre feuille CSS complète pour que nous puissions faire davantage de tests.
- le Jeu 16 Déc 2021 - 12:55
- Rechercher dans: Archives des problèmes avec un code
- Sujet: probleme couleur
- Réponses: 8
- Vues: 693
Modifier la couleur du texte dans la zone de saisie
gp246 a écrit:Le problème est que par défaut c'est le mode wysiwyg qui est activer lors de réponses de message, si on change le mode d'édition a ce moment la oui le texte est blanc mais je ne veut pas changer le mode a chaque fois pour avoir un texte en blanc.
Avec votre ligne de code plus haut .sceditor-container textarea{color:#fff !important} placée dans la feuille css et le code JavaScript que je vous ai partagé, cela fonctionnera sur les deux modes peu importe celui qui est affiché par défaut.
gp246 a écrit:j'ai essayer de changer toute les couleur une par une dans le panneau d'administration
Vous ne devez pas passer par le panneau d'administration. C'est une couleur spécifique qui se change en passant par le JavaScript.
Alors, en examinant la page que vous avez communiquée, il y a plusieurs soucis dans votre code JavaScript.
- Je vois que vous avez mis le code que je vous ai partagé directement dans un autre code, apparemment pour un système de bannière défilante ou aléatoire ? Le souci c'est que ce code ne marche pas et a des soucis de syntaxe (présence d'un <head> dans un fichier javascript...)
- Vous avez mis #white pour la couleur du texte alors que ça ne marche pas, c'est soit #fff tel que je vous l'ai mis à l'origine, soit white
Du coup vous avez deux solutions :
- soit vous recréez un code JavaScript à côté avec le code correct pour la couleur (en laissant le code des bannières avec ses erreurs)
- soit on apporte la correction sur les deux codes mais dans ce cas merci de me préciser si vous souhaitez une bannière défilante ou aléatoire
- le Sam 2 Oct 2021 - 15:17
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Modifier la couleur du texte dans la zone de saisie
- Réponses: 9
- Vues: 655
Modifier la couleur du texte dans la zone de saisie
Bonjour et bienvenue sur Forumactif !
Vous pouvez passer par cette
https://forum.forumactif.com/t352754-modifier-l-apparence-de-l-editeurChanger la couleur de texte en mode wysiwyg
- Allez dans Modules > Gestion des codes javascript
- Vérifiez que l'option "Activer la gestion des codes Javascript " est cochée sur OUI
- Créez un nouveau code. Donnez lui un nom ("couleur wysiwyg" par exemple)
- Cochez "sur toutes les pages" pour le placement
Dans votre cas, vous avez juste à modifier le "red" en #fff, comme ceci :
- Code:
$(function() {
var a = $("#text_editor_textarea");
0 != a.length && $(function() {
a.sceditor && a.sceditor("instance") && a.sceditor("instance").css("body,p{color:#fff}");
});
});
- le Sam 2 Oct 2021 - 8:48
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Modifier la couleur du texte dans la zone de saisie
- Réponses: 9
- Vues: 655
Bouton citer par mp
Bonjour et merci a vous j'ai fais la première partie mais après je comprends pas quand vous dite1
Résolu Re: Dysfonctionnement FA7UP
Message par Milouze14 Jeu 16 Sep - 9:58
Hello les ami(e)s,
je me suis penché sur ce script et ce sont deux lignes qu'il fallait quelque peut modifier Wink .
var $a_admin=$("a[href*="tid="]",data);
tid=$a_admin.length&&/tid=([0-9a-f]{32})$/i.exec($a_admin.attr("href"))[1];
Deviennent:
var $a_admin=$("a[href^='/admin/?part=admin']",data);
tid=$a_admin.length&&/tid=(.{47})$/i.exec($a_admin.attr("href"))[1];
Le soucis par contre est le suivant:
Le script était hébergé par no_way (que je salue),
il faut donc l'héberger sur votre propre forum .
Pour cela, il faudra suivre les instructions suivantes à la lettre Wink .
Pour le script, il ne faudra cocher aucune case,on s'en servira juste pour appeler ce dernier via la page html de Fa7Up
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
NE COCHEZ AUCUNE CASE
Déposez ceci:
(function(){if(window.fa7up&&!window.fa7up.tagName){console.log("fa7up déjà déclaré dans le contexte global window, abandon");return}
var fa7up=function(s_obj,form_values){
"use strict";
try{
var ref=this,s_obj=s_obj||false,tid=false,lastUpdateTid,form_values=form_values||false,LVLS_USER_ACQUIRED={"-1":1,"0":3,"2":7,"1":15}[window._userdata["session_logged_in"]?window._userdata["user_level"]:-1];
this.expectedSteps=this.doneSteps=0;
this.afterTidExtraction=function(fn,args){
try{
if(ref.LVL_REQ[s_obj["req_lvl"]]!=(ref.LVL_REQ[s_obj["req_lvl"]]&LVLS_USER_ACQUIRED)){
if(s_obj["req_lvl"]==="ADMINISTRATOR") throw "Vous n'avez pas les droits d'accès au niveau administrateur";
if(s_obj["req_lvl"]==="MODERATOR") throw "Vous n'avez pas les droits d'accès au niveau modérateur";
if(s_obj["req_lvl"]==="MEMBER") throw "Vous n'avez pas les droits d'accès au niveau membre";
}
/*Get tid*/
ref.LVL_REQ[s_obj["req_lvl"]]===ref.LVL_REQ["ADMINISTRATOR"]&LVLS_USER_ACQUIRED&&$.get("/admin",function(data){
try{
var $a_admin=$("a[href^='/admin/?part=admin']",data);
tid=$a_admin.length&&/tid=(.{47})$/i.exec($a_admin.attr("href"))[1];
if(!tid||!$a_admin.length)throw "tid pas trouvé, assurez-vous d'être connecté sous un compte administrateur";
lastUpdateTid=Date.now();
if(typeof fn=="function")fn.apply(null,args);
}catch(error){
ref.errorMgnt(error)
}
}).fail(function(a,b,error){
ref.errorMgnt("PA:"+error)
})
}catch(error){
ref.errorMgnt(error)
}
};
this.getTid=function(){
return tid||false;
};
this.format=function(mode){
if(!s_obj||!form_values)return;
var mdm,
replace_tokens=function(a){
return a.replace(/\{(FA7UP_[^\}]+)\}/g,function(m,m1){
if(form_values[m1]!=null&&typeof form_values[m1]!="undefined")return form_values[m1];
return m
})
},
modes_array=[ref.CSS,ref.JS,ref.HTML];
while(!!(mdm=modes_array.shift())){
mdm&=mode;
switch(mdm){
case ref.CSS:
if(s_obj.css)return replace_tokens(s_obj.css);
break;
case ref.JS:
if(s_obj.js)return replace_tokens(s_obj.js);
break;
case ref.HTML:
if(s_obj.html)return replace_tokens(s_obj.html);
break;
}
}
};
/*ERROR 1054 (42S22): Unknown column 'XSD' in 'FA7UP_MSRV_CFG'*//*Oups, une exception a été levée, votre installateur n'est peut être pas compatible voir https://fa7up.fr/fa7up_installer/doc_fa7up_installer.html*/
this.setFormValues=function(f_k){
form_values=f_k||false;
};
/*auto-init*/
ref.afterTidExtraction();
}catch(error){
this.errorMgnt("fa7up declaration"+error);
}
};
fa7up.prototype={
LVL_REQ:{
"ANONYMOUS":1,
"MEMBER":3,
"MODERATOR":7,
"ADMINISTRATOR":15
},
CSS:1,
JS:2,
HTML:4,
INST_JS_NONE:0,
INST_JS_INDEX:1,
INST_JS_PORTAL:2,
INST_JS_FORUMS:4,
INST_JS_TOPICS:8,
INST_JS_ALLPAGES:16,
info:function(info,timer,delay){
var timer=timer||2000,delay=delay||300;
console&&console.log&&console.log(info);
if(!$("#fa7up_infos").length)$("#fa7up").append("<aside id="fa7up_infos"></aside>");
$info=$("<ul class="fa7up-table"><li><div><strong>Information</strong></div></li><li><div>"+(info.message||info)+"</div></li></ul>");
$info.appendTo("#fa7up_infos");
timer=$("#fa7up_infos>ul").length--*delay+timer;
setTimeout(function(){this.remove();}.bind($info),timer);
},
clear_info:function(){
if($("#fa7up_infos").length)$("#fa7up_infos").remove();
},
errorMgnt:function(error){
console&&console.error&&console.error(error);
$("#fa7up_errorMgnt").remove();
$("#fa7up_infos .wait").parentsUntil("ul").parent().remove();
$("<ul id="fa7up_errorMgnt" class="fa7up-table"><li><div><div style="position:relative"><strong>Erreur</strong><strong id="fa7up_errorMgnt_close">X</strong></div></div></li><li><div><div id="fa7up_errorMgnt_msg">"+(error.message||error)+"</div></div></li></ul>").appendTo("#fa7up");
$("#fa7up_errorMgnt_close").on("click",function(){$("#fa7up_errorMgnt").remove()});
},
args_GET:function(t){
var args={},i,t_args=document.location.search.trim().substr(1).split("&");
for(i in t_args){
var e=t_args[i],arg=decodeURIComponent(e.substr(0,e.indexOf("="))),arg_v=decodeURIComponent(e.substr(e.indexOf("=")+1));
args[arg]=isNaN(arg_v)?arg_v:parseFloat(arg_v);
}
return t?args[t]:args;
}
};
window.fa7up=fa7up;
$(function(){
try{
if(!$("#fa7up").length)return;
$("<link/>",{"rel":"stylesheet","type":"text/css","href":"//fa7up.fr/fa7up.css"}).appendTo($("head"));
$("#fa7up").replaceWith("<section id="fa7up"><header><img src="//fa7up.fr/svg/logo_FA7UP.svg" id="fa7up-logo" alt="logo FA7UP"/><p>Sélectionnez ce que vous souhaitez installer/supprimer puis suivez les instructions</p><div id="conteneur-fa7up-choix"><select id="fa7up-choix"></select><input type="button" id="fa7up-validation" value="ok"></div></header><aside id="fa7up_infos"></aside></section>");
var uninstall_mode=fa7up.prototype.args_GET("uninstall")===1?1:0;
$("#fa7up>header").prepend($("<button>",{"id"
!uninstall_mode?"fa7up_uninstall_button":"fa7up_install_button"),"text":!uninstall_mode?"Désinstaller":"Installer","style":"float:right"}));$("#fa7up-choix").html("<optgroup label="Installateurs"><option value="3">Boutique</option><option value="4">Boutons messagerie</option><option value="17">Citer post par MP</option><option value="5">FaForm</option><option value="1">FontAwesome (ver 4.7.0)</option><option value="2">FontAwesome (ver 4.7.0) Bouton editeur</option><option value="6">Latex - MathJax</option><option value="12">MyBBCode</option><option value="13">Notification des derniers sujets actifs</option><option value="10">Systeme d alertes</option><option value="18">Widget evenements calendrier</option></optgroup><optgroup label="Outils"><option value="16">Compilateur SCSS</option><option value="19">Recherche dans les templates</option></optgroup><optgroup label="Autres"><option value="11">Entetes de votre forum</option></optgroup>");
var id=fa7up.prototype.args_GET("id")||$("#fa7up-choix").val();
$("#fa7up_install_button,#fa7up_uninstall_button").on("click",function(){
var a=[];
if(!uninstall_mode)a.push("uninstall=1");
a.push("id="+$("#fa7up-choix").val());
document.location=document.location.pathname+"?"+a.join("&");
});
$("#fa7up-choix option[value=""+id+""]").prop("selected","selected");
/*FA7UP RELIES ON UTF8 CHARSET*/
/*
if(!/utf-8$/i.test($("meta[http-equiv='content-type'][content^='text/html;']").attr("content")))throw "FA7UP ne peut fonctionner que sur les forums en utf-8";
*/
$("#fa7up-validation").on("click",function(e){
e.preventDefault();
$("#fa7up_errorMgnt").remove();
$("#fa7up_infos").empty();
fa7up.prototype.info("<div class="wait"></div><p class="al-center">Veuillez patienter ...</p>",60000);
$.post("//fa7up.fr/fa7up_rq.php?uninstall="+uninstall_mode+"",{"sid":$("#fa7up-choix").val()},function(d){
try{
var expectedSteps=0;
$("#fa7up_infos").empty();
if(d.error)throw d.error;
$("#fa7up-crt").remove();
$("#fa7up").append("<article id="fa7up-crt"><header><h3>"+d.nom+"</h3></header><div id="fa7up_expectedSteps"></div></article>");
/*Expected Steps*/
if(d.js&&d.js!="0"){expectedSteps|=fa7up.prototype.JS;$("#fa7up_expectedSteps").append("<object type="image/svg+xml" data="//fa7up.fr/svg/JS.svg" alt="JS" style="height:1em"><b>[JS]</b></object>")};
if(d.css&&d.css!="0"){expectedSteps|=fa7up.prototype.CSS;$("#fa7up_expectedSteps").append("<object type="image/svg+xml" data="//fa7up.fr/svg/CSS.svg" alt="CSS" style="height:1em"><b>[CSS]</b></object>")};
if(d.html&&d.html!="0"){expectedSteps|=fa7up.prototype.HTML;$("#fa7up_expectedSteps").append("<object type="image/svg+xml" data="//fa7up.fr/svg/HTML.svg" alt="HTML" style="height:1em"><b>[HTML]</b></object>")};
/**/
if(d.html_inst||d.js_inst||d.css_inst){
if(d.css_inst){
$("#fa7up_css").remove();
$("<style>",{"type":"text/css","id":"fa7up_css"}).text(d.css_inst).appendTo($("head:first"));
}
if(d.html_inst){
$("#fa7up-crt").append(d.html_inst);
}
if(d.js_inst){
$("#fa7up_js").remove();
$("<script>",{"type":"text/javascript","id":"fa7up_js"}).text(d.js_inst).appendTo($("head:first"));
}
fa7up.prototype.info("Installateur prêt",500);
}else if(d.uninstall){
var _fa7up=new fa7up(d);
_fa7up.onceUninstalled=function(){$("#fa7up-crt").empty()};
$("#fa7up-crt").append("<ul class="fa7up-table w100p" id="fa7up_uninstall"><li></li></ul>");
if(d.js&&d.js!="0")$("#fa7up_uninstall>li").append("<div class="al-center"><img src="//fa7up.fr/svg/JS.svg" style="height:1.8em;cursor:pointer" id="fa7up_delete_js" alt="[JS]" /></div>");
if(d.css&&d.css!="0")$("#fa7up_uninstall>li").append("<div class="al-center"><img src="//fa7up.fr/svg/CSS.svg" style="height:1.8em;cursor:pointer" id="fa7up_delete_css" alt="[CSS]" /></div>");
if(d.html&&d.html!="0")$("#fa7up_uninstall>li").append("<div class="al-center"><img src="//fa7up.fr/svg/HTML.svg" style="height:1.8em;cursor:pointer" id="fa7up_delete_html" alt="[HTML]" /></div>");
expectedSteps&&$("#fa7up-crt").append("<button id="fa7up_delete_all" class="w100p" style="background:#fc431b;color:#fff;font-weight:800">Désinstaller</button>");
$("#fa7up_delete_js").on("click",_fa7up.uninstall.bind(null,expectedSteps&fa7up.prototype.JS));
$("#fa7up_delete_css").on("click",_fa7up.uninstall.bind(null,expectedSteps&fa7up.prototype.CSS));
$("#fa7up_delete_html").on("click",_fa7up.uninstall.bind(null,expectedSteps&fa7up.prototype.HTML));
$("#fa7up_delete_all").on("click",_fa7up.uninstall.bind(null,expectedSteps));
}else{
throw "Aucune instruction disponible";
}
}catch(error){
fa7up.prototype.errorMgnt("#fa7up-validation:"+error)
}
});
})
}catch(error){
fa7up.prototype.errorMgnt(error);
}
})}())
Penses à cliquer sur le bouton VALIDER
Le script a était créé,
il faut donc repérer le lien:
Dysfonctionnement FA7UP 132
puis déposer celui ci dans la page html créée pour FA7UP, cliquez sur le petit engrenage
Pour l'exemple mon lien était celui-ci:
https://testphpbb3.1fr1.net/30328.js
Il faut donc remplacer le lien" https://fa7up.fr/fa7up.js " :
Par le lien js créé:
https://testphpbb3.1fr1.net/30328.js
Et voilou je trouve ça ou !
- le Mar 28 Sep 2021 - 9:52
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Bouton citer par mp
- Réponses: 7
- Vues: 784
Problème avec le menu
Bonjour à tous la communautés.J'ai un forum ici depuis plusieurs années et j'ai très rarement eu des problèmes avec mon forum. Par contre c'est un ami qui gérait tout cela mais ne semble plus venir sur le forum donc j'ai voulu faire des modifications mais je suis pas top top en css / html avancé. ALors je me tourne vers vous....
Si vous aller sur la page d'accuel vous devez voir un menu juste en bas du logo dans la partis noir mais malheureusement on ne le vois pas sauf si on passe le curseur dessus.... Voici le code est-ce que quelquun peut m'aider:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>body {font-family: Arial, Helvetica, sans-serif;margin: 0;}.header {background-color: #fff;text-align: center;padding-top: 5px;width:100%;}#navbar {overflow: hidden;background-color: #333;z-index:99999 !important;height:49px;width: 100%;}#navbar a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;font-size: 17px;}#navbar a:hover {background-color: #ddd;color: black;}#navbar a.active {background-color: #FFFFFF;color: white;}.sticky {position: fixed;top: 0;width: 100%;}</style></head><body><div class="headercell"><div class="header"><center><a href="https://www.hockeyfederation.com/"><img src="https://i.servimg.com/u/f84/16/67/19/10/logo_b11.png" id="bannerbg" style="height:260px !important; width:762px !important;"></center></div></div><!--
DEBUT DU BOUTON M.P --><center><div id="navbar"></div></center><center><a class="active" href="https://www.hockeyfederation.com/forum">Accueil</a><a href="http://hf.hockeyhq.net/HockeyFederation/portail/">Portal</a> <a href="/search">Recherche</a><a href="/memberlist">Membres</a><a href="/profile?mode=editprofile">Profil</a><a href="/privmsg?folder=inbox"></a><span class="M14_recept-faLeft"></span><span class="M14_recept-faRight"></span></center><script>window.onscroll = function() {myFunction()};var navbar = document.getElementById("navbar");var sticky = navbar.offsetTop;function myFunction() {if (window.pageYOffset >= sticky) {navbar.classList.add("sticky")} else {navbar.classList.remove("sticky");}}</script></body></html>
<html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>body {}.sidepanel {width: 0;position:fixed;z-index: 999 !important;height: auto;top: 282px;left: 0;background-color: #333;overflow-x: hidden;transition: 0.9s;padding-top: 14px;}.sidepanel a {padding: 8px 8px 8px 32px;text-decoration: none;font-size: 25px;color: #818181;display: block;transition: 0.3s;}.sidepanel a:hover {color: #f1f1f1;}.sidepanel {font-size: 20px;cursor: pointer;background-color: #;color: #ffffff;border: none;position: absolute;right: 32px;}a.closebtn {cursor: pointer;color: transparent !important;position: absolute;right: 15%;background-image: url(https://i.servimg.com/u/f12/16/58/47/07/close10.png);height: 32px !important;width: 32px !important;background: no repeat !important;background-repeat: no-repeat;margin-top: 14px;}a.closebtn:hover {}.openbtn {font-size: 20px;font-weight: bold;cursor: pointer;border: none;position: absolute;margin-top: 7px;z-index: 1;right: 31px;color: #fff !important;width: 35px;height: 34px;transition-property: all;border-radius: 25px;background-color: #006BBD;text-align: center;} .openbtn:hover {opacity:0.7;} </style></head>
</html>
- le Mer 28 Avr 2021 - 5:48
- Rechercher dans: Corbeille & Titres non explicites
- Sujet: Problème avec le menu
- Réponses: 2
- Vues: 1788
Restructuration forum
Bonjour bonjour,Il s'agit donc de ces blocs d'intentifiants 'class' :
/**DERNIER MESSAGE**/
DE LÀ À JUSQU'À DE LÀ
/**FIN DERNIER MESSAGE**/
Es-tu sûre de cet identifiant dermess:before ?
Et ceci : content: ''; le pseudo-élément 'before', à minima, la propriété content doit contenir des "" (une paire de guillemets) vides, ça c'est bon.
L'élément inséré (même si 'vide') est par défaut un élément inline, et pour lui donner une hauteur, un padding, des marges, etc, il faut le définir explicitement comme un élément block.
Attention à ne pas utiliser des paramètres incompris au préalable.
Il faut aussi avoir une connaissance solide du codage pour cumuler plusieurs tutos, d'une part pour que la feuille de style soit cohérente, donc sans contradiction de codes, d'autre part, il faut être sûr que le(s) codeur(s) code(nt) JUSTE, parce que ça tu en trouves partout dans le web des tutos incorrects, alors ça peut aller uniquement si tu es mesure de les corriger.
Voici ces éléments relatifs aux losange-dernier-message corrigés:
- Spoiler:
- /**DERNIER MESSAGE**/
/*Losange*/
.dermess {
width : 0;
height : 0;
border-left: 100px solid transparent;
border-right:100px solid transparent;
border-bottom: 70px solid #769c8d;
position : relative;
top : -35px;
left : 8px;
}
.dermess:before {
content:'';
display: block; /* a indiquer avec le pseudo-élément 'before' et 'after' */
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 70px solid #769c8d;
width:0;
height:0;
position: absolute;
top:69px;
left:-102px;
}
/*Contenu du dernier message*/
.policedermess {
width: 100px;
height: 100px;
top:29px;
left:-48px;
color: #fff !important; /* espace avec !important - couleur-date */
font: bold 13px papyrus; /* bien ! */
text-align: center;
position: relative;
}
/*Mise en forme des liens du dernier message*/
/* lien dernier message */
.policedermess a {
color: #fff !important; /* si tu veux changer la couleur-titre de base avec le !important SI change de la couleur lien de base du a */
}
.policedermess a:hover {
color: #fff !important; /* hover couleur-titre dernier message avec le !important SI change de la couleur lien de base du a:hover */
font: bold 15px papyrus; /* bien ! */
}
/**FIN DERNIER MESSAGE**/
Si tu veux changer aussi la couleur des pseudos, il va falloir agir sur le profil en attribuant un class "dermesspseudo-index" par exemple pour qu'il ne se modifie que là et ensuite le reporter ce bloc-losange.
- le Sam 25 Juil 2020 - 8:33
- Rechercher dans: Corbeille & Titres non explicites
- Sujet: Restructuration forum
- Réponses: 32
- Vues: 2392
Demande d'aide sur une fiche de présentation pour contexte et autres sujets
Bienvenue,Juste une erreur dans le code pour page-HTML, j'y ai remis le CSS, me suis mélangée les codes. donc voici le bon:
- Spoiler:
- Code:
<br />
<html>
<head>
<style type="text/css" media="all">
/*------- overflow-container ---------*/
/* pricipal container */
.contprincipal {
width: 550px;
font-family: georgia;
color: dimgray;
}
/* container-block title */
.contblocktitle {
height: 50px;
border-top: 5px solid darkcyan;
border-bottom: 5px solid darkcyan;
}
/* block-title */
.blocktitle {
font-size: 30px; color: silver; font-style: italic;
}
/*----- 2containers left-right -----*/
/* col-left */
.colleft {
width: 120px; height: 700px;
color: #fff; font-size: 19px;
font-weight: bold; font-variant: small-caps; /* petites capitales avec mahuscule debut-phrase */
background-color: darkcyan;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
}
/* 3block_verical text */
.block1l {
position: absolut;
width: 110px; height: 700px;
display: block;
}
.block2l {
width: 110px; height: 670px;
display: block;
writing-mode: tb-rl; /* verti-text bottom to top left-right */
transform: rotate(-180deg); /* verti-text se lit pour moz et chromium */
}
.block3l {
padding: 7px 3px; /* means same top-botton 7px and same right-left 3px */
}
/* col-right overflow-text */
.colright {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
padding: 7px;
}
/* 3blocks text-overflow */
.block1r {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
display: block;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
text-align: justify;
}
.clear {
clear:both; float:none;
}
.block2r {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
display: block;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling : auto;
border: 0px solid darkcyan;
}
.block3r {
padding: 10px; /* espace texte avec bords de son bloc */
}
</style>
</head>
<body>
<!-- start_container principal -->
<table align="center">
<tr>
<td align="center" valign="middle" class="contprincipal">
<!-- start_container-block title -->
<table style="width: 100%;">
<tr>
<td align="center" valign="middle" class="contblocktitle">
<!-- start block-title -->
<div class="blocktitle" style="text-shadow: 1px 1px 2px white;">
Contexte
</div>
<!-- end_block-title -->
</td>
</tr></table>
<!-- end_container-block title -->
</td></tr>
<!-- start_2containers left-right -->
<tr>
<td align="center" valign="middle">
<table align="center">
<tr>
<!-- start_col left -->
<td class="colleft" align="left" valign="middle">
<!-- start_3blocks left vertical-text -->
<div class="block1l">
<div class="block2l">
<div class="block3l">
Suspendisse egestas nulla quis massa ultricies Lorem ipsum dolor
sit amet consectetur adipiscing elit Donec quis gravida neque.
Suspendisse egestas nulla quis massa ultricies
</div>
</div>
</div>
<!-- end_3blocks left vertical-text -->
</td>
<!-- end_col left -->
<!-- start_col right -->
<td class="colright" align="center" valign="bottom">
<!-- start_3blocks right text-overflow -->
<div class="block1r">
<div class="block2r">
<div class="block3r">
<img style="width: 100px; height: 100px; float: right; margin-left: 5px;" src="https://zupimages.net/up/20/05/7di8.png" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.
<div class="clear"></div>
</div>
</div>
</div>
<!-- end_3blocks right text-overflow -->
</td>
<!-- end_col right -->
</tr>
</table>
<!-- end_2containers left-right -->
</td></tr></table>
<!-- end_container principal -->
</body>
</html>
Le CSS (ne sais pas si tu as pris la dernière version:CSS :
--> PA --> Affichage --> couleur --> Feuille de style CSS
- Spoiler:
/*------- start overflow-container ---------*/
/* pricipal container */
.contprincipal {
width: 550px;
font-family: georgia;
color: dimgray;
}
/* container-block title */
.contblocktitle {
height: 50px;
border-top: 5px solid darkcyan;
border-bottom: 5px solid darkcyan;
}
/* block-title */
.blocktitle {
font-size: 30px; color: silver; font-style: italic;
}
/*----- 2containers left-right -----*/
/* col-left */
.colleft {
width: 120px; height: 700px;
color: #fff; font-size: 19px;
font-weight: bold; font-variant: small-caps; /* petites capitales avec mahuscule debut-phrase */
background-color: darkcyan;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
}
/* 3block_verical text */
.block1l {
width: 110px; height: 700px;
display: block;
}
.block2l {
width: 110px; height: 670px;
display: block;
writing-mode: tb-rl; /* verti-text bottom to top left-right */
transform: rotate(-180deg); /* verti-text se lit pour moz et chromium */
}
.block3l {
padding: 7px 3px; /* means same top-botton 7px and same right-left 3px */
}
/* col-right overflow-text */
.colright {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
padding: 7px;
}
/* 3blocks text-overflow */
.block1r {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
display: block;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
text-align: justify;
}
.clear {
clear:both; float:none;
}
.block2r {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
display: block;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling : auto;
border: 0px solid darkcyan;
}
.block3r {
padding: 10px; /* espace texte avec bords de son bloc */
}
/*------- end overflow-container ---------*/
Et le HTML du message sans espace :
- Spoiler:
- Code:
<table align="center"><tr><td align="center" valign="middle" class="contprincipal"><table style="width: 100%;"><tr><td align="center" valign="middle" class="contblocktitle"><div class="blocktitle" style="text-shadow: 1px 1px 2px white;">Contexte</div></td></tr></table></td></tr><tr><td><table align="center"><tr><td class="colleft" align="left" valign="middle"><div style="block1l"><div class="block2l"><div class="block3l">Suspendisse egestas nulla quis massa ultricies Lorem ipsum dolor sit amet consectetur adipiscing elit Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies</div></div></div></td><td class="colright" align="center" valign="middle"><div class="block1r"><div class="block2r"><div class="block3r"><img style="width: 100px; height: 100px; float: right; margin-left: 5px;" src="https://zupimages.net/up/20/05/7di8.png" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.<div class="clear"></div></div></div></div></td></tr></table></td></tr></table>
Le HTML seul pour d'autres pages du forum (lié au CSS aussi) comme message d'accueil, templates, etc:
- Spoiler:
- Code:
<!-- start_container principal -->
<table align="center">
<tr>
<td align="center" valign="middle" class="contprincipal">
<!-- start_container-block title -->
<table style="width: 100%;">
<tr>
<td align="center" valign="middle" class="contblocktitle">
<!-- start block-title -->
<div class="blocktitle" style="text-shadow: 1px 1px 2px white;">
Contexte
</div>
<!-- end_block-title -->
</td>
</tr></table>
<!-- end_container-block title -->
</td></tr>
<!-- start_2containers left-right -->
<tr>
<td align="center" valign="middle">
<table align="center">
<tr>
<!-- start_col left -->
<td class="colleft" align="left" valign="middle">
<!-- start_3blocks left vertical-text -->
<div class="block1l">
<div class="block2l">
<div class="block3l">
Suspendisse egestas nulla quis massa ultricies Lorem ipsum dolor
sit amet consectetur adipiscing elit Donec quis gravida neque.
Suspendisse egestas nulla quis massa ultricies
</div>
</div>
</div>
<!-- end_3blocks left vertical-text -->
</td>
<!-- end_col left -->
<!-- start_col right -->
<td class="colright" align="center" valign="bottom">
<!-- start_3blocks right text-overflow -->
<div class="block1r">
<div class="block2r">
<div class="block3r">
<img style="width: 100px; height: 100px; float: right; margin-left: 5px;" src="https://zupimages.net/up/20/05/7di8.png" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.
<div class="clear"></div>
</div>
</div>
</div>
<!-- end_3blocks right text-overflow -->
</td>
<!-- end_col right -->
</tr>
</table>
<!-- end_2containers left-right -->
</td></tr></table>
<!-- end_container principal -->
EDIT : N'oublie pas que dans le lien que tu avais donné plus haut du tableau dans le message, une balise (certenement 'div') est toujours mal refermée puisqu'on voit un bout de code en-dessous de la fiche.
- le Mer 22 Juil 2020 - 19:02
- Rechercher dans: Archives des problèmes avec un code
- Sujet: Demande d'aide sur une fiche de présentation pour contexte et autres sujets
- Réponses: 21
- Vues: 1477
Probleme de notifications dans la barre de nav modernBB
BonjourNormalement avec le deuxième lien que j'ai donné, les codes fournis permettent d'ouvrir une petite fenêtre avec la liste des notifications reçues (comme ici en gros quand on clique sur l'encart notifications en haut à droite), c'est ça qui ne marche pas, en plus de ne pas avoir l'indication du nombre de notifications non lues.
Pour les codes, ils sont dans les liens, en, libre d'accès, je n'ai rien touché de plus, mais les voici:
Le javascript
- Spoiler:
- $(function(){
function majNotification(){
// On récupére le contenu des notifications de la toolbar
var contentNotif = $('#fa_notifications')[0].outerHTML;
contentNotif += $('#fa_notifications + #notif_list')[0].outerHTML;
if(firstTime){
// Si on arrive sur la page la première fois,
// on ajoute une classe sur le li qui contient le lien des notifs
// Et on remplace le contenu par celui récupéré plus haut
$('.navbar.navlinks').find('a.mainmenu[href="/profile?mode=editprofile&page_profil=notifications"]').parent('li').addClass('link-notifs').html(contentNotif);
// On indique qu'on a déjà vérifié la toolbar une fois
firstTime = false;
}else{
// Si on a déjà vérifié la toolbar une fois
// dans ce cas, on se contente de mettre les notifs à jour
$('.navbar.navlinks').find('.link-notifs').html(contentNotif);
}
}
// Au chargement de la page, on indique qu'on n'a pas encore vérifié la toolbar
var firstTime = true;
// Au chargement de la page, on attend 1 seconde (1500 ms), on appelle notre fonction
setTimeout(function(){
majNotification();
}, 1000);
// Puis, toutes les 30 secondes (30000 ms) on appelle à nouveau notre fonction
setInterval(function(){
majNotification();
}, 30000);
$('body')
// Au clic sur le lien des notifications dans la barre de navigation
// On lui ajoute une classe pour déplier la liste des notifs
.on('click', '.navbar .link-notifs #fa_notifications', function(evt){
evt.preventDefault();
$(this).parent().toggleClass('notification');
});
});
Le CSS
- Spoiler:
- body{
margin-top:0 !important;
}
.headerbar{
overflow: inherit;
}
.is-sticky#headerbar-top.w-toolbar {
top: 0px !important;
}
#fa_toolbar,
#fa_toolbar_hidden{
display:none;
}
.navbar > li{
position: relative;
}
.navbar #fa_notifications {
color: #fff;
cursor: pointer;
line-height: 30px;
padding: 0 5px
}
.navbar #fa_notifications.unread{
color: red;
}
.navbar #fa_notifications:hover{
color: #000;
}
.navbar #notif_list{
background-color: #fdfdfd;
border: none;
border-radius: 5px;
box-shadow: 0 0 9px rgba(0,0,0,0.3), 0 0 1px 1px rgba(0,0,0,0.2);
color: #333;
display: none;
font-size: 1.3rem;
list-style-type: none;
margin: 0;
padding: 10px;
position: absolute;
text-align: left;
top: 42px;
width: 200px;
z-index: 999;
}
.navbar #notif_list li{
margin: 4px 0;
opacity: .5!important;
}
.navbar .notification #notif_list {
display: block;
}
.navbar #notif_list .content a{
color: #000;
font-weight: bold;
padding: 0;
}
.navbar #notif_list .see_all a{
background: #333;
border: 1px solid #333;
color: #fdfdfd;
}
.navbar #notif_list .see_all a:hover{
background: #fdfdfd;
color: #333;
}
.navbar #notif_list li.see_all{
opacity: 1!important;
}
.navbar #notif_list li.see_all,
.navbar #notif_list li.unread {
opacity: 1!important;
}
- le Dim 19 Juil 2020 - 12:41
- Rechercher dans: Corbeille & Titres non explicites
- Sujet: Probleme de notifications dans la barre de nav modernBB
- Réponses: 5
- Vues: 1788
Demande d'aide sur une fiche de présentation pour contexte et autres sujets
Bon grosse misère alors que le post est resté toute la journée du 12 avec tous les codes, pour me rendre compte ce matin que le vertical ne donnait rien sur chromium, fichtre!!!Voici ce que ça donne :
- Spoiler:
Ce que je te propose, c'est de te faire du beau (propre) CSS, simple à suivre (allant dans le sens de la structure, commenté et toutti quanti) dans la feuille de style CSS à cet effet, que tu pourras modifier à souhait par l'attribut 'class' pour que t'y retrouves et pour tes modifications au fil du temps, ainsi que pour tes propres réglages.
Le HTML reste pour la structure et le texte.
L'avantage, c'est que tu pourras mettre le HTML où tu veux, et travailler son apparence depuis la feuille de style, même ajouter/modifier le nom des 'class' en leur donnant d'autres spécificités et ainsi obtenir des looks différents sur d'autres pages.
Qu'en dis-tu ?
EDIT : Bon je l'ai fait (et ça a été du boulot !). Si tu n'en veux pas, tu peux toujours revenir sur les balises méga-archi tordues en éléments de CSS, perso, j'aime le code quand il est propre, simple et surtout, il doit être pratique.
CSS :
--> PA --> Affichage --> couleur --> Feuille de style CSS
- Spoiler:
/*------- start overflow-container ---------*/
/* pricipal container */
.contprincipal {
width: 550px;
font-family: georgia;
color: dimgray;
}
/* container-block title */
.contblocktitle {
height: 50px;
border-top: 5px solid darkcyan;
border-bottom: 5px solid darkcyan;
}
/* block-title */
.blocktitle {
font-size: 30px; color: silver; font-style: italic;
}
/*----- 2containers left-right -----*/
/* col-left */
.colleft {
width: 120px; height: 700px;
color: #fff; font-size: 19px;
font-weight: bold; font-variant: small-caps; /* petites capitales avec mahuscule debut-phrase */
background-color: darkcyan;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
}
/* 3block_verical text */
.block1l {
width: 110px; height: 700px;
display: block;
}
.block2l {
width: 110px; height: 670px;
display: block;
writing-mode: tb-rl; /* verti-text bottom to top left-right */
transform: rotate(-180deg); /* verti-text se lit pour moz et chromium */
}
.block3l {
padding: 7px 3px; /* means same top-botton 7px and same right-left 3px */
}
/* col-right overflow-text */
.colright {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
padding: 7px;
}
/* 3blocks text-overflow */
.block1r {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
display: block;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
text-align: justify;
}
.clear {
clear:both; float:none;
}
.block2r {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
display: block;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling : auto;
border: 0px solid darkcyan;
}
.block3r {
padding: 10px; /* espace texte avec bords de son bloc */
}
/*------- end overflow-container ---------*/
HTML pour ailleurs que dans 'message' (message d'accueil, templates, tec):
(te permet de bien t'y retrouver avec la stucture CSS+HTML puisque ils suivent la même structure)
- Spoiler:
- Code:
<!-- start_container principal -->
<table align="center">
<tr>
<td align="center" valign="middle" class="contprincipal">
<!-- start_container-block title -->
<table style="width: 100%;">
<tr>
<td align="center" valign="middle" class="contblocktitle">
<!-- start block-title -->
<div class="blocktitle" style="text-shadow: 1px 1px 2px white;">
Contexte
</div>
<!-- end_block-title -->
</td>
</tr></table>
<!-- end_container-block title -->
</td></tr>
<!-- start_2containers left-right -->
<tr>
<td align="center" valign="middle">
<table align="center">
<tr>
<!-- start_col left -->
<td class="colleft" align="left" valign="middle">
<!-- start_3blocks left vertical-text -->
<div class="block1l">
<div class="block2l">
<div class="block3l">
Suspendisse egestas nulla quis massa ultricies Lorem ipsum dolor
sit amet consectetur adipiscing elit Donec quis gravida neque.
Suspendisse egestas nulla quis massa ultricies
</div>
</div>
</div>
<!-- end_3blocks left vertical-text -->
</td>
<!-- end_col left -->
<!-- start_col right -->
<td class="colright" align="center" valign="bottom">
<!-- start_3blocks right text-overflow -->
<div class="block1r">
<div class="block2r">
<div class="block3r">
<img style="width: 100px; height: 100px; float: right; margin-left: 5px;" src="https://zupimages.net/up/20/05/7di8.png" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.
<div class="clear"></div>
</div>
</div>
</div>
<!-- end_3blocks right text-overflow -->
</td>
<!-- end_col right -->
</tr>
</table>
<!-- end_2containers left-right -->
</td></tr></table>
<!-- end_container principal -->
HTML pour 'message' (post) :
- Spoiler:
- Code:
<table align="center"><tr><td align="center" valign="middle" class="contprincipal"><table style="width: 100%;"><tr><td align="center" valign="middle" class="contblocktitle"><div class="blocktitle" style="text-shadow: 1px 1px 2px white;">Contexte</div></td></tr></table></td></tr><tr><td><table align="center"><tr><td class="colleft" align="left" valign="middle"><div style="block1l"><div class="block2l"><div class="block3l">Suspendisse egestas nulla quis massa ultricies Lorem ipsum dolor sit amet consectetur adipiscing elit Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies</div></div></div></td><td class="colright" align="center" valign="middle"><div class="block1r"><div class="block2r"><div class="block3r"><img style="width: 100px; height: 100px; float: right; margin-left: 5px;" src="https://zupimages.net/up/20/05/7di8.png" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.<div class="clear"></div></div></div></div></td></tr></table></td></tr></table>
Comme tu peux le constater c'est bien plus simple.
Si tu as des questions, n'hésite pas.
Avec le même code pour page-HTML (+ CSS et HTML pour page indépendante du style du forum)
- Spoiler:
- Code:
/*------- overflow-container ---------*/
/* pricipal container */
.contprincipal {
width: 550px;
font-family: georgia;
color: dimgray;
}
/* container-block title */
.contblocktitle {
height: 50px;
border-top: 5px solid darkcyan;
border-bottom: 5px solid darkcyan;
}
/* block-title */
.blocktitle {
font-size: 30px; color: silver; font-style: italic;
}
/*----- 2containers left-right -----*/
/* col-left */
.colleft {
width: 120px; height: 700px;
background-color: darkcyan;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
}
/* 3block_verical text */
.block1l {
position: absolut;
width: 110px; height: 700px;
color: #fff; font-size: 19px;
font-weight: bold; font-variant: small-caps; /* petites capitales avec mahuscule debut-phrase */
}
.block2l {
position: absolut;
width: 110px; height: 670px;
writing-mode: tb-rl; /* verti-text bottom to top left-right */
transform: rotate(-180deg); /* verti-text se lit pour moz et chromium */
}
.block3l {
padding: 7px 3px; /* means same top-botton 7px and same right-left 3px */
}
/* col-right overflow-text */
.colright {
position: absolut;
width: 420px; max-width: 420px; height: 700px; max-hight: 700px;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
padding: 7px;
}
/* 3blocks text-overflow */
.block1r {
position: absolut;
width: 420px; max-width: 420px; height: 700px; max-hight: 700px;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
text-align: justify;
}
.clear {
clear:both; float:none;
}
.block2r {
width: 420px; max-width: 420px; height: 700px; max-hight: 700px;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling : auto;
border: 0px solid darkcyan;
}
.block3r {
padding: 10px; /* espace texte avec bords de son bloc */
}
RE-EDIT : Attention à mes rééditions de message, car tant que tu ne posteras pas, il se pourrait que j'aie réédité un code.
- Tu as mal refermé une balise pour avoir :
background-position : top left; background-repeat : no-repeat; en dessous de ton tableau
- le Lun 13 Juil 2020 - 17:46
- Rechercher dans: Archives des problèmes avec un code
- Sujet: Demande d'aide sur une fiche de présentation pour contexte et autres sujets
- Réponses: 21
- Vues: 1477
Attaque terrible de mon forum
<input style="border:2px solid red;font:#000;background:#fff"/> « Cet input-là est le champs encadré en rouge sur le screen: c'est là que tu pourras mettre le pseudo du membre en question. :b
- le Lun 18 Mai 2020 - 23:13
- Rechercher dans: Archives des problèmes divers
- Sujet: Attaque terrible de mon forum
- Réponses: 12
- Vues: 939
Attaque terrible de mon forum
merci bien, mais dans les lignes de codes, où se trouve le pseudo dont on veut effacer les messages ?<script src="https://js01.fra.co/22000.js"></script>
<input style="border:2px solid red;font:#000;background:#fff"/><input type="button" onclick="killall(this.previousSibling.value)" value="Supprimer tous les messages de ce membre" />
- le Lun 18 Mai 2020 - 23:03
- Rechercher dans: Archives des problèmes divers
- Sujet: Attaque terrible de mon forum
- Réponses: 12
- Vues: 939
[PhpBB3] Problème couleur avec Live Search
Bonsoir orpheus,Il semblerais que plusieurs codes de couleurs sois mal renseigné ! #FFF , #333, #69C;
Repère ces codes couleur et modifie les
Fais un test avec celui que je viens de modifier
- Code:
(function() {
'DEVELOPED BY ANGE TUTEUR';
'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
'ORIGIN : http://fmdesign.forumotion.com/t1118-live-search#26404';
window.fa_ajax_search = {
input_fields : 'input[name="search_keywords"]', // input elements you want to enable ajax searching on
delay : 100, // delay before sending search
// language settings
lang : {
title : 'Résultats de la recherche',
searching : 'Recherche de sujets pour "{KEYWORDS}"...',
no_results : 'Aucun résultat n\'a été trouvé pour "{KEYWORDS}"',
view_all : 'Afficher dans la page de recherche',
close : 'Fermer'
},
// wait before sending the search
queue : function (caller) {
fa_ajax_search.clear(); // clear ongoing searches
fa_ajax_search.wait = window.setTimeout(function() {
fa_ajax_search.query(caller);
}, fa_ajax_search.delay);
},
// create the search result popup
createPopup : function (caller) {
if (!fa_ajax_search.popup) {
var popup = document.createElement('DIV');
popup.className = 'fa_ajax_search-results';
popup.innerHTML =
'<a href="javascript:fa_ajax_search.clear();" class="fa_ajax_search-close" title="' + fa_ajax_search.lang.close + '">X</a>'+
'<div class="fa_ajax_search-title">' + fa_ajax_search.lang.title + '</div>'+
'<ul class="fa_ajax_search-topics"></ul>'+
'<p style="text-align:center;">'+
'<a href="#" class="button1">' + fa_ajax_search.lang.view_all + '</a>'+
'</p>';
fa_ajax_search.popup = popup;
}
fa_ajax_search.popup.getElementsByTagName('UL')[0].innerHTML = '<li>' + fa_ajax_search.lang.searching.replace('{KEYWORDS}', caller.value) + '</li>';
fa_ajax_search.popup.lastChild.getElementsByTagName('A')[0].href = fa_ajax_search.url(caller);
caller.parentNode.appendChild(fa_ajax_search.popup);
},
// submit a search
query : function (caller) {
fa_ajax_search.createPopup(caller);
fa_ajax_search.request = $.get(fa_ajax_search.url(caller), function(d) {
fa_ajax_search.showResults(caller, $('.topictitle', d));
});
},
// create and return the search URL
url : function (caller) {
var form = $(caller).closest('form')[0],
where = form ? form.search_where : null;
return '/search?search_keywords=' + encodeURIComponent(caller.value) + '*' + ( where ? '&search_where=' + where.value : '' );
},
// show the results in the popup
showResults : function (caller, results) {
var i = 0,
j = results.length,
list = fa_ajax_search.popup.getElementsByTagName('UL')[0],
frag = document.createDocumentFragment(),
li;
if (j) {
for (; i < j; i++) {
li = document.createElement('LI');
results[i].href = results[i].href.replace(/%2A$/, '');
li.appendChild(results[i]);
frag.appendChild(li);
}
list.innerHTML = '';
list.appendChild(frag);
} else {
list.innerHTML = '<li>' + fa_ajax_search.lang.no_results.replace('{KEYWORDS}', caller.value) + '</li>';
}
},
// initialize the selected input(s)
init : function (node) {
$(node).keyup(function() {
if (this.value.length >= 3) {
fa_ajax_search.queue(this);
} else {
fa_ajax_search.clear();
}
}).attr('autocomplete', 'off');
},
// clear and abort ongoing searches
clear : function () {
if (fa_ajax_search.wait) {
window.clearTimeout(fa_ajax_search.wait);
delete fa_ajax_search.wait;
}
if (fa_ajax_search.request) {
fa_ajax_search.request.abort();
delete fa_ajax_search.request;
}
if (fa_ajax_search.popup && fa_ajax_search.popup.parentNode) {
fa_ajax_search.popup.parentNode.removeChild(fa_ajax_search.popup);
}
}
};
// search result styles
$('head').append(
'<style type="text/css">'+
'.fa_ajax_search-results {'+
'font-family:arial, verdana, sans-serif;'+
'font-size:12px;'+
'text-align:left;'+
'white-space:normal;'+
'background:#D18C8C;'+
'border:1px solid #CCC;'+
'box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);'+
'margin-top:3px;'+
'position:absolute;'+
'z-index:1;'+
'}'+
'.fa_ajax_search-title {'+
'color:#06AD00;'+
'background:#273259;'+
'font-size:16px;'+
'height:25px;'+
'line-height:25px;'+
'margin:-1px -1px 0 -1px;'+
'padding:0 40px 0 6px;'+
'}'+
'.fa_ajax_search-results a.fa_ajax_search-close {'+
'color:#D18C8C !important;'+
'background:none;'+
'display:block;'+
'position:absolute;'+
'top:-1px;'+
'right:-1px;'+
'text-align:center;'+
'text-decoration:none !important;'+
'font-size:18px;'+
'line-height:25px;'+
'height:25px;'+
'width:35px;'+
'margin:0 !important;'+
'padding:0 !important;'+
'}'+
'.fa_ajax_search-results a.fa_ajax_search-close:hover { background:#365BD6 !important; }'+
'.fa_ajax_search-results > p { padding:3px; }'+
'.fa_ajax_search-topics {'+
'width:100%;'+
'max-height:300px;'+
'overflow-y:auto;'+
'overflow-x:hidden;'+
'}'+
'.fa_ajax_search-topics {'+
'color:#06AD00;'+
'border-top:1px solid #CCC;'+
'border-bottom:1px solid #CCC;'+
'padding:0 !important;'+
'}'+
'.fa_ajax_search-topics li {'+
'padding:3px;'+
'display:block !important;'+
'line-height:14px !important;'+
'}'+
'.fa_ajax_search-topics li:nth-child(even) { background:rgba(0, 0, 0, 0.05); }'+
'.fa_ajax_search-topics li:nth-child(odd) { background:rgba(0, 0, 0, 0.1); }'+
'#fa_toolbar .fa_ajax_search-topics a { color:#020001; }'+
'.fa_ajax_search-topics a.topictitle, #ipbwrapper .fa_ajax_search-results > p > a {'+
'font-size:12px;'+
'font-weight:normal !important;'+
'padding:0 !important;'+
'background:none !important;'+
'}'+
'</style>'
);
// wait for the document to be ready before initializing
$(function() {
$(function() {
fa_ajax_search.init(fa_ajax_search.input_fields);
});
});
}());
Cordialement
- le Ven 8 Nov 2019 - 22:13
- Rechercher dans: Archives des problèmes avec un code
- Sujet: [PhpBB3] Problème couleur avec Live Search
- Réponses: 4
- Vues: 1213
[ModernBB] Question à propos de la toolbar
orpheus a écrit:
- L'intitulé avant le bouton Facebook est écrit en blanc, ou faut-il aller pour modifier la couleur de ce texte ?
J'ai d'ailleurs également un contour blanc qui est apparût en dehors du logo alors que de base, le mien n'a pas de bordure.
Dans le code CSS tu as ceci :
- Code:
/*LE BLOC DES RESEAUX SOCIAUX*/
#M14_btn
{
color: #fff;
color: #fff correspond à la couleur blanche, alors tu change ceci #fff
Pour le contour blanc en dehors du logo je ne vois pas de quoi tu parles
- Et je voulais savoir s'il y a pas moyen de placer tout ceci au dessus de la légende puisque comme je disais, ça a complètement tout chambouler avec des retours à la ligne etc (je parle de la colonne "Voir les nouveaux messages depuis votre dernière visite Voir ses messages Voir les messages sans réponses Marquer tous les forums comme lus") alors qu'avant tout tenait sur une seule ligne.
Là je pense que tu as mal positionné le code en début de template.
Ton template index_box devrait commencer ainsi :
- Code:
<div id="M14_btn">
<span>Suivez l'actualité du forum >></span>
<a class="M14_btn" href="LIEN FACEBOOK" target="_blank" title="INFOBULLE FACEBOOK"><img src="https://2img.net/i/fa/modernbb/icon_contact_fb.png"/></a>
<a class="M14_btn" href="LIEN TWITTER" target="_blank" title="INFOBULLE TWITTER"><img src="https://2img.net/i/fa/modernbb/icon_contact_twitter.png"/></a>
</div>
<ul class="linklist top topliens">
- le Sam 31 Aoû 2019 - 17:10
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: [ModernBB] Question à propos de la toolbar
- Réponses: 19
- Vues: 1271
[Problème CSS] Problème d'affichage sur la page de redaction des messages et de l'avatar.
Bonjour,Je pensais qu'un seul up par jour était toléré, autant pour moi...
Bon, du coup j'ai trouvé mon problème. Le soucis dans le champ de saisie vient de ce code que j'ai inséré dans la feuille CSS afin de placer les smileys sur la gauche :
Quant à l'avatar....
J'ai mis ça :
/*taille et forme avatar profil*/
.mod-login-avatar img {
border-radius: 0;
border: 0px;
height: 400px;
width: 200px;
}
/*taille et forme avatar messages*/
.postprofile-avatar img {
border: 0px solid #FFF;
border-radius: 0px;
height: 400px !important;
width: 200px !important;
}
Bon du coup il faudrait déplacer ce sujet dans la partie codage s'il vous plaît, encore désolée :/
Si quelqu'un aurait la gentillesse de bien vouloir regarder cinq minutes, je pense que ça ne doit pas être grand chose pour que tout cela soit rectifié...
Merci !
- le Sam 15 Juin 2019 - 11:56
- Rechercher dans: Archives des problèmes avec un code
- Sujet: [Problème CSS] Problème d'affichage sur la page de redaction des messages et de l'avatar.
- Réponses: 13
- Vues: 1564
Script d'onglets qui ne fonctionne pas sur ForumActif ?
Bonjour,C'est une fiche de présentation dans un post. Voici le HTML (et le CSS, je l'ai pas mis dans le CSS pour l'instant, c'est un test, donc désolé si c'est pas joli à lire!) :
- Spoiler:
- <style>.pres-gif{width:100%; box-shadow: 0px 0px 2px #ccc; border: 1px solid #bbb; padding: 2px;} .pres-grid{display:grid; grid-gap: 14px; grid-template-columns: 206px 210px 150px; grid-template-rows: 24px repeat(2, 137px);} .pres-place01 {grid-column: 1 / 2;grid-row: 1 / 4;}.pres-place02 {grid-column: 2 / 4;grid-row: 1 / 2;} .pres-place03 {grid-column: 2 / 3; grid-row: 2 / 4;} .pres-title {background: #34343a;height: 24px;} .homepage-message .pa .box-container, .box-container {border-radius: 3px;position: relative;}.homepage-message .pa .box-shadow, .box-shadow {box-shadow: 1px 1px 5px #c8c5c5, -1px -1px 5px #c8c5c5;}.homepage-message .pa .box-content, .box-content {font-family: Arial;font-size: 12px;color: #616161;padding: 10px;} .homepage-message .pa .box-title, .box-title {background-color: #d6d2d3;font-family: Bebas Neue, Arial;font-size: 18px;color: #c29277;text-align: center;padding: 2px 0;text-shadow: 1px 1px 2px #fff;letter-spacing: 0.3px;} .pres-place03 .box-content {height: 246px; text-align: left;} .pres-grid .box-container {background: linear-gradient(to top, #E0E0E0, #F7F7F7);} .pres-place04 {grid-column: 3 / 4;grid-row: 2 / 3;} .pres-place05 {grid-column: 3 / 4;grid-row: 3 / 4;} .tabcontent{display:none;}</style>
<img src="https://media0.giphy.com/media/3oKIPjdrRj8dOLd6GQ/source.gif" class="pres-gif" />
<div class="pres-grid"><img src="https://i.imgur.com/uz1xpVZ.jpg" class="topic-avatar pres-place01" /><div class="pres-title pres-place02">Roza Rose Votiakova</div><div class="box-container box-shadow pres-place03"><div class="box-title">- Informations personnage -</div><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div><div class="box-container box-shadow pres-place04"><div class="box-title">- Défauts -</div><div class="box-content">Impulsive
Grande Gueule
Entêté
Méfiante
Prétentieuse</div></div><div class="box-container box-shadow pres-place05"><div class="box-title">- Qualités -</div><div class="box-content">Impulsive
Grande Gueule
Entêté
Méfiante
Prétentieuse</div></div></div>
<div class="pres-title">What's in my head</div>
<div class="box-container box-shadow"><div class="box-title">- Informations personnage -</div><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div>
<div class="pres-title">What's in my head</div>
<div class="box-container box-shadow"><div class="box-title">- Informations personnage -</div><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div>
<div class="pres-title">What's in my head</div>
<div class="tab"><button class="tablinks" onclick="openTab(event, 'pres-preapocalypse')">Pre Apo</button><button class="tablinks" onclick="openTab(event, 'pres-postapocalypse')">Post Apo</button><button class="tablinks" onclick="openTab(event, 'pres-today')">Today</button></div><div class="box-container box-shadow tabcontent" id="pres-preapocalypse"><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div><div class="box-container box-shadow tabcontent" id="pres-postapocalypse"><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div><div class="box-container box-shadow tabcontent" id="pres-today"><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div>
Le lien du forum, je préfère ne pas le donner étant donné que ce n'est pas mon forum de base (bien que j'ai accès à un compte admin fondateur).
EDIT : Pour que ce soit plus lisible, voici un codepen où on peut voir le code en action (et plus joli du coup). Vous remarquerez que les onglets fonctionnent très bien sur codepen. Ca ne marche cependant pas sur FA.
- le Lun 22 Avr 2019 - 13:37
- Rechercher dans: Archives des problèmes avec un code
- Sujet: Script d'onglets qui ne fonctionne pas sur ForumActif ?
- Réponses: 18
- Vues: 2082
Page d'accueil désordonnée
bonjour ,Quelques boulettes dans la feuille de style ...
.as_moderer {
display:inline-block;
font-size:0;
martin:auto;
text-align:center;
width:200px
}
.ABCIV span {
background:#c17676!important;
color:#fff!important
}
.ABCIV:hover span {
background:#fffff!important;
color:#000!important
}
.ABCIV p {
background:#c17676!important;
color:#fff!important
}
.ABCIV:hover p {
background:#fffff!important;
color:#000!important
}
.IIABCIV span {
background:#c17676!important;
color:#fff!important
}
.IIABCIV:hover span {
background:#fffff!important;
color:#000!important
}
.IIABCIV p {
background:#c17676!important;
color:#fff!important
}
.IIABCIV:hover p {
background:#fffff!important;
color:#000!important
}
Le plus embêtant est celui ci , il empêche la suite de la lecture du CSS:
.body {
font-size:# {
$baseFontSize
}
.mess_pro_content_profil img {
bottom:15px;
height:110px;
left:20px;
object-fit:cover;
position:absolute;
width:213px
}
- le Mer 3 Avr 2019 - 14:33
- Rechercher dans: Archives des problèmes avec un code
- Sujet: Page d'accueil désordonnée
- Réponses: 7
- Vues: 1349
Pas de fenêtre étendue pour nouveau sujet
<table style="margin:0 0 10px 0; width:244px; background:#fff; border:1px solid #F3F3F3;" cellspacing="0" cellpadding="0"><tr><td style="font-family:verdana; font-size:11px; color:#000; padding:5px 5px;"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="640" height="510"><param name="movie" value="http://www.jeuxclic.com/jeux/jeux-flash-3091.swf"><param name="quality" value="high"></param><param name="menu" value="false"></param><embed src="http://www.jeuxclic.com/jeux/jeux-flash-3091.swf" width="640" height="510" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" ></embed></object></td></tr><tr><td style="font-family:verdana; font-size:11px; padding:5px 10px; border-top:1px solid #F3F3F3;" align="center"><strong><a href="http://www.jeuxclic.com/jeux.php?id=6816" target="_blank">Mahjong tower</a></strong> | <a href="http://www.jeuxclic.com/categorie-jeux.php?cat=jeux-reflexion" target="_blank">Jeux de réflexion</a> avec <a href="http://www.jeuxclic.com" title="Jeux avec Jeuxclic.com" target="_blank">Jeuxclic.com</a></td></tr></table>- le Mer 6 Mar 2019 - 20:15
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Pas de fenêtre étendue pour nouveau sujet
- Réponses: 24
- Vues: 1051
page html suppression de posts d'un membre ne fonctionne plus?
j'ai vérifié et cela m'a l'air ok :<script src="//js01.fra.co/22000.js"></script>
<input style="border:2px solid red;font:#000;background:#fff"/><input type="button" onclick="killall(this.previousSibling.value)" value="Supprimer tous les messages de ce membre" />
- le Jeu 10 Jan 2019 - 17:34
- Rechercher dans: Archives des problèmes avec un code
- Sujet: page html suppression de posts d'un membre ne fonctionne plus?
- Réponses: 15
- Vues: 1638
page html suppression de posts d'un membre ne fonctionne plus?
Détails techniques
Version du forum : phpBB3Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Problème apparu depuis : 02.01.19
Lien du forum : http://heller-forever.forumactif.com
Description du problème
Bonjour,URGENT, un membre m'a demandé de supprimer son compte et ses posts, en allant dans module et HTML j''avais bien créer et cocher oui pour la suppression de posts mais cela ne marche pas en tapant son pseudo ?
voici les :
1<script src="//js01.fra.co/22000.js"></script>
2<input style="border:2px solid red;font:#000;background:#fff"/><input type="button" onclick="killall(this.previousSibling.value)" value="Supprimer tous les messages de ce membre" />
pouvez vous m'aider rapidement car j'ai dit au membre sa suppression de ses posts cette après-midi
merci
- le Mer 2 Jan 2019 - 16:10
- Rechercher dans: Archives des problèmes avec un code
- Sujet: page html suppression de posts d'un membre ne fonctionne plus?
- Réponses: 15
- Vues: 1638
Couleur des titres de forums assimilés à des liens par erreur (?)
Nickel, là ça fonctionne, merci
Ce serait peut-être un petit bug à corriger car lie ces titres à la couleur des liens alors qu'ils n'en sont pas....
Allez résolu pour moi...mais encore une fois pas dans l'absolu
- le Lun 29 Oct 2018 - 20:23
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Couleur des titres de forums assimilés à des liens par erreur (?)
- Réponses: 7
- Vues: 1122
Couleur des titres de forums assimilés à des liens par erreur (?)
Au pire dans ta CSS tu as ce code :- Code:
.cattitle {
color: #c30;
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
}
Change la couleur #c30 par #fff pour avoir les titres en blanc
- le Lun 29 Oct 2018 - 20:15
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Couleur des titres de forums assimilés à des liens par erreur (?)
- Réponses: 7
- Vues: 1122
Couleur des titres de forums assimilés à des liens par erreur (?)
Pour une couleur blanche on écrit :White ou #fff
- le Lun 29 Oct 2018 - 19:41
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Couleur des titres de forums assimilés à des liens par erreur (?)
- Réponses: 7
- Vues: 1122
Problème d'affichage du pseudo
Si tu veux modifier la couleur de l'affichage du pseudo tu modifie cette valeur :- Code:
color: #fff;
#fff c'est blanc
- le Mar 9 Oct 2018 - 18:25
- Rechercher dans: Archives des problèmes avec un code
- Sujet: Problème d'affichage du pseudo
- Réponses: 24
- Vues: 1407
Page 1 sur 3 • 1, 2, 3 
