/* */

Patrice FORESTI Formateur Consultant indépendant

Shortcodes

Ceci est un titre 1

Ceci est un titre 2

Ceci est un titre 3

Ceci est un texte

Couleurs et polices

Voir les couleurs utilisées :

Header

Background-color : #272b34

Couleur de la typo du logo : #b3b2b2


Menu : #56aab3

Menu en hover : #488d93

"Footer top" (espace au dessus du footer) : #56aab3

"Content teaser" (cadre dans cet espace) : #488d93

Footer : #272b34


Titres et textes : #333333

Titres et textes dans le menu + footer + cadre au dessus du footer : #ffffff (blanc)

Police titres : 'Montserrat', sans-serif

Police textes : 15px/150% Helvetica, Arial, sans-serif


Séparations : #cccccc


Boutons

Background-color : #55a9b2

Hover : #232628

Padding : 15px 55px ou 10px 40px

Transition: all .3s ease

Taille des images

/!\ Taille maximale des fichiers et images à importer : 512Kb

=> possibilité d'héberger l'image en ligne ailleurs (ex : flickr, 500 pixels) pour contourner cette restriction et avoir un fichier plus lourd et de meilleure qualité

Voir les tailles/proportions des images utilisées :

Général

Logo : 180x58px

Parallaxe : 1920x1000px


Accueil

Slider : 1750x625px => rogner l'image avant de réduire le nombre de pixels, pour conserver une image aussi nette que possible

Images colonnes présentation : 980x440px


Portfolio

Présentation : 1000x666px

Slider : 950x330px -> photo à mettre sur "Photos à héberger" puis copier/coller l'URL dans le widget html du slider


Références

Image du haut : 950x170px

Logos : 200x200px


A propos

Photo : ...x...px

Logo mediart360 : ...x...px

Changer des éléments dans le code

Voir le tableau

Elément

A changer

Html/Css

Ligne

Images (dans le code)

3 méthodes (dans "design perso") :

  • fichier, télécharger la nouvelle image, enregistrer, puis remplacer dans le code "image.jpg" par le nom de la nouvelle image
  • fichier, télécharger la nouvelle image, enregistrer, supprimer la ligne "<img src="slide1.jpg" alt="" />" + "insérer une image" à cet endroit
  • fichier, télécharger une image avec le même nom que celle à remplacer, enregistrer, puis supprimer l'ancienne
   
Logo header

<div id="hs-logo">

<a href="/"><img src="logo.png" alt="" /></a>

Html 11
Titre header

Titre (html l.16):

<div class="info">

<h1>Changer le titre</h1>

 

Couleur (css l.134):

.info h1{

 color: #56AAB3;

}

Html et css 16

Icons header

(mail & réseaux sociaux)

Css (l.1649 à 1773) :

Chercher le nom de la "class" 

ex : ul.social-icons .xing:hover{

...}

 

Html (à partir de l.39):

Rajouter (à la place choisie) :

<li class="nom de la class (sans le ".")"> <a href="lien">Nom du réseau social</a> </li>

 

Changer la couleur de hover d'une icone (css, l.1649 à 1773):

ul.social-icons .icone choisie:hover {

 background-color: #005a5f;

}

 Html + Css  
Slider (accueil)

<img src="slide1.jpg" alt="" />

Idem pour les autres images "slide2" et "slide3"

+ possibilité d'en rajouter d'autres


Couleur de contour du texte :

Html: < span class="texteslide">Texte texte texte < /span> (sans les espaces entre "<" et "span")

Css : .texteslide{

text-shadow:0 0 3px #000000;

}

 Html  97
Image et hauteur parallaxe

Image

#hs-footer-top {

background: url(parallax.jpg OU http://lien_de_l'image.com) 100% 0 no-repeat fixed;

...}


Hauteur

#hs-footer-top {

height: 200px;

...}

 Css  310
Texte du parallaxe

<div class="hs-gutter">

<h1> Mon texte </h1>


Couleur de contour du texte : dans le css (pour supprimer le contour, effacer ces ligne)

#texteparallaxe{

text-shadow:0 0 3px #000000;

}

Html 159
Bouton slider (accueil) + parallaxe

Contenu (l.99 pour le slider, l.160 pour le parallaxe):

 : <a href="mon lien" class="readmore animated fadeInUp">Texte du bouton</a>

 

Normal :

a.readmore {

background: #56AAB3;

...}

 

Hover :

#hs-content input[type=submit]:hover,#btm-container input[type=submit]:hover,#hs-footer input[type=submit]:hover,#hs-container a.blogreadmore:hover,#hs-container .hs-button:hover,a.readmore:hover {

background:#232628;}

Css

950

945 (hover)

Espace au dessus du footer

(top footer)

 #btm-container {

width:100%;

...}

 Css  342

Content Teaser :

cadre dans l'espace au dessus du footer

#btm-container .content-teaser {

width: auto;

...}

 Css  1230
 Bouton du content teaser

Normal :

#btm-container .hs-button{

 background: none;

...}

 

Hover :

#btm-container .hs-button:hover{

 background: #303336;

...}

 Css  1240
Footer

Police : (l.39)

#hs-footer h1,#hs-footer h2,#hs-footer h3 {

font-family: 'Montserrat', sans-serif;

...}

 

Traits/séparations : (l.44)

border-bottom:2px solid #56AAB3;

 

Autre :

#hs-footer {

width: 100%;

...}

 Css  360

Remettre la zone éditable du "footer top"

Si on supprime la zone qui permet d'éditer le footer top avec Jimdo :
"So in order:
- You add content teaser widget here using the text module ( the code should be placed inside HTML tab)
- Take its ID and add to the top of HTML where you haver the js part and in CSS ( see the screenshots of documentation page)
In Hafen theme you don't have create a hidden page Matrix because the layout has fullwidth content  area"
 
Voir le tuto  (mdp : pca26cc4209b81)

Exemples de shortcodes

Ajouter une icon "réseaux sociaux" dans le header :

 

All you have to do is upload an image to your website and add your social network to CSS as shown above :

ul.social-icons li.example a {

background: url(example.png)center center no-repeat;

}

ul.social-icons .example:hover {

background-color: #1b61b0;

}

 

+ ajouter dans le html :

<li class="example">

<a href="https:500px.com/patrice-foresti-mediart360" target="_blank">example</a>

</li>

Boutons : 

Bouton de gauche
Bouton de droite
Titre qui arrive par la droite (réactualiser la page pour voir l'effet) :

This is your Heading

Slider avec effet "fade" :

  • Texte slide 1

  • Texte slide 2

  • Texte slide 3

Content teaser (bleu par transparence s'il est mis dans le "footer top") :

 

1ere ligne de titre h2

2° ligne de titre H2

Texte

Texte du bouton

 

Colonnes :

Cliquer sur l'image : ouvre une vidéo youtube (type lightbox)

Open YouTube video

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

Cliquer sur l'image : ouvre une vidéo vimeo (type lightbox)

Open Vimeo video

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

Cliquer sur l'image : ouvre une google maps (type lightbox)

Open Google Map

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website


Boutons "tags" :
Jimdo Matrix Design Responsive jQuery Milano templates business
Jimdo Matrix Design Responsive jQuery Milano templates business
Liste déroulante :
Texte toujours visible : titre de la liste déroulante

Texte qui s'ouvre quand on clique sur le "+" : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt est turpis, sed molestie massa lacinia sed. Phasellus laoreet dolor vel nisi iaculis, sed fermentum massa ornare.

Listes (avec liens) :


Images avec sous titres :

Sous-titre
Sous-titre
Sous-titre
Sous-titre

Image : hover qui affiche une autre image

=> mettre les images sur la page "Photos à héberger" (à la taille souhaitée), puis copier/coller l'URL des images dans le code ci-dessous :

Tabs : 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

google-site-verification: google53a6056c7e71edb0.html