Exemple de charte graphique

Dans Geoconcept Web, des modèles déjà préparés sont proposés pour que l’utilisateur puisse choisir facilement et rapidement l’aspect de son portail cartographique et que celui-ci soit de suite fonctionnel. Comme il est expliqué dans la « section Habillages », il est possible de créer sa propre charte graphique via copier-coller les éléments d’une feuille de style CSS. Ci-dessous, un exemple de feuille de style avec quelques indications sur le rôle de chacun des paramètres à modifier est disponible. Libre à vous de modifier les valeurs des couleurs en fonction de l’apparence que vous souhaitez donner à votre site. 

#hd{
   /* default background colour, for all layout engines that don't implement gradients */
   background: #FF6501;

  /* gecko based browsers */
  background: -moz-linear-gradient(left, #FF6501, #FFFFFF);

  /* webkit based browsers */
  background: -webkit-linear-gradient( left, #FF6501, #FFFFFF);
}

.panel {
        border: solid 1px #666666;
        margin-right:9px;
        background-color:#FFFFFF;
}

/** header panel **/
.yui3-skin-sam.gcweb.gcui-skin .yui3-panel .yui3-widget-hd {
        background:none;
        background-color:#FF6501;
        color: #FDFEFF;
}

/** footer panel **/
.yui3-skin-sam .yui3-panel .yui3-widget-ft {
        background:none!important;
        background-color:#D35401 !important;
}

/******* RESPONSIVE MENU ***/
.gcweb .menu-button {
    background-color: #D35401;
}

.gcweb .menu-button .fa {
    color: #FDFEFF;
}

.gcweb .menu-link {
    border-right-color: #D35401;
}

.gcweb .menu-link .ui.list .item:active div {
    color: #FDFEFF;
    background-color: #FF6501;
}

.gcweb .menu-link .ui.list .item:active {
    background-color: #FF6501;
}

/******* WIDGET BUTTON PUSH ***/
.gcweb-widget-image {
        background-color:#D35401;
}

.ui.button.gcweb-widget {
    background-color: #D35401;
}

.ui.button.gcweb-widget.activated {
background-color: #9B3C01;
}

/** toolbar img **/

.gcweb-library-widget-icon {
        background-color:#D35401;
}
.activated,
.ui.image.gcweb-widget-image.mobile {
        background-color:#D35401;
}

#logo{
        height: 49px;
        width: 100%;
        margin-top:10px;
        float:left;
}

.logoPortal {
        background: url(../../../Image/showImage.do?name=logo_blanc) no-repeat scroll left top transparent;
}

.loading-panel-logo {
    color: #FFFFFF;
}

#loading_portal {
    background-color: #D35401;
}

/** Layer switcher **/
.layerSwitcherA {
        background-color:#FF6501;
}

.layerSwitcherTextA {
        color:#9acae1;
}

.layerSwitcherB {
        background-color:#D35401;
}

.layerSwitcherTextB {
        color:#3399CC;
}

.copyright {
    background: #D35401;
}

/******* WIDGET REPORT LIBRARY ***/
.yui3-treeview .yui3-treeview-treelabel.selected-leaf,
.yui3-treeview .yui3-widget.yui3-treeleaf.selected-leaf {
        background: none repeat scroll 0 0 #3399CC;
    color: #FFFFFF;
}
Exemple d’un portail Geoconcept Web exploitant la feuille de style d’exemple
gcweb-reference-img/guide-reference/css-exemple-portail.png

Personnaliser la page d’accueil

Si vous souhaitez personnaliser la page d’accueil de votre portail Geoconcept Web avec votre logo, quelques étapes sont à suivre :

  • charger le logo de votre société ou votre organisation dans la section « Images »,
  • copier-coller les quelques lignes de code ci-dessous au début de votre feuille de style CSS disponible dans la section « Habillages », en remplaçant "logo_bleu" par le nom de votre image : 
.loginBackground {
     background: url("../Image/showImage.do?name=logo_bleu") no-repeat scroll center 10%;
}
  • enfin, vérifier que la feuille de style créée est bien définie comme étant « l’habillage par défaut ».

Autres astuces

Couleur de la page de chargement

Modifier la couleur de la page de chargement avant l’affichage du portail.

#loading_portal {
        background-color: #8CACC9;
}
Widgets ronds

Afin de remplacer l’affichage standard des widgets par des boutons ronds gcweb-reference-img/guide-reference/css-exemple-boutons-ronds.png

.ui.button.gcweb-widget {
        background-color: #8CACC9;
        border-radius: 25px;
        padding: 0.3em 0.4em 0.3em 0.4em;
}
Réduire la taille du bouton OK

Réduire la taille du bouton OK dans le widget requête.

.ui.button.storedQuery-btn {
    margin-left: 0.3em;
    padding-left: 0.7em;
    padding: 0.7em 0.7em 0.7em;
}
Précédent  Niveau supérieur  Suivant
  Sommaire