Petit tuto pour modifier les boutons et champs de texte des modules "Recherche" et "Newsletter".

Rechercher

Pour personnaliser la barre de recherche, il vous suffit d'utiliser ce sélecteur :

.module_menu_type_search [name="q"] {width: 100%;}

Si, par exemple, vous voulez que la barre de recherche fasse la largeur de votre menu, il faut tout simplement définir la taille. Vous pouvez aussi ajouter et définir des bordures, un fond, etc.

En orange, la taille de votre barre en % (vous pouvez mettre la valeur en px si vous voulez). Ensuite, comme d'habitude, toutes les personnalisations sont possibles, marges, ombres, police, bordures, etc.

Et pour personnaliser le bouton "Rechercher", c'est ce sélecteur :

.module_menu_type_search [type="submit"] {}

Exemple :

Sur mon blog :

Mon code :

/*-Rechercher-*/

.module_menu_type_search [name="q"] { /*-barre de recherche-*/
    width: 220px;
    border: 1px solid #7DA926;
    height: 20px;
    margin-bottom: 5px;
}

 .module_menu_type_search [type="submit"] { /*-bouton rechercher-*/
    font-weight: bold;
    color: white;
    padding: 5px;
    border: 2px solid #fff;
    background: #7DA926;
}
 .module_menu_type_search [type="submit"]:hover {background: #A2CB4E;}

Newletter

C'est exactement la même chose pour le module newsletter, voici le sélecteur :

 .module_menu_type_newsletter  input[name=subscribe]

Exemple :

Sur mon blog :

Mon code :

 .module_menu_type_newsletter input[name=subscribe] {
     width: 220px;
    border: 1px solid #7DA926;
    height: 20px;
    margin-bottom: 5px;

}

.module_menu_type_newsletter [type="submit"] {
    font-weight: bold;
    color: white;
    padding: 5px;
    border: 2px solid #fff;
    background: #7DA926;
}

C'est également possible avec la barre de message de la shoutbox. Retrouvez une liste de sélecteurs ici.