Home

Mode d`emploi Adaptation de la Charte Graphique du kit de

image

Contents

1. Nuage de mots sur page A Styles Menu automatique R f rence des contenus LE ratranar Un IES KIL GE FUDHCOLIOTI LE Ts BI Template Tools O El Q Bienvenue Chemin fBienvenue lf TEMPLATE INFORMATION CE Gabarit root Gabarit root v Update Cancel s nbsp voir documentation d installation param trage 3 Le pied de page footer png footer pnag page 7 26 R dacteurs E BRISSET C NOEL 01 10 2009 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion D AGRICULTURE 01 10 2009 Situ en bas de page image en fond de mentions l gales contacts Dans la feuille de style signature width 100 height 23px font size 10px color ffffff text align center 4 Le menu La Chambre d Agricuture Le d partement Le r gion ac daccinrse thin II se d compose en une couleur de fond fond colonne png image r p t e en fond Ffand_colonn png deux bandeaux de couleur pour les titres de rubrique btn_menugauche jpg btn_menugauche_on jpg btn_menugauche jpg quand le menu n est pas activ btn_menugauche_on jpg quand le menu est activ et donc le menu correspondant d velopp ou bien sur le passage de la souris sur ce bouton rollover une image bouton pour le menu de niveau 2 page 8 26 R
2. Update Cancel SETUP g1oba1 Admin Panel filei fileadgmin templates admPanel css fileCal fileadmin templates cal css fileSitemap fileadmin templates sitemap css FiIERSS fileadmin templates rss css fileRecherche fileadmin templates recherche css fileTagcloud fileadmin templates tagcloud css filesitemap fileadmin templates sitemap css cCharteGraphique fileadmin templates styles_internet css lib parseFun _RTE nonTyhoTagStdwrap encapsLines addAttributes P class On retrouve l ensemble des styles de base du kit de publication permettant ainsi de personnaliser la charte graphique de votre site D autres fichiers css se trouvent dans ce m me r pertoire pour personnaliser l affichage de La recherche avanc e recherche css Le composant calendrier cal css cal_intra css cal_extra css Les fils rss rss css rss _intra css rss extra css Etc 5 Comment modifier une feuille de style via les backend Pour modifier le fichier css de la feuille de style faites un clic sur l ic ne css se trouvant devant le nom du fichier puis cliquez sur Editer s3 styles_internet css iw fileadmin filesdmin templates MAH sh Nom de fichier Type Date HET H ambitions2020 u a fr 40 En apprentissage pe Eo e CSS 20 07 09 Ej cereanou R ter j gt ma cs bak BAK 20 07 03 Gi fe Renommer ieg H documents l irto g neess CSS 21 10 08 3 economie copier ci phuress CSS 0
3. htip www paintnet fr en fran ais htto fr wikipedia org wiki Paint Net Ey paint net D velopp au d part comme un rempla ant pour Paint Paint NET fournit au final beaucoup plus La liste des fonctionnalit s est s duisante e Gestion des calques indispensable d s qu on veut un tant soit peu manipuler des images e Gestion de la transparence possibilit de r gler l opacit de chaque calque et de dessiner avec une transparence e Outils de dessin lignes polygones dessin main lev e courbes de B ziers texte page 25 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL CHAMBRES Date de diffusion D AGRICULTURE ASSEMBL E 01 10 2009 The Gimp est un logiciel de retouche photo multi plateforme puissant et gratuit Il est reconnu par les plus enthousiastes comme une bonne alternative l excellent mais on reux Photoshop Il peut tre utilis comme un logiciel de retouche photo comme un outil de peinture ou encore pour convertir des formats d images Bien sur il existe de nombreux plugins apportant des fonctionnalit s des plus simples aux plus complexes gt ja http www gimp org htto www thegimp fr htip www gimpfr org Photofiltre T l chargement et tutoriel http photofiltre free fr frames htm CLONE r PhotoFiltre est une logiciel gratuit d utilisation
4. 5 Le bloc d identification Connexion et d connexion Acc s r serv a se compose de deux images une couleur de fond des zones de saisie des identifiants d finie dans les feuilles de style Les images se trouvent sous le r pertoire fileadmin templates images acces E Acc s r sent bottom_acces gif fond_login png titre _acces gif La couleur de fond du bloc se modifie dans la feuille de style IDENTIFICATION identification width 182px font weight normal font size 14px color 000000 margin 20px 0 0 14px padding bottom 5px background url images acces bottom_acces gif bottom center no repeat cc3399 La couleur surlign e correspond la couleur de fond du bloc Pour la partie d connexion il faut aller dans les feuilles de styles intranet et extranet et modifier cette partie LOGOUT LOGOUT identification logout container background CC3399 url images acces bottom_acces gif no repeat scroll center bottom margin left 15px width 181px padding bottom 5px page 10 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion D AGRICULTURE 01 10 2009 NEN 6 les boutons rechercher Bouton Rechercher en page d accueil de l internet Rechercher recherche qif Cadre recherche simple Recherche F Pour la recherche les images se trouvent dans
5. Date de diffusion 01 10 2009 AN 10 les cadres wA faut sumptibus pallisade masine Cain omme Mlhridatices impetus totumaue In Ai Facius mavgerum mesguam ventur Tumen s64 in loca purina aguse suana matura calentes emergunt a4 Hus Sas Quae illi exhausti sumptibus belizque maximis cum omnis tithridaticos impetus totumque In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad UEUS aptae Dans le backend il y a 5 choix de couleur de cadres type de sontenu de page que cet l ment repr sente De nc Langues Colonnes Avant Apras Si HN eee Normal ME OU ie DO e Ma Me En t te A crivez lun titre pour cat l ment L aube de l agriculture Correspondance avec les feuilles de styles Vert moduleEncadre Olive moduleFlash1 Orange moduleFlash2 Abricot moduleFlash3 Vert d eau moduleCitation Exemple avec moduleFlash1 on peut modifier les couleurs de fond du texte et les 4 coins arrondis moduleFlash1 position relative margin 0 0 1em padding 0 div moduleFlash1i div background url images internet topleft_flash1 png top left no repeat page 18 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion D AGRICULTURE TEL 01 10 2009 div moduleFlash1 div div background url images internet b
6. ma he Bep Mene Dip i drej Duh Ta l f Jsua o saata tesne aaxxa simple Il permet d effectuer des r glages RRRLEN SEE Re RE simples ou avanc s sur une image et de lui appliquer un large ventail de filtres L application propose les fonctions standards de r glage luminosit contraste teinte saturation Ke ie correction gamma et des filtres artistiques TETT aquarelle pastels encre de chine pointillisme an i i i effet puzzle PhotoFiltre est fourni avec plus d une centaine de mu filtres a mms ms mm Par ailleurs ce logiciel est l ger et en fran ais page 26 26
7. bold font size 13px color margin bottom 6px margin top 8px y CO font family Arial font weight bold font size 11px color 323d43 margin bottom 5px margin top 8px w page 16 26 R dacteurs E BRISSET C NOEL Date de diffusion 01 10 2009 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion D AGRICULTURE SET RTE 01 10 2009 Pour les titres de 4 12 il faut agir sur le bandeau de couleur en fond du titre en modifiant les images et sur la feuille de style pour la mise en forme du texte OO Le bandeau de couleur est compos d une seule image aux bords arrondis Exemple de nom de fichier pour le titre 6 fond _ t6 gif Fond_t gif fond _t7 gif fond _t8 gif fond _t9 gif fond_t10 gif fond_t11 gif fond_t12 gif Pour la feuille de style h3 titre4 h3 titre5 titre6 h3 titre7 h3 titre8 h3 titre9 h3 titre10 h3 titre11 h3 titre12 font family Arial font weight bold font size 11px display block height 21px margin top Opx padding left 10px padding right 10px padding top 3px background position left top background repeat no repeat h3 titre4 background image url images internet fond_t4 gif color idem pour titres titre12 page 17 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL
8. dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion D AGRICULTURE D S DE RTE 01 10 2009 puce menu gif Pour changer la couleur du texte des boutons de menu de niveau 1 Pour le bouton non activ colonne_ gauche li a display block height 21px padding left 7px padding top 2px background url images internet btn_menugauche jpg top left no repeat font family Arial sans serif font size 12px font weight bold color text decoration none Pour le bouton activ colonne_gauche li a hover colonne gauche li a on background url images internet btn_menugauche_on jpg top left no repeat text decoration none Vous pouvez rajoutez une ligne telle que celle qui est surlign e ci dessus pour personnaliser la couleur de texte Pour les titres de menus de niveau 2 les paragraphes de la feuille de style sont les suivants menu_ gauche deroule p puce pour l indentation margin 3px 0 padding left 20px menu gauche deroule a couleur du texte pour menu non activ text decoration none menu gauche deroule a hover menu_ gauche deroule a active menu gauche deroule a on couleur du texte pour menu activ text decoration none page 9 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion 01 10 2009 A
9. le r pertoire Fileadmin template images palette recherche gogoeososesososesssseseosa fermer gif fermer_extra gif fermer_intra gif fond png fond_extra png fond_intra png loupedefond gif ok gif ok_extra gif ok_intra gif Besosecesesosososeestosoe puce gif puce_extra aif puce_intra gif Thumbs db Le fond est d fini dans la feuille de style recherche position absolute font family Arial Verdana Helvetica sans serif width 410px height 160px padding 10px color 000000 z index 99999 text align left background url images palette recherche fond png top left no repeat Pour le bloc de recherche avanc e diff rents styles sont n cessaires pour les identifier recherchez le terme RechercheAvancee dans la feuille de style page 11 26 R dacteurs E BRISSET C NOEL Date de diffusion H PHARE 01 10 2009 A Poids Fr quence Liste plate Chercher roundedTitleRechercheAvancee position relative margin 0 padding 0 background 878F2B url images internet topright_ titre rechercheavancee png top right no repeat div roundedTitleRechercheAvancee div background url images internet topleft_titre_ rechercheavancee png top left no repeat div roundedTitleRechercheAvancee div div background url images internet botleft_titre__rechercheavancee png bottom left no repeat height 1 div roundedTitleRechercheAvancee div div div background u
10. tagclouds css pour ces feuilles de styles betterave comp titivit conseill distilstion d chets tx vgetagcloud pit line height 250 width 190px background 878F2B url fileadmin templates images internet topright_flash1 png no repeat scroll right top color margin 0pt Opt 1em padding 0pt position relative page 21 26 Mode d emploi Adaptation de la Charte Graphique du Kit de Publication D AGRICULTURE ASSEMBLEE PERMAN 15 les liens hypertextes Les liens hypertextes du site LIENS a link color 098248 text decoration underline Lien visit a visited color 098248 text decoration underline Passage de la souris sur le lien a hover color 098248 text decoration underline lien sur une image pas de bordure autour de l image a img border none Les liens du fil d ariane M accueil Le d partement La r gion ilrouge float left font size 11px limportant background image url images icones home gif background repeat no repeat padding left 15px width 520px 16 les puces Economie G nerale L s fili res t Grandes Cure b Elevage Bons Viandes LA Ed Bovina Laf Dins Capris w Eguis Volailles PUCES Premi re indentation page 22 26 R dacteurs E BRISSET C NOEL Date de diffusion 01 10 2009 R dacteurs Mode d emploi Adaptat
11. verdana lveti f Espace val i intamet background color ffffTf Jintranet color 323d43 Gnevslett margin 0 l Administration d palett ETAN text align center orriger le bug de centrage IE Gest d Extensions era background url Cimag ternet fond jpg top left repea a font 5 11px bav rif BD Etemplate_m j 5 px JL Config o templat Arr TEER DE SE SE NE ARR f E linstallation Btemplate_recherche POSITIONNEMENT DES DIV aa ARE SES ART ED TRE ee LE e EE D EEE EE 6 INVENTAIRE non exhaustif DES PRINCIPALES ZONES MODIFIABLES 1 Le fond de page fond jpg fond jpg Le fichier fond jpg est une image qui est r p t e en fond de page Vous pouvez changer la couleur du d grad et remplacer limage body font family Si vous voulez mettre une couleur de fond au lieu d un d grad il suffit de changer la feuille de style background color Color TIR L margin 0 text align center pour corriger le bug de centrage IE font size Pour changer la couleur de fond c est la couleur surlign e ci dessous qu il faut changer et aussi liminer la ligne avec background url s il n y a pas de d grad background color Vous pouvez aussi remarquer que la police par d faut est d crite dans cette classe arial gris fonc page 6 26 Mode d emploi Adaptation de la Charte Graphique du Kit de Publication D AGRICULTURE ASS 2 logo banni re top_banner jp
12. 2 12 08 e Couper d Ess CSS 14 05 09 energies environnement SERR T CSS 21 10 08 Teamplavoilla TM gehodes tsy TAJelOUUr ETS CSS 21 10 08 an Vous pouvez alors modifier les propri t s en mode texte puis cliquez sur le bouton Enregistrer page 5 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion D AGRICULTURE 01 10 2009 TYP03 Y A i fileadminf Editer Fr am Page J An fileadmin templates styles_intemet css Q voi TEMP wig C5 ambitions2020 EjList ez A Enregistrer Enregistrer et Fermer Annuler L Loap NN apprentissage tect i cereanov erreur connection F1 PEER Gt position absolut Bino document p 300p fai Acc s 6 economie left 570p Jh Fonct alors ced a lus_de_la_chamb border 2px dashed black B Gest de versions ener gies padding 18px 7px 16px 40px m Template MN invionnemen t background transparent url images internet exclamation png no repeat scroll 5px 9px H Termnplavoil 3 gehod P ogle Map images p 4 gat Page Comments leche padding left 10p T Ql offres_sta padd ght 10p presen tationCA18 f A Fichiers Bubileations single ma i float right B El Etemplates padding left 10px Erjimages padding right 10px mm M acces Centre de T che Gextranet body Q configurati r acon SE so D Er ST font family Arial
13. 8 RW FE EF ok extra gif GIF 21 10 08 256 RW Eir folder on gif GIF 21 10 08 1 0K RW me OK M ct GIF 21 10 08 267 RW QK dA foider off gif GIF 21 10 08 649 RW Bibi AA loupedefond gif GIF 21 10 03 36 RW ke AD rond intrapng PNG 21 10 08 0 3K RW 3 ast onig A e A S meg fond_extrs png PNG 21 10 08 10K RW ga fond pna PNG 21 10 08 0 9K RW exp off gif GIF 21 10 08 532 RW HS a fermer intrs gif GIF 21 10 03 635 RW LS 6 File s 4 2 Kbytes A fermer cxtra gif GIF 21 10 08 657 RW page 2 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL CHAMBRES Date de diffusion D AGRICULTURE 01 10 2009 Remarque sur le contenu des r pertoires internet intranet extranet Attention par d faut vous ne voyez pas toutes les images car il y en a plus de 40 pour voir la suite cliquez sur la petite fl che la fin de la liste des images EF fond centre gif Er fond colonne gif fes 967 40 Files 38 Kbytes 3 Comment remplacer une image via le backend Le principe est simple vous r cup rez l image initiale sur votre disque dur vous modifiez cette image en local sur votre ordinateur enfin vous remplacez l image sur le serveur par celle que vous venez de modifier Afin de conna tre les caract ristiques de l image initiale Cliquez sur l ic ne devant le nom du fichier puis activez le menu Info des top_banner jpg JPG FEen nommer JPG i Info Co
14. R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion D AGRICULTURE 01 10 2009 Mode d emploi Adaptation de la Charte Graphique du kit de Publication 1 INTRODUCTION OBJET DE CE DOCUMENT Ce document a pour objet de donner des indications simples sur la d marche suivre pour adapter la charte graphique du kit web son d partement PRE REQUIS Pour modifier l aspect graphique des interfaces web du kit vous devez au moins savoir utiliser un logiciel de traitement d images Photofiltre Picasa paint net Adobe Photoshop ou The Gimp par exemple Pour remplacer les photos contenues dans le kit vous devrez avoir les droits administrateur ou bien avoir des droits sur le dossier templates du fileadmin D autre part la connaissance du langage CSS sera un plus si vous d sirez aller plus loin que le remplacement des images existantes CSS Cascading Style Sheets feuilles de style en cascade est un langage informatique qui sert d crire la pr sentation des documents HTML et XML Ce langage a une syntaxe assez simple et peut donc tre abordable un non informaticien qui a quelques rudiments de langage HTML r f rences aux diff rentes balises d une page web IMPORTANT Pr cautions de sauvegarde Se Siue dans Ie dossier GA ala raame UP O Garder des traces des modifications 2 EMPLACEMENT DES IMAGES Les images de fond et les icone
15. er colonne blanche newsltem h2 font family Arial sans serif color 323d43 font weight bold font size 11pX L image vignette colonne blanche newsltem img float left border 1px solid d9d9d9 margin O 10px 0 0 padding 5px background color ffffff Le lien ic ne afficher le d tail p linkdetail line height 1em p linkdetail img vertical align middle display inline block margin O 10px 0 0 limportant padding 0 limportant border none limportant p linkdetail a text decoration none background url images internet icon _ detail gif left center no repeat padding 10px Opx 10px 25px 7 Outils et biblio 7 1 Firebug pour firefox http getfirebug com Firebug est une extension pour Mozilla Firefox qui permet de d boguer diter et modifier le HTML le CSS et le JavaScript d une page web a Firepu web development evolved 3 lt di contentinner2 lt di Li Les Options Style Layout DOM Options A me Cette extension permet de s lectionner une partie de la page web afin d afficher le code de la feuille de Style correspondant sitez itlie page 24 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion D AGRICULTURE 01 10 2009 Tutoriel d utilisation htto eric pommereau developpez com tutoriels outil web firebu
16. g D siae l os LEPEKA top_logo jpg Date de diffusion Attention aux barres de couleur en bordure du cadre du logo adapter au fond du menu et au fond de la page La banni re est d crite dans la feuille de style colonne centrale float left width 757px padding top 170px padding bottom 10px Le logo est d fini dans le setup du Gabarit Root du dossier M ESL KIL QE FUDICAUOTI I TYP03 W CIN Page Q Voir F Liste L LDAP Sync M Pirectmail 9 Info A Acc s A Foncions Gest de versions 5 Template H Templavoil Page Comments Google Map CAFichiers E vestes centre de T ches h Configuration Espace de travail Administration de LE Gest d Extensions bav rification BD Eh Configuration linstallation FT Fichier innrnal TOJ Test kit de Publication El A Bienvenue Gestion actualit s Web Le d partement La r gion A L agriculture A L agritourisme A Les r gions naturelles Les produits locaux Institutionnel A Pratique E Ev nements A Br ves Agenda A Dossiers th matiques Appels d offre F Offres d emploi Exemples de contenus A IFRAME exemple claire A RSS entrant Vid o issue de youtube A Formulaire en ligne Vid o interne A Diaporama r pertoire i A Diaporama enregistremen 5 Commentaires sur un articl 5 Espace t l chargement A Nuage de mots sur actualit
17. g idem pour les petites icones repr sentant les types de fichiers Eae amp amp a 9 7 amp doc gif draw png flash png folder png folder _denied png html png image png 13 le plug in plan du site m gt II faut modifier le fichier sitemap css pour ces feuilles de styles page 20 26 R dacteurs E BRISSET C NOEL Date de diffusion 01 10 2009 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion D AGRICULTURE ASSEMBLEE 01 10 2009 A NEN Pour la premi re ligne sur fond vert c est expAII x dropdownsitemap pii DIV expAII background url images sitemap fond_expand gif center center no repeat color white padding 5px 10px x dropdownsitemap pi1 color text decoration none DIV expAII a Pour le titre en t te de la rubrique de niveau 1 tx dropdownsitemap pii DIV level_1_left background url images internet sitemap level 1_left png left center no repeat ffcc33 padding left 1 1px x dropdownsitemap pil DIV level_1_ right background url images internet sitemap level_1_right png right no repeat ffcc33 padding 0 margin O Pour le fond orange clair x dropdownsitemap pii DIV level_1 OL background color padding left 25px limportant padding bottom 1px 14 le plug in nuage de mots achive ardennes B E l II faut modifier le fichier
18. in 0 1 1em padding 0 background d7d75b no repeat margin bottom 5px div roundedContent div background transparent no repeat div roundedContent div div height 1 div roundedContent div div div page 13 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion D AGRICULTURE AE 01 10 2009 padding 1px div roundedContent div div div div background none 7 2 le bloc Actualit s page d accueil et les contenus flexibles de type bloc actualit Idem 7 1 Pour la partie titre la partie sup rieure on a les 4 coins arrondis oranges ainsi que la couleur de fond JLS ecnets agricoles Afficher le gets roundedTitleActu position relative margin 0 padding 0 div roundedTitleActu div div roundedTitleActu div div height 1 div roundedTitleActu div div div padding 5px div roundedTitleActu div div div div background none Pour la partie contenu on a la couleur de fond ainsi que les 2 coins arrondis du bas roundedContentActu position relative margin 0 0 2px padding 0 w page 14 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion 01 10 2009 A div roundedContentActu div background transparent no repeat div roundedContentActu div d
19. ion de la Charte Graphique du Kit de Publication E BRISSET C NOEL EANNA Date de diffusion 01 10 2009 ul margin left 15px margin bottom Opx padding left 15px padding top 5px padding bottom 10px text align left font size 12pX list style image url images icones puce_ronde_h4 gif Deuxi me indentation ul ul margin bottom 9px list style image url images icones puce h5 gif font size 12px Troisi me indentation ul ul ul margin bottom 9px list style image url images icones puce_triangle_h6 gif font size 12px 17 les actualit s de la page d accueil Club de progr s Tournesol Cette ann e le club de progres Grandes Cultures sera d di au tournesol Un club de progr s est un groupe d change d agriculteurs et de conseillers techniques et conomiques qui travaillent sur des donn es pr cises issues de parcelles des exploitations Afficher le d tail La bordure grise news list accueil newsltem border 1px solid d9d9d9 limportant Le titre colonne blanche newsiltem h1 font family Arial Black sans serif color 4cb200 font weight normal font size 13px border bottom none page 23 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion D AGRICULTURE S RIE 01 10 2009 margin bottom 1 5em padding left O Le corps de texte du teas
20. iv background url images internet botleft_blocActu png bottom left no repeat height 1 div roundedContentActu div div div background url images internet botright_blocActu png bottom right no repeat padding 1px div roundedContentActu div div div div Angles arrondis des titres ou des fonds de bloc exemples de fichier images background none topleft_titre_bloc ctu topleft_titre_HlocCont Eotright_titre_bloc ct Gotright_titre_blocto 8 Pages r cemment mises jour Ce bloc suit la m me charte graphique que 7 1 le fichier image de la puce est fileadmin templates images internet icon_ recentcontent png 9 les titres Dans les pages d exemples livr es dans le kit vous pouvez retrouver l ensemble des styles de titres dans la page styles page 15 26 Mode d emploi Adaptation de la Charte Graphique du Kit de Publication D AGRICULTURE ASSEMBL E PERMANEN Titre 1 Titre 2 Titre Titre T ati L Titre 12 Pour les titres de 1 3 il suffit d agir sur la feuille de style AEE E E EEE E r STYLES DE BASE FF FERERCREERERRRRERRE CLASSES UTILIS ES AUSSI PAR LE RTE OR TR RTS E TITRES et Paragraphe p h1 h2 h3 h4 h5 h6 Comte padding left 10px padding right 10px z font family Arial Black font weight normal font size 13px color margin bottom 6px 7 N font family Arial font weight
21. lacer l image initiale attention aux sauvegardes avant remplacement Pour cela vous allez d abord vous situer dans le bon r pertoire puis cliquez sur le bouton Envoyer des fichiers il faut cocher craser les fichiers existants gt pour remplacer les fichiers Envoyer des fichiers filssdrain ternplates images intemet i Fichiers Ecraser les fichiers existants land Settings noele 1d tiM Er Envoyer des fichiers Annuler Une fois le fichier remplac dans le backend il faudra parfois vider le cache du navigateur pour que la nouvelle image apparaisse correctement dans le frontend NB vous pouvez aussi utiliser un logiciel ftp ex filezilla pour remplacer les images Attention de ne pas utiliser de fichiers trop lourds max 50 ko sinon l affichage du site sera plus lent 4 Emplacement des FEUILLES DE STYLES Les feuilles de style du kit de publication sont situ es dans le r pertoire fileadmin templates Pour internet styles_internet css Pour intranet styles_intranet css Pour extranet styles extranet css Depuis le dernier patch l affectation de la feuille de style par interface est dans le param trage template du gabarit root du dossier page 4 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion D AGRICULTURE 01 10 2009 TEMPLATE INFORMATION Gabarit root Gabarit root
22. otleft flash1 png bottom left no repeat height 1 div moduleFlash1 div div div background url images internet botright flash1 png bottom right no repeat padding 10px div moduleFlash1 div div div div background none 11 les tableaux celtes Sellu 2 celte Hi M S Cellule 1 c est la cellule de tableau par d faut TABLEAUX colonne blanche table background d d75b border collapse collapse colonne blanche td border 1px solid white padding 5px font family Verdana sans serif font size 1 1px vertical align top Cellule 2 style clair Cellule 3 style fonce Cellule 4 style exposer Dans la feuille de style on retrouve les 3 styles de tableaux indiqu s dans le backend Couleurs tableaux Clair background e7e79d En fonce page 19 26 Mode d emploi Adaptation de la Charte Graphique du Kit de Publication D AGRICULTURE ASSEMBL E PERMA NEN background E E exposer background bec540 font weight bold font family Arial sans serif Comte w 12 le plug in liste de fichiers et dossiers ey 2K a Il y a 2 styles diff rents Pour la premi re ligne roundedHeaderListing Pour les autres lignes de tableaux roundedHeaderContent Attention l ic ne du dossier bleu se trouve dans un dossier syst me typo3conf ext dir_listing pil icons atolcd folder pn
23. partir du El Configuration Espace de travail 3 serFteuF Trois dossiers comportent les images apportant le graphisme au site pour les diff rents acc s extranet intranet internet e internet e intranet e extranet Vous voyez aussi les dossiers acces les images de la bo te de connexion d connexion utilisateur de frontend r T Ll sdrmin templetes imsges icones 2a fileadmin tarmplates images acces m el miende poe pe Tae aw Mt Hey De so on IRD Nom de fichier Type Date Taille A bottorm_acces gif GIF 21 10 08 140 CHE id a avioosss nw IR di fond login png PNG 21 10 06 698 RW CH et LA titre_scces gif GIF 21 10 08 1 3 K ELA 3 File s 2 4 Kbytes 08 55 RW Eas 08 512 RW CHE 5 RW H icones les puces et icones communes aux trois interfaces newsletter les logos images d en t te icones pour les newsletter ae de A puce borduregsuche gf GIF 21 10 06 52 RW Eu menu mrasimtrrmrii Dalette_ recherche les icones et images de fond je ry revu du site couleurs diff rentes pour inter intra ext Ta aF aies nw CI LA puts_oxtra gif GIF 21 10 08 1 1 K A imprimer gif GIF 21 10 08 108 RW Ea filesdmin temmplates images sitemnap ej Nom de fichier Type Date Taille RW R f CA HA page aif GIF 21 10 08 1 0K RW Fe sitemap fichiers images du plugin carte rA M cintre ai IF 21 10 08 256 RW d Fiag te gt OK u SITE MA fond_expand aif GIF 21 10 08 27
24. pier x Che Couper _ ptes zi Supprimer i TermplaVoils TH Ensuite un pop up appara t avec les caract ristiques de l image Visualiser l l ment Mozilla Firefox amp http intranet cher chambagri fr kiPublcation typo3 s Visualiser l l ment Fichier top_bannerjpg Taille 27 K Dimensions 757x167 pixels REFERENCES TO THIS ITEM Vous avez donc les dimensions en longueur x largeur en pixels et la taille en Ko Ensuite vous avez 2 possibilit s soit vous cr ez une image sur votre ordinateur avec les m mes dimensions soit vous r cup rez l image cliquez sur le nom du fichier dans le backend l image s affiche clic droit gt enregistrer l image sous pour la retravailler sur votre ordinateur page 3 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion 01 10 2009 ASSEMBLEE Astuce ne supprimez pas la photo existante avant de mettre la nouvelle mais crasez la par celle que vous souhaitez lui substituer Vous viterez ainsi les probl mes de dimension finale du bandeau non conforme ou de bandes de couleurs sur le cot s Copier limage Copier l adresse de l image Enregistrer l image sous Envoyer limage Choisir l image comme fond d cran Bloquer les images provenant de intranet cher c Une fois le travail effectu en local vous allez remp
25. qg tee boko Mix ANA lt H Or iwa one chante a40 p D Les pha vatis INTRANET LOCAL dev ai f ttmdimriOCAL E INTRANET A PHPNNALMOUSERNELR ppan 02a Borg Euaress JIT PLELICATION SNES OEV LU WEL Page draddapp D ssove D Codes 22 CSS 27 P em 0 aps P ri Oars 2 noure S Reimert e 2 OU bel or Saures D Ore Joo Siermerwe 1 Chambre d agrh me Marcos des Ponte jl EILE www cher chambag j Gad A sean Moshershbe Wesvames ta terme vess je senta sa nouvelio dquigue g Depuda rri ao t 29 de mu Biorvasrros la taime s orpaniss I aray fose moimebe dport i Muyee MOUDE SALOI Prestderie doreneee donetensantat Derwerrse o Le Perme di ire Syits RAMT AI Cosvnmdies e Pive tik atoi Aoma Bernet ba on baton o the Faye Chosskss Qo w OT bn Chamire PAyier lure duv esrt producteur d lerticit sobre ASE x nas Le or tes Hi dvnemsltem durewl stocou v ocbonre Directe Acobnres dvacobrne centake dccctares body miel uyw Appese DO dir cisrss t IAr i gt ad N ei gt m 7 2 Biblio feuille de style Il existe une multitude de ressources sur le web sur les feuilles de style htip www cssdebutant com htip www commentcamarche net contents css csssyntax php3 htto fr wikibooks org wiki Le langage CSS Structure et syntaxe htip oseox fr css syntaxe css himl 7 3 Logiciels de retouche d image Paint Net http www paint net
26. rl images internet botright_ titre rechercheavancee png bottom right no repeat padding 1px div roundedTitleRechercheAvancee div div div div background none 7 les blocs de contenu actualit s agenda bloc de contenu 7 1 le bloc Agenda page d accueil et les contenus flexibles de type bloc contenu Attention ces 2 l ments ont des feuilles de styles identiques le calendrier en mode liste ainsi que le contenu flexible de type bloc contenu Pour le modifier il faut agir sur deux l ments les images pour les arrondis et la feuille de style pour la couleur de fond du texte Pour la partie titre la partie sup rieure on a les 4 coins arrondis verts ainsi que la couleur de fond page 12 26 R dacteurs Mode d emploi Adaptation de la Charte Graphique du Kit de Publication E BRISSET C NOEL Date de diffusion D AGRICULTURE OT E 01 1 0 2009 S botleft_titre_blocContenu png botright_titre_HlocContenui png 3 topleft_titre_blocContenu png topright_titre_blocContenu png oundedTitle position relative margin 0 padding 0 div roundedTitle div div roundedTitle div div height 1 div roundedTitle div div div padding 5px div roundedTitle div div div div Pour la partie contenu de la m me fa on on a la couleur de fond ainsi que les 2 coins arrondis du bas du cadre background none roundedContent position relative marg
27. s bandeau logo etc sont plac es dans le r pertoire suivant fileadmin templates images Vous pouvez acc der ces dossiers depuis votre interface backend en mode admin menu fichier d veloppez fileadmin gt templates gt images page 1 26 R dacteurs E BRISSET C NOEL Date de diffusion 01 10 2009 Mode d emploi Adaptation de la Charte Graphique du Kit de Publication D AGRICULTURE ASS EA E We A Eh i filesdrmin fileadmini templatesiinmagesi E 7E F OITEMNP Page E Nom de fichier Type Date Ta lle RW R f ra i 3 docurnents x me tA voir Mi E acces 0z 09 09 RW PH E Liste i J extranet 21 10 08 RW Pae C3 autres _photos te L LDAP Syne o B icones 21 10 08 RW Po FADirectrnail me de I internet 20 07 09 RW Po Ed info he intranet 21 10 08 RW FH A Acc s l E ne ES newsletter 21 10 08 RW soo Jh Fonctions i A palette recherche 02 09 09 RW Poo 1 template news G sit inde Lu ne EM Gest de versions template recherche Re Template Otemelate rogooglemap M tectimgijpg JPG 21 10 06 3 4K RW FU L Ternplawoil template lt k_pagecomments Page Comments J template_sr feuser_ register Google Map Eqtemplate address PETER template _tx ssldappasswd VE Fichier O A testimgzjpg JPG 21 10 08 31K RW Poo H F templates cal i Fichiers templates newloginbox E s user_uplssd T TEAT videns cenre de T thaes Br Recharger l arborescence

Download Pdf Manuals

image

Related Search

Related Contents

ESM- 77x35 DIN Size Hatcher Controller 3722  Panasonic FV-GKF32S1 Sell Sheet  Olympia PS 14  - Siemens  Canon VB-M42  

Copyright © All rights reserved.
DMCA: DMCA_mwitty#outlook.com.