Share
Nous utilisons un thème de démarrage pour construire un nouveau site réactif.
Bones est un thème de démarrage totalement gratuit (et non un cadre) construit avec les meilleures pratiques les plus récentes. C'est une excellente base pour créer un thème WordPress. Ceci est une liste incomplète des fonctionnalités de Bones:
Vous pouvez télécharger le thème de démarrage depuis le site Themble.
Décompressez le fichier ZIP dans wp-content / themes et renommer son répertoire en des os.
Définissez le thème dans l'interface d'administration WP sur Bones (dans Apparence / Thèmes)..
Voici à quoi ressemble le site Web avec le thème de base de Bones. La résolution est 1440x900 pixels.
C’est le lieu du nom du thème, de la description, de l’auteur, de la version, etc. le style.css le fichier est dans le répertoire du thème. Fondamentalement, les thèmes basés sur Bones n'utilisent pas de styles réels ici, mais uniquement les données permettant d'afficher les informations dans l'interface d'administration..
/ ************************************************* *********************** Nom du thème: Kotkoda URI du thème: http://wp.tutsplus.com Description: Ce site a été construit en utilisant le thème de développement Bones. . Auteur: Adam Burucs Auteur URI de l'auteur: http://burucs.com Version: 1.0 Étiquettes: flexble-width, traduction prête, microformats, rtl-language-support Licence: GPL2 License URI: http://www.gnu.org/ licences / gpl-2.0.html
Cet outil est nécessaire pour compiler et réduire les styles de Bones dans un fichier CSS de production. J'ai choisi WinLESS parce que je travaille sur Windows 7.
dans le os / bibliothèque / moins répertoire, vous pouvez trouver tous les fichiers pour personnaliser le thème. Ce sont les styles dont nous avons besoin:
Nous utilisons un fond orange et gris moyen (@ kotkoda-grey) couleur du texte dans sans fondement. (Utilisez color pour définir la couleur de la police et la propriété background pour définir la couleur d'arrière-plan.)
body font-family: Georgia, serif; taille de police: 14px; hauteur de ligne: 1,5; couleur: @ kotkoda-grey; arrière-plan: # ED7626; / * couleur de fond principale * /
Et cela va dans mixins.less. Vous pouvez définir une variable de couleur dans LESS avec les éléments suivants: @ kotkoda-grey est le nom de la variable de couleur et, après les deux points, le code de couleur (# 19171A). Chaque nom de variable commence par le @ signe.
@ kotkoda-grey: # 19171A;
Pour les liens la couleur sera @blanc, mais @ alerte jaune sera utilisé pour le survol et les styles de focus. Utilisez la propriété color pour définir la valeur. Chaque en-tête et en-tête avec des liens seront @ kotkoda-grey. Nous avons besoin d’un gris un peu plus foncé pour cela, la valeur initiale était # 999. Avec le Couleur règle nous pouvons le mettre à # 444 (qui est égal à # 444444).
/ ********************** LINK STYLES ******************* / a, a: visité color: @white; / * en survol * / &: survol, &: focus color: @ alert-yellow; …… H1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 font-family: sans-serif; rendu du texte: optimizelegibility; poids de la police: 500; / * Si vous envisagez d’utiliser des polices Web, assurez-vous de vérifier votre poids http://css-tricks.com/watch-your-font-font-weight/ * / / * en supprimant la décoration de texte de tous les liens de titre * / a texte-décoration: aucun; couleur: @ kotkoda-grey; … / * Post meta * / .meta color: # 444;…
Voici à quoi ça ressemble en 600 pixels de large.
Nous arrivons à la fin de la première partie de cette série de tutoriels.
Accentsconagua