Modifier le thème par défaut
Voici un exemple d'un site pédagoqique qui utilise le thème par défaut : http://sesamath.ch/
D'autres exemples de site pédagogiques qui utilisent le thème par défaut de Plone avec quelques améliorations ...
Méthode pour modifier la couleur de la barre principale de navigation
- Allez à l'adresse http://nom-de-votre-site.etab(ou discipline).ac-lille.fr/portal_skins/plone_styles/public.css/manage_main
- Cliquez sur le bouton gris 'Customize'
- 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; }
-
Cliquez sur 'Save Changes'
- 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
- Allez à l'adresse http://nom-de-votre-site.etab(ou discipline).ac-lille.fr/portal_skins/dropdownmenu/dropdown-menu.css/manage_main
- Cliquez sur le bouton gris 'Customize'
- 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; }
-
Cliquez sur 'Save Changes'
- 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
- Allez à l'adresse http://nom-de-votre-site.etab(ou discipline).ac-lille.fr/portal_skins/plone_styles/portlets.css/manage_main
- Cliquez sur le bouton gris 'Customize'
- 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; }
-
Cliquez sur 'Save Changes'
- Revenez à votre site http://nom-de-votre-site.etab(ou discipline).ac-lille.fr pour voir les changements