Voici un exemple d'un site pédagoqique qui utilise le thème par défaut : http://sesamath.ch/

Méthode pour modifier la couleur de la barre principale de navigation

1. Allez à l'adresse http://nom-de-votre-site.etab(ou discipline).ac-lille.fr/portal_skins/plone_styles/public.css/manage_main
2. Cliquez sur le bouton gris 'Customize'
3. Modifiez le code html selon vos besoins. Par exemple, remplacez #ddd par #58585A

#portal-globalnav {
    clear: both;
    font-size: 80%;
    background: #ddd;
    /* ensure top navigation dont touches portlets, content etc.. #10491 */
    margin: 0 0 1em 0;
}
#portal-globalnav li {
}
#portal-globalnav li a {
    display: inline-block;
    padding: 0.5em 1em 2em 1em;
    background: #ddd;
    min-width: 6em;
    white-space: normal;
    /*TODO: Once we have removed the whitespace from the nav template, this can be put back*/
    /*border-bottom: 0.1em solid White;*/
    border-right: 0.1em solid white;
}

3. Cliquez sur 'Save Changes'
4. Revenez à votre site http://nom-de-votre-site.etab(ou discipline).ac-lille.fr pour voir les changements

Méthode pour modifier la couleur des sous-menus de la navigation

1. Allez à l'adresse http://nom-de-votre-site.etab(ou discipline).ac-lille.fr/portal_skins/dropdownmenu/dropdown-menu.css/manage_main
2. Cliquez sur le bouton gris 'Customize'
3. Copiez-collez le code suivant :

/* DropDown Menu Styles */

#portal-globalnav {
    position:relative;
    z-index:3;
}
* html #portal-globalnav {
    height:1%;
}
#portal-globalnav li {
    float:left;
    margin:0;
    color: white;
    padding:0;
}
#portal-globalnav li a {
    display:block;
    color: white;
    position:relative;
}


/*
** SUBMENU STYLES
*/

#portal-globalnav ul {
    position: absolute;
    width: 15em;
    left:-999em;
    background: #58585A;
    border-color:#b0bf0d;
    border-width: 1px;
    border-style: none solid solid solid;
    margin:0;
}
#portal-globalnav li.selected ul.submenu {
    margin-top:-1px;
    z-index:3;
}
#portal-globalnav ul.submenu li {
    display:block;
    width:100%;
}
#portal-globalnav ul.submenu a,
#portal-globalnav ul.submenu a:hover {
    margin:0;
    display:block;
    border-color: #b0bf0d;
    border-style: solid none none;
    position:static !important;
    white-space:normal;
    color: white;
}
#portal-globalnav li.selected ul.submenu a:hover {
    background-color:#58585A;

}

a.hasDropDown {
    background-image:url('arrowRight.gif');
    background-position:14em 50%;
    background-repeat:no-repeat;
 
}

/* Below we have the same style defined differently
** These are for IE7 and IE6 respectively. There is no
** possibility to put styles for IE6 and IE7 in the same
** definition. So we have 2 separate definitions
*/
*:first-child+html #portal-globalnav ul.submenu a {height:1%;} /* IE7 fix. */
* html #portal-globalnav ul.submenu a {height:1%;} /* we all love IE6 ;) */


/* side-dropdown menu styles */
#portal-globalnav li ul ul {
    z-index:10;
    top:0.4em;
    left:-999em;
    left:0;
    margin: 0 0 0 14em;

}

#portal-globalnav ul li:hover,
#portal-globalnav ul li.sfhover {
    position:relative;

}

#portal-globalnav li:hover ul ul,
#portal-globalnav li:hover ul ul ul,
#portal-globalnav li:hover ul ul ul ul,
#portal-globalnav li.sfhover ul ul,
#portal-globalnav li.sfhover ul ul ul,
#portal-globalnav li.sfhover ul ul ul ul {

    left:-999em;
}

#portal-globalnav li:hover ul,
#portal-globalnav li li:hover ul,
#portal-globalnav li li li:hover ul,
#portal-globalnav li li li li:hover ul,
#portal-globalnav li.sfhover ul,
#portal-globalnav li li.sfhover ul,
#portal-globalnav li li li.sfhover ul,
#portal-globalnav li li li li.sfhover ul {

    left:auto;
}

/* clearing global navigation styles */
#post-sections-clear {
    height:1px;
    margin-bottom:-3px;

}

/* See above for explanation of the below mess styles */
*:first-child+html #post-sections-clear {margin-bottom:-2px;}
* html #post-sections-clear {
    margin-bottom:-2px;

}

3. Cliquez sur 'Save Changes'
4. Revenez à votre site http://nom-de-votre-site.etab(ou discipline).ac-lille.fr pour voir les changements

Méthode pour modifier la couleur des Portlets

1. Allez à l'adresse http://nom-de-votre-site.etab(ou discipline).ac-lille.fr/portal_skins/plone_styles/portlets.css/manage_main
2. Cliquez sur le bouton gris 'Customize'
3. Modifiez le code html selon vos besoins. Par exemple, remplacez #ddd par #efe4ef et white par #f5eff5

.managedPortlet {
    margin: 0.8em 0;
}

.blockedPortlet .portletHeader {
    border: 1px dashed #ddd;
    margin: -1px;
    background: none !important;
}

.blockedPortlet .portletHeader a {
    color: #666;
}

.blockedPortlet .portletBlockedMessage {
    color: white;
    display: inline;
}

3. Cliquez sur 'Save Changes'
4. Revenez à votre site http://nom-de-votre-site.etab(ou discipline).ac-lille.fr pour voir les changements