Accueil »wiki »Modification_du_calendrier_du_blog

Modification du calendrier du blog

Les Pages Thématiques
Infos installationLe 'Bac à sable'

Les prérequis, les hébergeurs testés, un tutoriel d'installation, le glossaire, l'installation d'un style, ...

image  Les Modules

Présentation des modules et tutoriel de duplication

image  Les Blocs

Listing des blocs par défaut, tutoriel d'ajout de bloc dans un modèle, informations pour les futurs codeurs, ...

image  Les Astuces

Créer un message d'erreur personnalisé, ne plus recevoir d'email de notification, ...

image  PHP5

Les astuces pour passer de PHP4 à PHP5 selon les hébergeurs spécifiés

image  Le Graphisme

Modification de la bannière, du calendrier du blog, menu de navigation à la verticale, les switchs, imposer un thème à un module, ajout d'une image dans le message d'alerte,  ajouter une image sur la barre de navigation, ...

image  Le WYSIWYG

Ajouter des titres de format, présentation de qqs outils, ajouter une image depuis votre pc, ajouter un bbcode, ...

image  La Gestion

Comment activer un membre, gérer les permissions, créer un groupe coloré, attribuer des droits de modération, tous les outils pour gérer vos membres...

image  Le Coin des developpeurs

Le système de cache, la structure des fichiers, le fonctionnement des modules, le système de templates/thèmes/styles, ...
Soutenir Malleo
Pour faire un don

Participer à l'hébergement de mon site
Partenaires
Il était une petite main...
Malleo :: le CMS qui fait blog, forum, wiki, pages web
RSS Image
Combattez les SPAMS
Pour modifier les couleurs du bloc calendrier à coté des news

En modifiant votre thème il se peut que les couleurs bleutées du thème de départ (BlueLight) ne conviennent pas avec l'ensemble de votre nouveau style.

data/images/blog.png
Il vous est possible de modifier les couleurs

Ouvrir style.css
 
Chercher
 Déplier
  1.  
  2. /* date news */
  3. div.DatePost{ 
  4.  font-size:85%; 
  5.  color:#ffffff; 
  6.  text-align:center; 
  7.  border: 1px solid #8cadda; 
  8. }
  9. .jour { width:100%; background:#bcd3f2; }
  10. .mois { width:100%; background:#9db7da; font-weight:bold; }
  11. .annee { width:100%; background:#7a97be; font-weight:bold; }
  • Pour modifier la couleur du texte qui est blanc dans l'exemple 
    Il suffit de changer #ffffff par le code couleur de votre choix #c0c0c0 (par exemple)
    Vous trouverez facilement les codes hexadecimal sur le net     ICI ou ICI
  • Pour modifier l'emplacement du texte qui est centré sur l'exemple text-align:center;  
    Il suffit de modifier center par right (pour aligner à droite) ou left (pour aligner à gauche)
    Exemple : text-align:right;
  • Pour modifier l'encadrement fin
    Il suffit de modifier border: 1px solid #8cadda;
    1px est l'épaisseur du trait
    solid signifie que le trait est continu
    #8cadda : est le code de couleur de l'encadrement
     
    Il suffit de modifier ces différentes valeurs pour modifier l'apparence
    Par exemple:
     Déplier
    1. border: 2px solid #ff0000;

En suivant les exemples de modif vous obtenez pour le moment par exemple:
data/images/blog2.png
 
L'exemple est très moche ... les couleurs ont été choisies pour mieux ressortir dans l'exemple je souris 
 
Pour modifier la couleur de fond

Il reste la partie 
 Déplier
  1.  
  2. .jour { width:100%; background:#bcd3f2; }
  3. .mois { width:100%; background:#9db7da; font-weight:bold; }
  4. .annee { width:100%; background:#7a97be; font-weight:bold; }

 
Chaque ligne indique la zone où le jour est noté (11 dans l'exemple) , la taille du bloc coloré (100%), la couleur de fond
Le texte peut aussi avoir des caractéristiques comme être en gras ( bold)
 
En modifiant les codes couleurs vous pourrez peut-être mieux intégrer le cadre à votre thème.
AVANT:

data/images/blog.png
 
APRES:
data/images/blog3.png
 
je souris Voilà pour l'essentiel 
 


ASTUCE DE STEPHLAB:
Suite aux dernières mises à jour, le petit calendrier du blog n'a plus l'année affichée.
Correctif:
dans plugins\modules\blog\html\liste_billets.html
  
trouver en ligne 10
 Déplier
  1. <div class="DatePost">
  2. <div class="jour">{liste_billets.JOUR}</div>
  3. <div class="mois">{liste_billets.MOIS}</div>

Ajouter après:
 Déplier
  1. <div class="annee">{liste_billets.ANNEE}</div>