LE BLOG DU YIN-YIN || Présentation

Archives des mots clés : présentation

Des titres de widgets en majuscule automatique

Mardi 23 septembre 2008 – 2:00:00

Les thèmes de Wordpress contiennent des widgets qui apparaissent dans les différentes sidebar et/ou bottombar. Le titre de chacun d’eux est défini dans le code de l’extension qui génère le widget et est souvent modifiable dans la page de gestion des plugins.

Lire la suite ici… »

Pour modifier l’apparence du titre des widgets avec le thème dKret, et plus précisément pour transformer votre titre en majuscule automatiquement (quelque soit les majuscules ou minuscules saisies à l’origine) il suffit d’ajouter le code suivant dans le fichier "votre_style.css" de votre scheme:

.widget_title {text-transform:uppercase;}

Cela donnera donc le résultat suivant:

Exemple avec écriture normale.

Exemple avec écriture en majuscule automatique.

[Diaporama]

Voilou @ peluche…

« Réduire

Par Υιπ-Υιπ | Publié dans PERSONNALISATION | Autre(s) mot(s) clé(s) dkret, thème | Commentaires (4)

Dimensions du header

Samedi 16 août 2008 – 17:35:10

Suite à une question sur Le blog de Lise et en complément de son excellent article Mes images d’en-tête je vous explique rapidement comment définir des dimensions fixes pour votre header afin que vous puissiez définir les dimensions de votre ou vos images.

Lire la suite ici… »

Si vous utilisez la feuille de style par défaut de dKret, votre header aura les dimensions suivantes:

890px de largeur
160px de hauteur

Il est donc utile d’une part de connaître ces dimensions, et d’autre part de savoir comment les modifier afin de trouver le bon compromis entre la largeur de l’en-tête et sa hauteur, et l’image que vous allez utiliser et modifier (rogner, redimensionner, dupliquer, etc…) afin que le résultat sois esthétique.

Pour cela il suffit tout simplement d’ajouter à votre schemepersonnel les lignes suivantes:

div#wrapper {width: auto; max-width: 11OOpx;} /* Largeur du blog voulue */
div#header {height: 145px;} /* Hauteur du header voulue */

Votre image devra donc avoir les dimensions suivantes:

11OOpx de largeur
145px de hauteur

Voilou @ peluche…

« Réduire

Par Υιπ-Υιπ | Publié dans PERSONNALISATION | Autre(s) mot(s) clé(s) dkret, thème | Commentaires (0)

Un léger lifting

Mardi 12 août 2008 – 10:29:08

Comme vous avez pu le voir j’ai fait quelques petits changement d’apparence.

Du coup mon scheme passe en version 1.2 (c’est une numérotation perso donc ne pas y chercher de signification. Ça me sert à savoir combien de fois j’ai modifié les éléments principaux).

Je suis donc passé de la présentation 2 colonnes (celle par défaut) à une présentation 3 colonnes avec 1 sidebar de chaque coté de la colonne principale.

Lire la suite ici… »

Comme j’utilise un scheme personnel, j’ai donc ajouté le contenu du scheme Double_Side dans mon scheme Fluidelity, soit les lignes de code suivant :

/*  3 COLONNES */
div#wrapper {
	width: 100%;
	border: none;}
div#container {
	float: left;
	margin: 0;
	width: 100%;}
div#content {
  border-left: 1px dotted #ccc;
	margin: 25px 220px;}
div.sidebar {
	float: left;
	overflow: hidden;
	width: 190px;}
div#primary {
	margin: 15px 0 15px -100%;}
div#secondary {
	margin: 15px 0 15px -220px;}
.sidebar-column {
	width: 43.7%;}

J’ai ensuite changé mon image dans le header que j’ai composé avec une image trouvé au gré de mes recherches sur wordpress et que j’ai redimensionné pour l’adapter à la taille du header.

J’ai aussi redéfini les différents widgets pour séparer “en deux” les infos contenues dans les 2 sidebars, soit pour moi l’administration du blog dans la sidebar de gauche et les infos et liens dans la sidebar de droite.

Pour finir j’ai supprimé les modifications de la section rss de la barre de menu pour revenir à l’affichage par défaut.

Voilou @ peluche…

« Réduire

Par Υιπ-Υιπ | Publié dans VIE DU BLOG | Commentaires (0)

Autre soulignement des titres des articles/pages

Mardi 29 juillet 2008 – 14:52:42

Tirant mon inspiration du thème Openbook V2, j’y ai trouvé un type de soulignement des titres sympa que j’ai mis en place sur mon blog.
Rien de compliqué à ajouter dans la feuille de style, et une classe à ajouter lors de l’édition de vos billets ou pages.

Lire la suite ici… »

Première étape

Spécifier le format des titres dans la balise #content en ajoutant une classe qu’ici on appelle “ligne“. On y précise le background qui sera une image. Ne pas oublier de placer votre image dans le répertoire des images de votre scheme. (Par exemple /schemes/Fluidelity/ligne.gif).

/********* DE OPENBOOK V2 *********/
#content h2.ligne, #content h3.ligne, #content h4.ligne, #content h5.ligne, #content h6.ligne {
background: transparent url(Fluidelity/ligne.gif) repeat-x scroll left center; /* image du trait de soulignement */
}

Deuxième étape

Definir la balise span affectée aux titres pour modifier le style d’une partie du titre. Le but de cette balise est de masquer le trait derrière le texte du titre. Attention il faut que la couleur soit la même que le fond du #content.

h2 span, h3 span, h4 span, h5 span, h6 span {
background: #fff; /* couleur du #content */
padding-right:3px;
color:#109DD0; /* couleur normale des titres */
}

Dernière étape

Rédiger votre article. Ici on se basera sur la balise h4.

<h4 class="ligne"><span>Exemple de titre de niveau 4</span></h4>

Ce qui donnera

Exemple de titre de niveau 4

Voilou @ peluche…

« Réduire

Par Υιπ-Υιπ | Publié dans PERSONNALISATION | Autre(s) mot(s) clé(s) dkret, thème | Commentaires (0)

LE BLOG DU YIN-YIN

Archives des mots clés : présentation

Des titres de widgets en majuscule automatique

Dimensions du header

Un léger lifting

Autre soulignement des titres des articles/pages

Première étape

Deuxième étape

Dernière étape

Exemple de titre de niveau 4

FLUX RSS

S'abonner / Se connecter

Présentation

Chercher

Catégories

Nuage de tags

Ils ont dit...

Téléchargements Récents

html, css, php...

libre

plugin

thème

wordpress

Most Downloaded

Paperblog

License Creative Commons

Statistiques & infos

Hébergement

WP Hashcash

Spam Blocked