Share
We gebruiken een startthema om een nieuwe site te bouwen.
We gaan rechtdoor gaan van de vorige tutorial in deze serie. Dus laten we er in springen:
We gebruiken twee lettertypen uit de Google Font-bibliotheek: Arvo en PT Sans. Zet deze code in de functions.php het dossier. Deze code trekt de CSS-code in die de bevat font-face eigenschappen.
Accentsconagua
functie wptuts_googlefonts_styles () // Geef de lettertypestijlen als volgt in wacht: 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'); Laten we Arvo instellen voor rubrieken (ongegrond) en PT Sans voor body-copy. We kunnen het lettertype instellen met font-family. We definiëren ook serif en sans-serif, wat betekent dat we een standaardlettertype krijgen als het aangepaste lettertype niet kan worden geladen.
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 font-family: 'Arvo', serif; ... ... body font-family: 'PT Sans', sans -serif; ...
H1, footer, hoofd De lettergrootte zal zijn 4em. We moeten het wijzigen footer.php om inhoud toe te voegen en de ongegrond bestand voor stijlen. Stel de achtergrond in (met achtergrond), onderrand (met border-bottom) en opvulling (bovenaan 10px, 0px voor links en rechts, en 15px voor de onderkant). Voor de koptekst is een ruisgradiënt die 10 keer is verkleind goed, opgeslagen als een bestand (kotkoda_header_bg.gif) en het moet in de bones / bibliotheek / images map. De CSS-code gaat naar de ongegrond het dossier. De grafische weergave wordt horizontaal herhaald (herhaal-x) en begin in de linkerbovenhoek (0 0).
h1, .h1 font-size: 4em; /*2.5em*/ line-height: 1.333em;
© . Deze pagina wordt beschermd door de XXYY regering en leger. Lees alles zorgvuldig. U kunt ons per post bereiken op kukori @ kotkoda.com.
.voettekst duidelijk: beide; achtergrond: # f6f6f6; border-bottom: 5px solid # FFD400; opvulling: 10px 0 15px;
.header background: url (... /images/kotkoda_header_bg.gif) 0 0 repeat-x;
Dit is hoe het er uitziet na het wijzigen van de voettekst.
Dit is hoe het eruit ziet na het toevoegen van de afbeeldingen.
We kunnen een nieuw 16x16-favicon instellen in de header.php het dossier. In de href deel zetten we het pad van het pictogram, get_template_directory_uri geeft ons de hoofddirectory-URL van de sjabloon. Vervang voor de paginatitel de originele code door deze en stel de beschrijving in de admin-interface in. Deze PHP-code komt overeen met het beschrijvingsveld van de blog.
...<?php echo get_bloginfo( 'description', 'display' ); ?>
Het ziet er als volgt uit na het toevoegen van het pictogram.
De hoofdnavigatie voor pagina's krijgt ook een minimale stijl. Met tonen ingesteld op in lijn het uiterlijk is horizontaal en de linkerrand is wit (-Border links).
.menu border-left: 1px solid @white; opvulling links: 1em; .menu ul opvulling: 1em 0 1em; hoogte: 1,5em; .menu ul li display: inline; margin-right: 1em;
Het nieuwe uiterlijk van het hoofdmenu.
Reacties krijgen een eenvoudiger uitstraling. De stijlen genoemd vreemd en zelfs moet leeg zijn (of becommentarieerd) en de li element krijgt een -Border links. De juiste link voor de datumtekst is ook wit, laten we dit inkleuren @wit. De antwoordknop krijgt ook een nieuwe stijl. We moeten de kleur, de achtergrondkleur en de opaciteit instellen (deze worden verwijderd).
.commentaarlijst li position: relative; beiden opschonen; overloop verborgen; list-style-type: none; marge-bodem: 1.5em; opvulling: 0.7335em 10px; links-links: 1px solid @white; ... / * algemene commentaarklassen * / .alt .odd / * background: #eee; * / .even / * background: #fefefe; * / ... / * vcard * / .vcard margin-left: 50px; cite.fn font-weight: 700; lettertype: normaal; a.url tijd float: right; een color: @white; ... / * reactieantwoordlink * / .comment-reply-link text-decoration: none; zweven: rechts; achtergrond: @white; opvulling: 3px 5px; kleur: # 999; margin-bottom: 10px; font-gewicht: 700; lettergrootte: 0.9em; &: hover, &: focus color: @ kotkoda-grey;
De nieuwe look.
We hebben de grens niet nodig (rand: 0) en de achtergrond zou moeten zijn @wit (ongegrond). Er zijn veel mooie stijlen die we niet nodig hebben (overgang, afgeronde, helling) dus we moeten grenzen en achtergronden veranderen en rondheid en overgang verwijderen. Dit gaat in onze mixins.less het dossier.
textarea padding: 3px 6px; achtergrond: @white; / * # efefef; * / border: 0; / * 2px solide #cecece; * /
.knop, .knop: bezocht / * rand: 1px effen donkerder (@ kotkoda-grijs, 13%); border-top-kleur: donkerder (@ kotkoda-gray, 7%); border-left-colour: donkerder (@ kotkoda-gray, 7%); * / border: 0; opvulling: 4px 12px; kleur: # 999; weergave: inline-block; lettergrootte: 13px; lettertype: vet; tekstdecoratie: geen; / * text-shadow: 0 1px rgba (0,0,0, .75); * / cursor: pointer; margin-bottom: 20px; regelhoogte: 21 px; /*.transition();*/ /*.rounded(4px);*/ /*.css-gradient(#999,darken(#999, 5%)); * / &: hover, &: focus color : @ kotkoda-gray; / * border: 1px effen donkerder (@ kotkoda-gray, 13%); border-top-kleur: donkerder (@ kotkoda-gray, 20%); border-left-colour: donkerder (@ kotkoda-gray, 20%); * / border: 0; /*.css-gradient(darken(#444, 5%), verdonkeren (# 444, 10%)); * / &: actief /*.css-gradient(darken(@kotkoda-grey, 5%) , @ kotkoda-gray); * / color: @ kotkoda-grey;
De look na styling.
Laten we de achtergrond van de infovak veranderen in lichtgeel, dat is @ Alert-geel (in mixins.less). We hebben geen rand nodig, dus zet deze op nul.
.info / * border-colour: darken (@ alert-blue, 5%); * / rand: 0; achtergrond: @ alert-geel;
De laatste stap is om het standaard screenshot te verwijderen en te vervangen door de Kotkoda die we hebben gemaakt.
Hier ziet u hoe het thema eruit ziet als voltooid in een breedte van 600 pixels. In de volgende tutorials zullen we het thema van onnodige onderdelen opschonen en het vervolgens voorbereiden op indiening bij ThemeForest.
