PapyClic - Design

PapyClic - Design


12 appréciations
Hors-ligne
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;
}

Fluctuat Nec Mergitur

67 appréciations
Hors-ligne
...
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.



12 appréciations
Hors-ligne
...
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.

Fluctuat Nec Mergitur

67 appréciations
Hors-ligne
...
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 ?


3 appréciations
Hors-ligne
Merci pour cet excellent géné qui répond parfaitement à mon attente.
Merci PPC et bravo.

67 appréciations
Hors-ligne
Alain,

Merci à toi pour ton appréciation.

A demain, bonne nuit

12 appréciations
Hors-ligne
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.


Fluctuat Nec Mergitur

12 appréciations
Hors-ligne
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é ?

Fluctuat Nec Mergitur

67 appréciations
Hors-ligne
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.

#infoModal .btn-info{
float: left;
background-color: #0089FF;
color: #CCFFFF;
}


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.




12 appréciations
Hors-ligne
...

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.


Fluctuat Nec Mergitur

0 appréciations
Hors-ligne
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 !

Pierre



Répondre
Pseudo :
Adresse e-mail:


Se souvenir de mes infos ( pseudo et e-mail ) :
Cochez la case ci-contre :

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 159 autres membres