Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Les CSS Overblog (1) : modifier l'apparence de la zone recherche

- Auteur : Brunofaisart

Comme vous le savez, désormais Overblog/Kiwi, utilise au maximum les possibiltés des Feuilles de Styles en Cascade, d'acronyme CSS. Je me propose de vous démontrer comment modifier certains éléments de votre mise en page simplement en changeant les styles CSS appropriés.
Chaque fragment de code proposé devra remplacer celui défini dans le thème OB choisi, le plus simple étant pour le "surclasser" ou "overide" en anglais informatique est de déclarer votre nouveau style juste avant la fin de balise HEAD de votre thème de la manière suivante ;

    <html lang="fr">
    <head>
    		<meta charset="utf-8" />
			{.. le début du head du thème ici...}
					<style>
					  .unstyleOB{
                      mes paramètres de styles personnalisés; 
                      }
					  .unAutrestyleOB{
                      mes autres paramètres de styles personnalisés;
                      }
					</style>
			</head>
 			<body>
 			  {...le code du thème Overblog d'affichage dans cette partie ...}
 			</body>
 </html>

Comme premier exemple , nous allons modifier l'affichage de la zone de "Recherche" sur le blog.
Le nom de la "classe" CSS de la zone recherche Overblog est :
".search".

Chaque élément constitutif de votre thème possède un nom de classe que vous pourrez adapter selon vos besoins et envies, en respectant cependant certaines contraintes (espace disponible sur votre thème, charte de couleur, typographie...).

Pour cet exemple je souhaite afficher ma zone de recherche avec une ombre légère, un fond de zone avec une loupe, ma zone de saisie en transparence et un bouton de couleur bleue lui aussi en transparence, bouton qui passe en orangé au survol de la souris, voir image ci-dessous:

Les CSS Overblog (1) : modifier l'apparence de la zone recherche

Le code à ajouter pour afficher ce style de zone de recherche ci-dessous :

    <style>
 /* Réglages du container de recherche */    
			 .search
		{
					 /* Définition de la typo */
					 font-size:14px;
					 font-family:helvetica,tahoma,sans-serif;
					 
					 /*taille de la zone de recherche , la largeur est proportionnelle (98%) à la zone d'affichage */
					 height:96px;display:block;width:98%;
					 
					 /* on régle l'ombre */
					 -moz-box-shadow: 3px 3px 9px #000000;
					 -webkit-box-shadow: 3px 3px 9px #000000;
					  box-shadow: 3px 3px 9px #000000;
					  
					/* on règle le fond de notre zone de recherche, avec en image de fond, la loupe récupérée sur
					http://icons.seeker.com : url('http://icons.iconseeker.com/png/64/vista-elements/search-magnifier-1.png') avec une couleur de fond en transparence à 25 % -rgba( rgba(64,128,128,.25)*/ 
					
					  background:rgba(64,128,128,.25) url('http://icons.iconseeker.com/png/64/vista-elements/search-magnifier-1.png') top left no-repeat;
					  
					/* pour ajuster notre affiche texte et zones de saisie par rapport à l'image de fond, nous sommes obligés de décaler l'ensemble par rapport à l'image elle-même (padding haut et gauche) */
					 	padding-right:8px;padding-left:64px;
		}
/* on adapte maintenant la zone de saisie de la recherche */
			.search input[type="text"]
		{
						background:rgba(255,255,255,.25);
						color:black;
						font-weight:bold;
						border-radius:8px;
						padding:4px;
						margin-top:12px;	
		}

/* et ensuite le bouton et son comportement lorsque la souris passe en survol (hover) */
		.search input[type="submit"]
		{
						background:rgba(95,173,231,.75);
						border-radius:8px;
						padding:4px;
						width:128px;
						border:0px;
						color:#E2A507;
						float:right;
						border:1px solid #E2A507;
						cursor:pointer;
						color:white;
						margin-top:24px;
			}
/* réglage de la couleur au survol : hover */			
		.search input[type="submit"]:hover
			{
				background-color:#FF9B37;
			}
/* fin du style pour la zone recherche */

 </style>

Ce qui me démontre qu'avec un peu de CSS sans passer par la programmation HTML, on peut donner un coup de "fun" à nos thèmes.

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Nadine Quinn 24/10/2012 23:19

Je sais que je suis nulle, je n'ai pas trouver le CSS, je suis allée sur la programmation HTML sans trouver ce que je cherchais

Bruno 27/10/2012 09:47

Sur quel thème Nadine ?

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...