PapyClic - Design

Alain,

Pour choisir tes couleurs tu vas sur :
http://html-color-codes.info/Codes-couleur-HTML/

Tu copie #xxxxxx et tu colle à la place de :
Color pour le texte et background-color pour le fond de ta cellule.

Voici le mien :
/* Petite fenêtre à l'ouverture */
#infoModal{
width: 540px;
max-height: 800px;
}
#infoModal h2 {
text-decoration: none;
text-align: left;
border-bottom-style: none;
  color: #2986a8;
}
#infoModal h4 {
text-align: center;
  color: #df3f1d;
  font-size: 20px;
}
#infoModal .modal-header{
background-color: #f7f7f7 ;
height: 40px;
border-bottom: 2px groove #f7f7f7;
}
#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 #df3f1d;
-moz-box-shadow: 2px 4px 12px #df3f1d;
box-shadow: 2px 4px 12px #df3f1d;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}
#infoModal #bloc_message img.img-unique{
float: left;
max-width: 580px;
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 #f7f7f7;
-moz-box-shadow: 2px 4px 12px #f7f7f7;
box-shadow: 2px 4px 12px #f7f7f7;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}
#infoModal .modal-footer{
background-color: #f7f7f7;
border-top: 2px groove #000000;
}
#infoModal .modal-footer span{
font-size: 16px;
font-weight: bold;
font-style: italic;
margin-right: 10px;
 color: #2986a8;
}
#infoModal .btn-info{
background-color: #df3f1d ;
color: #fff;
}

:bye:

...
Attention si vous mettez le CSS dans le HTML de la page d'accueil, il faut mettre les balises HTML pour insérer le code voir mon message précédent.

@Philippe le texte avec image c'est uniquement avec un Avatar, je l'ai écrit dans l'article. Avec l'image plus grande Unique pas de texte. Ce message est censé être court, j'ai mis la possibilité de mettre une image plus grande pour ceux qui ne connaissent  pas le HTML et qui souhaite mettre une image qui contient le texte, c'est le cas de ton image.
Mais tu as la possibilité de pouvoir modifier la largeur de l'image Avatar dans la règle suivante >>> #infoModal #bloc_message img.img-avatar

@Alain  sur mon article je rajouterai comment mettre le CSS dans le HTML.

Je vais voir pour ton blog, je  réponds par mail.

:bye:

...
Bien vu l'astuce de la taille de l'avatar, c'est parfait, cela répond à ma question.

Par contre on a un problème sur les smartphones.

Pas au démarrage car il se positionne sur le forum, mais quand on clique sur accueil, en px, on ne voit qu'une partie.

J'ai essayé en % mais je n'y suis pas arrivé non plus.

Sinon au pire il faudra voir pour le désactiver sur les smartphones.

:bye:

...
Ok ! pour image plus grande avec texte en modifiant la taille de l'avatar.

Est-ce cela qui crée le problème pour smartphone ?

:bye:

Merci pour cet excellent géné qui répond parfaitement à mon attente.
Merci PPC et bravo.

:b1: Alain,

Merci à toi pour ton appréciation.

A demain, bonne nuit

Bonjour Pierre,

Je n'ai pas modifié la taille de l'avatar car pour cet exemple j'ai uniquement une image donc cela me convient.

Sur un smartphone on voit uniquement la partie gauche de l'image et un retrait à gauche des titres ce qui permet du coup d'avoir le bouton "fermer" pour l'enlever.

:bye:

Bonjour Pierre,

Petite surprise sur ma page d'accueil en mode gestion qui m'a occupée un moment avant que je ne comprenne que cela venait de la petite fenêtre.

J'ai un texte :



On ne peut pas modifier de "le guide" jusqu'à "c'est" car par dessus se trouve la petite fenêtre comme tu peux le voir avec les petits carrés:



La solution est donc de scroller la barre verticale de droite pour décaler le texte pour qu'il ne se trouve plus sous la petite fenêtre que l'on ne voit pas, mais qui est bien présente par dessus le texte et qui se trouve au centre, de manière à pouvoir écrire.
Je ne sais pas si c'est bien expliqué ?

:bye:

:bd: Philippe,

Pour la présentation sur le smartphone, il faut peut-être diminuer la largeur du bloc, en principe il doit se centrer même sur le smartphone ou il faut que je vois en faisant flotter  le bouton fermer à gauche dans le CSS.



Pour l'autre problème je ne comprends pas bien, le code de la fenêtre est à mettre tout à la fin du HTML et on ne doit pas la voir dans le composeur en mode texte, on voit uniquement le code en mode Html.

Comme tu as pu voir, l'article n'est plus en ligne, je l'ai remis en brouillon car j'ai une autre version avec en plus une technique pour tester la création de la fenêtre sur un article, faire une mise au point sans risque. Puis en plus un autre générateur pour créer le CSS complet.
J'espère le mettre en ligne dans l'après-midi.

:bye:

...

Je te laisse peaufiner.

Pour le mode gestion on ne la voit pas mais simplement les carrés de dimensionnement comme présenté et une main à la place de la barre de modification du texte.

:bye:

:b1:Philippe et Alain,

Ouf ! j'ai mis mon article en ligne, il y a du nouveau ... bonne découverte.

@Philippe je regarderai cette histoire dans ta gestion certainement que demain car j'ai les yeux qui commence à se fermer ... je verrai rien lol !

:bye: