Modify mobstyle.css

Editing the mobstyle. css file

To adapt the mobstyle. css file to the colors of your site, only the highlighted colors changes are necessary.
For other classes, a good knowledge of CSS style sheets and GuppY 5.01.03 moving display is required,

For testing, it is strongly recommended that you work on a copy of the file and keep the original intact.

Functional mobstyle. css file for all 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 */
}
}

Do not copy/paste directly from this document into GuppY 5.01, it is recommended to copy/paste directly from the css files of a skin. The modifications to be made for the colors and background colors are valid for all skins.

For the menu, you set the same colors for Login as for the other tabs

For any comments, questions or suggestions, please post on the freeGuppY forum.



Modify the mobstyle. css file by Papinou - CeCILL Free License - June 2015 - Maj September 2017