Accueil
Créer un forumLa date/heure actuelle est Sam 27 Avr 2024 - 9:02
58 résultats trouvés pour 000
Couleur des groupes dans champs profil.
Merci.
Non, je n'ai actuellement aucun autre script, je les ai tous supprimés au cas où l'un d'eux serait conflictuel.
Je pense que les 2 class que tu mentionnes ont été ajoutées par la créatrice du Blank Theme pour pouvoir personnaliser séparément les différentes parties des profile_fields.
Ha oui oui, ton script fonctionne dans le sens où la couleur du groupe est effectivement récupérée et appliquée sur l'ensemble du profil : rang + label + content du profil (cf la capture d'écran de mon premier message). Mon problème est donc d'uniquement cibler le label du profil ("Messages, points, réputation, date d'inscription") mais sans colorer le content ("235, 378, 40, 27/02/2023" sur ta capture) : est-ce que c'est possible ou je suis obligée de tout colorer et de bidouiller ensuite avec du css ? (par exemple forcer la couleur de .field-content avec un color:#000!important; ?)
Je t'embête pas plus pour ce soir aha.
- le Dim 18 Fév 2024 - 20:15
- Rechercher dans: Archives des problèmes avec un code
- Sujet: Couleur des groupes dans champs profil.
- Réponses: 18
- Vues: 375
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: 436
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: 324
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
apparence texte
Bonjour !En fait, la couleur du texte (et du contenu du message) est déterminée par la couleur que vous avez choisie au niveau du panneau d'administration :
Chez vous, vous avez choisi blanc, donc tout est blanc. Sur fond blanc, effectivement, vous n'allez rien voir.
Trois solutions possibles :
- soit vous modifiez la couleur du texte pour ne plus mettre blanc
- soit vous modifiez la couleur de fond du message pour ne plus mettre blanc, vous aurez donc du texte blanc sur fond choisi
- soit vous ajoutez ce type de CSS personnalisé dans votre feuille (va fonctionner pour la version phpbb3), qui va forcer la couleur du contenu du message en autre chose (en l'occurrence, ici, #000, donc noir) :
- Code:
#message-box textarea {
color: #000 !important;
}
Si besoin, par ici pour le tuto concernant la feuille de CSS personnalisée : https://forum.forumactif.com/t404669-la-feuille-de-style-css
- le Ven 21 Oct 2022 - 18:22
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: apparence texte
- Réponses: 2
- Vues: 224
Fond de la partie récompense dans les sujets
Bonjour ^^Ajoutez ceci à votre feuille de style CSS (PA > Affichage > Couleurs > Onglet Feuille de style CSS
- Code:
.dd_award {
background-color: transparent;
}
Si la transparence ne vous convient pas, remplacez transparent par #000
- le Mer 24 Nov 2021 - 18:33
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Fond de la partie récompense dans les sujets
- Réponses: 2
- Vues: 473
Changer la couleur fond du bloc citation
Bonjour,Remplacez le code JavaScript d'hier par :
- Code:
$(function() {
var a = $("#text_editor_textarea");
0 != a.length && $(function() {
a.sceditor && a.sceditor("instance") && a.sceditor("instance").css("body,p{color:#fff}"+"blockquote{background:#000}");
});
});
J'ai mis le fond de la citation en noir #000.
- le Dim 3 Oct 2021 - 5:35
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Changer la couleur fond du bloc citation
- Réponses: 3
- Vues: 439
Probleme de notifications dans la barre de nav modernBB
Bonjour
Normalement 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: 1794
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: 940
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: 940
Installation du SCSS/SASS dans notre stylesheet.
Bonsoir Neptunia,Le lien que j'ai donné plus haut, donne clairement les exemples de ce que le scss peut permettre de faire et nous l'avons expliqués aussi à plusieurs reprises. Le SASS nous permet de faire beaucoup plus de choses concrètes que le CSS.
Pour expliquer ce que raconte le site, donc, sait-on jamais qu'on ne lise pas anglais ^^
Variable : en effet, en css, on peut le faire avec une base :root, je parlerai donc ici surtout de la manière SCSS pour expliquer les utilités entières (ou essayer
).Les variables sur le SCSS nous permettraient donc de créer une base de code et de l'écrire une seule fois. Exemple :
$backgroundisred:#ff0000;
Je répéterai donc donc mon background souhaité background:$backgroundisred.
A chaque mise à jour de notre site, au lieu de revenir sur nos 50 (pour grossir le trait mais l'idée y est) background de notre stylesheet, nous changerons juste $backgroundisred:#000; et le background changerait donc automatiquement partout sans avoir à nous retaper les 50 lignes. Evidemment si ce n'est que pour changer un background, ce n'est pas bien grave. Maintenant, imaginez une fiche de style où vous personnalisez chaque chose sur votre forum. Vous n'auriez qu'à modifier vos variables plutôt que revérifier vos milliers de ligne de CSS. La variable ne nous permettrait pas de modifier qu'un simple background mais on peut créer un corps entier qu'on éviterait de répéter un chaque fois. Je pense aux rôlistes notamment avec leur nombreuses fiches, que ce soit des fiches d'inscription, d'écriture, de lien et j'en passe, pour personnaliser le forum et garder la même idée de style partout, ce serait un gain de temps mais aussi de ligne.
Mais soit, on va dire que ça, :root nous permet de le faire.
Donc je vais passer au nesting.
Admettons que vous souhaitiez modifier, une fiche et une boîte de fiche, qu'on nommerait ficheForum.
Au lieu de bêtement taper :
- Code:
ficheForum p{code}
ficheForum a{code}
ficheForum:hover{code}
(Et c'est évidemment un exemple ultra simple, mais faut voir plus loin avec
) nous n'aurions qu'à taper :- Code:
ficheForum {
p {code}
a {code}
:hover{code}
}
Là encore, c'est un exemple simple, mais je vous laisse imaginer s'il y avait plus de choses à traiter, la répétition. En se rappelant surtout que nous avons un nombre de caractères limités. Et bien avec cette méthode, je nous épargne déjà au moins 20 caractères. Ca paraît rien ? Je vous assure que si on s'épargne 20 caractères par-ci, 50 par là etc, on se fait une place monstrueuse dans notre fiche de style et dans un autre sens, on s'épargne aussi du temps de chargement.
Parce que, oui, disons le. Quand vous importez d'ailleurs votre fiche de style parce que vous faites une fiche html et une fiche css, faut l'appeler, la fiche css.
Le site nous parle ensuite de Partials et Modules. Je doute que nous puissions, malheureusement, l'utiliser sur forumactif, car cela s'applique surtout à des codes pouvant être importés d'un fichier, sauf que ForumActif n'autorise pas la création de multiples fiches css mais d'une seule et unique où nous étouffons tout, donc soit (dommage d'ailleurs qu'on puisse avec le JS et le HTML mais pas le CSS mais c'est un problème qui a déjà été soulevé). En gros, avec cette méthode, nous n'aurions qu'à créer des "fiches" css que nous aurions appelés (ou pas) ou importés (ou pas) dans les autres fiches souhaitées plutôt qu'appeler toute une fiche css à chaque chargement de page alors que c'est pas forcément nécessaire. Bah, oui, je m'en fous d'appeler le design de mon "Qui Est En Ligne" quand je suis dans un sujet, la répartition des scss évitait ça - mais oui, concrètement, sur ForumActif, ça ne nous serait pas forcément utile à l'heure actuelle, avec le système actuel.
Si ce n'était toujours pas clair, j'aurais pu crée deux fiches scss :
- base où je mets mon style comme mes couleurs par exemple
- qeel, j'ai besoin d'utiliser des couleurs de base, j'ai juste à écrire @use 'base' dans mon fichier "qeel" et ça m'appelle mes couleurs et mes variables installées dans base.
Mais oui, ça, c'était + pour l'information, mais j'ai bien conscience que cet aspect pourtant très utile du SASS, ne pourrait pas être concrétisé à l'heure actuelle.
Pour les Mixins désormais... Enorme gain de temps aussi lorsque c'est utilisé correctement, plus ou moins semblable aux variables et, je pense, non utilisable avec le CSS qu'on connaît.
Leur exemple est parfait donc je le réutilise, tant qu'à faire.
Alors si sur le screen cela paraît plus long en SCSS... Il faut toujours garder à l'esprit qu'une variable et un mixin ont pour but d'être réutilisable et d'éviter sur le long terme les répétitions et on y gagne énormément en place.
Operators, pour ceux qui veulent tenter la responsivité (qui est une norme dans le monde du développement), vous savez qu'on code de + en + en %. Je vois souvent mes amis et collègues se casser la tête à sortir leur calculatrice pour savoir quelle taille devrait faire telle boîte et j'en passe. L'Operator permet de réaliser des calculs directement dans votre fiche de style. Ca permet aussi à ceux qui sont habitués à coder en px et qui tiennent à rester en px à le faire et juste adapter un % dans leur fiche de style, comme l'indique le site ;
Concrètement, ces derniers exemples hors des variables, nous ne pouvons pas les faire avec la fiche CSS et je pointe juste que le :root est très peu connu du publique.
Pour faire simple, le but du SCSS/SASS (mais je dis SASS mais comme dis avec Nyxbanana, on peut parler d'autres préprocesseurs, je ne fais mention de SASS que parce que c'est le prépro le plus connu/utilisé depuis quelque années), c'est de nous faire gagner du temps et de la place, nous faire donc gagner en fluidité. Etant développeuse web, on a plus ou moins un dicton qui dit que nous sommes des feignants et que nous chercherons toujours à coder le moins possible et donc trouver des raccourcis à chaque fois. C'est exactement ce que fait le SCSS ; ça nous fait gagner du temps, de la place et l'entretien est bien plus rapide puisqu'il nous permet de ne changer que quelque petites choses pour réussir à changer tout un forum. Je ne pense pas beaucoup me tromper en disant que les gens iraient bien plus dans leur fiche de style du forum si celles-ci étaient plus simples et moins répétitives. Evidemment la façon dont on s'en sert en entreprise ne pourra pas être 100% applicable puisque nous nous servons aussi de l'avantage des Modules qui nous permet de créer plusieurs fiches ; pour nos variables, pour ci et ça et pour les réutiliser ensuite, exemple ; nous avons les variables, les commandes primordiales de scss puis ensuite nos autres fichiers scss sont pour gérer nos pages html, js, php, qu'importe, nous allons créer une boîte ? on aura le fichier de la boîte et son fichier scss. Ca épure, on s'y retrouve mieux. Mais évidemment dans notre système actuel, tout serait dans la feuille de style et même là, on s'y retrouverait déjà tous beaucoup mieux qu'actuellement.
Pour faire simple :
- Utiliser des variables.
- Imbriquer nos codes.
- Nous éviter de répéter des codes et donc prendre de la place, rendre plus difficile l'entretien de notre code et nous sucrer un nombre incroyable de caractères.
- Qui dit moins de caractère, dit feuille de style allégée, dis temps de chargement moins long puisqu'il y a moins de choses à traiter
- On pourrait gagner encore plus en fluidité en ayant des fiches de style comme nous avons des feuilles html et JavaScript puisqu'au lieu d'appeler toute notre feuille de style même pour des lieux où on en a pas besoin, seuls les fichiers concernés seraient appelés. Mais comme dis, ça, ce n'est pas le plus important, c'est plus "dans l'idéal de l'utilisation du scss" sans pour autant être quelque chose d'impératif pour l'utilisation du SCSS, j'ai surtout eu cette idée d'application grâce aux suggestions déjà postées. Et il va de soi que je prends en compte l'appel entre le css et les templates qui ne serait pas applicable de la même façon, d'où mon "dans l'idéal" et non "il faudrait aussi axer sur cette possibilité".
En espérant que ce soit clarifié
sinon il me semble que le site Sass est trouvable aussi en français, au cas où ! Je n'ai pas vérifié si les explications françaises étaient aussi claires qu'en anglais.- le Mar 17 Mar 2020 - 19:56
- Rechercher dans: Suggestions refusées
- Sujet: Installation du SCSS/SASS dans notre stylesheet.
- Réponses: 23
- Vues: 3145
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: 1350
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
fa7up
Bonjour et merci a vous pour vos réponse j'ai besoin de savoir les codes couleurs là j'ai #000! mon bouton est vert je le voudrais en bleu
- le Lun 14 Jan 2019 - 10:35
- Rechercher dans: Archives des problèmes avec un code
- Sujet: fa7up
- Réponses: 4
- Vues: 569
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: 1639
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: 1639
Couleur des liens
Hi,Dans la CSS essaie ceci :
- Code:
a.forumlink {
color: #000!important;
}
Tes forums seront de couleur noire, change cette valeur #000 pour avoir la couleur désirée
Pour avoir une couleur différente au survol de souris, ajoute ceci :
- Code:
a.forumlink:hover {
color: #DD6900!important;
}
La couleur est orange, modifie ce qui se trouve après # pour avoir ta couleur perso
Pour la toolbar si tu veux changer la couleur de police tu vas dans :
PA / Modules / Toolbar / Configuration
- le Jeu 6 Déc 2018 - 10:09
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Couleur des liens
- Réponses: 7
- Vues: 421
Modifier la couleur bleu des catégories rétractées en ModernBB
Bonjour Mat, vous pouvez ajouter ce code à votre CSS :- Code:
.forabg.hidden{background-color:#000;}
Vous remplacerez la couleur noire(#000) par celle que vous souhaitez.
Bien à vous.
- le Ven 6 Avr 2018 - 20:03
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Modifier la couleur bleu des catégories rétractées en ModernBB
- Réponses: 2
- Vues: 756
problème couleur de fond et corps du forum.
Bonjour oberlyn, retirez votre image transparente(celle qui est à la place du logo) et mettez ce code CSS :- Code:
.bodylinewidth{background-color:#000;
margin-top:220px;}
J'ai mis le fond de couleur noir (#000) vous mettrez ce que vous souhaitez puis j'ai descendu le corps du forum avec un margin-top de 220px, vous pouvez changer la valeur par celle que vous souhaitez.
Bien à vous.
- le Ven 16 Mar 2018 - 20:05
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: problème couleur de fond et corps du forum.
- Réponses: 2
- Vues: 627
Couleur editeur d’événement
Panneau d'administration Affichage Couleurs - Feuille de style CSS
Insérez ce code dans votre feuille de style personnalisé si vous voulez modifier la couleur de la police d'écriture :
- Code:
#EV_Form #textarea_content textarea {
color: #000;
}
Ou bien insérez ce code dans votre feuille de style personnalisé si vous voulez modifier la couleur de fond de la zone d'écriture :
- Code:
#EV_Form #textarea_content textarea {
background-color: #000;
}
Dans les deux cas, vous pouvez modifier #000 (couleur noire) par le code couleur de votre choix.
Cordialement,
Walt
- le Dim 28 Jan 2018 - 13:01
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Couleur editeur d’événement
- Réponses: 8
- Vues: 571
Une image en trop
Bonjour,Il y a quelques temps, comme je désirais mettre un carrousel de vidéos, j'ai mis le code
/** START YOUTUBE WIDGET **/
.ycp {
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-size: 1em;
color: #444;
background: #000;
display: block;
width: 100%;
height: 500px;
box-shadow: 0 4px 4px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.ycp,
.ycp .belah {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.ycp .belah {
display: inline-block;
vertical-align: top;
height: 100%;
}
.ycp .belah:first-of-type {
width: 65%;
}
.ycp .belah:last-of-type {
width: 35%;
}
.ycp .belah .luhur {
color: #fff;
background: #222;
display: block;
width: 100%;
height: 70px;
box-sizing: border-box;
padding: 10px;
margin: 0;
}
.ycp .belah .handap {
color: #ddd;
background: #111;
height: calc(100% - 70px);
padding: 0;
overflow-y: auto;
-moz-box-shadow: inset 0 0 10px #000;
-webkit-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
}
.ycp .belah .handap,
.ycp .belah .bingkay {
display: block;
width: 100%;
box-sizing: border-box;
margin: 0;
}
.ycp .belah .bingkay {
height: 100%;
border: 0;
}
.ycp .belah .luhur span.tombol {
margin-right: 20px;
color: silver;
}
.ycp .belah .luhur span.about {
float: right;
background: #111;
padding: 2px;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
}
.ycp a {
text-decoration: none;
outline: 0;
}
.ycp a img {
border: 0;
}
.ycp .belah.ycp_vid_play {
cursor: pointer;
}
.ycp .belah.ycp_vid_play a {
background: #e52d27;
width: 120px;
height: 75px;
display: block;
border-radius: 10%;
position: relative;
top: calc(50% - 35px);
left: calc(50% - 60px);
text-align: center;
}
.ycp .belah.ycp_vid_play a::before {
color: #fff;
content: "\25B6";
z-index: 100;
font-size: 50px;
}
.ycp .belah .thumb {
float: left;
margin-right: 10px;
position: relative;
height: 61px;
}
.ycp .belah .thumb span {
position: absolute;
right: 2px;
bottom: -2px;
padding: 2px;
background: #000;
color: silver;
font-size: .8em;
}
.ycp .belah .play {
margin: 0;
padding: 10px;
display: block;
overflow: hidden;
*overflow: visible;
}
.ycp .belah .luhur div.title {
color: #fff;
border-bottom: 1px solid #111;
padding-bottom: 5px;
margin-bottom: 5px;
}
.ycp .belah .handap div.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ycp .belah span.mute,
.ycp .belah span.about a {
color: #767676;
font-size: .8em;
}
.ycp .belah .thumb img {
width: 80px;
height: 100%;
border: 2px solid #000;
}
.ycp .belah .play:hover,
.ycp .belah .vid-active {
background: #000;
}
.ycp .belah .luhur .vid-prev,
.ycp .belah .luhur .vid-next,
.ycp .belah .play {
cursor: pointer;
}
@media screen and (max-width:767px) {
.ycp {
height: 1000px;
}
.ycp .belah,
.ycp .belah:first-of-type,
.ycp .belah:last-of-type {
width: 100%;
display: block;
}
.ycp .belah:first-of-type {
height: 40%;
}
.ycp .belah:last-of-type {
height: 60%;
};
}
/** END YOUTUBE WIDGET **/
Merci de votre aide
- le Lun 15 Jan 2018 - 15:51
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Une image en trop
- Réponses: 6
- Vues: 1622
Problème pour modifier la couleur de l'arrière plan du profil.
Bonjour OVANOVIC, pour changer la couleur des intitulés, dans votre PA>Utilisateurs & Groupes>Utilisateurs>Profils>Champs du profil>Éditez chaque champ et réglez la couleur que vous souhaitez, cela modifiera aussi la couleur dans les profils de message. Pour modifier la couleur de police d'écriture de ce qui est écrit, il faudra ajouter un code CSS :- Code:
.inner,#cp-main h1,.inner label,.inner label a{color:#ff0000 ;}
Pour retirer les séparations, encore un code CSS :
- Code:
.panel .separator{display:none;}
Pour l'intérieur du cadre que vous demandez, ce sera en plusieurs parties :
- Code:
#profile-advanced-details,#cp-main .panel,#profile-advanced-right,#profile-advanced-right .module{background-color:#000;}
J'ai mis le fond noir #000, vous pouvez changer, la partie #profile-advanced-details,#cp-main .panel correspond à la partie à gauche et la partie #profile-advanced-right,#profile-advanced-right .module correspond à la parie droite ou il y a l'avatar.
Bien à vous.
- le Mer 3 Jan 2018 - 8:49
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Problème pour modifier la couleur de l'arrière plan du profil.
- Réponses: 6
- Vues: 1505
Mettre le titres des sujets sur toute la largeur du forum
Pour enlever la bordure noire du titre du sujet, et changer la couleur de fond :- Code:
.forumline .catHead {
border: none; /* bordure de titre */
background-image: none; /* image de fond */
background-color: #000; /* couleur de fond */
}
pour enlever la bordure de "auteur" et "message"- Code:
.forumline th.thRight, .forumline th.thLeft {
border: none; /* bordure */
}
Tout ceci est à mettre dans la feuille de style CSS :
panneau > affichage > couleur > feuille de style CSS
Si vous souhaitez changer la couleur de fond du titre par une autre couleur, il faut changer la valeur 000 par une autre : https://html-color-codes.info/Codes-couleur-HTML/
(là j'ai mis background-color: #000; pour mettre un fond noir)
- le Ven 3 Nov 2017 - 13:29
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Mettre le titres des sujets sur toute la largeur du forum
- Réponses: 8
- Vues: 910
[ModernBB] Déplacer la barre de navigation et la rendre figée en dessous du logo du forum
De rien, pour changer la couleur au survol de la souris :- Code:
.navbar a:hover {
background-color: #FF0000;
color: #000;
}
background-color: #FF0000; = couleur du fond
color: #000; = couleur de la police d'écriture
Bien à vous.
- le Dim 15 Oct 2017 - 15:22
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: [ModernBB] Déplacer la barre de navigation et la rendre figée en dessous du logo du forum
- Réponses: 6
- Vues: 1870
Probleme avec le header de fond aléatoire
Détails techniques
Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis le début
Lien du forum : http://14v24.forumactif.org/
Description du problème
Bonjour,Après avoir suivi les indications trouvées sur ce forum (https://forum.forumactif.com/t275674-banniere-aleatoire-pour-headers-en-fond-de-page) pour installer une bannière de fond aléatoire, cela ne marche absolument pas...
- mon css:
- /*--------------------------------------------
COULEURS
marron : #282522
bleu : #1000ff
fuschia : #ff00d2
jaune : #c0ff00
gris : #e8e8e8
--------------------------------------------*/
/*--------------------------------------------
WACKY NEWS
--------------------------------------------*/
.news {
background:#f2f2f1;
padding:5px;
padding-left:40px;
padding-right:40px;
font-family:Playfair display;
text-align:justify;
font-size:10px;
color:#000;
}
.news_issue {
font-family:Playfair display;
text-transform:uppercase;
font-size:8px;
margin-top:-3px;
letter-spacing:2px;
color:#d7d7d7;
margin-left:-20px;
}
.news_titre {
font-family:Playfair display;
text-transform:uppercase;
font-size:59px;
text-align:center;
font-weight:bold;
margin-top:-10px;
letter-spacing:1px;
color:#000;
border-bottom:1px solid #000;
line-height:59px;
padding-bottom:5px;
}
.news_chapeau {
font-family:Playfair display;
text-transform:uppercase;
font-size:13px;
letter-spacing:1px;
margin-top:-10px;
color:#000;
}
.news table{
width:420px;
valign:top!important;
}
.news table td {
width:200px;
font-family:Playfair display;
font-size:11px;
valign:top!important;
line-height:13px;
}
.news table td a {
font-family:Playfair display;
font-style: italic ;
font-weight:bold;
color:#000!important;
}
.news table td a:hover {
color:#efc900!important;
}
.news_col_titre {
font-family:Playfair display;
text-transform:uppercase;
font-size:15px;
font-weight:bold;
text-align:left;
}
.news_img {
width: 200px;
height: 75px;
background-size: cover !important;
background-repeat: no-repeat;
background-position: center !important;
position: center;
}
body {
background-color: #282522;
}
.ban1 { background-image: url('ttps://img4.hostingpics.net/pics/628786bann01.png'); z-index:1000!important;}
.ban2 { background-image: url('https://2img.net/r/hpimg4/pics/195713bann02.png');z-index:1000!important; }
.ban3 { background-image: url('https://2img.net/r/hpimg4/pics/848840bann03.png');z-index:1000!important; }
/* .ban1 { background-image: url('https://2img.net/r/hpimg4/pics/628786bann01.png'); background-position: top center;
background-repeat: no-repeat;}
.ban2 { background-image: url('https://2img.net/r/hpimg4/pics/195713bann02.png'); background-position: top center;
background-repeat: no-repeat;}
.ban3 { background-image: url('https://2img.net/r/hpimg4/pics/848840bann03.png'); background-position: top center;
background-repeat: no-repeat;}*/
/*--------------------------------------------
FICHE RELATIONS
--------------------------------------------*/
.relations {
float:left!important;
}
.relations_caractere{
background: #fff;
width:117px;
font-family:Playfair display;
text-align:center;
letter-spacing:1px;
padding:2px;
font-size:10px;
text-transform:uppercase;
color:#efc900;
float:right!important;
margin:2px;
transition:all 0.4s;
-moz-transition:all 0.4s; /* Mozilla Firefox */
-webkit-transition:all 0.4s; /* Safari et Google Chrome */
-o-transition:all 0.4s; /* Opera */
}
.relations_caractere:hover{
color:#1ed8d7;
}
.relations_caractere2{
background: #fff;
width:242px;
font-family:Playfair display;
text-align:center;
letter-spacing:1px;
padding:2px;
font-size:10px;
text-transform:uppercase;
color:#efc900;
float:right!important;
margin:2px;
transition:all 0.4s;
-moz-transition:all 0.4s; /* Mozilla Firefox */
-webkit-transition:all 0.4s; /* Safari et Google Chrome */
-o-transition:all 0.4s; /* Opera */
}
.relations_caractere2:hover{
color:#1ed8d7;
}
/*--------------------------------------------
page d'accueil
--------------------------------------------*/
.pa_txt_cont {
font-family:Playfair display;
font-weight:bold;
font-size:30px;
text-transform:uppercase;
color:#efc900;
float:right!important;
text-align:left;
margin-top:-97px;
margin-right:10px;
line-height:30px;
letter-spacing:5px;
transition:all 0.4s;
-moz-transition:all 0.4s; /* Mozilla Firefox */
-webkit-transition:all 0.4s; /* Safari et Google Chrome */
-o-transition:all 0.4s; /* Opera */
}
.pa_txt_cont:hover {
color:#1ed8d8;
}
.pa_txt_news {
font-family:Playfair display;
font-weight:bold;
font-size:30px;
text-transform:uppercase;
color:#1ed8d8;
float:right!important;
text-align:left;
margin-top:-97px;
margin-right:20px;
line-height:30px;
letter-spacing:5px;
transition:all 0.4s;
-moz-transition:all 0.4s; /* Mozilla Firefox */
-webkit-transition:all 0.4s; /* Safari et Google Chrome */
-o-transition:all 0.4s; /* Opera */
}
.pa_txt_news:hover {
color:#efc900;
}
#over {
height:100px;
width:390px;
overflow:hidden;
position:relative;
display:inline-block;
}
#over img {
height:100px;
width:390px;
position:absolute;
top:0px;
left:0px;
-webkit-transition:left 1s linear;
transition:left 1s linear;
}
#over div.textset {
height:90px;
width:280px;
padding:5px;
background:#fff; /*FOND DU TEXTE RP ET MEMBRE DU MOIS*/
overflow:auto;
text-align:justify;
}
#over:hover img {
left:-350px;
-webkit-transition:left 1s linear;
transition:left 1s linear;
}
.pa_predef_img{
height:33px;
width:33px;
background-size: cover !important;
background-repeat: no-repeat;
background-position: center !important;
float: left;
margin-right:3px;
margin-bottom:3px;
}
.pa_staff{
height:69px;
width:122px;
background-size: cover !important;
background-repeat: no-repeat;
background-position: center !important;
float: left;
margin-right:3px;
margin-bottom:3px;
}
.pa_tab_gen {
width:100%;
height:309px;
margin-left:2px;
}
.pa_line1 {
height:100px;
width:100%;
}
.pa_line2 {
height:100px;
width:100%;
}
.pa_line3 {
height:60px;
width:100%;
padding-left:5px;
}
.pa_pred {
width:253px;
margin-left:10px!important;
background:#fff;
height:74px;
padding-top:3px;
padding-left:4px;
}
.pa_liens {
height:18px;
width:194px;
background:#fe786d;
margin-bottom:2px;
margin-top:2px;
font-family: 'Playfair Display', serif;
font-size: 11px;
text-align: center;
text-transform:uppercase;
transition:all 0.4s;
-moz-transition:all 0.4s; /* Mozilla Firefox */
-webkit-transition:all 0.4s; /* Safari et Google Chrome */
-o-transition:all 0.4s; /* Opera */
}
.pa_liens a{
font-family: 'Playfair Display', serif;
font-size: 11px;
text-align: center;
text-transform:uppercase;
color:#000!important;
transition:all 0.4s;
-moz-transition:all 0.4s; /* Mozilla Firefox */
-webkit-transition:all 0.4s; /* Safari et Google Chrome */
-o-transition:all 0.4s; /* Opera */
}
.pa_liens a:hover {
color:#fe786d;
}
.pa_liens:hover {
background:#fff;
}
.pa_part {
height:32px;
width:790px;
padding-left:5px;
}
/******************************SLIDESHOW********************/
.contener_slideshow
{
width:392px;
height:100px;
overflow: hidden;
position: relative;
background-image: url(YOUR-URL-IMAGE.png);
}
.slid_1, .slid_2, .slid_3
{
position: absolute;
width:392px;
height:100px;
}
.slid_1{left: 0;}
.slid_2{left: 392px;}
.slid_3{left: 784px;}
.contener_slide
{
width: 784px;
height: 100px;
left:0px;
position: absolute;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-name: anim_slide;
-moz-animation-duration: 10s;
-moz-animation-iteration-count:infinite;
-moz-animation-name: anim_slide;
-ms-animation-duration: 10s;
-ms-animation-iteration-count:infinite;
-ms-animation-name: anim_slide;
animation-duration: 10s;
animation-iteration-count:infinite;
animation-name: anim_slide;
}
@-webkit-keyframes anim_slide
{
0% {left:0px;}
22% {left:0px;}
33% {left:-392px;}
45% {left:-392px;}
66% {left:-784px;}
90% {left:-784px;}
}
@-moz-keyframes anim_slide
{
0% {left:0px;}
22% {left:0px;}
33% {left:-392px;}
45% {left:-392px;}
66% {left:-784px;}
90% {left:-784px;}
}
@-ms-keyframes anim_slide
{
0% {left:0px;}
22% {left:0px;}
33% {left:-392px;}
45% {left:-392px;}
66% {left:-784px;}
90% {left:-784px;}
}
@keyframes anim_slide
{
0% {left:0px;}
22% {left:0px;}
33% {left:-392px;}
45% {left:-392px;}
66% {left:-784px;}
90% {left:-784px;}
}
/*--------------------------------------------
Barre de navigation + toolbar
--------------------------------------------*/
/*Retire faq & calendrier*/
a.mainmenu[href="/calendar"] {display: none !important;}
a.mainmenu[href="/faq"] {display: none !important;}
/* FOND TOOLBAR */
#fa_toolbar {
padding-top:0px !important;
background:#f8f2e2!important; /* MODIFIABLE */
}
/* BORDURE AVATAR TOOLBAR */
.fa_avatar {
float:left; position:relative; z-index:5; margin-left:20px; margin-right:15px; margin-top:-5px;
width:40px; height:50px; border-radius:75px; overflow:hidden; border:7px solid;
border-color:#f8f2e2; /* MODIFIABLE */
}
.fa_avatar img{
width:100px;
}
#fa_right {
float:left !important;
}
/* MENU TOOLBAR */
ul#fa_menulist {
z-index:3 !important; margin-top:-20px !important; border:none !important;
background:#fff !important; /* MODIFIABLE */
margin-left:-60px;
}
/* LIENS MENU TOOLBAR */
#fa_menulist a:link, #fa_menulist a:visited {
color:#18beb2 !important; /* MODIFIABLE */
font-size:10px;
font-family: "Open sans";
}
#fa_menulist a:hover{
color:black !important; /* MODIFIABLE */
}
/* BARRE DE NAVIGATION */
#navSIT {
position:fixed; z-index:20003 !important;
top:5px; right:25px;
}
#navSIT img{
width:20px;margin-right:5px;
}
/* LIENS NAVIGATION */
#navSIT a{
text-transform:uppercase; text-align:center; font-size:12px; font-family:Arial;
color:#18beb2; /* MODIFIABLE */
transition:all .65s linear; -webkit-transition:all .65s linear;
}
/* SURVOL LIEN NAVIGATION */
#navSIT a:hover {
color:lightgrey !important; /* MODIFIABLE */
}
/* MENU RECHERCHE */
#search_menu {
top:25px !important; left:5% !important;
}
#search_menu a{
background:none !important; border:none !important; color:inherit !important;
}
/* SUPPRESSION ELEMENTS TOOLBAR */
#fa_share {
display:none !important;
}
#fa_icon {
opacity:0 !important;
}
a#fa_service {
opacity:0 !important;
}
#fa_search {
display:none !important;
}
#fa_hide {
display:none !important;
}
/*NOTIF*/
#fa_right a.rightHeaderLink {
margin-left:10px;
color:e#fc900 !important;
font-size:12px;
}
#fa_welcome {
background:none !important;
font-size:12px;
}
div#fa_usermenu {
display:none !important;
}
/*--------------------------------------------
Affichage liste des membres
--------------------------------------------*/
/* BLOC LISTE DES MEMBRES */
#LMBER {
width:700px; margin:auto;
}
/* BLOC MEMBRE */
#MBER {
float:left; width:220px; height:210px; margin:5px;
}
/* PSEUDONYME */
.nameLMBER{
margin-bottom:5px;
width:215px; padding-left:5px;
text-align:left; text-transform:uppercase;
}
/* INFORMATIONS */
.stsLMBER {
display:inline-block; vertical-align:top;
width:100px; font-size:11px;
}
/* CONTENU INFORMATIONS */
.stsLMBER div{
margin:5px 0; padding:5px;
background:white; color:black; /* MODIFIABLE */
}
/* IMAGES PROFIL & WWW */
.mpwLMBER {
background:none !important;
}
/* AVATAR MINIATURISE */
#imgLMBER {
display:inline-block; margin-left:10px; width:100px; height:160px; overflow:hidden;
}
.imgLMBER {
position:relative;
width:100px; height:160px; overflow:hidden;
}
.imgLMBER div img{
position:absolute; margin-left:-50px; width:100px;
transition:all 0.85s linear; -webkit-transition:all 0.85s linear;
}
#imgLMBER:hover .imgLMBER div img{
transform:translateX(100px); -webkit-transform:translateX(100px);
}
/* HUMEUR */
.imgLMBER span {
position:absolute;
width:90px; height:150px; padding:5px; overflow:auto;
text-align:justify; font-size:10px;
background:rgba(0,0,0,0.6); color:white; /* MODIFIABLE */
transform:translateX(-150px); -webkit-transform:translateX(-150px);
transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
}
#imgLMBER:hover .imgLMBER span{
transform:translateX(-50px); -webkit-transform:translateX(-50px);
}
/* AFFICHAGE GROUPES LISTE DES MEMBRES */
.grpLMBER {
display:block; margin:5px auto; padding:5px;
text-transform:uppercase; font-weight:bold; font-size:12px;
border:1px solid black; /* MODIFIABLE */
}
/*--------------------------------------------
Messages privés
--------------------------------------------*/
#ava_mp img{
width: auto;
height: auto;
max-height: 200px; /*hauteur max*/
}
#mp_read {
min-height: 150px;
width 470px!important;
background: #f9f3e2;
margin-top:10px!important;
padding: 10px 15px 20px 15px;
margin-top: -15px;
position: relative;
z-index: 1;
text-align: justify;
color: #191919 !important;
}
#private_message {
padding:5px;
}
#un_mp {
background:#b1a86b;
}
* {
font-family: Tahoma, Verdana, Arial, serif, Georgia, Courier New;
}
/*****************INFOBULLE**************/
.infobulle_txt {
width:200px !important;
height:100px!important;
overflow:auto;
}
a.infobulle {
position: relative;
color: #576186;
text-decoration: none;
background: none; /* correction d'un bug IE */
}
a.infobulle span {
display: none; /* on masque l'infobulle */
font-size: 10px;
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.infobulle:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
bottom: 20px; /* on positionne notre infobulle */
width:200px;
height:100px;
background: #faf1cc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #576186;
padding: 10px;
border: 1px solid #f2da7d;
}
.infobulle2_txt {
width:250px !important;
height:70px!important;
overflow:auto;
}
a.infobulle2 {
position: relative;
color: #576186;
text-decoration: none;
background: none; /* correction d'un bug IE */
}
a.infobulle2 span {
display: none; /* on masque l'infobulle */
font-size: 10px;
}
a.infobulle2:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.infobulle2:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
overflow:auto;
bottom: 20px; /* on positionne notre infobulle */
width:250px;
height:70px;
background: #fff;
color: #576186;
padding: 10px!important;
border: 5px solid #ff786e;
}
/******************************************************* DÉBUT CATÉGORIES *******************************************************/
/*Catégorie*/
.cate {
margin: auto;
background:#fdfbef;
margin-bottom: 0px;
width: 800px !important;
}
/*Fond du titre de la catégorie*/
span.cate_title {
display: block;
background-image: url('https://i.servimg.com/u/f58/19/51/69/41/03_cod10.jpg');
width: 800px;
padding-top:50px;
height: 118px!important;
z-index:1!important;
}
/*Titre de la catégorie*/
.cate_title h2 {
display: block;
margin: 0px;
padding: 0px;
font-family: 'Miniver', cursive;
font-size: 36px;
color: #00eaff;
font-weight: normal;
letter-spacing: 1px;
}
/*Bloc de chaque forum*/
.forum {
width: 780px;
margin-bottom:15px;
margin-left:20px;
text-align: center;
color: #7b848f;
}
/*Section gauche*/
.forum_left {
width: 110px;
padding:5px;
background:url('https://2img.net/r/hpimg15/pics/397663fondavatar.png') no-repeat;
}
/*avatar dernier posteur*/
.lastpost_ava img{
width: auto;
height: auto;
max-height: 149px; /*hauteur max*/
}
.imgnew {
margin-top:-14px;
position:absolute;
margin-left:32px;
}
/*Section milieu*/
.forum_center {
width: 433px;
height: 167px !important;
text-align: center;
background:url('https://2img.net/r/hpimg15/pics/883206fondforum.png') no-repeat;
color:#fff;
}
/*Section droite*/
.forum_right {
width: 210px;
padding:5px;
padding-left:0px;
margin-left:-10px!important;
text-align: center;
background:url('https://2img.net/r/hpimg15/pics/146605fondforumright.png') no-repeat ;
}
/*Titre du forum*/
a.forumlink {
font-family: 'Miniver', cursive;
font-size: 25px;
color: #ff786e!important;
font-weight: lighter;
letter-spacing: 2px;
transition: 0.5s;
-webkit-transition: 0.5s;
text-shadow: 1px 1px #efc900;
}
/*Titre du forum survolé*/
a.forumlink:hover {
text-decoration: none!important;
letter-spacing: 4px !important;
color:#efc900 !important;
}
/*Bloc de la description du forum*/
.forum_desc_container {
width: 395px;
padding-left:8px!important;
}
/*Bloc liens importants*/
.forum_desc_liens {
font-family: 'Playfair Display', serif;
font-size: 11px;
text-align: center;
text-transform:uppercase;
height:16px;
}
.forum_desc_liens a{
color:#fff!important;
}
/*Description du forum*/
.forum_desc{
height: 45px;
padding:5px;
font-family: 'Open Sans', sans-serif;
font-size: 10px;
line-height:11px;
text-align: justify;
overflow: auto;
margin-bottom:-20px;
}
/*Sous-forums*/
.forum_sous_forums {
text-align: center;
transition: 0.5s;
-webkit-transition: 0.5s;
font-size: 9px;
color:#d2a101;
}
.forum_sous_forums a{
font-family: 'Playfair Display', serif;
font-size: 9px;
letter-spacing:0.5px;
text-align: center;
text-transform:uppercase;
}
/*Statistiques*/
.forum_stats {
font-family: 'Playfair Display', serif;
font-size: 16px;
line-height:17px;
letter-spacing:1px;
text-transform:uppercase;
color:#fff;
padding-left: 15px;
}
.esperluette {
font-family: 'Playfair Display', serif;
font-size: 60px;
}
.stats_nbr {
float:right;
margin-right:25px!important;
font-family: 'Playfair Display', serif;
font-size: 15px;
}
/*Dernier message*/
.forum_last_mess {
font-family: 'Playfair Display', serif;
font-size: 10px;
line-height:11px;
text-transform:uppercase;
letter-spacing:1px;
color: #fff;
}
/*Placement du titre du dernier message*/
.forum_last_mess a {
margin-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
text-transform:none!important;
text-decoration:none;
}
.forum_last_mess a:hover{
color:#00eaff;
letter-spacing:1px !important;
text-decoration:none !important;
}
/*Mise en forme de l'auteur du dernier message*/
.forum_last_mess a.gensmall, .forum_last_mess a.gensmall strong {
display: inline;
margin-bottom: 0px;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: normal!important;
font-variant: normal;
font-size: 11px;
text-transform:none!important;
text-shadow : 1px 1px #fff;
}
/*--------------------------------------------
BOUTON SELECTIONNER
--------------------------------------------*/
.selectCode { float:right; text-transform: uppercase; font-size:10px; letter-spacing:1px; cursor:pointer; }
div.cont_code { clear: right; }
/*--------------------------------------------
QUOTES, CODES & SPOILERS
--------------------------------------------*/
.quote{
background:#f3da7e;
border:none;
padding:5px;
}
.code{
background:#fe786d;
border:none;
padding:5px;
color:#fff;
}
.spoiler_closed
{
background-color:#1ed8d7; /*couleur de fond du spoiler fermé*/
border:none;
}
.spoiler_content
{
background-color:#ffffff; /*couleur de fond du spoiler ouvert*/
color:#1ed8d7; /*couleur de police*/
padding-top: 7px;
padding-bottom: 7px;
padding-left: 15px;
padding-right: 15px;
}
/*--------------------------------------------
PROFIL & MESSAGES
--------------------------------------------*/
/****** ONLINE / OFFLINE ************/
#offlineimg {
background-image: url('https://i.servimg.com/u/f58/19/51/69/41/online11.jpg');
width: 75px;
height: 15px;
}
/*******BTN EN SAVOIR PLUS********/
.bouton-profil {
cursor: pointer; /* curseur au survol */
margin: 2px 0; /* petite marge en haut et en bas */
padding: 2px; /* espacement entre le texte et la bordure */
text-align: center; /* centrage du texte dans le bloc */
/* -- mise en forme -- */
background: #1ed8d7; /* couleur de fond */
border: 1px solid #1ed8d7; /* bordure */
color: #fff; /* couleur texte */
font-size: 10px; /* taille du texte */
text-transform:uppercase;
font-family: 'Playfair Display', serif;
letter-spacing: 2px; /* espace entre les lettres */
transition:all 0.4s;
-moz-transition:all 0.4s; /* Mozilla Firefox */
-webkit-transition:all 0.4s; /* Safari et Google Chrome */
-o-transition:all 0.4s; /* Opera */
}
.bouton-profil:hover {
background: #fe786d; /* couleur de fond */
border: 1px solid #fd5f52; /* bordure */
color: #fff; /* couleur texte */
letter-spacing: 3px; /* espace entre les lettres */
}
.profil_rank {
font-family: 'Playfair Display', serif;
text-transform:uppercase;
background: #fdfbef;
letter-spacing:1px;
font-size:9px;
color:#18beb2;
text-align:center;
}
.pseudo{
font-family: 'miniver'!important;
font-size:20px;
text-transform:lowercase;
font-weight:lighter !important;
text-align: center !important;
height:25px;
width:200px;
}
div.pseudo{
font-family: 'miniver'!important;
font-size:20px;
text-transform:lowercase;}
.icon_profile {
background-color: #f9f3e2;
text-aling:center;
padding-top:5px;
margin-top:-10px;
}
.details_contener {
text-align:center;
z-index:100;
margin-bottom:15px;
background-color: #f9f3e2;
}
.postdetails {
font-family: 'Playfair Display', serif;
font-size:12px;
}
.date {
font-family: 'Open Sans', sans-serif;
font-size:9px;
color:#152147;
letter-spacing:1px;
}
.post-options {
text-align:center;
}
.sujet_title {
font-family: 'miniver'!important;
font-size: 20px;
letter-spacing:2px;
color:#1ed8d7;
text-align: center !important;
margin-top: 40px !important;
margin-bottom:-15px !important;
background:#f3da7e;
height:45px;
width:800px!important;
border-bottom: 2px solid #f3da7e;
transition:all 0.7s;
-moz-transition:all 0.7s; /* Mozilla Firefox */
-webkit-transition:all 0.7s; /* Safari et Google Chrome */
-o-transition:all 0.7s; /* Opera */
}
.titremess {
z-index:100 !important;
margin-top: 5px;
text-shadow: 1px 1px #ff7c74;
font-family: 'miniver'!important;
font-size: 20px;
}
.profil_avatar {
background-color: #f9f3e2;
width:200px;
height:360px;
padding:10px;
}
.corpsmess{
font-family: 'Open Sans', sans-serif;
font-size:12px;
min-height: 150px;
width 470px!important;
background:#fdfbef;
padding: 10px 15px 20px 15px;
position: relative;
z-index: 1;
text-align: justify;
color: #191919 !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.corpsmess a{
color: #dd3602!important;
}
#profilmess{
font-size: 10px;
position: relative;
z-index: 3;
padding:10px;
}
.profil {
font-family: 'Open Sans', sans-serif;
background:#8aeeee;
margin-top:5px;
padding:5px;
}
.profil_line{
background:#a7f3f3;
margin-bottom:-15px;
padding:3px;
}
.profil_field img{ max-width: 200px;}
.profil_label {
font-family: 'Playfair Display', serif;
text-transform:uppercase;
letter-spacing:1px;
font-size: 10px !important;
line-height:16px;
font-size:900;
}
.profil_field {
color:#1a6d6d;
font-family: 'open sans', sans-serif;
font-size:8px;
}
.profil_rpg {
font-family: 'Playfair Display', serif;
font-size: 11px !important;
color:#1c2d2b!important;
line-height:12px;
background:#f3da7e;
margin-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:8px;
}
.profil_rpg a{
font-family: 'Playfair Display', serif;
text-transform:lowercase;
font-size: 12px !important;
color:#e4d7c8;
margin-top:-10px !important;
margin-bottom:5px;
}
#messageapp {
background:#fdfbef;
color: #797270;
margin-top:-15px;
padding:10px;
padding-top:20px;
width:800px;
}
/*--------------------------------------------
AFFICHAGE DU PROFIL
--------------------------------------------*/
.container{
width:100%;
height:auto;
background:#fdfbef;
margin-left:auto;
margin-right:auto;
margin-top:35px;
overflow:hidden;
}
.top{
float: left;
width:100%;
height:120px;
background-color:#1ed8d7;
border-bottom: 1px solid #fff;
text-align:center;
}
.profil-img{
float:left;
width:120px;
height:120px;
border-radius:50%;
border:8px solid #fe786d;
background-color:#fff;
margin-left:15px;
margin-top:15px;
overflow:hidden;
}
.profil-img img{
width:125px;
}
.profil-name{
float:left;
margin-left:150px;
margin-top:20px;
height:auto;
color:#fff;
font-family: 'miniver';
font-size:35px;
position: absolute;
}
.rang_prof {
font-family: 'Playfair Display', serif;
text-transform:lowercase;
font-size: 15px;
line-height:25px !important;
color: #fff;
}
.middle{
float:left;
width:90%;
margin:40px 5%;
}
.descriptionProfil{
float:left;
width:90%;
height:auto;
font-family: 'open sans', sans-serif;
margin-bottom:20px;
margin-left: 35px;
font-size:13px;
color:#000;
background-color:#f8f2e2;
padding:15px 1%;
-webkit-box-shadow: 3px 3px 0px rgba( 0, 0, 0, .1);
-moz-box-shadow: 3px 3px 0px rgba( 0, 0, 0, .1);
box-shadow: 3px 3px 0px rgba( 0, 0, 0, .1);
}
.expand{
width:434px;
height:200px;
border: 3px solid #81d4fa;
}
.hidden{
display:none;
}
.info{
float:left;
margin-left:40px;
margin-bottom: 20px;
height:100px;
padding-top:6px;
padding-bottom:10px;
width:90%;
background-color:#f8f2e2;
-webkit-box-shadow: 3px 3px 0px rgba( 0, 0, 0, .1);
-moz-box-shadow: 3px 3px 0px rgba( 0, 0, 0, .1);
box-shadow: 3px 3px 0px rgba( 0, 0, 0, .1);
height:auto;
}
.single-info{
float:left;
width:98%;
padding-left:2%;
color:#eeb601;
height:auto;
}
.info-title{
float:left;
width:20%;
margin-left:2%;
font-family: 'open sans', sans-serif;
}
.info-desc{
float:left;
width:78%;
font-family: 'open sans', sans-serif;
}
/******************************************************* DÉBUT Sujets *******************************************************/
.img_liste_sujets {
background:#fdfbef;
}
.sujet_forumlink {
background:#f9f3e2;
padding:5px;
padding-left:10px;
}
/*Bloc des sujets*/
.sujets {
margin: auto;
background-image: url('https://2img.net/r/hpimg4/pics/971652hautlistesujets.png');
background-repeat: no-repeat;
width: 790px;
margin-top:10px;
}
/*Titre du bloc des sujets*/
.sujets_top_title {
display: block;
width: 750px;
margin-top: 15px;
height:95px;
}
/*Liste des sujets*/
.sujets_list {
width: 790px;
padding-top: 10px;
padding-bottom: 0px;
text-align: left;
color: #7b848f;
background:#fdfbef;
margin-top:-20px;
}
/*Polices des éléments hors sujets*/
.sujets_font {
font-size: 12px;
font-family: 'Open Sans', sans-serif;
color: #7b848f;
}
/*Chaque sujet*/
.sujet {
position: relative;
width: 780px;
margin-bottom: 10px;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
}
/*Type de sujet*/
.sujet_type {
font-family: 'Playfair Display', serif;
font-size: 12px;
color: #fe786d!important;
padding-left:5px;
text-transform: uppercase;
letter-spacing:1px;
}
/*Titre du sujet*/
a.sujetlink {
font-family: 'Playfair Display', serif;
font-size: 12px;
color: #000!important;
font-weight: normal;
margin-bottom:-3px;
text-decoration: none!important;
-webkit-transition: all 1s; /* pour navigateur webkit */
-moz-transition: all 1s; /* pour navigateur mozilla */
-o-transition: all 1s; /* pour navigateur opera */
transition: all 1s; /* pour les navigateurs récents */
}
/*Titre du sujet survolé*/
a.sujetlink:hover {
text-decoration: none!important;
font-weight:700;
color:#1ed8d7 !important;
}
/*Auteurs des sujets*/
.sujet_auteur a strong, .sujet_last_auteur a strong, .sujet_auteur a, .sujet_last_auteur a {
font-family: 'Open Sans', sans-serif;
font-size: 9px;
text-decoration:none;
font-weight:600;
line-height:9px;
text-transform:uppercase;
letter-spacing:1px;
}
.sujet_stats_back {
font-family: 'Playfair Display', serif;
font-size: 10px;
line-height:9px;
text-transform:uppercase;
letter-spacing:1px;
color: #fff;
background:url('https://2img.net/r/hpimg4/pics/661038stats.png') no-repeat left center;
}
.sujet_stats_back_txt {
font-family: 'Playfair Display', serif;
font-size: 8px;
letter-spacing:1px;
color: #fff;
margin-left:4px;
}
.sujet_stats_last {
font-family: 'Open Sans', sans-serif;
font-size: 8px;
line-height:9px;
text-transform:uppercase;
letter-spacing:1px;
color: #000;
background:#f9f3e2;
padding:5px;
}
.sujet_stats {
font-family: 'Open Sans', sans-serif;
font-size: 8px;
line-height:9px;
text-transform:uppercase;
letter-spacing:1px;
color: #000;
}
/*--------------------------------------------
CHATBOX
--------------------------------------------*/
#chatbox_header .cattitle:before { content: "Le repère des détraqués | "; } /* Modifier NOM par le titre que vous désirez */
.fond_smileys{
background: url('https://i.imgur.com/adFe7.png')!important;
}
body.chatbox {
background-color: #fdfbef;
}
#chatbox_header .catBottom .cattitle {
color: #1ed8d7;
}
#chatbox_header .catBottom {
background : #1ed8d7;
}
#chatbox .cb-avatar, #chatbox .cb-avatar > img { width: 20px !important;}
#chatbox .cb-avatar { background: transparent !important; box-shadow: none !important; }
body #chatbox .cb-avatar { border: none !important; /*retirer la bordure*/ }
#chatbox .cb-avatar > img{ border-radius: 50% !important; }
#chatbox .user-msg .user, #chatbox .user-msg .msg {
display: inline;
}
#chatbox_members .cb-avatar > img {
height:30px;width:30px;
vertical-align: middle;
}
/*--------------------------------------------
TAILLE IMG FIL D'ARIANE
--------------------------------------------*/
.nav img{
max-width: 150px;
max-height: 150px;
margin-bottom:-5px;
}
.nav {
font-weight:lighter;
font-family: 'Open Sans', sans-serif;
font-size: 9px;
line-height:9px;
text-transform:uppercase;
color: #fe786d!important;
}
/*--------------------------------------------
QEEL
--------------------------------------------*/
#TotalMembres {
position: absolute;
top:91px;
left:515px;
font-family: 'Playfair Display', serif;
font-size: 15px;
}
#TotalMessages {
position: absolute;
top: 180px;
left:512px;
font-family: 'Playfair Display', serif;
font-size: 15px;
}
#logged {
height:60px !important;
overflow: auto;
}
#DernierInscrit {
}
/* Positionnement du bloc des statistiques */
.stats_qeel {
position: absolute;
top: 159px;
left: 43px;
width: 180px;
height: 150px;
overflow: auto;
font-family: 'Open Sans', sans-serif;
font-size: 9px !important;
text-align: justify;
}
/* Positionnement du bloc des plumes présentes */
.plumes_presentes {
position: absolute;
top: 127px;
left: 489px;
width: 220px;
height: 185px;
font-family: 'Open Sans', sans-serif;
font-size: 9px;
text-align: justify;
}
/* Mise en forme des liens des plumes présentes */
.plumes_presentes a {
text-decoration: none !important;
}
/* Transparence des anniversaires et des dernières 24h */
#kaboum .row1 {
background-color : transparent;
font-family: 'Open Sans', sans-serif;
font-size: 9px!important;
}
.qhh {
overflow: auto;
height:97px!important;
}
.row1 .gensmall {
font-family: 'Open Sans', sans-serif;
font-size: 9px!important;
}
/* Positionnement du bloc des groupes */
.groupes_qeel {
position: absolute;
top: 115px;
left: 325px;
width: 200px;
text-align: center;
}
/* Mise en forme des liens des groupes */
.groupes_qeel a{
font-family: 'Playfair Display', serif;
text-transform: lowercase;
font-size: 17px;
line-height: 35px;
color:#d8ccbe !important;
}
/*Titre des categories en image*/
.secondarytitle .titre_cate {
display: none;
}
.nav img.titre_cate_img {
display: none;
}
/***************************************** RETIRER LES BORDURES*********************************************/
.row3Right
{
border: none !important;
}
.thHead
{
border: none !important;
}
.thCornerL, .thCornerR, .thTop
{
border: none !important;
}
.thLeft, .thRight
{
border-left: none !important;
border-right: none !important;
}
.catLeft, .catRight
{
border: none! important;
}
.catHead
{
border: none !important;
}
.catBottom
{
border: none !important;
}
/*--------------------------------------------
LIENS
--------------------------------------------*/
a:hover{text-decoration: none !important; color:#18beb2 !important;}
a {text-decoration: none !important; transition:all 1s; color:#fe786d !important;
-moz-transition:all 1s; /* Mozilla Firefox */
-webkit-transition:all 1s; /* Safari et Google Chrome */
-o-transition:all 1s; /* Opera */}
a:link {text-decoration: none;}
a:visited {text-decoration: none; }
/* ONGLETS */
/************************************************ FICHE ************************************************/
/* On met en place la fiche et son image de fond */
.fiche {
position: relative;
margin: auto;
background-color: #f9f3e2;
padding-left:10px;
padding-right:10px;
}
/* On cache les input */
.fiche > input { display: none; }
/* On met les labels au centre */
.fiche .boutons { text-align: center; }
/* Mise en forme des labels/titre des onglets normal */
.fiche .boutons label {
margin-left: 4px;
margin-right: 4px;
font-family: 'miniver';
font-size: 25px;
color:#fe786d;
cursor: pointer;
background:#fdfbef;
padding:10px;
padding-bottom:20px;
transition: all ease 0.5s;
}
/* Effet au survol des labels */
.fiche .boutons label:hover {
color: #1ed8d7;
transition: all ease 0.5s;
}
/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.fiche .interne {
position: relative;
width: 448px;
height: 300px;
margin: auto;
margin-top:-10px;
background:#fdfbef;
}
/* On met en place et en forme le contenu de chaque onglet */
.contenu {
position: absolute;
top: 10px;
left: 10px;
width: 90%;
height: 260px;
padding: 10px;
margin: auto;
overflow: auto;
text-align: justify;
opacity: 0;
visibility: hidden;
transition: all ease 0.5s;
}
/* Petit effet sur les b: on change la couleur */
.fiche .interne strong { color: #BA2F23; }
/* Fait le changement de style sur les labels sélectionnés */
.fiche #informations:checked ~ .boutons .lab.infos,
.fiche #physique:checked ~ .boutons .lab.phys,
.fiche #caractere:checked ~ .boutons .lab.car,
.fiche #histoire:checked ~ .boutons .lab.hist,
.fiche #ecran:checked ~ .boutons .lab.ecr {
color: #1ed8d7;
}
/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #informations:checked ~ .interne .contenu.infos,
.fiche #physique:checked ~ .interne .contenu.phys,
.fiche #caractere:checked ~ .interne .contenu.car,
.fiche #histoire:checked ~ .interne .contenu.hist,
.fiche #ecran:checked ~ .interne .contenu.ecr {
opacity: 1;
visibility: visible;
transition: all ease 0.5s;
}
/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #informations ~ .interne .contenu.infos,
.fiche #physique ~ .interne .contenu.phys,
.fiche #caractere ~ .interne .contenu.car,
.fiche #histoire ~ .interne .contenu.hist,
.fiche #ecran ~ .interne .contenu.ecr {
opacity: 0;
visibility: hidden;
transition: all ease 0.5s;
}
/*--------------------------------------------
CODES PERSO
--------------------------------------------*/
.titre0 {
background:#1ed8d7;
font-family: 'miniver';
font-size: 35px;
color:#fff;
text-align:center;
letter-spacing:1px;
padding-top:15px;
padding-bottom:20px;
text-shadow: 1px 1px #ff7c74;
}
.soustitre0 {
font-family: 'Playfair Display', serif;
font-size:10px;
text-transform:uppercase;
margin-top:-20px;
text-align:center;
letter-spacing:1px;
}
.titre1 {
font-family: 'miniver';
font-size: 25px;
color:#fe786d;
}
.titre2 {
font-family: 'Playfair Display', serif;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
color:#efca00;
margin-top:-5px;
}
.titre3 {
font-family: 'Playfair Display', serif;
font-size:12px;
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:-10px;
border-bottom:1px solid #000;
}
.cadre {
background:#f9f3e2;
padding:10px;
padding-top:20px;
padding-bottom:20px;
border-top: 1px solid #fff;
}
.cadre2 {
background:#fdfbef;
margin-top:-20px;
padding:10px;
}
.cadre_important {
color:#fff;
padding:20px;
padding-left:80px;
background:url('http://icons.iconarchive.com/icons/graphicloads/100-flat/256/warning-icon.png') no-repeat #fe786d;
background-position:10px 20px;
background-size:60px;
text-align:justify;
}
.cadre_important a {
color:#efca00!important;
}
.petite_img {
width: 155px;
height: 105px;
background-size: cover !important;
background-repeat: no-repeat;
background-position: center !important;
position: center;
}
.petite_img2 {
width: 195px;
height: 105px;
background-size: cover !important;
background-repeat: no-repeat;
background-position: center !important;
position: center;
}
.image_circu {
width: 120px;
height: 120px;
border: 6px solid #fff;
-webkit-border-radius: 120px;
-moz-border-radius: 120px;
border-radius: 120px;
background-size: cover !important;
background-repeat: no-repeat;
background-position: center !important;
position: center;
float:left
}
J'espère que vous aurez une réponse ~
Merci d'avance
- le Jeu 1 Juin 2017 - 15:59
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Probleme avec le header de fond aléatoire
- Réponses: 4
- Vues: 6516
Modifier codage pour "CODE"
Bonjour Orwèn, vous souhaitez ajouter un fond de couleur ou une image ? Pour un fond de couleur, essayez comme ceci :- Code:
.code div.cont_code{background-color:#ff0000;
border:2px solid #000;
border-radius:10px;
padding:10px;}
J'ai mis un fond rouge(background-color:#ff0000) et une bordure de 2px noire(border:2px solid #000), mettez ce qui vous convient le mieux.
Bien à vous.
- le Mer 3 Mai 2017 - 14:56
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Modifier codage pour "CODE"
- Réponses: 5
- Vues: 797
Redimensionnement automatique des images (non-souhaité)
Détails techniques
Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : hiver 2017
Lien du forum : http://entreelles.org
Description du problème
Bonjour,je ne sais pas pourquoi ou ce que j'aurais pu changer, mais le forum redimensionne automatiquement les images à 800x256 pixels. J'ai besoin d'environ 1300x480 pour mon image de fond, alors c'est un problème.
Je n'avais pas ce problème avant, seulement depuis la dernière fois où j'ai changé l'image, il y a quelques semaines. Je viens de remarquer le problème hier car nous voulons changer l'image à nouveau.
Est-ce un problème dans mon CSS ? Comme je suis très novice, je n'arrive pas à décoder où serait le bobo. Quelqu'un peut m'aider ?
Je vous mets copie de mon CSS en entier :
Merci beaucoup !
***********************************************
/*REDIMENSIONNER LE LOGO À LA PAGE*/
/*TAILLE LOGO*/
#logo img {
max-width: 100%;
}
A:hover{text-transform:uppercase;}
/*BOUTON VOTER POUR CE MESSAGE (non-utilsé, va avec bouton j'aime (1)*/
div.vote .vote-no-bar, div.vote div.vote-bar + div.vote-button, div.vote div.vote-no-bar + div.vote-button { display: none; }
.vote-count {
background: url("https://i.servimg.com/u/f43/14/33/98/96/button10.png") no-repeat scroll 0 0 transparent;
color: #4AAE00;
font-size: 10px;
font-weight: 700;
height: 17px;
padding-top: 2px;
text-align: center;
width: 27px;
}
/*remplacement Chatbox par clavardage dans la boîte de clavardage */
.chatbox-title a {
font-size:0;
}
.chatbox-title a:after {
font-size:18px;
content:"CLAVARDAGE";
}
/*Message Chatbox sur même ligne que Avatar */
#chatbox .user-msg .user, #chatbox .user-msg .msg {
display: inline;
}
/*TEXTE POUR REMERCIER L'AUTEUR D'UN MESSAGE*/
#fa_thanks_message img { vertical-align:middle }
#fa_thanks_message {
color:#280;
font-size:16px;
font-weight:bold;
text-align:center;
background-color:#DFD;
border:1px solid #BDB;
border-radius:6px;
padding:6px;
margin:6px;
}
/*LIMITER LA TAILLE DES AVATARS DANS LA CHATBOX*/
#chatbox_members .cb-avatar > img {
height:30px;width:30px;
vertical-align: middle;
}
/*MESSAGE DE BIENVENUE DANS LA CHATBOX*/
#chatbox.recently-connected:after {
font-family: "trebuchet ms", serif;
font-size: 1.5em; line-height:1.5em; font-weight: bold; color: #8BC34A;
box-shadow:0 0 5px #AED581; display:block; background: #F1F8E9; margin:auto;
width:80%; margin:1.5% auto; padding:1%; white-space: pre;
content: "Bienvenue dans la zone de clavardage !";
}
/*COLORISER LES CELLULES SUR L'INDEX LORSQU'UN NOUVEAU MESSAGE EST POSTÉ*/
dl.newpost {
background-color:#A2BCAB!important;
}
/*REDIMENSIONNER LES SIGNATURES*/
.signature_div img{
max-width: 500px !important;
max-height: 200px !important;
}
/*CHANGER LA COULEUR DES NOUVEAUX MESSAGES (EN ROUGE)*/
.new-message{
color: #E3170D;
}
/*CHANGER LA COULEUR AU SURVOL DES NOUVEAUX MESSAGES (EN BLEU)*/
.new-message:hover{
color: #1C86EE;
}
/*RACCOURCISSEMENT DES LIENS INTERNET DANS LES MESSAGES*/
.postbody a {
display: inline-block;
max-width: 400px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}
/*couleur des liens dans les messages*/
.postbody a{
color: blue;
font-weight: bold;}
/*couleur des titres des messages*/
.topic-title a{color: black;}
/*couleur du nom de l'auteur*/
.author a{
color: black;
font-weight: lighter;}
/*REDIMENSIONNER LES IMAGES À 90%*/
div.postbody img {
max-width: 100%;}
/*Bouton J'aime (0)*/
#rep_post .reput_vote {
-khtml-user-select: none;
-moz-transition: all,1s;
-moz-user-select: none;
-ms-user-select: none;
-o-transition: all,1s;
-webkit-touch-callout: none;
-webkit-transition: all,1s;
-webkit-user-select: none;
background: #667882 url(https://i.servimg.com/u/f68/16/87/83/03/u0as10.png) no-repeat 3px center;
background-size: 22px;
border-radius: 4px;
border-top: 1px solid #999;border-bottom:2px solid #999;
text-shadow: 1px 1px 1px #ccc, 0px 3px 3px #000;
box-shadow: -0 2px 4px #000;
clear: both;
color: #fff;
cursor: pointer;
display: table;
font-size: 11px;
font-weight: 700;
line-height: 18px;
margin: 5px;
padding: 3px 5px 3px 30px;
transition: all,1s;
user-select: none;
}
.reput_vote.zero {
background-color: #6a6a6a;
}
.BS_like {font-family:'arial';
-khtml-user-select: none;
-moz-transition: all,1s;
-moz-user-select: none;
-ms-user-select: none;
-o-transition: all,1s;
-webkit-touch-callout: none;
-webkit-transition: all,1s;
-webkit-user-select: none;
background: #667882 url(https://i.servimg.com/u/f68/16/87/83/03/u0as10.png) no-repeat 3px center;
background-size: 22px;
border-radius: 4px;
border-top: 1px solid #999;border-bottom:2px solid #999;
text-shadow: 1px 1px 1px #ccc, 0px 3px 3px #000;
box-shadow: -0 2px 4px #000;
clear: both;
color: #fff;
cursor: pointer;
display: table;
font-size: 11px;
font-weight: 700;
line-height: 18px;
margin: 5px;
padding: 3px 5px 3px 30px;
transition: all,1s;
user-select: none;
}
.BS_like:before {
content: "Si tu aimes ce message clique ici !";
}
#rep_post .bs_inline {
list-style: none;
}
#rep_post {white-space: nowrap;margin: 6px 4px;float: right;}
#rep_post .bs_inline {list-style: none;}
#rep_post .bs_inline > li {display: inline-block;margin: 0 3px;}
#rep_post .bs_inline > li:first-child {margin-left: 0;}
#rep_post .bs_inline img {display: none;}
#rep_post span img {cursor: pointer;}
.reput_vote.positive {background-color: #8db13e;}
.reput_vote.zero {background-color: #6a6a6a;}
#rep_post .reput_vote:before {
content: " ";
}
/*Gras rouge pour " vous devez vous présenter avant d'écrire dans ce forum*/
.grasRouge {
font-weight: bold;
color: #FF0000;
}
- le Lun 1 Mai 2017 - 17:58
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Redimensionnement automatique des images (non-souhaité)
- Réponses: 7
- Vues: 2397
Code avatar + template topics_list_box
"illy"Dans ton CSS change cette partie:
- Code:
.profil_mess
{
position: absolute;
display: block;
/* font-family: indie flower; Ligne supprimée */
width: 190px;
height: 310px;
margin: auto;
padding: 5px;
overflow: auto;
background: #ffffff;
color:#000; /* anciennement #c5bea0;*/
font-size: 11px;
opacity:0;
-moz-transition: opacity 0.8s ease-in-out;
-webkit-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
Color (du texte) passe de -> #c5bea0 à -> #000
font supprimée -> font-family: indie flower;
- le Mar 25 Avr 2017 - 13:10
- Rechercher dans: Archives des problèmes avec l'apparence du forum
- Sujet: Code avatar + template topics_list_box
- Réponses: 11
- Vues: 1317
Problème d'affichage slider Mozilla/chrome
Ok ça vient bien des JS.Insère les deux Javascript suivants dans une nouvelle page Javascript.
- 1ier JS:
- Code:
/***********************************************************************
*
* Coda Slider 3
* Kevin Batdorf
*
* http://kevinbatdorf.github.com/codaslider
*
* GPL license & MIT license
*
************************************************************************/
// Utility for creating objects in older browsers
if ( typeof Object.create !== 'function' ) {
Object.create = function( obj ) {
function F() {}
F.prototype = obj;
return new F();
};
}
(function( $, window, document, undefined ) {
var Slider = {
//initialize
init: function( options, elem ) {
var self = this;
//remove no JavaScript warning
$("body").removeClass("coda-slider-no-js");
//add preloader class (backwards compatible)
$('.coda-slider').prepend('<p class="loading">Loading...<br /><img src="./img/ajax-loader.gif" width="220" height="19" alt="loading..." /></p>');
// Cache the element
self.elem = elem;
self.$elem = $( elem );
// Cache the ID and class. This allows for multiple instances with any ID name supplied
self.sliderId = '#' + ( self.$elem ).attr('id');
// Set the options
self.options = $.extend( {}, $.fn.codaSlider.options, options );
// Cache the ID and class. This allows for multiple instances with any ID name supplied
self.sliderId = '#' + ( self.$elem ).attr('id');
// Build the tabs and navigation
self.build();
// Start auto slider
if (self.options.autoSlide) {self.autoSlide();}
self.events();
// Test the preloader (image doesn't load)
//alert("Testing preloader");
// Kill the preloader
$("p.loading").remove();
},
build: function() {
var self = this;
// Wrap the entire slider (backwards compatible)
if ( $(self.sliderId).parent().attr('class') != 'coda-slider-wrapper' ) {$(self.sliderId).wrap('<div id="' + ( self.$elem ).attr('id') + '-wrapper" class="coda-slider-wrapper"></div>'); }
// Add the .panel class to the individual panels (backwards compatable)
$(self.sliderId + " > div").addClass('panel');
self.panelClass = self.sliderId + ' .panel';
// Wrap all panels in a div, and wrap inner content in a div (backwards compatible)
$(self.panelClass).wrapAll('<div class="panel-container"></div>');
if ( $(self.panelClass).children().attr('class') != 'panel-wrapper' ) { $(self.panelClass).wrapInner('<div class="panel-wrapper"></div>'); }
self.panelContainer = ($(self.panelClass).parent());
// Store hash Links
if (self.options.hashLinking) {
self.hash = (window.location.hash);
self.hashPanel = (self.hash).replace('#', '');
}
// Store current tab
self.currentTab = (self.options.hashLinking && self.hash) ? self.hashPanel - 1 : self.options.firstPanelToLoad - 1;
// Apply starting height to the container
if (self.options.autoHeight) { $(self.sliderId).css('height', $($(self.panelContainer).children()[self.currentTab]).height() + $(self.sliderId + '-wrapper .coda-nav-right').height()); }
// Build navigation tabs
if (self.options.dynamicTabs) { self.addNavigation(); }
// Build navigation arrows
if (self.options.dynamicArrows) { self.addArrows(); }
// Create a container width to allow for a smooth float right.
self.totalSliderWidth = $(self.sliderId).outerWidth(true) + $($(self.sliderId).parent()).children('[class^=coda-nav-left]').outerWidth(true) + $($(self.sliderId).parent()).children('[class^=coda-nav-right]').outerWidth(true);
$($(self.sliderId).parent()).css('width', self.totalSliderWidth);
// Align navigation tabs
if (self.options.dynamicTabs) { self.alignNavigation(); }
// Clone panels if continuous is enabled
if (self.options.continuous) {
$(self.panelContainer).prepend($(self.panelContainer).children().last().clone());
$(self.panelContainer).append($(self.panelContainer).children().eq(1).clone());
}
// Allow the slider to be clicked
self.clickable = true;
// Count the number of panels and get the combined width
self.panelCount = $(self.panelClass).length;
self.panelWidth = $(self.panelClass).outerWidth();
self.totalWidth = self.panelCount * self.panelWidth;
// Variable for the % sign if needed (responsive), otherwise px
self.pSign = 'px';
self.slideWidth = $(self.sliderId).width();
// Puts the margin at the starting point with no animation. Made for both continuous and firstPanelToLoad features.
// ~~(self.options.continuous) will equal 1 if true, otherwise 0
$(self.panelContainer).css('margin-left', ( -self.slideWidth * ~~(self.options.continuous)) + (-self.slideWidth * self.currentTab) );
// Configure the current tab
self.setCurrent(self.currentTab);
// Apply the width to the panel container
$(self.sliderId + ' .panel-container').css('width', self.totalWidth);
},
addNavigation: function(){
var self = this;
// The id is assigned here to allow for the responsive setting
var dynamicTabs = '<div class="coda-nav"><ul></ul></div>';
// Add basic frame
if (self.options.dynamicTabsPosition === 'bottom') { $(self.sliderId).after(dynamicTabs); }
else{ $(self.sliderId).before(dynamicTabs); }
// Add labels
$.each(
(self.$elem).find(self.options.panelTitleSelector), function(n) {
$($(self.sliderId).parent()).find('.coda-nav ul').append('<li class="tab' + (n+1) + '"><a href="#' + (n+1) + '" title="' + $(this).text() + '">' + $(this).text() + '</a></li>');
}
);
},
alignNavigation: function() {
var self = this;
self.totalNavWidth = 0;
var arrow = '';
if (self.options.dynamicArrowsGraphical) {arrow = '-arrow';}
// Set the alignment
if (self.options.dynamicTabsAlign != 'center') {
$($(self.sliderId).parent()).find('.coda-nav ul').css(
'margin-' + self.options.dynamicTabsAlign,
// Finds the width of the arrows and the margin
$($(self.sliderId).parent()).find(
'.coda-nav-' +
self.options.dynamicTabsAlign +
arrow
).outerWidth(true) + parseInt($(self.sliderId).css('margin-'+ self.options.dynamicTabsAlign), 10)
);
$($(self.sliderId).parent()).find('.coda-nav ul').css('float', self.options.dynamicTabsAlign); // couldn't combine this .css() with the previous??
}
else {
// Get total width of the navigation tabs and center it
$($(self.sliderId).parent()).find('.coda-nav li a').each(function(){self.totalNavWidth += $(this).outerWidth(true); });
$($(self.sliderId).parent()).find('.coda-nav ul').css('width', self.totalNavWidth + 1);
}
},
addArrows: function(){
var self = this;
$(self.sliderId).parent().addClass("arrows");
if(self.options.dynamicArrowsGraphical){
$(self.sliderId).before('<div class="coda-nav-left-arrow" data-dir="prev" title="Slide left"><a href="#"></a></div>');
$(self.sliderId).after('<div class="coda-nav-right-arrow" data-dir="next" title="Slide right"><a href="#"></a></div>');
}
else{
$(self.sliderId).before('<div class="coda-nav-left" data-dir="prev" title="Slide left"><a href="#">' + self.options.dynamicArrowLeftText + '</a></div>');
$(self.sliderId).after('<div class="coda-nav-right" data-dir="next" title="Slide right"><a href="#">' + self.options.dynamicArrowRightText + '</a></div>');
}
},
events: function(){
var self = this;
// CLick arrows
$($(self.sliderId).parent()).find('[class^=coda-nav-]').on('click', function(e){
// These prevent clicking when in continuous mode, which would break it otherwise.
if (!self.clickable && self.options.continuous) {return false;}
self.setCurrent($(this).attr('class').split('-')[2]);
if (self.options.continuous) {self.clickable = false;}
return false;
});
// Click tabs
$($(self.sliderId).parent()).find('[class^=coda-nav] li').on('click', function(e){
if (!self.clickable && self.options.continuous) {return false;}
self.setCurrent(parseInt( $(this).attr('class').split('tab')[1], 10) - 1 );
if (self.options.continuous) {self.clickable = false;}
return false;
});
// Click cross links
$('[data-ref*=' + (self.sliderId).split('#')[1] + ']').on('click', function(e){
if (!self.clickable && self.options.continuous) {return false;}
// Stop and Play controls
if (self.options.autoSlideControls) {
if ($(this).attr('name') === 'stop') {
$(this).html(self.options.autoSlideStartText).attr('name', 'start');
clearTimeout(self.autoslideTimeout);
return false;
}
if ($(this).attr('name') === 'start') {
$(this).html(self.options.autoSlideStopText).attr('name', 'stop');
self.setCurrent(self.currentTab + 1);
self.autoSlide();
return false;
}
}
self.setCurrent( parseInt( $(this).attr('href').split('#')[1] -1, 10 ) );
if (self.options.continuous) {self.clickable = false;}
if (self.options.autoSlideStopWhenClicked) { clearTimeout(self.autoslideTimeout); }
return false;
});
// Click to stop autoslider
$($(self.sliderId).parent()).find('*').on('click', function(e){
// AutoSlide controls.
if (self.options.autoSlideControls && autoSlideStopWhenClicked) {
$('body').find('[data-ref*=' + (self.sliderId).split('#')[1] + '][name=stop]').html(self.options.autoSlideStartText);
clearTimeout(self.autoslideTimeout);
}
if (!self.clickable && self.options.continuous) {
if (self.options.autoSlideStopWhenClicked) { clearTimeout(self.autoslideTimeout); }
return false;
}
if (self.options.autoSlide) {
// Clear the timeout
if (self.options.autoSlideStopWhenClicked) { clearTimeout(self.autoslideTimeout); }
else {
self.autoSlide(clearTimeout(self.autoslideTimeout));
self.clickable = true;
}
}
// Stops from speedy clicking for continuous sliding.
if (self.options.continuous) {clearTimeout(self.continuousTimeout);}
});
},
setCurrent: function( direction ){
var self = this;
if (self.clickable) {
if (typeof direction == 'number') { self.currentTab = direction; }
else {
// "left" = -1; "right" = 1;
self.currentTab += ( ~~( direction === 'right' ) || -1 );
// If not continuous, slide back at the last or first panel
if (!self.options.continuous){
self.currentTab = (self.currentTab < 0) ? this.panelCount - 1 : (self.currentTab % this.panelCount);
}
}
// This is so the height will match the current panel, ignoring the clones.
// It also adjusts the count for the "currrent" class that's applied
if (self.options.continuous) {
self.panelHeightCount = self.currentTab + 1;
if (self.currentTab === self.panelCount - 2){self.setTab = 0;}
else if (self.currentTab === -1) {self.setTab = self.panelCount - 3;}
else {self.setTab = self.currentTab;}
}
else{
self.panelHeightCount = self.currentTab;
self.setTab = self.currentTab;
}
// Add and remove current class.
$($(self.sliderId).parent()).find('.tab' + (self.setTab + 1) + ' a:first')
.addClass('current')
.parent().siblings().children().removeClass('current');
// Update Hash Tags
if (self.options.hashLinking) {
//console.log( ((self.$elem).find(self.options.hashTitleSelector)[self.currentTab] ));
if (self.options.continuous) {
if (self.currentTab === self.panelCount - 2) {
window.location.hash = 1;
} else if (self.currentTab === -1) {
window.location.hash = self.panelCount - 2;
} else {
window.location.hash = self.currentTab + 1;
}
} else { window.location.hash = self.currentTab + 1; }
}
this.transition();
}
},
transition: function(){
var self = this;
// Adjust the height
if (self.options.autoHeight) {
$(self.panelContainer).parent().animate({
'height': $($(self.panelContainer).children()[self.panelHeightCount]).height()
}, {
easing: self.options.autoHeightEaseFunction,
duration: self.options.autoHeightEaseDuration,
queue: false
});
}
// Adjust the margin for continuous sliding
if (self.options.continuous) {self.marginLeft = -(self.currentTab * self.slideWidth ) - self.slideWidth;}
// Otherwise adjust as normal
else {self.marginLeft = -(self.currentTab * self.slideWidth ); }
// Animate the slider
(self.panelContainer).animate({
'margin-left': self.marginLeft + self.pSign
}, {
easing: self.options.slideEaseFunction,
duration: self.options.slideEaseDuration,
queue: false,
complete: self.continuousSlide(self.options.slideEaseDuration + 50)
});
},
autoSlide: function(){
var self = this;
// Can't set the autoslide slower than the easing ;-)
if (self.options.autoSlideInterval < self.options.slideEaseDuration) {
self.options.autoSlideInterval = (self.options.slideEaseDuration > self.options.autoHeightEaseDuration) ? self.options.slideEaseDuration : self.options.autoHeightEaseDuration;
}
if (self.options.continuous) {self.clickable = false;}
self.autoslideTimeout = setTimeout(function() {
// Slide left or right
self.setCurrent( self.options.autoSliderDirection );
self.autoSlide();
}, self.options.autoSlideInterval);
},
continuousSlide: function (delay){
var self = this;
if (self.options.continuous) {
self.continuousTimeout = setTimeout(function() {
// If on the last panel (the clone of panel 1), set the margin to the original.
if (self.currentTab === self.panelCount - 2){
$(self.panelContainer).css('margin-left', -self.slideWidth + self.pSign);
self.currentTab = 0;
}
// If on the first panel the clone of the last panel), set the margin to the original.
else if (self.currentTab === -1){
$(self.panelContainer).css('margin-left', -( ((self.slideWidth * self.panelCount) - (self.slideWidth * 2))) + self.pSign );
self.currentTab = (self.panelCount - 3);
}
self.clickable = true;
}, delay);
}
else{self.clickable = true;}
}
};
$.fn.codaSlider = function( options ) {
return this.each(function() {
var slider = Object.create( Slider );
slider.init( options, this );
});
};
$.fn.codaSlider.options = {
autoHeight: true,
autoHeightEaseDuration: 1500,
autoHeightEaseFunction: "easeInOutExpo",
autoSlide: false,
autoSliderDirection: 'right',
autoSlideInterval: 7000,
autoSlideControls: false,
autoSlideStartText: 'Start',
autoSlideStopText: 'Stop',
autoSlideStopWhenClicked: true,
continuous: true,
crossLinking: true, // No longer used
dynamicArrows: true,
dynamicArrowsGraphical: false,
dynamicArrowLeftText: "« left",
dynamicArrowRightText: "right »",
dynamicTabs: true,
dynamicTabsAlign: "center",
dynamicTabsPosition: "top",
externalTriggerSelector: "a.xtrig", //shouldnt need any more
firstPanelToLoad: 1,
hashLinking: false,
panelTitleSelector: "h2.title",
slideEaseDuration: 1500,
slideEaseFunction: "easeInOutExpo"
};
})( jQuery, window, document );
- 2ième JS:
- Code:
$(function(){
/* Here is the slider using default settings */
$('#slider-id').codaSlider();
/* If you want to adjust the settings, you set an option
as follows:
$('#slider-id').codaSlider({
autoSlide:true,
autoHeight:false
});
*/
});
Colle les adresses des pages des deux JS du dessus et colles les dans les scripts suivants et places ces deux script dans la page html en haut a la suite des autres scripts déjà présent.
- Code:
<script src="adresse ici"></script>
<script src="adresse ici"></script>
- La page html:
Normalement ça devrait fonctionner.
- le Mar 21 Mar 2017 - 14:34
- Rechercher dans: Archives des problèmes avec un code
- Sujet: Problème d'affichage slider Mozilla/chrome
- Réponses: 7
- Vues: 1238
Refaire une mise en page de la PA et du QEEL
Dragon594 a écrit:Maintenant il reste encore une chose que tu n'as pas encore comprise à propos du premier bloc
Si j'ai très bien compris et je vous l'ai expmliqué dans mon dernier post, toutes les variables ne peuvent être appliquées en page d'accueil, d'ailleur je vous laisse un lien avec la liste des variables que vous pouvez utiliser sur le forum mais celles que vous voulez appliquer ni figure pas sauf une ou deux.
1ère étape:
Supprimer le javascript pour le pseudo que vous avez placé dans la gestion des codes javascript, a la place le petit script suivant devra être placé en début de page d'accueil.
- Code:
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
Grace au script ci-dessus vous allez pouvoir utiler les variables qui se trouvent dans le lien que je vous ai donné.
Les variables devront être utilisées de la manière suivante:
Pseudo du membre connecté.
- Code:
<span class="USERNAME"></span>
Date de naissance du membre connecté.
- Code:
<span class="USERBIRTHDAY"></span>
Faite de même pour les variables qui vous intérresse dans la liste du lien.
Vous pouvez jeter un oeil ici pour plus de précision.
Dragon594 a écrit:Ensuite est ce que l'on pourrait n'avoir qu'un seul et unique code Javaspring pour les derniers codes Javaspring que tu m'as donné de mettre pour ce qui est de l'onglet, l'avatar et le pseudo ????
Cela afin de me faire économiser des codes Javasprings qui sont limité à 50 au max.
Bon déjà celui pour le pseudo a été supprimé, reste celui des onglets et celui pour l'avatar ce qui vous fait encore 48 places disponible, vous pensez vraiment les utiliser un jour ?
J'utilise les forums ForumActif depuis déjà pas mal d'années et je n'ai jamais vu ou entendu quelqu'un dire qu'il les avait toutes utilisées.
Dragon594 a écrit:Vient ensuite le problème pour les images du staff, pourrais-tu me dire la marche à suivre en détail afin que je puisse le faire par la suite en cas de changement dans mon équipe.
C'est très simple, dans le code je vous ai indiqué l'emplacement de chaque onglet avec les images de la manière suivante.
- Code:
<!--Image 1-->
<span class="onglet_0 onglet" id="onglet_profile1" onclick="javascript:change_onglet('profile1');" style="">
<img src="https://i58.servimg.com/u/f58/15/55/14/56/popo10.png" alt="" /></span>
<!--Image 2-->
<span class="onglet_0 onglet" id="onglet_profile2" onclick="javascript:change_onglet('profile2');" style="">
<img src="https://i58.servimg.com/u/f58/15/55/14/56/popo10.png" alt="" /></span>
etc...
Scroll du contenu 6:
Remplacer le contenu 6 du code par celui la.
- Contenu 6:
Remplacer votre css au complet par celui la.
- css:
- [hide]/******* retire le soulignement des liens *******/
a { text-decoration:none; }
a:hover { text-decoration: none!important; }
/******** avatar membre connecté ********/
.useravatar{
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
width: 35px;
height: 90px;
float:left;
}
/******** Les onglets des profils ********/
.contenu_onglet {
display:none;
background-color:#cccccc;
color:#000;
width:100px;
height:82px;
padding:5px;
font-size:10px !important;
text-align:center;
}
/* lien profil */
.contenu_onglet a { color:#435466; font-size:10px !important;}
/* petites images des profils */
.onglet {
margin: auto;;
padding: 0px;
display:inline-block;
cursor: pointer;
}
/******* Fin onglets profils ********/
/******** début page d'accueil ********/
/* titre de chaque contenu */
.titre_du_haut{
background-color: #cccccc;
width: auto;
color:#435466;
padding: 3px 0px 3px 0px;
font-size: 10px !important;
}
/* Titre du bas de chaque contenu */
.titre_du_bas{
background-color: #cccccc;
border-bottom-left-radius: 15px; /* arrondi dordure bas gauche */
border-bottom-right-radius: 15px; /* arrondi dordure bas droit */
width: auto; /* largeur auto du titre */
color:#435466;
padding: 2px;
position: absolute; bottom: 0; right: 0; left: 0; /* position du titre en bas de chaque contenu */
font-size: 10px !important;
text-decoration: none !important;
}
/* couleur lien titre du bas */
.titre_du_bas a{
color:#000000;
font-size: 10px !important;
}
/* couleur de fond et bordure des contenus */
#contenu_1, #contenu_2, #contenu_3, #contenu_4, #contenu_5, #contenu_6, #contenu_7, #contenu_8{
border:3px solid #505050;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #F3F3F3;
font-size: 10px !important;
font: 1em sans-serif, Helvetica, sans-serif !important;
}
/* Contenu au centre de chaque contenu */
#contenu_1 p, #contenu_2 p, #contenu_3 p, #contenu_4 p, #contenu_5 p, #contenu_6 p, #contenu_7 p, #contenu_8 p{
font-size: 10px !important;
}
/* taille et positionnement de chaque contenu */
#contenu_1 {
height: 150px; width: 400px;
float:left;
position: relative;
}
#contenu_2 {
height: 150px; width: 215px;
float:left; /* le contenu 2 se place a droite du 1 */
margin-left: 15px; /* marge gauche */
position: relative;
}
#contenu_3{
height: 150px; width: 215px;
float:left; /* le contenu 3 se place a droite du 2 */
margin-left: 15px;
position: relative;
}
#contenu_4{
height: 150px; width: 400px;
float:left;
margin-top: 10px;
position: relative;
}
/* Contenu avec scroll bar */
#contenu_4 p{
height: 120px; width: 385px;
margin-top: 0px;
overflow: hidden;
padding: 5px;
display:block;
font-size:10px !important;
}
/* Contenu scroll au survol */
#contenu_4 p:hover{
height: 100px; width: 380px;
padding: 5px;
overflow-x:hidden;
overflow-y:scroll;
}
#contenu_5 {
height: 150px; width: 450px;
float:left;
margin-left: 15px;
margin-top: 10px;
position: relative;
}
#contenu_6{
height: 150px; width: 400px;
float:left;
margin-top: 10px;
position: relative;
}
/* Contenu avec scroll bar */
#contenu_6 p{
height: 110px; width: 385px;
margin-top: 0px;
overflow: hidden;
padding: 5px;
display:block;
font-size:10px !important;
}
/* Contenu scroll au survol */
#contenu_6 p:hover{
height: 100px; width: 380px;
padding: 5px;
overflow-x:hidden;
overflow-y:scroll;
}
#contenu_7 {
height: 150px; width: 215px;
float:left;
margin-left: 15px;
margin-top: 15px;
position: relative;
}
#contenu_8{
height: 150px; width: 215px;
float:left;
margin-left: 15px;
margin-top: 15px;
position: relative;
}[/hgide]
- le Sam 25 Fév 2017 - 4:14
- Rechercher dans: Archives des problèmes avec un code
- Sujet: Refaire une mise en page de la PA et du QEEL
- Réponses: 25
- Vues: 2532
Page 1 sur 2 • 1, 2 
