Centre d'aide GuppY, aide en ligne, documentation et tutoriels

 
Recherche
 
Fermer
GuppY 5.02

telecharger.png

logo_nuxit_guppy.png
Vous êtes ici :   Accueil » Modifier mobstyle.css
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
rss Cet article est disponible en format standard RSS pour publication sur votre site web :
https://ghc.freeguppy.org/data/fr-articles.xml

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


Date de création : 09/06/2016 @ 21:18
Dernière modification : 26/09/2017 @ 17:49
Catégorie : Documentation - Docs et Tutoriels-Tuto config mobile
Page lue 7900 fois

Vous êtes ici :   Accueil » Modifier mobstyle.css
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Visites

 1676089 visiteurs

 5 visiteurs en ligne

Webmaster - Infos
Aide

aide_help.png
Sur chaque page en admin, si vous cliquez sur cette icône, vous arrivez sur l'aide en ligne de la page.

Site enregistré à la CNIL sous l'agrément 1040387.
Vous disposez d'un droit d'accès, de modification, de rectification
et de suppression des données selon la loi Informatique et Liberté (article 34) du 6 janvier 1978.

 

FreeGuppY.org est hébergé sur un serveur dédié Nuxit