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

24 Octobre 2012

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.