GuppY Help Center, help online, documentation and tutorials

 
Search
 
Close
GuppY 5.02

telecharger.png

logo_nuxit_guppy.png
You are here :   Welcome » Style.css changes skins
 
Preview  Print...  Print this page...
Preview  Print...  Print this section...
FAQ GuppY <= 4.6.xx

In this menu you will find all the FAQs on earlier versions of GuppY.

 ↑  
FAQ GuppY v 5.01.xx

Here you will find FAQs on Guppy version 5.01.xx.

 ↑  
FAQ system

These FAQs address issues related to hosting and the system in general.

Documentation

In this box you will find documentation and tutorials

 ↑  
Legal

Here you will find important information regarding regulations and copyright

 ↑  
rss This article is available in the standard RSS format for publication on your website :
https://ghc.freeguppy.org/data/en-articles.xml

Below you will find all changes style.css skins for Guppy 5.01
 

Improvements in the management of photo galleries, to create a directory of links, downloads, and some corrections required additions or deletions classes in the style.css file for each skin.
 

Changes:

/*  ---------  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;
}


 

Here is the first part to put in the file style.css in  /* block box lateral Article * (menu list, menu dynamic 1, menu dynamic 2) */   before /**************** info bulle */

The second party to after .errorInpuText and before / * 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;
}

The third part is to put in  /* 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;
}

These changes affect all skins, the example is taken from the skn5_guppy2015.

You need to adjust the colors, fonts, can be external or internal margins to your skin.
Of course, it is possible to customize these new classes according to your preferences.

To recap, the style.css changes with Config look for your customizations styleplus.css refer to the file that includes all customizations of skn5_guppy2015.


Warning: Only changes are mentioned, for example integrating take on files and style.css styleplus.css of skn5_guppy2015 included in the pack GuppY 5.01.02.

No copy / paste from this article, but from the style.css file skn5_guppy2015.


Creation date : 06/01/2016 @ 15:38
Category : - Docs and Tutorials
Page read 10776 times

You are here :   Welcome » Style.css changes skins
 
Preview  Print...  Print this page...
Preview  Print...  Print this section...
Visits

 1650388 visitors

 6 visitors online

Webmaster - Infos
Help

aide_help.png
On each page in admin, if you click on this icon, you get the online help page.

Site registered in the CNIL under agrément 1040387.
You have a right of access, modification, rectification and deletion
of the data according to the Computer law and Freedom (article 34) of January 6th, 1978.

 

The FreeGuppY.org hosting is provided by Nuxit.com our partner