Thème Twenty Seventeen

Logo WP Paramètres

Nous testons ici le thème Twenty Seventeen. Un thème enfant de ce dernier a ainsi été créé.

1) Donner un nom à votre thème, par exemple : twentyseventeen-child
2) Créer un répertoire /wp-content/themes/twentyseventeen-child
3) Dans ce répertoire, déposer vos fichiers (à minima : style.css et functions.php)
4) Et ainsi de suite pour tous les fichiers du thème parent que vous souhaitez modifier

style.css

/*
 * Theme Name:Twenty Seventeen Child
 * Description:Twenty Seventeen Child
 * Author:..........
 * Author URI:http://www.xxxxxxxxxx.fr
 * Template:twentyseventeen
 * Version:1.0
 */
@import url("../twentyseventeen/style.css");

/* Votre code ci-dessous
----------------------------------------------- */

functions.php

< ?php
/**
 * Theme Name:Twenty Seventeen Child
 * Twenty Seventeen functions and definitions
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */
/**
 * Twenty Seventeen only works in WordPress 4.7 or later.
 */
 
/* Votre code ci-dessous
----------------------------------------------- */

Notes : La largeur de la colonne principale est de 525px avec la disposition à deux colonnes ou de 740px avec la présentation sur une seule colonne.
* La largeur de colonne de barre latérale (Sidebar) est de 326px maximum.
* La taille recommandée d’image en vedette (Featured Image) est de 2000px (largeur) x 1200px (hauteur). Rapport de 5 à 3.
* La taille recommandée d’en-tête (Header), image ou vidéo, est de 2000px (largeur) x 1200px (hauteur). Rapport de 5 à 3.
* La taille recommandée du logo est de 250px x 250px. Toute autre taille sera rognée pour son adaptation.
* Police « Libre Franklin Google font », taille de police de corps (Body) 16px ou 1 rem.

Effet plein écran

Pour passer Twenty Seventeen en plein écran, il suffit de quelques lignes de code CSS à ajouter au fichier « style.css » de votre thème enfant.

/* Content and sidebar areas full screen
----------------------------------------------- */
.wrap {
    /* margin-left: auto; */
    /* margin-right: auto; */
    max-width: 100%;
    /* padding-left: 2em; */
    /* padding-right: 2em; */
}

@media screen and (min-width: 48em) {
    .wrap {
        max-width: 100%;
	/* padding-left: 3em; */
	/* padding-right: 3em; */
    }
}
/* Menu full screen
----------------------------------------------- */
@media screen and (min-width: 48em) {
    .navigation-top .wrap {
        max-width: 100%;
        /* padding: 0.75em 3.4166666666667em; */
    }
}
.navigation-top .wrap {
    max-width: 100%;
    /* padding: 0; */
}

ou, plus simplement, sans rappeler les autres lignes de code contenues
 dans le fichier CSS du thème parent et toujours opérationnelles :

/* Content and sidebar areas full screen & Menu full screen
----------------------------------------------------------- */
.wrap {
    max-width: 100%;
}
.navigation-top .wrap {
    max-width: 100%;
}
@media screen and (min-width: 48em) {
    .wrap {
        max-width: 100%;
    }
    .navigation-top .wrap {
        max-width: 100%;
    }
}

Source « Effet plein écran » Bharat Karavadra (UK)

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.