Aller au contenu. | Aller à la navigation

Outils personnels

Navigation
Vous êtes ici : Accueil / Aide pour les responsables / La CSS dans Plone / Exemple de la css ajoutée dans le site Saussure via ploneCustom.css

Exemple de la css ajoutée dans le site Saussure via ploneCustom.css



/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */
/* Palette de bleu */
/*------------------------------------------------------------------- */
/*-------------------------------------------------------------------
#00539B
#1661A3    
#2B6FAA
#417DB2
#578BB9
#6C99C1
#82A8C8
#97B6D0
#ADC4D7
#C3D2DF
#D8E0E6
#EEEEEE    
------------------------------------------------------------------- */
/*------------------------------------------------------------------- */
/* Palette de bleu */
/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */






/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */
/* CSS POUR LA HOMEPAGE */
/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */

/* on cache le bandeau de navigation pour la homepage :
on sait appliquer un style à un dossier via .section-mondossier via les .section qui sont fournis par plone;
pour des pages, cela ne semble possible que pour la front-page (?) */

/* SI ON VEUT ENLEVER L'AFFICHAGE NAVIG +... EN HAUT SEULEMENT POUR LA HOMEPAGE : */
/*.section-front-page #portal-globalnav,*/
.section-front-page .documentFirstHeading,
.section-front-page #parent-fieldname-title,
.section-front-page #content div.documentByLine
{
display:none;
}

/* taille des titres de portlets pour la homepage */
.section-front-page .portletHeader
{
color: #00539B;
font-size: 180%;
margin-bottom: 0;
margin-top: 0;
}

.section-front-page #content p,.section-front-page #content table,.section-front-page #content dl,.section-front-page dl.portlet p,.section-front-page dl.portlet {
    margin-bottom: 0;
}

.section-front-page #edit-bar
{
background-color: transparent;
}


.section-front-page .managePortletsAboveLink,.section-front-page .managePortletsBelowLink,
.section-front-page .manageFooterPortletsLink,.section-front-page .manageInHeaderPortletsLink,.section-front-page .managePortletsBelowTitleLink
{
display:block;
}

.section-front-page dl.portlet, .myspace {
    font-size: 80%;
    padding: 0px 5px 0px 5px ;
/*    border: 1px solid #D1D1D1;
height: 250px;*/
border-radius: 5px 5px 5px 5px;
}


/* STYLES POUR LES VITRINES */
.vitrine_title
{
color: #00539B;
font-size: 160%;
margin-bottom: 10px;
}
.vitrine_text
{
color: #00539B;
font-size: 120%;
margin-bottom: 1x;
float:left;
display: inline-block;
vertical-align: bottom;
}

.vitrine_image
{
margin-top:10px;
margin-bottom;
}

/* STYLES POUR LES BEST-OF */
.section-front-page .bestof
{
margin-top: -25px;
}
.bestof_title
{
color: #00539B;
font-size: 120%;
margin-bottom: 10px;
}
.bestof_txt
{
color: #00539B;
font-size: 100%;
}

.bestof_image
{
/*width: 15%;*/
}


/* STYLES POUR LES TABS */
.section-front-page .tabs
{
margin-top: -50px !important;
margin-right: -10px !important;
float: right;
}

.panes > div
{
background-color: transparent;
margin-left: -30px;
}
.panes
{
margin-top: -30px;
}
/*
.tabs a.current {
    background-color: #cee1f0;
    border-bottom: 1px solid #cee1f0!important;
}
.tabs a {
    background-color: transparent;
    border-bottom: 1px solid #cee1f0!important;
  }
*/

/* STYLES POUR LES ACCORDION */

/* MODIF JMD pour les accordions de homepage : voir dans /custom/collective.js.jqueryui.custom.min.css ;
je n'arrive pas à faire les modifs via ploneCustom ...----------------------------------*/

.ui-accordion .ui-accordion-content {
  height: 180px;
}

.ui-helper-reset
{
font-size: 100%;
line-height: 1.5em;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
{
font-size: 120%;
}

.ui-widget-content {
    border: 0 solid #CCCCCC;
}


/*lien pour "CONNEXION" en p1*/
.deconnexion
{
background-color: #205c90;
color: #ffffff;
padding : 5px 5px 5px 5px;
margin-bottom: 20px;
margin-top: 10px;
 font-size: 140%;
text-align: center;
vertical-align: bottom;
border-radius: 5px 5px 5px 5px;
}

/*
.deconnexion, .deconnexion a
{
width=50%;
align: center;
}
*/

/*-------positionner image rss dans les portlets news et events----------------------*/
.rssimg
{
float:right;
margin-top:20px;
margin-right:20px;
}

/*-------image solgema pour portlet connecté----------------------*/
.agenda_im_solgema
{
width:40px;
height:30px;
}

label.SubjectcolorIndex-0, label.SubjectcolorIndex-1,label.SubjectcolorIndex-2,label.SubjectcolorIndex-3,
label.SubjectcolorIndex-4,label.SubjectcolorIndex-5,label.SubjectcolorIndex-6 {
    padding: 5px 5px 5px 5px;
   background-color: #205c90  ;
border-radius: 5px 5px 5px 5px;
/* color: black;*/
}

section-site-administration #content fieldset.formPanel, #content-core fieldset.formPanel
{
    background-color: pink;
}

/*-------cacher le lien vers export ical dans vue solgema (tant que cela ne marche pas directement ...-> ok ----------------------
#sfc-ical-export
{
display:none;
}
*/

/*-----------------------------*/
/*DIVERS */
/*-----------------------------*/

/*gestion des arrondis de blocs*/
.connexion, #slider, .tabs a
border-radius: 5px 5px 5px 5px;
}

/*-----------------------------*/
/*FIN DE DIVERS */
/*-----------------------------*/


/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */
/* FIN DE CSS POUR LA HOMEPAGE */
/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */



/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */
/* GESTION DE LA PAGE ECRAN */
/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */

/* SI ON VEUT ENLEVER L'AFFICHAGE NAVIG +...  / enlever le .section-ecran #content-core pour voir le partage ! */
.section-ecran #portal-globalnav,
.section-ecran .documentFirstHeading,
.section-ecran #parent-fieldname-title,
.section-ecran #content div.documentByLine,
.section-ecran #portal-breadcrumbs,
.section-ecran #portlets-footer,
.section-ecran #portal-top,
.section-ecran #portal-siteactions,
.section-ecran #content-core,
.section-ecran .documentActions,
.section-ecran .summary,
.section-ecran .documentByLine
{
display:none;
}

.section-ecran #edit-bar
{
background-color: transparent;
}

.section-ecran #portlets-above
{
margin-top:20px;
}

/* taille des titres de portlets */
.section-ecran .portletHeader
{
color: #00539B;
font-size: 180%;
margin-bottom: 0;
margin-top: 0;
}


.section-ecran dl.portlet,.section-ecran .myspace {
    font-size: 150%;
    padding: 0px 5px 0px 5px ;
    border: 1px solid #D1D1D1;
height: 380px;
border-radius: 5px 5px 5px 5px;
}

.section-ecran dl.portlet dd.portletFooter
{
display:none;
}


.section-ecran .slideshow_panes > div {
    font-size: 80%;;
}


/* dupliquer pour ecran2 pour les tests... */
.section-ecran2 #portal-globalnav,
.section-ecran2 .documentFirstHeading,
.section-ecran2 #parent-fieldname-title,
.section-ecran2 #content div.documentByLine,
.section-ecran2 #portal-breadcrumbs,
.section-ecran2 #portlets-footer,
.section-ecran2 #portal-top,
.section-ecran2 #portal-siteactions,
.section-ecran2 #content-coreee,
.section-ecran2 .documentActions,
.section-ecran2 .summary,
.section-ecran2 .documentByLine
{
display:none;
}

.section-ecran2 #edit-bar
{
background-color: transparent;
}

.section-ecran2 #portlets-above
{
margin-top:20px;
}

/* taille des titres de portlets */
.section-ecran2 .portletHeader
{
color: #00539B;
font-size: 180%;
margin-bottom: 0;
margin-top: 0;
}


.section-ecran2 dl.portlet,.section-ecran2 .myspace {
    font-size: 150%;
    padding: 0px 5px 0px 5px ;
    border: 1px solid #D1D1D1;
height: 380px;
border-radius: 5px 5px 5px 5px;
}

.section-ecran2 dl.portlet dd.portletFooter
{
display:none;
}


.section-ecran2 .slideshow_panes > div {
    font-size: 80%;;
}






/* STYLES POUR LES VITRINES */
.vitrine_title
{
color: #00539B;
font-size: 160%;
margin-bottom: 10px;
}

.vitrine_text
{
color: #00539B;
font-size: 120%;
margin-bottom: 1x;
float:left;
display: inline-block;
vertical-align: bottom;
}



.section-ecran #content p,.section-ecran #content table,.section-ecran #content dl,.section-ecran dl.portlet p,.section-ecran dl.portlet {
    margin-bottom: 0;
}

.section-ecran p.vitrine_image img
{
margin-top:10px;
margin-bottom;
width: 120px;
height: 100px;

}

/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */
/* FIN DE GESTION DE LA PAGE ECRAN */
/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */







/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */
/* CSS POUR TOUT LE SITE */
/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */



/*------------------------------------------------------------------- */
/* CSS POUR LE BANDEAU ECOLE FACON 2 LIGNES */
/*------------------------------------------------------------------- */


.bkgdbanner { background: url("http://wwwedu.ge.ch/sem/code/bkgdbanneredu.gif-ok") }

.eepMenuZone {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
/*border-top: 4px solid #ddd; */
 border-top: 4px;
font-family: Arial, Helvetica, sans-serif;
}

.eepmenu {margin-right: 5px; margin-left: 5px;}
a.eepmenu:link {text-decoration: none; color: #666;}
a.eepmenu:hover {text-decoration: none; color: #00539b; background-color: #eee;}
a.eepmenu:visited {text-decoration: none; color: #666;}
/*a.eepmenu:hover {text-decoration: none; color: #666; background-color: #eee; border-top: 4px solid #ccc;}*/
.eepmenu_inv {margin-right: 5px; margin-left: 5px;}
a.eepmenu_inv:link {text-decoration: none; color: #ffffff;}
a.eepmenu_inv:link {text-decoration: none; color: #00539b;}
a.eepmenu_inv:hover {text-decoration: none; color: #00539b; background-color: #eee;}
a.eepmenu_inv:visited {text-decoration: none; color: #ffffff;}
a.eepmenu_inv:visited {text-decoration: none; color: #00539b;}
a.eepmenu_inv:hover {text-decoration: none; color: #00539b; background-color: #eee;}

.semMenuZone {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
border-bottom: 0px solid #ccc;
padding: 1px;
}

.semmenu {margin-right: 10px; margin-left: 10px;}
a.semmenu:link {text-decoration: none; color: #666;}
a.semmenu:visited {text-decoration: none; color: #666;}
a.semmenu:hover {text-decoration: none; color: #000; border-bottom: 2px solid #333;}

.bold {
font-weight: bold;
}

/*-------pour ne pas imprimer le contenu du bandeau ------------------------- */
@media print{
    .noprint, #eeel-container{
         display: none;  
    }
}

/*------------------------------------------------------------------- */
/* FIN CSS POUR LE BANDEAU ECOLE */
/*------------------------------------------------------------------- */





/*------------------------------------------------------------------- */
/* TAILLE ET FOND DE LA PAGE */
/*------------------------------------------------------------------- */

/*test pour essayer d'avoir une couleur de fond hors site
#visual-portal-wrapper-container
{
background-color: #0f3661;
float:left;
}

#visual-portal-wrapper,#body
{
background-color: #ffffff;important!
}
*/

/* taille du contenu  sur la page totale
#visual-portal-wrapper
{
width: 90%;
margin-left:auto;
margin-right:auto;
background-color:#1D4D6B;
}



#portal-top
{
margin-top: 10px;
}

#portal-top, #portal-columns
{
border-left: 2px solid #205C90;
border-right: 2px solid #205c90;
}

#portal-top
{
border-top: 2px solid #205C90;
}
*/



/* gestion du fond
body
{
background-image:url("image-de-fond.png")!important;
background-repeat:no-repeat!important;
background-position: top center;
background-color: #0f3661;
}
 */
/* REMETTRE UN FOND BLANC SANS IMAGE LA OU C'EST UTILE ! A COMPLETER SI NECESSAIRE.
#region-content, .mceContentBody, .plonepopup, .plonepopup div, .plonepopup span, .plonepopup a, .mceResizabl,e .mceResize, .mceResizeW
{
background-image:url("image-de-fond.pngno")!important;
background-color: #ffffff;
}

#portal-columns
{
background-color: #ffffff;
}
#portal-top
{
background-color: transparent;
}
*/

/* REDUIRE LA MARGE SOUS LE LOGO
#portal-logo img
{
margin-bottom:-40px;
}
*/

/* marge au dessus du site
#portal-top
{
margin-top:10px;
}
*/

/* -------------- bandeau de navigation-------------- */
#portal-globalnav {

background-color:transparent;
font-size: 90%;
/*padding-bottom: 10px;*/
border-bottom: 2px solid #205c90;

content: " ";
/*   font-family: "icomoon"; */
    font-family: "arial";


    font-size: 1em;
    line-height: 1em;
    white-space: nowrap;



}

#portal-globalnav li a {
    padding-bottom: 0.9em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.3em;

/*background-color:#cee1f0;*/
background-color:transparent;


 
}

#portal-globalnav .submenu {


   background: none repeat scroll 0 0 #FCFCFC;
    border: 1px solid #D1D1D1;
    border-radius: 0 3px 3px;
    box-shadow: 0.5em 0.5em 0.5em -0.5em #5B5A54;
    left: 0;
    list-style: none outside none;
    margin: 0 80px;
    padding: 1em 1em 0;
     top: 2em;

    z-index: 3;
 
}

#portal-globalnav .submenu li a{
border-bottom: 1px solid #cee1f0;
}

#portal-globalnav .selected a, #portal-globalnav a:hover {
    background: none repeat scroll 0 0 #00539b;
    color: White;
}
#portal-globalnav .selected a, #portal-globalnav a:hover {
    background: none repeat scroll 0 0 #00539b;
    color: White;
}
ul.submenu a.state-published:hover, .selected ul.submenu .state-published {
    background: none repeat scroll 0 0 transparent !important;   
    color: #fff !important;
    color: #205c90 !important;
}
ul.submenu a.state-published:hover {
    background: none repeat scroll 0 0 #205c90 !important;   
    color: #fff !important;
}

/* -------------- arrondir les coins -------------- */
#portal-top
{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}


#portal-globalnav li a
{
border-radius: 5px 5px 0px 0px;
}

/* en réserve dans le cas où on n'utilise pas les soulignements de titres de portlets
.portletHeader
{
border-radius: 5px 5px 5px 5px;

}
*/


/* ne pas souligner les liens*/
#content a:link, dl.portlet a:link
{
    border-bottom-style: none;
}

/* ne pas afficher le "Plus..." normal
.section-ecran dd.portletFooter
{
    display: none;
}
*/

/* -------------- on cache la gestion des portlets via CWP pour éviter la confusion et les usages non souhaites ailleurs, puis on la remet seulement pour la homepage  -------------- */
.managePortletsAboveLink, .managePortletsBelowLink, .manageFooterPortletsLink, .manageInHeaderPortletsLink, .managePortletsBelowTitleLink
{
display:none;
}




/* -------------- remonter un peu la recherche pour qu'elle soit dans la bonne couleur -------------- */
#portal-searchbox
{
margin-top: 15px;
}
#portal-searchbox label
{
color: #ffffff;
}

/* -------------- cacher cet élément qui sinon tourne dans le vide en bas de page -------------- */
.kss-spinner
{
display:none;
}

/* -------------- bas de page -------------- */

#portlets-footer
{
background-color: #cee1f0;
/*margin-top:20px;*/
padding:20px 0px 20px 00px;

font-size: 80%;
font-family: "icomoon";
/*
white-space: nowrap;*/

/*
border-left: 2px solid #205C90;
border-right: 2px solid #205c90;
border-bottom: 2px solid #205c90;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
*/

}
 


#portlets-footer a
{
color: #00539b;
}



/* -------------- bas de page (liens plan de site, contact, ...) -------------- */
#portal-siteactions, #portal-siteactions a
{
/*color: #ffffff;*/
padding-bottom: 0em;
padding-top: 1em;
}


/*------------------------------------------------------------*/



/*css pour les 4 colonnes des 4 entrées (prés, vie, adm, ped)*/

div#boite
{margin    : 15px auto 0 auto;
padding    : 0 5%;
background-color: &transparent;
}

div#col1, div#col2
{
background-color: #eeeeee;
width: 46%;
padding    : 5px 5px 5px 5px;
height: 200px;
border-radius: 10px 10px 10px 10px;
}

div#col1
{
float: left;
}

div#col2
{
float: right;
}

.4titres a
{
font-size: 180%;
}



/* PORTLETS */

/* ENLEVER L'EFFET ARRONDI AU DESSUS DU CALENDRIER (MOCHE!) */

.portletCalendar
{
border-bottom-left-radius: 0em;
border-bottom-right-radius: 0em;
}

.acces_calendrier-elargi
{
font-size: 160%;
text-align: center;
margin-top:20px;
}

/* NE PAS AFFICHER LA DATE POUR LES RSS EXTERNES + LES RESSERER */
dl .portlet portletfeedmixer
{
padding-top: 50em;
}

.portletfeedmixer .portletItemDetails
{
display: none;
}


/* -------------- css pour modifier les footer de portlets "Plus de ..."  -------------- */

dl.portlet dd.portletFooter, dl.portlet dd.portletFooter a, dl.portlet dd.portletFooter a:link
{
margin-top: 0.0em;

margin-right: 0pt;

margin-bottom: 0.75em;

margin-left: 0pt;

line-height: 1.9em;
font-size: 100%;
font-weight: bold;

color: #666666;
text-align : left;
border-bottom-width: 0em;
}



dl.portlet dt, div.portletAssignments div.portletHeader

{


padding-top: 0.42em;

padding-right: 1em;

padding-bottom: 0.3em;

padding-left: 0em;

background-color: transparent;

background-image: none;

background-repeat: repeat;

background-attachment: scroll;

background-position: 0% 0%;

background-clip: border-box;

background-origin: padding-box;

background-size: auto auto;

line-height: normal;

font-weight: bold;

background-color: transparent;

margin-top: 20px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

color: #00539b;

text-transform: none;

}


/* -------------- couleur des titres de portlet  --------------
div.portletHeader, div.portletHeader a, dl.portlet dt, div.portletAssignments div.portletHeader, div.portletAssignments div.portletHeader a
{
    background: none repeat scroll 0 0 #007DC3;
    color: #FFFFFF;
    font-size: 120%;
    font-weight: bold;
    line-height: normal;
    margin: 20px 0 0;
    padding: 0.42em 1em 0.3em 0;
    text-transform: none;
}
*/

dl.portlet dt a:link, dl.portlet dt a:visited, dl.portlet dt a:hover
{
color: #00539b;
}

/* -------------- soulignement sous le titre de portlet  --------------
.portlet dt
{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00539b;

}
*/

/* -------------- gestion de l'affichage du "imprimer" sous les documents  -------------- */
.documentActions
{
/*float:right;*/
width: 10%;
background-color: #EEEEEE;
padding-right: 5px;
}

ul.documentActions
{
list-style-type: none;
}






dl.portlet dd.portletItem, dl.portlet dd.portletFooter-calendar

{
font-size: 120%;
padding-top: 15px;

padding-right: 1em;

padding-bottom: 0px;

padding-left: 1em;

}


/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */
/* CSS POUR SMARTPHONES/TABLETTES - BASE VIA PRODUIT CSS3SKIN DANS SON DOSSIER DANS PORTAL_SKIN*/
/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */

/* ENLEVER L'AFFICHAGE DU SLIDER DE P1 SI L'ECRAN EST TROP PETIT */
@media screen and (max-width: 767px)
{

/*
#slider-container
{
    display:none;
}
*/

/* REDUIRE L'ESPACE ENTRE BOUTONS DE NAVIGATION POUR P1 SI ECRANT PETIT */
#portal-globalnav li {
    border-radius: 1px 1px 1px 1px;
min-width: 0;

    padding: 1px 1px 1px 1px;
}


.bloc_p1_vitrine, .bloc_p1_bestof
{
float:left;
width:100%;
}

/* CACHER LE TEXTE QUI ACCOMPAGNE LES LIENS PEDAGOS */
.bestoftexte-cacher, .vitrinetexte, .vitrineimage
{
display: none;
}

.contenu_vitrine, #slider-container,#slider, #slider li, #easySlider-goToButtons
{
    height: 100px;
}


#easySlider-goToButtonS
{
    top: -260px;
}




/* ON REMET à 100% APRES AVOIR REDUIT POUR LA P1 "NORMALE" -> A CHANGER EN METTANT UN STYLE AD-HOC POUR LA P1 ... */
.portletNews_p1
{
width:100%;
}

.portletEvents_p1
{
width:100%;
float:left;
padding-left: 0px;
}


/* ENLEVER L'AFFICHAGE DU COLOPHON SI L'ECRAN EST TROP PETIT */
#portal-colophon, .eepMenuZone
{
    display:none;
}





}


/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */
/* FIN DE CSS POUR SMARTPHONES/TABLETTES - BASE VIA PRODUIT CSS3SKIN DANS SON DOSSIER DANS PORTAL_SKIN*/
/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */





/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */
/* FIN DE CSS POUR TOUT LE SITE */
/*------------------------------------------------------------------- */
/*------------------------------------------------------------------- */

Mots-clés associés :