CSS questions formatting

Salut !

Voici un code LESS que je colle dans l’éditeur CSS de JetPack (via Apparence > Modifier le CSS), mais si tu n’utilises pas JetPack, tu peux aussi utiliser un service comme : http://less2css.org/

Dans ce dernier cas, prend juste soin de garder une copie de tes modifications via LESS, ce sera plus pratique pour la suite.

Regarde tout en bas : il y a un code pour faire disparaître tout le contenu de la page d’accueil (dont le titre, “Bienvenue” dans ton cas). A modifier en conséquence si tu veux virer juste le titre (rajoute h1 à la fin du sélecteur, ça devrait marcher). Moi je vire parfois tout le contenu car je mets tout le contenu dans des widgets que je place dans les zones de widgets pour page d’accueil.

/*
Bienvenue dans l'éditeur de CSS !

Pour en savoir plus sur le fonctionnement de l'éditeur, vous pouvez vous
rendre sur cette page :
http://wp.me/PEmnE-Bt
*/

@bleu: #5d90bf; // bleu
@vert: #00ff99; // vert
@jaune: #ffff99; // jaune
@rose: #ff0099; // rose

// --------------------------- Entête ---------------------------

                   @fondEntete : @bleu;
                    @titreSite : @jaune;

// --------------------- Menu de navigation ---------------------

                      @fondMenu : @jaune;
                     @liensMenu : @rose;
          @liensMenuPageEnCours : @rose;
             @liensMenuSurvoles : @rose;
                      @rondMenu : @rose;
                 @fondSousMenus : @jaune;
                @liensSousMenus : @rose;
         @fondSousMenusSurvoles : @rose;
        @liensSousMenusSurvoles : @rose;
          @fondBoutonMenuMobile : transparent;
         @texteBoutonMenuMobile : @rose;

// ----------------------- Pied de page -------------------------

                @fondPiedDePage : @jaune;
               @textePiedDePage : @bleu;
               @liensPiedDePage : @rose;
       @liensSurvolesPiedDePage : @rose;
     @fondBoutonsReseauxSociaux : @bleu;
    @texteBoutonsReseauxSociaux : @jaune;

// ------------------------- Articles --------------------------- 

                        @titres : @bleu;
        @titresArticlesSurvoles : @vert;
           @metadonneesArticles : @bleu;
          @metadonneesSurvolees : @vert;
                         @liens : @bleu;
                 @liensSurvoles : @vert;

// ------------------------ Formulaires -------------------------- 

                   @fondBoutons : @bleu;
                  @texteBoutons : @jaune;
            @fondBoutonsCliques : @bleu;
           @texteBoutonsCliques : @jaune;
            @bordureChampsTexte : @jaune;
@bordureChampsTexteSelectionnes : @vert;

/* ----------------------------------------------------------------------------------------------
                                             Généraux
   ---------------------------------------------------------------------------------------------- */

a, a:visited
{
	color: @liens;                      /* Couleur des liens  */
}

a:hover, a:focus, a:active
{	                                    /* Couleur des liens survolés (:hover),                   */
	color: @liensSurvoles;              /* qui ont reçu l'attention (:focus) et cliqués (:active) */
}                  

.page-title, .entry-title, .entry-title a
{
	color: @titres;                     /* Couleur des titres */
}

.entry-title a:hover
{
	color: @titresArticlesSurvoles;     /* Couleur des titres d'articles survolés */
}

.entry-meta a
{
	color: @metadonneesArticles;        /*  Couleur des liens des métadonnées des articles */
}	                                    /* (date, "Laisser un commentaire", "Modifier")    */

.entry-meta a:hover
{
	color: @metadonneesSurvolees;      /* Couleur des liens survolés des métadonnées des articles */
}

/* ----------------------------------------------------------------------------------------------
                                             Entête
   ---------------------------------------------------------------------------------------------- */

.site-branding
{
	background-color: @fondEntete;          /* Couleur de fond de l'entête */

	a, a:hover, a:focus, a:visited
	{
		color: @titreSite;
	}
}

/* ----------------------------------------------------------------------------------------------
                                             Menu
   ---------------------------------------------------------------------------------------------- */

.main-navigation
{
	background-color: @fondMenu;    /* Couleur de fond du menu */
}

@media screen and (min-width: 768px) {
  .main-navigation .nav-menu > li > a:after,
	.main-navigation .menu > li > a:after
	{
		color: @rondMenu;     /* Couleur du rond apres chaque item du menu */
	}
}

.main-navigation a
{
	color: @liensMenu;                              /* Couleur des liens du menu */
}

.main-navigation li.current_page_item > a,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_ancestor > a,
.main-navigation li.current-menu-ancestor > a
{
	color: @liensMenuPageEnCours;                   /* Couleur de la page en cours */
}

.main-navigation a:hover,
.main-navigation ul > :hover > a,
.main-navigation ul > .focus > a
{
	color: @liensMenuSurvoles;                      /* Couleur des liens survolés */
}

.main-navigation ul ul a
{
	color: @liensSousMenus;                         /* Couleur des liens des sous-menus */
}

.main-navigation ul ul a:hover,
.main-navigation ul ul > li.focus > a
{
	color: @liensSousMenusSurvoles;                 /* Couleur des liens survolés des sous-menus */
}

.main-navigation ul ul
{
	background-color: @fondSousMenus;               /* Couleur du fond des sous-menus */
}

.main-navigation ul ul li:hover,
.main-navigation ul ul li.focus
{
	background-color: @fondSousMenusSurvoles;      /* Couleur du fond des sous-menus survolés */
}

.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active
{
	background-color: @fondBoutonMenuMobile;      /* Couleur du bouton menu sur la version mobile */
	color: @texteBoutonMenuMobile;                /* Couleur du texte "Menu" sur la version mobile */
}

/* ----------------------------------------------------------------------------------------------
                                             Pied de page
   ---------------------------------------------------------------------------------------------- */

.site-footer
{
	background-color: @fondPiedDePage;
	border-top-color: @fondPiedDePage;
	color: @textePiedDePage;
}

.site-info a
{
	color: @liensPiedDePage;                       /* Couleur des liens du pied de page */
}

.site-info a:hover
{
	color: @liensSurvolesPiedDePage;               /* Couleur des liens survolés du pied de page */
}

.social-links ul a:before
{
	background-color: @fondBoutonsReseauxSociaux;  /* Couleur des boutons Facebook et Google Plus */
	color: @texteBoutonsReseauxSociaux;            /* Couleur des logos Facebook et Google Plus   */
}

/* ----------------------------------------------------------------------------------------------
                                             Formulaires
   ---------------------------------------------------------------------------------------------- */

/* Boutons */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
#infinite-handle span
{
	background-color: @fondBoutons;
	color: @texteBoutons;
	text-transform: uppercase;
	box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.1) inset;
}

/* Boutons survolés */

button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
#infinite-handle span:hover
{
	opacity: 0.85;
}

/* Boutons cliqués */

button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
html input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active,
#infinite-handle span:active
{
	background-color: @fondBoutonsCliques;
	color: @texteBoutonsCliques;
}

/* Champs texte */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea
{
	border-width: 1px;
	border-style: solid;
	border-color: @bordureChampsTexte;
}

/* Champs texte sélectionnés */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus
{
	border-color: @bordureChampsTexteSelectionnes;
}

/* Copie des styles pour les champs type "numéro de téléphone" */

input[type="tel"]
{
	border-image-source: none;
	border-image-slice: 100% 100% 100% 100%;
	border-image-width: 1 1 1 1;
	border-image-outset: 0 0 0 0;
	border-image-repeat: stretch stretch;
	font-size: 1.4rem;
	padding: 0.6em;
	border-radius: 2px;
	transition-property: all;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
	transition-delay: 0s;
}

/* ----------------------------------------------------------------------------------------------
                                             Spécifiques
   ---------------------------------------------------------------------------------------------- */

/* Faire disparaitre le contenu (titre notamment) sur la page d'accueil */

.front-page-content-area
{
	display : none;
}

/* Si on ne veut pas que le titre soit tout en majuscules. */

.site-title
{
	text-transform : none;
}

/* Modification de la hauteur de l'entête */

.site-branding
{
	/*min-height: 162px;*/                  /* valeur originale : 72px pour une hauteur totale de 160px */
}

/* Faire disparaitre le texte d'entête (si inséré directement dans image d'entête) */

.site-title,
.site-description
{
	/*visibility: hidden;*/
}

Pour ce qui est d’afficher des extraits d’articles appartenant à une catégorie en particulier, j’ai eu une bonne impression du plugin “Advanced Featured Post Widget“, que j’ai utilisé avec une cliente, ici (sur la droite)
http://www.baladeencrepanie.com/accueil/

Ici elles n’utilisent pas d’image, mais c’est tout à fait possible, et tu peux personnaliser la taille des images.

Pour ce qui est du menu déroulant avec miniatures, ça me semble compliqué à implémenter en gardant le thème Sela. Je pense qu’il serait plus rapide de choisir complètement un autre thème.

Tiens-nous au jus et bonne continuation.

Boris