Modifier mobstyle.css

Modifier le fichier mobstyle.css

Pour l' adaptation du fichier mobstyle.css aux couleurs de votre site, seules les modifications " à adapter " sont indispensables.
Pour les autres classes, une bonne connaissance des feuilles de style CSS et de l'affichage mobile de GuppY 5 est nécessaire.

Pour faire des essais, il est fortement recommandé de travailler sur une copie du fichier et de conserver l'original intact.


 

Fichier mobstyle.css fonctionnel pour toutes les skins,

html { 
 font-size:62.5%; /* Taille équivalente à 10px - Ne pas modifier */
}
body {
 font-size:1.6rem; /* Taille équivalente à 16px */
 background-image:none; /* pas d’image de fond  - à adapter */
 background-color:#404040; /* couleur fond de site - à adapter */
}
.FB502 { /* boite libre mini-bandeau */
 background-color:#404040; /*couleur fond de boite - à adapter */
 margin:-1em auto; /* marges extérieures */
}
	  
@media screen and (max-width: 760px), screen and (max-device-width: 760px) {

#page { /*configuration page */
 width:100%; /* largeur */
 margin:0 auto; /* marges extérieures */
 padding:0; /* marges intérieures */
}
#page .pagerow {
 width:100%;
}
#header { /* hauteur header */
 height:0;
}
#MainContent { /* configuration partie centrale */
 margin:0 auto; /* marges extérieures */
 background-color:#FFF; /* couleur de fond - à adapter */
 -webkit-flex-direction: column;
 flex-direction: column; /* affichage flex box */
}
#MainBlog { /* partie centrale blog */
 margin:0 auto; /* marges extérieures */
 background-color:#FFF; /* couleur de fond - à adapter */
 -webkit-flex-direction: column;
 flex-direction: column; /* affichage flex box */
}
#CenterBoxes { /* boites centrales */
 margin:0 auto; /* marges extérieures */	
}
#LeftBoxes, #RightBoxes { /* boites latérales */
 width:100%; /* largeur */
 max-width:100%; /* largeur maxi */
 margin:0 auto; /* marges extérieures */
 padding:0; /* marges intérieures */
}
#BlogLeftBoxes, #BlogRightBoxes { /* boites latérales blog */
 width:100%; /* largeur */
 max-width:100%; /* largeur maxi */
 margin:0 auto; /* marges extérieures */
 padding:0; /* marges intérieures */
}
div.logo { /* position logo */
 margin: 0; /* marges extérieures */
 padding:.5em 5em 0; /* marges intérieures – 5em à modifier suivant taille logo */
}
div.menuIcons ul { /*menu */
 width:100%; /* largeur */
 background-image:none; /* pas d image de fond */
 box-shadow:none; /* pas d’ombres */
 height:auto; /* hauteur auto */
 padding:0; /* marges intérieures */
}
div.menuIcons ul li { /*menu */
 float:none; /* non flottant */
 display:inline-block; /* sur une ligne */
 margin:0 auto; /* marges extérieures */
}
div.menuIcons ul li.menu_admin, div.menuIcons ul li.menu_stats {
 display: none; /* ne pas afficher */
}
div.pop.menuIcons_flag  { /* position drapeau langue */
 position:absolute;
 top:2em; /* par rapport au top */
 left:88%; /* à droite */
}
div.menuIcons ul li.menu_connect { /* position Connexion */
 position:inherit; /* par héritage */
 float:none; /* non flottant */
}

div.menuIcons ul li.menu_connect a span { /* onglet Connexion */
 background-color:#F4790C;  /* couleur de fond - à adapter */
 color:#FFF;  /* couleur du texte - à adapter */
 margin:.5em; /* marges extérieures */
 padding:.6em; /* marges intérieures */
 width:7em; /* largeur */
 font-size:1em; /* Taille */
 font-weight:bold; /* en gras */
 letter-spacing:0; /* espacement lettres normal */
 border: .1em solid #FFFFFF; /* bordure */
 border-radius: 6px; /* coins arrondis */
}

div.menuIcons ul li.menu_connect a span.current { /* onglet Connexion actif */
 background-color:#60C4EA;  /* couleur de fond - à adapter */
 color:#FFF;  /* couleur du texte - à adapter */
 margin:.5em; /* marges extérieures */
 padding:.6em; /* marges intérieures */
 width:7em; /* largeur */
 letter-spacing:0; /* espacement lettres normal */
 border: .1em solid #FFFFFF; /* bordure */
 border-radius:6px; /* coins arrondis */
}

div.menuIcons ul li.menu_connect a:hover span { /* onglet Connexion survolé */
 background-color:#808080;  /* couleur de fond - à adapter */
 color:#FFC;  /* couleur du texte - à adapter */
 margin:.5em; /* marges extérieures */
 padding:.6em; /* marges intérieures */
 width:7em; /* largeur */
 letter-spacing:0; /* espacement lettres normal */
 border: .1em solid #FFFFFF; /* bordure */
 border-radius:6px; /* coins arrondis */
}

div.menuIcons ul li a span {  /* onglets menu */
 background-color:#F4790C;  /* couleur de fond - à adapter */
 color:#FFF;  /* couleur du texte - à adapter */
 margin:.5em; /* marges extérieures */
 padding:.6em; /* marges intérieures */
 width:7em; /* largeur */
 font-size:1em; /* Taille */
 font-weight:bold; /* en gras */
 letter-spacing:0; /* espacement lettres normal */
 border: .1em solid #FFFFFF; /* bordure */
 border-radius:6px; /* coins arrondis */
}

div.menuIcons ul li a span.current { /* onglets menu  actif */
 background-color:#60C4EA;  /* couleur de fond - à adapter */
 color:#FFF;  /* couleur du texte - à adapter */
 margin:.5em; /* marges extérieures */
 padding:.6em; /* marges intérieures */
 width:7em; /* largeur */
 letter-spacing:0; /* espacement lettres normal */
 border: .1em solid #FFFFFF; /* bordure */
 border-radius:6px; /* coins arrondis */
}

div.menuIcons ul li a:hover span {  /* onglets menu survolé */
 background-color:#808080;  /* couleur de fond - à adapter */
 color:#FFC;  /* couleur du texte - à adapter */
 margin:.5em; /* marges extérieures */
 padding:.6em; /* marges intérieures */
 width:7em; /* largeur */
 letter-spacing:0; /* espacement lettres normal */
 border: .1em solid #FFFFFF; /* bordure */
 border-radius:6px; /* coins arrondis */
}
.titrebox  { /* titre boite latérale */
 white-space: normal; /* non affichage retours… */
 word-wrap:break-word; /* césure mot */
 margin:1em auto; /* marges extérieures */
 padding:.7em .5em; /* marges intérieures */
 letter-spacing: 0; /* espacement lettres normal */
 border-radius:0; /* coins arrondis */
}
.tblbox,.tblboxover, .box, .box a { /* corps boites latérales */
 font-size: 1em; /* Taille */
 padding:.5em .5em 1em; /* marges intérieures */
 }	  
.titre, .titre a { /* titre boite centrale */
 white-space: normal; /* non affichage retours… */
 word-wrap:break-word; /* césure mot */
 margin:1em auto; /* marges extérieures */
 padding:.7em .5em; /* marges intérieures */
 letter-spacing: 0; /* espacement lettres normal */
 border-radius:0; /* coins arrondis */
}
.tbl, .tblover { /* corps boites centrrales */
 font-size: 1em; /* Taille */
 margin:0 auto; /* marges extérieures */
 padding:0 .2em; /* marges intérieures */
}
.TrCALBG0, .CALBG0 {
 display: none; /* ne pas afficher */
}
.forum, .forum a, .forum2, .forum2 td, tr.forum2  { /* forum */
 font-size: 1em; /* Taille */
}
.quest { /* classe quest */
 font-size: 1em; /* Taille */
 background-color:#F2F2F2;  /* couleur de fond - à adapter */
}
.rep { /* classe rep */
 font-size: 1em; /* Taille */
 background-color:#FFF;  /* couleur de fond - à adapter */
}
.bord { /* classe bord */
 border:none; /*pas de bordure */	
}
ul.item li.item, .curr_item, ul.item li.curr_item a, .item, .item a  { /* item */
 font-size: 1em; /* Taille */
 padding:.5em 0; /* marges intérieures */
}
.rubr, p.rubr, .lirubr, .lirubr2, .phrubr, .phrubr2, .farubr, .farubr2, .dnrubr, .dnrubr2  { /* rubriques */
 margin:1em 0; /* marges extérieures */
 font-size: 1em; /* Taille */
}
#gytabs li { /* onglets */
 width: 95%; /* largeur */ 
 line-height:1.5em; /* hauteur ligne */
 margin:.5em 0; /* marges extérieures */
}
.ariane { /* fil ariane */
 background-color:#FFF;  /* couleur de fond - à adapter */
 padding:.5em 0 .5em .2em; /* marges intérieures */
}
#BottomBoxes { /* boites en bas */
 padding:0;	 /* marges intérieures */
 box-shadow:none; /* ne pas afficher */
}
#BottomBoxes .titrebox, #BottomBoxes .titre { /* titres boites en bas */
 margin:1em 0; /* marges extérieures */
 padding:1em .5em; /* marges intérieures */
 border:none; /*pas de bordure */
}
#BottomBoxes .tblbox, #BottomBoxes .tbl { /* corps boites en bas */
 margin:.5em 0; /* marges extérieures */
 padding:.5em; /* marges intérieures */
 border:none; /*pas de bordure */
 border-radius:0;	 /*pas de coins arrondis */
}
#footer, .copyright, a.copyright { /* pied de page */
 padding-top:1em; /* marges intérieures */
 padding-bottom:.5em; /* marges intérieures */
 color:#FFF;  /* couleur du texte */
 background-color:#404040;  /* couleur de fond - à adapter */
}
.timer { /* temps de chargement */
 display:none; /* ne pas afficher */
}
.copyright { /* copyright */
 font-size:.8em; /* Taille */
}
}

Ne pas faire de copier/coller directement de ce document dans GuppY 5, il est recommandé de le faire à partir des fichiers css d'une skin. Les modifications à faire pour les couleurs et couleurs de fond sont valables pour toutes les skins.

Pour le menu, vous mettez pour Connexion, les mêmes couleurs que pour les autres onglets

Pour toute remarque, question ou suggestion, merci de poster sur le forum de freeGuppY.



Modifier le fichier mobstyle.css par Papinou – Licence Libre CeCILL – Juin 2015 – maj Septembre 2017