Modification de la page "Contacter"

Posté le 18/03/10 par GeekandGirl

Bonjour chers Cowblogueurs Cowblogueuses,

Aujourd'hui, nous allons vous expliquer comment changer les propriétés de la page 'Contacter'. Tout du moins, la mise en forme du bouton et des champs de saisie.

En voici le code, qui va vous permettre de changer tout ça :
Bien évidemment, il est à insérer dans la feuille de Style CSS.
Premium requis.


#user_email {
}

#email_content {
}

#contactsub {
}


Afin de mieux comprendre ce que nous voulons vous expliquer,
voici un aperçu des propriétés par défaut :

http://geekandgirl.cowblog.fr/images/Article/019.png
Comme vous l'avez sans doute remarqué, le 1er champ de saisie correspond à : #user_email, le 2nd correspond à #email_content, puis enfin, #contactsub correspond au bouton 'Envoyer le message'.

Maintenant, nous allons appliquer ce code à notre page CSS.
En voici les résultats :

#user_email {
border:1px solid #CCCCCC;
font-family:Georgia;
font-size:9pt;
color:#CCCCCC;

}

#email_content {
border:1px solid #CCCCCC;
font-family:Georgia;
font-size:9pt;
color:#CCCCCC;
width:480px;
color:#CCCCCC;
}

#contactsub {
background-color:#FFFFFF;
color:#CCCCCC;
border:1px solid #CCCCCC;
font-family:Georgia;
font-size:9pt;
}

Puis en image maintenant :

http://geekandgirl.cowblog.fr/images/Article/020.png
Bien évidemment, les paramètres sont modifiables à souhait.
Bisous, et bonne journée.

Catégorie : Tutoriel

Tags : Tutoriel, CSS

Rendre des images semi transparentes

Posté le 17/03/10 par Jellyka

Bonjour chers Cowblogueurs Cowblogueuses,

Le thème d'aujourd'hui va vous permettre de changer les propriétés d'une image pour l'a rendre semi transparente, comme dans le menu de droite "GeekandGirl en Images".

En voici le code :

.identifiant img {
opacity:0.6;
}

.identifiant img:hover {
opacity:1;
}


Remarque :
01. Bien évidement l'opacité peut varier selon vos goûts pouvant aller de 0 à 1.
02. Ne fonctionne que sous Mozilla Firefox.
03. Ce tutoriel a été inspiré de ce forum.

Catégorie : Tutoriel

Tags : Tutoriel, CSS

Changer le curseur par défaut de votre blog.

Posté le 22/02/10 par GeekandGirl

Introduction

Bonjour chers Cowblogueurs Cowblogueuses,

Le thème d'aujourd'hui va vous permettre de changer les propriétés de votre curseur par défaut.
Remarque : ce tutoriel a été trouvé sur internet.

En voici le code :

.identifiant {
cursor:nw-resize;
}

Les propriétés de feuille de style cursor

- auto, le curseur par défaut.
- nw-resize, curseur en forme de double petite flèche en diagonale bas droit vers haut gauche.
- crosshair, curseur en forme de croix fine.
- n-resize, curseur en forme de double petite flèche verticale.
- default, curseur en forme de grosse flèche.
- se-resize, curseur en forme de double petite flèche en diagonale bas droit vers haut gauche.
- pointer, curseur en forme de main avec un doigt déplié.
- sw-resize, curseur en forme de double petite flèche en diagonale bas gauche vers haut droit.
- move, curseur en forme de quatre flèches en croix.
- s-resize, curseur en forme de double petite flèche verticale.
- e-resize, curseur en forme de double petite flèche horizontale.
- w-resize, curseur en forme de double petite flèche horizontale.
- ne-resize, curseur en forme de double petite flèche en diagonale bas gauche vers haut droit.
- text, curseur en forme de sorte de grand I.
- help, curseur en forme de flèche et « ? ».
- wait, curseur en forme de sablier.
- inherit, la forme du curseur hérite de son parent.
- progress, curseur en forme de flèche avec sablier.
- not-allowed, curseur en forme de rond barré.
- no-drop, curseur en forme de main avec un doigt déplié avec un rond barré.
- col-resize, curseur fait de deux traits verticaux avec une flèche de chaque coté.
- row-resize, curseur fait de deux traits horizontaux avec une flèche de chaque coté.
- url (votre URL), curseur personnalisé à l'extension .cur ou .csr.

Catégorie : Tutoriel

Tags : Tutoriel, CSS

Des petites astuces CSS, partie une.

Posté le 18/02/10 par GeekandGirl

Introduction

Bonjour cher Cowblogueurs, Cowblogueuses,

Aujourd'hui, l'équipe de GeekandGirl a décider de vous donner quelques astuces pour améliorer la qualité de votre feuille de style selon vos envies. Malheureusement, le thème d'aujourd'hui requiert l'offre Premium, puisque nous entrons dans la page du CSS. Bref, afin de personnaliser votre « chez-vous » du meilleur possible, voici les deux termes abordés aujourd'hui :
- Enlever le gras de vos dates dans les commentaires postés.
- Enlever ou personnaliser la date de parution de votre/vos Tweet(s).

Code 1 : Enlever le gras de vos dates des commentaires

Comme vous l'avez sans doute aperçu, le gras de vos dates dans les commentaires est mis par défaut. De ce fait, l'équipe de GeekandGirl s'est penchée sur la question, car il faut dire que ce n'est pas au goût de tous les Cowblogueurs(ses). 

Voici le code a copier puis à coller dans votre feuille de style :

.comment-date {
font-weight:normal;
}

Bien évidemment, vous pouvez aussi changer la couleur, les effets, etc. en les insérant dans ce code.
Bien sûr si vous souhaiter garder le gras, n'oublier pas d'enlever le font-weight:normal;.

Code 2 : Enlever ou personnaliser la date de parution de votre/vos Tweet(s)

Dans le module Twitter, les dates de parution de vos Tweets sont aussi mis par défaut. C'est pourquoi nous avons décider de vous donner le code, qui va vous permettre de soit supprimer ces dates, soit de les personnaliser.

De ce fait, voici le code pour les supprimer :

.twitter-time {
display:none;
}

Bien évidemment, vous pouvez garder votre date si vous le souhaiter et ainsi la personnaliser à votre guise.
Vous pouvez ainsi y changer la couleur, les effets, etc. en les insérant dans ce code, sans oublier bien sûr d'y enlever le display:none;.

Conclusion

Et voilà, de petits codes bien sympathiques, qui vous seront sans doute utile.
N'hésitez pas, bien sûr, à poser des questions, le tutoriel est avant tout créer pour vous venir en aide.

Catégorie : Tutoriel

Tags : Tutoriel, CSS

Confectionner son propre diaporama.

Posté le 07/01/10 par GeekandGirl

Avant-Propos

Bonsoir cher(e)s Cowblogueurs, Cowblogueuses,

Après quelques semaines de longues recherches acharnées, nous avons enfin trouvé LE code à insérer dans votre HTML. C'est un code très simple à utiliser, qui va vous permettre de fabriquer des diaporamas avec vos photos préférées !

Pour avoir des exemples, regarder un peu les photos des deux articles suivants :
✿. L'exemple de Coraline.
✿. L'exemple d'Old Boy.

Introduction

Avant de commencer toutes explications, du pourquoi, du comment, est construit ce code, il vous faut au maximum 5 URL d'images à insérer dans le diaporama. On les nommera donc :

URL1, URL2, URL3, URL4, et URL5.

Bien entendu, vous remplacerez ces termes par les véritables URL de vos images.

Explications

Le code se décompose en deux parties :

✿. La première qui regroupe l'image principale, en clair, celle qui apparaîtra, la première, en grand dans le diaporama.
✿. La seconde qui regroupe les cinq vignettes au maximum, c'est-à-dire, les images miniaturisées qui se situent sous l'image principale.

On distingue ces deux parties, grâce aux deux <br /> situé entre les deux.

Remarque :
✿. Le NB1 représente la largeur de l'image principale.
✿. Le NB2 représente la largeur des images des vignettes.
Attention, le NB2 doit être le même pour toutes les vignettes.

Le code à insérer

<img style="width: NB1px;" name="diapo" src="URL1" alt="" />
<br />
<br />

<img style="width: NB2px;" onmouseover='diapo.src="URL1" ' src="URL1" alt="" /> <img style="width: NB2px;" onmouseover='diapo.src="URL2" ' src="URL2" alt="" /> <img style="width: NB2px;" onmouseover='diapo.src="URL3" ' src="URL3" alt="" /> <img style="width: NB2px;" onmouseover='diapo.src="URL4" ' src="URL4" alt="" /> <img style="width: NB2px;" onmouseover='diapo.src="URL5" ' src="URL5" alt="" />

N'oubliez pas de changer les termes fictifs, par vos propres envies !

Catégorie : Tutoriel

Tags : Tutoriel, HTML

Du CSS dans un article en passant par le HTML ?

Posté le 17/11/09 par GeekandGirl

Présentation

Bonsoir cher(e)s Cowblogueurs, Cowblogueuses,

Après plusieurs demandes de votre part, nous, les administratrices, avons décidé de créer une nouvelle catégorie, s'intitulant Tutoriel, et qui a pour but, de vous aider, si nous le pouvons, à comprendre certaines choses techniques concernant, avant tout le CSS et le HTML, moyens d'esthétiser votre blog, et très utilisés sur la plateforme de Cowblog.

Ce soir, après la demande de la Cowblogueuse Cassyopee, nous allons vous apprendre, comment mettre une image de fond dans certains de vos articles, pour pouvoir ainsi, écrire ce qui vous chante dessus. Mais pas seulement !! Car avec cette procédure, vous pourriez insérer toutes sorte d'esthétique pour vos articles, les rendant plus attrayants, plus à votre goût.

Introduction

Tout d'abord, il faut entrer dans la fenêtre source de l'article.
Ensuite recopier le code :

<div style="vos souhaits">Votre texte</div>

Attention, il ne faut pas oublier de fermer les balises !

Ensuite, remplir les balises avec les codes du CSS que vous connaissez.

Pour avoir une image de fond dans vos articles, voici le code :

<div style="background-image: url(l'url de votre image); background-repeat: no-repeat;">Votre texte</div>

Mais attention tout est paramétrable :
♦ Si vous voulez que l'image se répète : repeat
♦ Si vous voulez que l'image ne se répète pas : no-repeat
♦ Si vous voulez que l'image se répète en hauteur : repeat-y
♦ Si vous voulez que l'image se répète en largeur : repeat-x
♦ Si vous voulez positionner l'image ajouter un : margin:Xpx;
♦ Si vous voulez positionner le texte ajouter un : padding:Xpx;

Pour encadrer un texte, comme celui-ci

<div style="border: Xpx solid #XXXXXX;">Votre texte</div>

Mais attention tout est paramétrable :
✿. Si vous voulez qu'il y ait une bordure : border: Xpx solid #XXXXXX;
✿. Si vous voulez qu'il y ait une bordure arrondie :  -moz-border-radius: Xpx;
✿. Si vous voulez qu'il y ait une couleur de fond : background-color:#XXXXXX;
✿. Si vous voulez qu'il y ait une image de fond : voir paramètre du dessus.
✿. Rajouter les padding et les margin pour la position : voir paramètre du dessus.

Les paramètres de la bordure :

✿. Si vous vouliez une bordure pleine : solid
✿. Si vous voulez une bordure en pointillés : dotted
✿. Si vous voulez une bordure en tirets : dashed
✿. Si vous voulez une double bordure : double
✿. Si vous ne voulez pas de bordure : none
✿. Si vous voulez une bordure cachée : hidden
✿. Si vous voulez une bordure en relief : groove
✿. Si vous voulez une bordure en effet 3D : ridge
✿. Si vous voulez une bordure rentrante : inset
✿. Si vous voulez une bordure sortante : outset

Conclusion

En clair, la balise : <div style="vos souhaits">Votre texte</div> peu combler vos quelques souhaits, si vous vous connaissez un peu en CSS ! On espère que ce petit tutoriel vous sera utile, et qu'il est bien expliquer, sinon demandez-nous ! Si vous souhaiter connaître plus de sujet, demandez-le nous ici, on sera ravie de vous aider.

Catégorie : Tutoriel

Tags : Tutoriel, HTML

<< Page précédente | 1 | Page suivante >>

Créer un podcast