Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
Bienvenue dans le monde réel...
28 septembre 2007

IMAGE DE FOND POUR LE CALENDRIER

Vous n'osez pas vous lancer dans un relooking total de votre calendrier et je veux bien le comprendre...
Lorsqu'on débarque dans le monde rée...il vaut mieux mieux se faire la main sur plus simple avant.

"Chaque chose en son temps" comme on dit...

Alors je vous propose une alternative...une image fixe ou animée en fond pour votre calendrier.

Sur cet exemple, l'image est fixe, mais si vous mettez un gif (une image animée), les bulles défileront.

Calendrier

Rien de bien sorcier je vous assure...

1.Ouvrez votre feuille de style

2.Descendez sur le bloc  #calendar

3.Ajoutez la ligne suivante en bas du bloc :

background-image: url("Adresse de votre image");

Comme ceci :

#calendar {
    font-family: Georgia;
    color: #000000;
    font-size: small;
    line-height: 150%;
    padding: 0px;
    margin-bottom: 0px;
    background-image: url("https://storage.canalblog.com/66/66/255038/17491685.gif");
}

et validez.

Vous devez choisir une image de la même taille que l'affichage de votre calendrier (180X180) à peu près, car si l'image est trop petite, elle va se répéter et si elle est trop grande, elle sera coupée.

2 beaux exemples ici avec une image fixe et avec une image animée !

Une fois que vous aurez mis votre fond, il y a de grande chance pour que vos chiffres soient moins visibles, forcement en fonction de la couleur de votre image, ça peut faire un ton sur ton...

Pas de panique, retournez dans votre feuille de style et redescendez sur les blocs de votre calendrier :

#calendar {
    font-family: Georgia;
    color: #FFFFFF;
    font-size: small;
    line-height: 150%;
    padding: 0px;
    margin-bottom: 0px;
    background-image: url("https://storage.canalblog.com/66/66/255038/17491685.gif");
}
#calendar table {
    width: 100%;
    padding: 2px;
    border-collapse: collapse;
    border: 0px;
}
#calendar caption {
    font-family: Georgia;
    color: #FFFFFF;
    font-size: small;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    padding: 3px;
}
#calendar th {
    font-weight: normal;
    text-align: center;
}
#calendar td {
    text-align: center;
}

Pour changer la couleur des chiffres et du titre, modifier les codes couleurs #FFFFFF
Si votre fond est noir, choisissez les chiffres blancs par exemple...

#calendar : pour les chiffres

#calendar caption : pour le titre (le mois du calendrier)

Publicité
Publicité
Commentaires
D
Salut,<br /> <br /> Je ne sais pas, il y a tout un tas de truc dans ta feuille de style, qui n'ont rien à faire là...<br /> <br /> Les codes pour le calendrier sont ok, je les ai remplacé pas les miens et le calendrier et toujours coupé.<br /> Tu as du coller un script au mauvais endroit quelque part...<br /> <br /> envoies moi tes identifiants pas mail, je regarderai ça demain.
N
J'aurais voulu savoir comment faire pour réduire la police du calendrier car je ne l'ai pas en entier. Dans feuille de style "calendar" j'ai mi font-size: 2px; mais ça ne change rien. Pourrais tu me dire comment faut faire. Avec mes remerciements
N
J'aurais voulu réduire la police de mon calendrier et j'arrive pas a trouver je vais continuer a chercher mais si tu pouvais me venir en aide !<br /> Avec mes remerciement
L
Re coucou !<br /> <br /> Voilà où se trouve toujours mes erreurs. Voici l'adresse de ton image pour le calendrier :<br /> <br /> background-image: url(":url:storage.canalblog.com/66/66/255038/17491685.gif");<br /> <br /> <br /> Et voici le résultat de la mienne via la page messages :<br /> <br /> &lt;p style="text-align: left;"&gt;&lt;img height="180" border="0" width="180" alt="Danseuse_pour_calendrier_fo" src=":url:storage.canalblog.com/29/00/523606/31586394.gif" /&gt;&lt;/p&gt;<br /> <br /> Alors dans ce cas, je peux rectifier car ce n'est pas compliqué et c'est ce que j'ai fait mais dès qu'il y a des liens.... Je ne m'y retrouve pas car je ne connais pas le langage. C'est ça qui me manque : le langage.<br /> <br /> Peut être que je fais une fausse manip pour avoir toujours des choses différentes. Est-ce que d'autres personnes sont dans mon cas ? C'est certainement pour cette raison que je ne m'en sors pas avec "DEEZER" et les "Smileys"<br /> <br /> J'en profite pour demander s' il existe une possibilité de modifier la couleur d'un lien spécifique. Car quand je mets une couleur de lien, tous les liens prennent cette même couleur. J'aimerai si c'est possible nuancer certains liens.<br /> <br /> Merci pour réponse et de votre aide. @ +
M
je viens souvent chercher des infos car je suis une cyber quiche mais alors je suis une triple quiche car j'arrive pas du tout à mettre la photo sous la calendrier !!!!!!!<br /> <br /> mais je suis têtue je vais y arriver enfin j'espère lol<br /> merci pour ton site super clair net et précis
Publicité
Publicité