/* Tous les fichiers du répertoire CSS du tmpl qui commencent par _ sont des fichiers css qu'on peut modifier usuellement La même procédure de travail s'applique à ces fichiers, que l'on travaille sur _template.css ou _composants.css 1- Il est impératif de prendre une copie de l'original avant de commencer à travailler 2- On ne peut pas travailler plusieurs en même temps sur un même fichier Il reste donc les 4 principaux fichiers de travail _composants.css, _habillage.css, _menus.css et _template.css Voici les fichiers de travail: bootstrap.css : chrome.css : contient le code juste pour chrome si nécessaire connection.css : contient le css des modules login, profile, signup, accès, connection default.css : contient les valeurs par défaut des h1 input textearea printicon html etc... fabrik.css : contient le css pour paramétrer les listes et les forms de fabrik sauf ce qui est dans _connection fonts.css : contient toutes les lignes css pour charger les fonts disponibles largeur.css : contient les largeurs de zones mobile.css : contient le css par défaut pour le responsive mozilla.css : contient le code juste pour mozilla si nécessaire responsive : contient le css pour paramétrer le responsive _composants.css : contient le css des modules blog, portefolio, et les autres petits composants _habillage : contient les balises d'habillage de texte et d'images _menus : contient les balises de tous les menus _template : contient les zones dans l'ordre d'apparition Fonts disponibles CHOIX DE FONTS 1- choisir les fonts, faire un copie coller du font-family et du nom de la font 2- l'écrire dans le html par défaut ci-dessous juste après ces commentaires 3- l'écrire à dans chaque module désiré FICHIERS DE FONTS 4- prendre une copie du répertoire de la font dans les extensions répertoire fonts 5- mettre cette copie dans le répertoire fonts du site. geosans ******************************* font-family: 'geosanslightregular'; font-family: 'geosanslightmedium_italic'; good-times ******************************* font-family: 'good_timesregular'; lato ******************************* font-family: 'latoblack'; font-family: 'latobold'; font-family: 'latolight'; font-family: 'latomedium'; font-family: 'latoregular'; font-family: 'latosemibold'; lmr *************************** font-family: 'latin_modern_roman10_bold'; font-family: 'latin_modern_roman10BdIt'; font-family: 'latin_modern_roman_caps10Ob'; font-family: 'latin_modern_roman_caps10Rg'; font-family: 'latin_modern_roman_demi10Ob'; font-family: 'latin_modern_roman_demi10Rg'; font-family: 'latin_modern_roman_dunhil10Ob'; font-family: 'latin_modern_roman_dunhil10Rg'; font-family: 'latin_modern_roman10_italic'; font-family: 'latin_modern_roman10_regular'; font-family: 'latin_modern_roman_slante10Bd'; font-family: 'latin_modern_roman_slante10Rg'; montserrat ******************************* font-family: 'montserratblack'; font-family: 'montserratbold'; font-family: 'montserrathairline'; font-family: 'montserratlight'; font-family: 'montserratregular'; muli ******************************* font-family: 'mulibold'; font-family: 'mulibolditalic'; font-family: 'muliextralight'; font-family: 'muliextralightitalic'; font-family: 'muliregularitalic'; font-family: 'mulilight'; font-family: 'mulilightitalic'; font-family: 'muliregular'; font-family: 'mulisemibold'; font-family: 'mulisemibolditalic'; opensans ******************************* font-family: 'open_sansregular'; font-family: 'open_sansbold'; font-family: 'open_sansbold_italic'; font-family: 'open_sansextrabold'; font-family: 'open_sansitalic'; font-family: 'open_sanslight'; font-family: 'open_sanslight_italic'; font-family: 'open_sanssemibold'; font-family: 'open_sanssemibold_italic'; roboto ******************************* font-family: 'robotoblack'; font-family: 'robotoblack_italic'; font-family: 'robotobold'; font-family: 'robotobold_italic'; font-family: 'roboto_condensedbold'; font-family: 'roboto_condensedbold_italic'; font-family: 'roboto_condenseditalic'; font-family: 'roboto_condensedlight'; font-family: 'roboto_condensedlight_italic'; font-family: 'roboto_condensedregular'; font-family: 'robotoitalic'; font-family: 'robotolight'; font-family: 'robotolight_italic'; font-family: 'robotomedium'; font-family: 'robotomedium_italic'; font-family: 'robotoregular'; font-family: 'robotothin'; font-family: 'robotothin_italic'; signika ******************************* font-family: 'signikabold'; font-family: 'signikalight'; font-family: 'signikaregular'; font-family: 'signikasemibold'; /* nouvelle font? *******************************/ /*********************************** l'ordre d'apparition des zones correspond à la maquette des zones ************************/ /************************************************** ZONES *****************************************/ /* zonew wrapper contenant toute la zone zonea première zone dans le wrapper de zone zonei wrapper intégrant contenant toutes les zones numérotés zone1 zone2 zone3 zone4 zone5 zone6 zone1 à 6 zones intégrées dans zonei zonez dernière zone dans le wrapper de zone zonew --------------------------------------------------------------------------------------------------... ------------------------------------- zonea -------------------------------------- ! ! !________________________________________________________________________________! zonei --------------------------------------------------------------------------- ! zone1 zone2 zone3 zone4 zone5 zone6 ! ! ! ! ! ! ! ! !______________!____________!____________!_____________!____________!____________! !________________________________________________________________________________! ------------------------------------- zonez -------------------------------------- ! ! !________________________________________________________________________________! _________________________________________________________________________________________________________... ****************************************************************************************************************************************/ /********** ************************************* mettre la font par défaut ici ********************************************/ body { font-family: 'Calibri-Light'; } /* il y a des copies responsive de certains modules*/ /* ces copies sont hidden par défaut et ne s'affichent seulement*/ /* lorsque les modules se mettent l'un sous l'autre en écran mobile à 765px */ /* les versions original sont alors cachées et les copies s'affichent*/ /* Pour utiliser ce truc, faites une copie du module original Dans la copie, insérer le mot responsive dans le titre Dans les paramètres de la copie responsive, ajouter la class css [espace]copie-responsive Dans les paramètres de son original, ajouter la class css [espace]original */ div.moduletable /* ne mettre que ce qui s'applique globalement seulement */ { } div.moduletable.copie-responsive/*un module qui s'affiche dans le responsive mais caché par défaut*/ { display: none; } /************************* toutes les zones dans leur ordre d'apparition **************************************/ /* la lettre devant le numéro sert uniquement à éviter le mot réservé: #numéro le numéro devant la zone nous permet de voir les modules en ordre d'apparition le nom dans la zone nous permet de référer à sa position en tant qu'organe du corps humain le chiffre en fin de zone nous permet d'aligner jusau'à 6 positions responsive sur une même ligne en général, il faut éviter de référer à un composant par son id de position dans les autres fichiers css il n'y a que dans template.css mobile.css et responsive.css qu'on réfère aux positions par leur id */ #a10plumew { } #a10plume { } /* pour obtenir une ligne tout en haut du site */ /* #a10plumew { height: 10px !important; background: linear-gradient( #37342A, rgba(255,255,255,0.0) ); } #a10plume { visibility: hidden; max-height: 0px !important; } */ #a20chapeauw { } #a20chapeaua { } #a20chapeaui { } #a20chapeau1 { } #a20chapeau2 { } #a20chapeau3 { } #a20chapeau4 { } #a20chapeau5 { } #a20chapeau6 { } #a20chapeauz { } /* pour obtenir un logo en dehors du menu */ /* .logo { position: relative; top: 10px; z-index: 99997; } .logo img { } */ #a30tetew { } #a30tetea { } #a30tetei { } #a30tete1 { } #a30tete2 { } #a30tete3 { } #a30tete4 { } #a30tete5 { } #a30tete6 { } #a30tetez { } #a40collierw { } /* pour obtenir une ligne ombragée dans collier sous le menu avant le slider */ /* #a40collier { background: linear-gradient( #504f51, rgba(255,255,255,0.0) ); min-height: 0.5rem; max-height: 0.5rem; line-height: 0.3rem; display: inline !important; overflow: visible; width: 100% !important; position: fixed; z-index: 9999; top: 6rem; } */ #a40colliera { } #a40collieri { } #a40collier1 { } #a40collier2 { } #a40collier3 { } #a40collier4 { } #a40collier5 { } #a40collier6 { } #a40collierz { } #a50couw { } #a50coua { } #a50coui { } #a50cou1 { } #a50cou2 { } #a50cou3 { } #a50cou4 { } #a50cou5 { } #a50cou6 { } #a50couz { } #a60menuw { box-shadow: 0 3px 5px -2px rgba(57, 63, 72, 0.3); } #a60menua { } #a60menui { } #a060menu1 { } #a60menu2 { } #a60menu3 { } #a60menu4 { } #a60menu5 { } #a60menu6 { } #a60menuz { } #a70bijouw { } #a70bijou { } #a80sliderw { } #a80slider { } #a80slider div.moduletable /*par défaut, tous les moduletable ont un padding de 1rem sauf le slider*/ { padding: 0px !important; position: relative; } #a85chemisew { } #a85chemisea { } #a85chemisei { } #a85chemise1 { } #a85chemise2 { } #a85chemise3 { } #a85chemise4 { } #a85chemise5 { } #a85chemise6 { } #a85chemisez { } #a90brasw { background-color: #BAB9B8; } #a90brasa { } #a90brasi { } #a90bras1 { } #a90bras2 { } #a90bras3 { } #a90bras4 { } #a90bras5 { } #a90bras6 { } #a90brasz { } #b00avantw { } #b00avanta { } #b00avanti { } #b00avant1 { } #b00avant2 { } #b00avant3 { } #b00avant4 { } #b00avant5 { } #b00avant6 { } #b00avantz { } #b10vestew { } #b10vestea { } #b10vestei { } #b10veste1 { } #b10veste2 { } #b10veste3 { } #b10veste4 { } #b10veste5 { } #b10veste6 { } #b10vestez { } #b15mainw { } #b15maina { } #b15maini { } #b15main1 { } #b15main2 { } #b15main3 { } #b15main4 { } #b15main5 { } #b15main6 { } #b15mainz { } #wrapper /* attention, n'y mettre que les valeurs par défaut */ { padding: 1rem; } #maincontent { } #centertop { } #center { } #right { } #centerbottom { } #b16hanchew { } #b16hanchea { } #b16hanchei { } #b16hanche1 { } #b16hanche2 { } #b16hanche3 { } #b16hanche4 { } #b16hanche5 { } #b16hanche6 { } #b16hanchez { } #b20jupew { } #b20jupea { } #b20jupei { } #b20jupe1 { } #b20jupe2 { } #b20jupe3 { } #b20jupe4 { } #b20jupe5 { } #b20jupe6 { } #b20jupez { } #b30apresw { } #b30apresa { } #b30apresi { } #b30apres1 { } #b30apres2 { } #b30apres3 { } #b30apres4 { } #b30apres5 { } #b30apres6 { } #b30apresz { } #b35juponw { } #b35jupona { } #b35juponi { } #b35jupon1 { } #b35jupon2 { } #b35jupon3 { } #b35jupon4 { } #b35jupon5 { } #b35jupon6 { } #b35juponz { } #b40jambew { } #b40jambea { } #b40jambei { } #b40jambe1 { } #b40jambe2 { } #b40jambe3 { } #b40jambe4 { } #b40jambe5 { } #b40jambe6 { } #b40jambez { } #b50chaussettew { } #b50chaussettei { } #b50chaussettea { } #b50chaussette1 { } #b50chaussette2 { } #b50chaussette3 { } #b50chaussette4 { } #b50chaussette5 { } #b50chaussette6 { } #b50chaussettez { } #b60piedw { } #b60pieda { } #b60piedi { } #b60pied1 { } #b60pied2 { } #b60pied3 { } #b60pied4 { } #b60pied5 { } #b60pied6 { } #b60piedz { } #b70soulierw { } #b70soulieri { } #b70souliera { } #b70soulier1 { } #b70soulier2 { } #b70soulier3 { } #b70soulier4 { } #b70soulier5 { } #b70soulier6 { } #b70soulierz { } #b80contactw { } #b80contacta { } #b80contacti { } #b80contact1 { } #b80contact2 { } #b80contact3 { } #b80contact4 { } #b80contact5 { } #b80contact6 { } #b80contactz { } #b90adressew { background-color: #022D54; margin-top: 4rem; } #b90adressea { } #b90adressei { } #b90adresse1 { } #b90adresse2 { } #b90adresse3 { } #b90adresse4 { } #b90adresse5 { } #b90adresse6 { } #b90adressez { } #c00legalw { background-color: #022D54; /*background: linear-gradient( #F3F3F3, rgba(255,255,255,0.0) );*/ /*background: #ffffff;*/ color: white; padding: 1rem; border-top: 1px solid white; font-size: 1.6rem; } #c00legal { } #c00legal a { color: white; } #c00legal a:hover /*pour faire une boite background*/ { /*color: #000000; background: #ffffff; padding: 5px 5px 5px 5px;*/ color: #707070; }