Vous êtes ici : Accueil Support Documentation Tutoriels Intégration d'une page d'accueil

Intégration d'une page d'accueil

Note: Ceci est une impression contenant toutes les pages du Tutoriel sur une seule page. La version paginée est disponible ici.

Parmis celles proposées à l'installation de cpskin3

Procédure

Pour utiliser une des pages d'accueils proposées

Avec le produit CPSKIN3, on vous propose trois type de pages d'accueils différentes que vous pouvez activer en renommant celle choisie en index_html :
  • index2Col_html : cette page comprend une partie supérieure correspondant à votre page "front-page" se trouvant à la racine du site ainsi qu'une partie inférieure séparée en deux partie et qui reprend vos actualités et vos événements.
  • index3Col_html : cette page comprend une partie supérieure séparée en deux partie (la partie principale correspondant à la page "front-page" et une seconde zone à droite correspondant à la page (à créer à la racine) "front-page-tr"). La partie inférieure est divisée en 3 colonnes (actualités, événements et une colonne reprenant la page (à créer à la racine) "front-page-br"). Vous devez également créer la page "front-page-brplus" qui permet d'afficher plus d'information dans la troisième colonne.
  • indexAccordeon_html : cette page est celle utilisée sur www.communesplone.org. Les points de menus se trouant dans l'accordéon correspondent aux pages qui sont publiées hors navigation et se trouvant dans un dossier spécifique (ie accordeon). Vous devez changer le chemin se trouvant à la ligne 54 du fichier indexAccordeon_html afin de spécifier votre chemin (dépend du nom que vous donnerez au dossier).
Ces différentes templates sont placées dans le dossier "data" du produit CPSkin3 et visible ici : http://svn.communesplone.org/svn/communesplone/acptheme.cpskin3/trunk/acptheme/cpskin3/data/

Ci-dessous, vous trouverez le code css à ajouter dans portal_skin/custom/plonecustom.css pour la page indexAccordeon_html :

#bloc1b {
border-width:0 0 1px;
padding:0.25em 0 0 0;
}

/*agenda*/
.dateblock {
border:1px solid #DCDCD2;
display:inline;
float:left;
margin-right:0.5em;
margin-bottom:0.25em;
text-align:center;
min-width:30px;
font-size: 14px;
color:#64645A;
}

.innerborder {
background:url(&dtml-portal_url;/date.gif);
background-repeat: repeat-x;
background-position:left bottom;
background-color: #FFFFFF;
height:32px;
margin:1px;
}

.dateblock .discreet {
background-color:#61B5DF !important;
font-size:0.75em;
padding:1px 0 1px 0;
color:#FFFFFF !important;
text-transform:uppercase;
display: block;
}

/*fin agenda*/

.eventTitleFrontPage {
border-bottom: 0px !important;
font-size: 12px;
font-weight:bold;
text-decoration: none;
margin-top: 0.25em;
color:#436976 !important;
}

.eventStartEnd {
color:#76797C;
font-size:95%;
}

.frontPageEventsPortlet {
margin-top: 0px;
border-bottom: 0px;
}

.frontPageEventsPortletItem {
border-bottom: 1px solid #D1D8DF;
border-left: 0px;
border-right:0px;
padding: 10px 5px 0;
margin:0;
}

.frontPageEventsPortletHeader {
padding:3px 0 3px 1em;
background-color:#61B5DF;
color:#ffffff;
font-size: 16px;
height:1.7em;
line-height: 1.6em;
font-weight:normal;
}

.frontPageEventsPortletHeader  a {
color:#ffffff;
}

et le code css pour faire apparaître la date de publication des actualités en gris :

/*Code css à placer dans portal_skins/custom/ploneCusto.css pour afficher la date de publication en gris*/
.home-actu-date {
  font-size: 90%;
  margin-top: 5px;
  color: #8c8c8c;
}