PapyClic - Design

PapyClic - Design

Générateur de fenêtre d'accueil

MessageInfo.png

 

Cette fenêtre qui s'ouvre avant l'affichage de la page d'accueil, est à utiliser ponctuellement, pour garder son efficacité, c'est une annonce flash pour attirer l'attention du visiteur.

Attention !!! ce qui suit est prévu pour les blogs en RapidDesign ou en MasterDesign avec une base RapidDesign. Pour les autres modèles personnalisés, c'est à voir, il faudra peut-être quelques modifications ou revoir l'installation. Vous testez et si vous avez besoin d'aide, que vous êtes membres de mon blog, ouvrez un sujet dans la catégorie "Vos tests" sur mon forum ici.

Ce générateur vous aide à créer le code HTML et Javascript pour l'affichage d'une petite fenêtre avant l'affichage de la page d'accueil, le code généré sera à insérer dans le composeur de la page d'accueil en mode HTML.

Ensuite je joins une feuille de style modèle à insérer dans votre CSS personnalisé. Vous pourrez la modifier par la suite pour mettre les couleurs en harmonie avec le style de votre blog. En fin d'article vous avez un générateur de CSS. Egalement un article à voir "Questions - Réponses". Ce qui vous aidera à personnaliser cette fenêtre d'accueil.

Dans le premier générateur ci-dessous, vous indiquez le titre, le sous-titre et le texte du pied de bloc, l'adresse d'une image, soit comme un Avatar ou une image Unique plus grande, laquelle peut contenir le message.
Egalement le texte du message.
Les exemples de texte dans les champs, que vous voyez ne sont pas pris en compte, pour vous donner le choix de ne rien mettre. Seulement les champs renseignés s'afficheront.

 

 


GENERATEUR 

 

 ¤
  ¤
  ¤
 
 

 

 ¤ Pour ces champs voir la solution pour les caractères accentués >>> lien

 

L'image Avatar sera redimensionnée si elle fait plus de 100px de large et l'image Unique  plus de 600px, ces dimensions peuvent être modifiées dans le CSS.

Quand vous mettez une image Unique le texte ne sera pas pris en compte. Pour mettre image et texte, l'image doit-être Avatar, mais vous pouvez modifier le CSS pour supprimer le redimensionnement de l'image, mettre la largeur que vous voulez.

 

Si votre image est hébergée dans votre boîte à fichiers et que votre gestion est ouverte, cliquez ici pour copier l'adresse

 

Zone pour mettre le texte du message soit en texte brut, soit en HTML.

 

Ci-dessous un exemple de texte en HTML que vous pouvez copier et coller dans la zone ci-dessus.

 

<p>Texte <strong>exempple</strong> du message, que vous pouvez modifier et même <font color=#0000CC>formater</font>, si vous connaissez le HTML.<br />Mais vous pouvez taper votre texte dans un nouvel article que vous laissez en brouillon. </p>
<p>Puis vous copiez le code dans le composeur en mode <b>HTML</b> et vous le collez dans la zone ci-dessus.</p>

 

 

 

 

Le code généré ci-dessus est à copier et à mettre à la fin de votre page d'accueil en mode HTML

 HTMLaccueil.jpg

 

 

 

 

Vous pouvez également mettre le CSS au début du HTML de la page d'accueil, avec les balises HTML(en rouge ci-dessous) pour l'insérer. Vous pouvez copier mon modèle ci-dessous.

 

Image qui vous aidera pour modifier le CSS du modèle. 

blocAccueil.jpg

 

CSS de mon modèle

Il peut vous servir de guide pour personnaliser votre fenêtre d'accueil. 

 

Pour le voir en détail, consultez le "Questions & Réponses" : ICI  vous y trouverez peut-être votre réponse. Ce QR s'ouvre dans un nouvel onglet ou nouvelle fenêtre. Ainsi vous l'aurez sous la main pendant que vous travaillerez sur votre fenêtre d'accueil. Je pense qu'il sera mis à jour en fonction des questions que l'on me posera et des mises à jour de l'article en lui même.

<style type="text/css">
<!--

#infoModal{
background-color: #663300;
width: 500px;
max-height: 800px;
padding: 10px;
border : 3px inset #F7EF74;
/* coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

#infoModal .modal-header{
background-color : #99FFCC;
height: 40px;
border-bottom: 2px groove #FFFFFF;
padding: 5px;
}

#infoModal .modal-header h2{
background-color : #FFFFFF;
color : #044711;
width : 250px;
margin: 0 auto;
padding: 0;
font-family : Garamond;
font-size : 30px;
text-align : center;
text-decoration : none;
text-variant : small-caps !important;
border : 3px outset #000000;
/* bordures ombres */
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}

#infoModal .modal-body{
background-image: url('https://static.blog4ever.com/2012/06/704535/artfichier_704535_3634042_201404112431355.jpg');
background-repeat: repeat;
}

#infoModal h4{
background-color : #99FFCC;
color : #044711;
padding: 3px 15px;
text-align : left;
font-size: 20px;
font-style : italic;
font-variant : small-caps;
/* coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
/* bordures ombres */
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}

#infoModal #bloc_message{
background-color : #FFF2DE;
color : #521412;
padding: 10px;
font-family : Arial;
font-size : 12px;
font-style : normal;
text-align : left;
/* coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
/* bordures ombres */
-webkit-box-shadow:inset 2px 4px 12px #666;
-moz-box-shadow: inset 2px 4px 12px #666;
box-shadow: inset 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}

#infoModal #bloc_message img.img-avatar{
float: left;
width: 100px;
margin: 10px 20px 20px 10px;
/* coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
/* bordures ombres */
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}

#infoModal #bloc_message img.img-unique{
float: center;
max-width: 600px;
margin: 20px auto;
display: block;
/* coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
/* bordures ombres */
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}

#infoModal .modal-footer{
background-color: #99FFCC;
height: 20px;
padding-top: 10px;
border-top: 2px groove #000000;
text-align: right;
}

#infoModal .modal-footer span{
color: #044711;
font-size: 16px;
font-weight: bold;
font-style: italic;
}

#infoModal .modal-footer button{
background-color: #044711;
color: #FFFFFF;
margin-left: 20px;
margin-right: 20px;
/* bordures ombres */
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}
-->
</style>

 

 

Ci-dessus le CSS de mon modèle, si vous le copiez, pour l'insérer dans votre CSS personnalisé, il ne faut pas mettre les balises HTML (en rouge).

 

 

CSSperso.jpg

 

 

J'ai fait cet article pour la page d'accueil, mais vous pouvez également mettre dans le HTML d'un article, le code CSS avec les balises, c'est à dire le deuxième ci-dessus. Puis vous mettez également le code HTML, généré par le générateur plus haut.

 

Si la gestion de votre blog est ouverte cliquez sur le lien suivant >>>  lien  pour créer un nouvel article, que vous nommez, par exemple  "Test fenêtre accueil" et vous collez les codes comme je viens de vous l'indiquer. Enregistrez cet article comme brouillon, visionnez-le sur votre bloc pour voir le résultat.
De cette façon vous voyez immédiatement le résultat, vous pouvez corriger les codes dans le générateur, puis vous recommenez la même opération, l'article que vous avez créé est normalement dans un onglet pour le modifier.

 

 

https://static.blog4ever.com/2012/06/704535/artfichier_431181_220581_201103130534713.gif

Quelques captures pour vous montrer comment à insérer les codes dans le composeur d'article en mode HTML, cliquez sur l'icône ci-contre.

 


 

Pour les perfectionnistes initiés, j'ai créé un générateur de code CSS, pour  créer les règles, cliquez sur le bouton ci-dessous.

Générateur des règles

 

 


 

Si vous avez des questions au sujet de la personnalisation ou de l'installation de cette fenêtre, posez les questions dans les commentaires  de cet article ou dans mon forum.

 

Si cet article vous a été utile, un petit J'aime me fera plaisir.

N'hésitez pas un mettre un commentaire, si vous avez apprécié cet article, mais également si vous n'êtes pas pleinement satisfait. Pour plus d'explications poster sur le forum

 

 

HautPrécédente

 



23/08/2015
13 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 153 autres membres