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

 
Recherche
 
Fermer
GuppY 5.01

telecharger.png

logo_nuxit_guppy.png
Vous êtes ici :   Accueil » Modifications style.css des skins
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
FAQ GuppY <= 4.6.xx

Dans ce menu vous trouverez toutes les FAQs concernant les versions antérieures de GuppY.

 ↑  
FAQ GuppY v5.01.xx

Ici vous trouverez les FAQs concernant la version 5.01.xx de GuppY.

 ↑  
FAQ système

Ces FAQs traitent des problèmes liés à l'hébergement et au système en général.

Documentation

Dans cette boîte vous trouverez les documentations et tutoriels

 ↑  
Mentions légales

Ici vous trouverez des précisions importantes concernant la réglementation et les copyright

 ↑  
rss Cet article est disponible en format standard RSS pour publication sur votre site web :
https://ghc.freeguppy.org/data/fr-articles.xml

Vous trouverez ci dessous toutes les modifications du style.css des skins pour GuppY 5.01
 

Les améliorations apportées à la gestion des galeries photos, à la création d'un annuaire de liens, des téléchargements, les modifications importantes de structure pour le responsive design de la 5.01 ont nécessité des ajouts de classes ou des suppressions dans le fichier style.css de chaque skin.
 

Les modifications :

En début de fichier:

/*  ---------  CSS generated for skn5_guppy2015  ----------- */

@font-face {
  font-family: "fontello";
  src: url("font/fontello.eot?70550422");
  src: url("font/fontello.eot?70550422#iefix") format("embedded-opentype"),
       url("font/fontello.woff?70550422") format("woff"),
       url("font/fontello.ttf?70550422") format("truetype"),
       url("font/fontello.svg?70550422#fontello") format("svg");
  font-weight: normal;
  font-style: normal;
}

            /************
            * Général */

#MainContent { /* main page */
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: flex;
}
#LeftBoxes { /* leftboxes area */
    margin: 0;
    padding: 0;
    width: 230px;
    min-width: 230px;
    background-color: #808080;
    border: 0;
    max-width: 100%;
    vertical-align: top;
    display: inline-block;
}
#CenterBoxes {
    margin: 0;
    width: 100%;
    vertical-align: top;
    display: inline-block;
}
#RightBoxes { /* right boxes area */
    margin: 0;
    padding: 0;
    width: 230px;
    min-width: 230px;
    background-color: #808080;
    border: 0;
    max-width: 100%;
    vertical-align: top;
    display: inline-block;
}

            ...

#MainBlog {
    text-align:center;
    width:100%;
    display: -webkit-flex;
    display: flex;
}

...

#BlogLeftBoxes { /* colonne gauche du blog */
    padding: 0;
    margin: 0;
    color: inherit;
    width: 230px;
    min-width: 230px;
    background-color: #808080;
    border: 0;
    max-width: 100%;
    vertical-align: top;
    display: inline-block;
}
#BlogCenterBoxes { /* colonne centrale du blog */
    margin: 0;
    width: 100%;
    vertical-align: top;
    display: inline-block;
}
#BlogRightBoxes { /* colonne droite du blog */
    padding: 0;
    margin: 0;
    color: inherit;
    width: 230px;
    min-width: 230px;
    background-color: #808080;
    border: 0;
    max-width: 100%;
    vertical-align: top;
    display: inline-block;
}

...

              .img  {
                  border-style: none !important;
                  max-width: 100%;
                  height:auto;
              }   

/******************************************
 * Mise en page des blocks dans le corps */
/* block lateral boxes */

.titrebox { /* Titre */
    background-color: transparent;
    padding: 4px;
    white-space: nowrap;
    font: small-caps 15px Arial, Helvetica, sans-serif;
    color: #FFF;
    text-align: left;
    cursor: pointer;
}
.tblbox {  /* Corps */
    color:inherit;
    padding: 6px 4px;
    margin: 4px;
    text-align:left;
    background: #FFF;
    border-radius: 4px;
}
/* .tblboxout : class supprimée */
/* .tblout : class supprimée */

/****************************
 * block box lateral Article
 * (menu list, menu dynamic 1, menu dynamic 2) */
.rubr { /* catégories des articles */
    font:   Verdana, "Bitstream Vera Sans", sans-serif;
    color: #404040;
    background-color: transparent;
    text-align: left;
    margin: 1px;
    padding: 4px 2px;
}
p.rubr {
    padding: 0 2px;
    margin: 1px;
    font:   Verdana, "Bitstream Vera Sans", sans-serif;
    color: inherit;
    background-color: transparent;
    text-align: left;
}
.item {
    font:   Verdana, "Bitstream Vera Sans", sans-serif;
    color: #404040;
    background-color: transparent;
    text-align: left;
    list-style: none;
    margin: 0;
    padding: 2px 0;
}
ul.item {
    margin: 0;
    padding: 0;
}
ul.item li.item { /* titres des articles */
    font:   Verdana, "Bitstream Vera Sans", sans-serif;
    color: #404040;
    background-color: transparent;
    text-align: left;
    list-style: none;
    padding: 2px 0 2px 10px;
}
.curr_item {
    font:   Verdana, "Bitstream Vera Sans", sans-serif;
    color: #FFFFFF;
    background-color: #00BEF2;
    text-align: left;
    list-style: none;
    padding: 2px 0;
}
ul.item li.curr_item a { /* titre article est affiché */
    font:   Verdana, "Bitstream Vera Sans", sans-serif;
    color: #FFFFFF;
    background-color: #00BEF2;
    text-align: left;
    list-style: none;
    padding: 2px 0 2px 10px;
}


/******************************
 * catégories des photoramas */
.phrubr {
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    color: inherit;
    text-align: left;
    margin: 2px 0px;
    padding: 2px 6px;
    border: 0px;
    cursor: pointer;
    background-color: #F0F0F0;
}
.phrubr2 {
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    color: inherit;
    text-align: left;
    margin: 2px 0px;
    padding: 2px 0px;
    border: 0px;
    cursor: pointer;
    background-color: #FFFFFF;
}
.phsubrubr {
    text-align: justify;
    padding-left: 35px;
}
.phitem2 {
    float: left;
    text-align: right;
    margin-left: 20px !important;
    margin-left: 12px;
    height: 15px;
}
.phcomment {
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    padding: 0 10px;
}
.phimgs {
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    margin: 5px;
    background-color: transparent;
    padding: 10px 5px 5px 5px;
}
.phimgs2 {
  padding-left: 4px;
}
.phimg {
    background: transparent;
}
.phcpt {
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    float: right;
    font-weight: normal;
    padding: 0px 6px;
}
.phtitlebox {
  text-align:center;
  margin-bottom:6px;
}

/*************************
 * catégories des liens */
.lititlecat {
    text-align: center;
    width: 80%;
    margin: 10px auto;
    padding: 4px 0;
    font:   Verdana, "Bitstream Vera Sans", sans-serif;
    background-color: #E2E2E2;
    border: solid #C0C0C0;
    border-width: 1px;
    border-radius: 0px;
}
.licatlink {
    width: 80%;
    margin: 5px auto;
    padding: 4px 0;
    font:   Verdana, "Bitstream Vera Sans", sans-serif;
    background-color: #E2E2E2;
    border: solid #C0C0C0;
    border-width: 1px;
    border-radius: 0px;
}
.lirubr {
    text-align: left;
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    color: inherit;
    background: transparent;
    margin: 2px 0px;
    padding: 2px 6px;
    border: 0px;
    cursor: pointer;
    background-color: #F0F0F0;
}
.lirubr2 {
    text-align: left;
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    color: inherit;
    margin: 2px 0px;
    padding: 2px 6px;
    border: 0px;
    cursor: pointer;
    background-color: #FFFFFF;
}
.lisubrubr {
    text-align: justify;
    padding-left: 35px;
}


/***********************
 * catégories des FAQ */
.fatitlecat {
    text-align: center;
    width: 80%;
    margin: 10px auto;
    padding: 4px 0;
    font:   Verdana, "Bitstream Vera Sans", sans-serif;
    background-color: #E2E2E2;
    border: solid #C0C0C0;
    border-width: 1px;
    border-radius: 0px;
}
.facatlink {
    width: 80%;
    margin: 5px auto;
    padding: 4px 0;
    font:   Verdana, "Bitstream Vera Sans", sans-serif;
    background-color: #E2E2E2;
    border: solid #C0C0C0;
    border-width: 1px;
    border-radius: 0px;
}
.farubr {
    text-align: left;
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    color: inherit;
    background: transparent;
    margin: 2px 0px;
    padding: 2px 6px;
    border: 0px;
    cursor: pointer;
    background-color: #F0F0F0;
}
.farubr2 {
    text-align: left;
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    color: inherit;
    margin: 2px 0px;
    padding: 2px 6px;
    border: 0px;
    cursor: pointer;
    background-color: #FFFFFF;
}
.fasubrubr {
    text-align: justify;
    padding-left: 35px;
}


/***********************************
 * catégories des téléchargements */
.dntitlecat {
    text-align: center;
    width: 80%;
    margin: 10px auto;
    padding: 4px 0;
    font:   Verdana, "Bitstream Vera Sans", sans-serif;
    background-color: #E2E2E2;
    border: solid #C0C0C0;
    border-width: 1px;
    border-radius: 0px;
}
.dncatdwnl {
    width: 80%;
    margin: 5px auto;
    padding: 4px 0;
    font:   Verdana, "Bitstream Vera Sans", sans-serif;
    background-color: #E2E2E2;
    border: solid #C0C0C0;
    border-width: 1px;
    border-radius: 0px;
}
.dnrubr {
    text-align: left;
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    color: inherit;
    background: transparent;
    margin: 2px 0px;
    padding: 2px 6px;
    border: 0px;
    cursor: pointer;    
    background-color: #F0F0F0;
}
.dnrubr2 {
    text-align: left;
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    color: inherit;
    margin: 2px 0px;
    padding: 2px 6px;
    border: 0px;
    cursor: pointer;    
    background-color: #FFFFFF;
}
.dnsubrubr {
    text-align: justify;
    padding-left: 35px;
}

...

/*************************************
 * block box central forum - tables */
.row {
    width: 100%;
    border: none;
}
.col {
    width: 100%;
    max-width: 100%;
    vertical-align: top;
    display: inline-block;
}
.forum, .forum a {
    background-color: #00BEF2;
    padding: 5px 5px;
    font: bold 14px Verdana, "Bitstream Vera Sans", sans-serif;
    color: #FFFFFF;
    text-align: center;
}
.forum2, .forum2 td {
    background-color: #00BEF2;
    padding: 5px 5px;
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    color: #FFFFFF;
    text-align: left;
}
.tbldiv {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    max-width: 100%;
}
.thtbldiv {
    display: table-cell;
    vertical-align: middle;
    padding: 0px 4px;
}
.trtbldiv {
    display: table-row;
    text-align: center;
}
.trhtblfr {
    display: table-row;
    height: 34px;
    background-color: #00BEF2;
    padding: 5px 5px;
    font:  Verdana, "Bitstream Vera Sans", sans-serif ;
    color: #FFFFFF;
    text-align: left;
}
.tdtblfr {
    display: table-cell;
    vertical-align: top;
    padding: 4px;
    text-align: left;
}
.bottomfrt {
    padding: 6px 4px 0px;
    margin: 8px auto;
    max-width: 100%;
    text-align: left;
    vertical-align: middle;
}
.frtrules {
    margin: 5px 40px;
    height: 300px;
    overflow: auto;
}
.quest {
    background-color: #E5E5E5;
    padding: 5px 5px 5px 5px;
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    color: #404040;
    text-align: left;
}
.rep {
    background-color: #FFFFFF;
    padding: 10px 5px 5px 5px;
    font:  14px Verdana, "Bitstream Vera Sans", sans-serif;
    color: #404040;
    text-align: left;
}
.bord {
    border: 0;
    padding: 1px;
}
.bord2 {
    border: 2px double #FFFFFF;
}


Voici la première partie à mettre dans le fichier style.css à partir de  /* block box lateral Article * (menu list, menu dynamic 1, menu dynamic 2) */ avant  /**************** info bulle */
 

La seconde partie à mettre après .errorInpuText et avant / * Menus déroulants */

.visits {
    z-index: 15;
    position: absolute;
    margin: -64px 0 0 24px;
    padding: 0 4px;
    width: 180px;
    display: none;
    color: #000;
    background: #f05e03;
    border: 1px solid #000;
}
.copyright, a.copyright {
    color: #fff;
}
 

La troisième partie est à mettre dans /* Menus déroulants */

ul.dropdown li:hover > ul {
    transition-property : visibility;
    transition-delay : 300ms;
    visibility: visible;
}

.menu-vertical {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;    
}
.menu-vertical ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.menu-vertical li {
    margin: 0 -8px 2px -8px;
    padding-right: 8px;
    border: solid #C0C0C0;
    border-width: 1px;
    border-radius: 0px 0px 0px 0px;
    background: #808080;
    opacity: 0.99;
}
.menu-vertical li li {
    max-height: 0;
    background: #DDDDDD;
    overflow: hidden;
    transition: all .5s;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    margin: 0 -8px 0 0;
}
.menu-vertical li a {
    display: block;
    text-decoration: none;
    padding: 0.6em 0;
    font:  inherit Verdana, "Bitstream Vera Sans", sans-serif;
    color: #FFFFFF;
}
.menu-vertical li li a {
    color: #404040;
}
.menu-vertical li:hover, .menu-vertical li li:hover {
    background: #F2F2F2;
}
.menu-vertical ul li:last-child {
    border: 0;
}
.menu-vertical li:hover li {
    max-height: 15em;
}

Ces modifications concernent toutes les skins, l'exemple est pris dans la skn5_guppy2015.

Vous devrez adapter les couleurs, les polices, peut être les marges externes ou internes à votre skin.
Bien sûr, il est possible de personnaliser ces nouvelles classes selon vos préférences.

Pour rappel, le fichier style.css se modifie avec Config look, pour vos personnalisations reportez vous au fichier styleplus.css qui comprend toutes les personnalisations de la skn5_guppy2015.


Attention :
Seules les modifications sont mentionnées, pour les intégrer prenez exemple sur les fichiers style.css et styleplus.css de la skn5_guppy2015 inclus dans le pack GuppY 5.01.02 .

Pas de copier/coller à partir de cet article, mais à partir du fichier style.css de la skn5_guppy2015.


 


Date de création : 06/01/2016 @ 15:38
Catégorie : Documentation - Docs et Tutoriels
Page lue 9126 fois

Vous êtes ici :   Accueil » Modifications style.css des skins
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Visites

 1072308 visiteurs

 158 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