Share
Nous utilisons un thème de démarrage pour construire un nouveau site.
Nous allons suivre tout droit du tutoriel précédent de cette série. Alors sautons dedans:
Nous allons utiliser deux polices de la bibliothèque de polices Google: Arvo et PT Sans. Mettez ce code dans le functions.php fichier. Ce code va tirer dans le code CSS qui contient le font-face Propriétés.
Accentsconagua
function wptuts_googlefonts_styles () // Placez les feuilles de style de police dans l'ordre suivant: wp_enqueue_style ('googlefonts-arvo', 'http://fonts.googleapis.com/css?family=Arvo'); wp_enqueue_style ('googlefonts-pt-sans', 'http://fonts.googleapis.com/css?family=PT+Sans'); add_action ('wp_enqueue_scripts', 'wptuts_googlefonts_styles'); Définissons Arvo pour les titres (sans fondement) et PT Sans pour la copie du corps. Nous pouvons définir la police avec famille de polices. Nous définissons également serif et sans-serif, ce qui signifie que nous aurons une police par défaut si la police personnalisée ne peut pas être chargée..
h1, .h1, h2, .h2, h3, .h3, h4, h .h4, h5, h5, .h5 font-family: 'Arvo', serif;…… corps font-family: 'PT Sans', sans -serif;…
H1, bas de page, entête La taille de la police sera 4em. Nous devons modifier le footer.php ajouter du contenu et la sans fondement fichier pour les styles. Définir le fond (avec Contexte), bordure inférieure (avec bas de la bordure) et le rembourrage (haut 10px, 0px pour gauche et droite, et 15px pour le bas). Pour l’en-tête, un gradient de bruit redimensionné par 10 sera bien, sauvegardé sous forme de fichier (kotkoda_header_bg.gif) et il doit être dans le os / bibliothèque / images dossier. Le code CSS va dans le sans fondement fichier. Les graphiques seront répétés horizontalement (répéter-x) et commencer en haut à gauche (0 0).
h1, .h1 taille de la police: 4em; /*2.5em*/ line-height: 1.333em;
© . Cette page est protégée par le XXYY gouvernement et armée. Lisez tout attentivement. Vous pouvez nous joindre par courrier à kukori @ kotkoda.com.
.footer clear: les deux; arrière-plan: # f6f6f6; fond de bordure: solide 5px # FFD400; remplissage: 10px 0 15px;
.header background: url (… /images/kotkoda_header_bg.gif) 0 0 repeat-x;
Voici à quoi ça ressemble après avoir modifié le pied de page.
Voici à quoi ça ressemble après avoir ajouté les graphiques.
Nous pouvons définir un nouveau favicon 16x16 dans le header.php fichier. dans le href partie nous définissons le chemin de l'icône, get_template_directory_uri nous donnera l'URL du répertoire principal du modèle. Pour le titre de la page, remplacez le code d'origine par celui-ci et définissez la description dans l'interface d'administration. Ce code PHP fera écho au champ de description du blog.
…<?php echo get_bloginfo( 'description', 'display' ); ?>
Cela ressemblera à ceci après avoir ajouté l'icône.
La navigation principale pour les pages aura également un style minimal. Avec afficher mis à en ligne le look sera horizontal et le bord gauche sera blanc (frontière gauche).
.menu border-left: 1px solid @white; rembourrage à gauche: 1em; .menu ul padding: 1em 0 1em; hauteur: 1.5em; .menu ul li display: inline; marge droite: 1em;
Le nouveau look du menu principal.
Les commentaires auront un look plus simple. Les styles nommés impair et même devrait être vide (ou commenté) et le li l'élément obtient un frontière gauche. Le lien de texte de la bonne date sera également blanc, colorisons-le. @blanc. Le bouton de réponse aura aussi un nouveau style. Nous devons définir la couleur, la couleur de fond et les opacités (celles-ci sont supprimées).
.commentlist li position: relative; clarifier les deux; débordement caché; type de style de liste: aucun; marge en bas: 1.5em; rembourrage: 0,7335em 10px; border-left: 1px solid @white;… / * classes de commentaires généraux * / .alt .odd / * background: #eee; * / .even / * background: #fefefe; * /… / * vcard * / .vcard margin-left: 50px; cite.fn font-weight: 700; style de police: normal; a.url time float: right; a color: @white;… / * comment Reply link * / .comment-reply-link text-decoration: none; Flotter à droite; fond: @white; rembourrage: 3px 5px; couleur: # 999; marge inférieure: 10px; poids de police: 700; taille de police: 0.9em; &: survol, &: focus color: @ kotkoda-grey;
Le nouveau look.
Nous n'avons pas besoin de la frontière (bordure: 0) et le fond devrait être @blanc (sans fondement). Il y a beaucoup de styles sophistiqués dont nous n'avons pas besoin (transition, arrondi, pente) nous devons donc changer les bordures et les arrière-plans et supprimer la rondeur et la transition. Cela entre dans notre mixins.less fichier.
textarea padding: 3px 6px; fond: @white; / * # efefef; * / border: 0; / * 2px solid #cecece; * /
.bouton, bouton: visité / * frontière: 1px solide noircit (@ kotkoda-grey, 13%); couleur du bord supérieur: noircit (@ kotkoda-grey, 7%); couleur de bordure à gauche: plus foncé (@ kotkoda-grey, 7%); * / bordure: 0; rembourrage: 4px 12px; couleur: # 999; affichage: inline-block; taille de police: 13px; poids de police: gras; texte-décoration: aucun; / * text-shadow: 0 1px rgba (0,0,0, .75); * / curseur: pointeur; marge inférieure: 20 px; hauteur de ligne: 21px; /*.transition();*/ /*.rounded(4px);*/ /*.css-gradient(#999,darken(#999, 5%)); * / &: survol, &: focus color : @ kotkoda-grey; / * bordure: noir foncé 1px (@ kotkoda-grey, 13%); couleur du bord supérieur: noircir (@ kotkoda-grey, 20%); border-left-color: assombrit (@ kotkoda-grey, 20%); * / bordure: 0; /*.css-gradient(darken(#444, 5%), assombrit (# 444, 10%)); * / &: active /*.css-gradient(darken(@kotkoda-grey, 5%) , @ kotkoda-grey); * / couleur: @ kotkoda-grey;
Le look après style.
Changeons l’arrière-plan de la boîte d’informations en jaune clair, qui est @ alerte jaune (dans mixins.less). Nous n'avons pas besoin d'une frontière, alors fixez-la à zéro.
.info / * border-color: assombrir (@ alert-blue, 5%); * / frontière: 0; fond: alerte jaune;
La dernière étape consiste à supprimer la capture d'écran par défaut et à la remplacer par celle de Kotkoda que nous avons créée..
Voici à quoi ressemble le thème fini dans une largeur de 600 pixels. Dans les prochains tutoriels, nous allons nettoyer le thème des parties inutiles, puis le préparer pour le soumettre à ThemeForest..
