Modifications EPN-Campus

Transcription

1 Modifications EPN-Campus 1 - Les différents types d articles disponibles pour EPN-Campus... 2 a) First Article... 2 b) Standard Article Modifications des «portlets» sur EPN-Campus... 5 a) Title Portlet... 6 b) Blue Box... 7 c) Blue Border Round Box Modifications des News sur la Homepage de EPN-Campus... 10

2 1 - Les différents types d articles disponibles pour EPN-Campus a) First Article Le bloc est du type «Text with image» et son style est «First Article» : Le style «First Article» défini le titre en gras, vert et avec le triangle. Il défini aussi la couleur des liens. Lorsque vous écrivez l article dans typo3, vous n avez pas besoin de vous soucier de la couleur des liens ni de celle du texte. Grâce au style défini, le titre prendra automatiquement la forme voulue.

3 Passez dans l onglet «Text» (à côté de «General»). Dans l éditeur de texte, saisissez ou modifiez votre texte. Vous n avez pas besoin de gérer la couleur des liens, ceci est automatique. Pour créer un lien, sélectionnez en surbrillance le mot concerné et utilisez le bouton de création de lien. (Attention ce bouton ne sera actif que lorsqu un mot ou une phrase est sélectionné.) Ensuite dans la fenêtre qui s ouvre, choisissez si votre lien pointe vers un fichier, une page du site, une adresse externe ou encore un .

4 b) Standard Article Le type «Standard Article» est identique au type «First Article» à la différence près du titre. En effet, le «First Article» doit être utilisé en premier dans une page mais si on se souhiate pas que les articles suivants prennent le même style de titre, il suffit de les passe en «Standard Article». «First Article» pour le titre. «Standard Article» pour la suite sur la même page. Dans typo3 : Un bloc de type «First Article» suivi d un bloc de type «Standard Article».

5 2- Modifications des «portlets» sur EPN-Campus LES STYLES DES PORTLETS SONT AUTOMATIQUES. IL N EST PAS NECESSAIRE DE S OCCUPER DE LA COULEUR DU TEXTE. GRACE AU STYLE DE BLOC DANS TYPO3, LA MISE EN FORME SERA AUTOMATIQUE SUR LE SITE. Title Portlet Blue Border Round Box Blue Box

6 a) Title Portlet Le titre d un portlet se mettra automatiquement en gris et dans la police du site, vous n avez pas besoin de le gérer ; de même pour son centrage qui sera automatique. Le titre d un portlet est donc un bloc de texte simple dans lequel on ne remplit que le champ «Header».

7 b) Blue Box Un exemple de portlet qui se trouve dans la page «About us», partie de droite. Chaque bloc bleu est un portlet, celui-ci se nomme «Blue Box» dans les styles d articles. Le titre de chaque portlet est séparé du bloc et porte le style «Title Portlet».

8 Ce qui donne dans typo3 (colonne de droite «Right») : Le titre seul Choisir «Title Portlet» comme style d article. Le contenu du portlet Choisir le type d article «Blue Box». Puis dans l onglet «Text» (à côté de «General»), saisir le texte du portlet.

9 c) Blue Border Round Box Sur la page «Guesthouse» (dans «Accomodation») on trouve un autre type de portlet. Toujours dans la colonne de droite, il s agit du type «Blue Border Round Box» : De la même manière que précédement, le titre est séparé du portlet. Le titre est donc un bloc de texte de type «Title Portlet». Le texte est quant à lui contenu dans un bloc de texte de type «Blue Border Round Box» Dans l onglet «Text», saisir le texte du portlet.

10 3 - Modifications des News sur la Homepage de EPN-Campus Les news de la page d accueil se trouvent dans la colonne «Normal». Le titre «News» doit être séparé des news ; le style d article pour le titre étant «Title Portlet».

11 Chaque News est un bloc de type «Text with image» auquel on applique le style «News Users». Le titre de la news en question doit renvoyer vers l article détaillé, pour cela utiliser le champ «Link» qui s applique au titre de la News (en cliquant sur la planète, on obtient la fenêtre de création de lien, cliquez simplement sur la news correspondante).

12 Passez ensuite dans l onglet «Text», à côté de l onglet «General». Ici se trouve le «chapeau» de la news, c est-à-dire le résumé qui sera visible sur la page d accueil. Ce résumé ne doit pas être trop long et doit être cliquable. En effet, en cliquant sur le chapeau, on tombe aussi sur la news complète. Pour celà, selectionner le texte et utiliser la création de lien (l icone avec une chaine et un «+» vert qui devient actif lorsque vous sélectionnez du texte) pour faire pointer le résumé vers la news complète. ATTENTION : donner le style au chapeau en choisissant le style de lien «news_resume» dans la fenêtre de création de lien.

13 Il est préférable de d abbord sélectionner le style du lien, puis d aller cliquer sur la page correspondante car la fenêtre va se refermer une fois la page de destination choisie. Si vous avez oublié de sélectionner le style, il suffit de re-placer son curseur n importe où dans le texte cliquable et de re-cliquer sur l icone de création de lien. Choisir le style de lien «news_resume» et faire «Update» pour mettre à jour le lien. Ce style de lien met le texte du chapeau en gris clair et passe en noir au survol. Ainsi l internaute voit que ce texte est cliquable et en cliquant dessus, il tombe sur la news détaillée. Le lien «Read More» quant à lui est un lien simple, sans style. Il pointe également vers la news détaillée. Passez ensuite dans la partie «Media» pour l image illustrant la news de la page d accueil. Insérer l image (un dossier a été créé pour accueillir ces images, il s agit de «news_homepage»). Le choix de l alignement est le dernier (Beside text, left) et les images des news de la page d accueil font toutes 125 pixels de large. Affecter également un lien sur l image vers la news complète (utiliser le champ «Link» en cliquant sur la planète et pointer vers la page de la news complète).

14 Enregistrer et fermer grace aux disquettes (ou enregistrer et visualiser). Le résultat est le suivant : Le titre, le chapeau, l image et le lien sont cliquables et mènent tous à la news détaillée (qui est contenu sur une page à part) Le séparateur en pointillés entre chaque news est automatique à partir du moment où on a défini le style d article avec «News_Users». Bien entendu, chaque news doit petre créée au complet sur une page qui lui est destinée. Ces pages se trouvent dans le dossier «News», il suffit de créer la page portant le même nom que la news mise en avant sur la page d accueil.

15 Bien penser à choisir le style d article «First Article» juste pour avoir le gros titre au sommet de la news. Penser à utiliser la colonne de droite si besoin, pour y mettre des photos par exemple. Ne pas oublier le lien «Back» pour retourner sur la page d accueil.