Share
Vi använder ett startatema för att bygga en ny webbplats.
Vi kommer att följa direkt från den tidigare handledningen i denna serie. Så låt oss hoppa in i det:
Vi använder två teckensnitt från Google Font-biblioteket: Arvo och PT Sans. Sätt den här koden i functions.php fil. Denna kod kommer att dra i CSS-koden som innehåller font-face egenskaper.
Accentsconagua
funktion wptuts_googlefonts_styles () // Skriv in typsnittstilstilarna så här: 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'); Låt oss ange Arvo för rubriker (grundlös) och PT Sans för kroppskopia. Vi kan ställa in teckensnittet med typsnittsfamilj. Vi definierar också serif och sans-serif vilket innebär att vi kommer att få en standard teckensnitt om den anpassade teckensnittet inte kan laddas.
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 font-family: 'Arvo', serif; ... ... kropp font-family: 'PT Sans' -serif; ...
H1, sidfot, rubrik Teckensnittstorleken kommer att vara 4em. Vi måste ändra footer.php att lägga till innehåll och grundlös fil för stilar. Ställ in bakgrunden (med bakgrund), nedersta gränsen (med border-botten) och vaddering (överst 10px, 0px för vänster och höger, och 15px för botten). För rubriken kommer en ljudgradient som ändras med 10 gånger att vara bra, sparad som en fil (kotkoda_header_bg.gif) och det måste vara i ben / Library / bilder mapp. CSS-koden går in i grundlös fil. Grafiken kommer att upprepas horisontellt (upprepa-x) och börja längst upp till vänster (0 0).
h1, .h1 font-size: 4em; / **2.5em*/ linjehöjd: 1,333em;
© . Den här sidan är skyddad av XXYY regering och armé. Läs allt noggrant. Du kan nå oss via mail på kukori @ kotkoda.com.
.footer clear: both; bakgrund: # f6f6f6; gränsbotten: 5px fast # FFD400; vaddering: 10px 0 15px;
.rubrik bakgrund: url (... /images/kotkoda_header_bg.gif) 0 0 repeat-x;
Så här ser det ut att du ändrar sidfoten.
Så här ser det ut när du lägger till grafiken.
Vi kan ställa in ett nytt 16x16 favicon i header.php fil. I href del vi ställer in ikonens väg, get_template_directory_uri kommer att ge oss mallens huvudkatalogadress. För sidtiteln ersätter du originalkoden med den här och anger beskrivningen i admingränssnittet. Denna PHP-kod kommer att echo bloggens beskrivningfält.
...<?php echo get_bloginfo( 'description', 'display' ); ?>
Det kommer att se ut så här efter att ha lagt till ikonen.
Huvudnavigering för sidor kommer också att få en minimal stil. Med visa satt till i kö utseendet kommer att vara horisontellt och vänstra gränsen blir vit (border-vänster).
.meny border-left: 1px solid @white; padding-left: 1em; .menu ul padding: 1em 0 1em; höjd: 1.5em; .menu ul li display: inline; marginal-höger: 1em;
Det nya utseendet på huvudmenyn.
Kommentarer kommer att få ett enklare utseende. De utformade namnen udda och även bör vara tom (eller kommenterad) och li elementet får a border-vänster. Den rätta datumtextlänken kommer också att vara vit, låt oss färga den till @vit. Svarsknappen kommer också att få en ny stil. Vi måste ställa in färgen, bakgrundsfärgen och opaciteterna (dessa raderas).
.kommentarlista li position: relative; klara: båda; överflöde: gömd; lista-stil-typ: none; marginal-botten: 1.5em; vaddering: 0.7335em 10px; border-left: 1px solid @white; ... / * allmänna kommentarer klasser * / .alt .odd / * background: #eee; * / .even / * background: #fefefe; * / ... / * vcard * / .vcard margin-left: 50px; cite.fn font-weight: 700; typsnittstyp: normal; a.url tid float: right; en färg: @white; ... / * kommentar svar länk * / .comment-reply-link text-decoration: none; float: right; bakgrund: @white; vaddering: 3px 5px; färg: # 999; marginal-botten: 10px; font-vikt: 700; typsnittstorlek: 0,9em; &: sväva, &: fokus färg: @ kotkoda-grå;
Det nya utseendet.
Vi behöver inte gränsen (gräns: 0) och bakgrunden ska vara @vit (grundlös). Det finns många fina stilar vi inte behöver (övergång, avrundad, lutning) så vi måste ändra gränser och bakgrunder och radera rundhet och övergång. Detta går in i vårt mixins.less fil.
textarea vaddering: 3px 6px; bakgrund: @white; / * # efefef; * / border: 0; / * 2px solid #cecece; * /
.knapp, .knapp: besökte / * border: 1px solid darken (@ kotkoda-gray, 13%); kantfärg: mörkare (@ kotkoda-grå, 7%); gränsen-vänsterfärg: mörkare (@ kotkoda-grå, 7%); * / gränsen: 0; vaddering: 4px 12px; färg: # 999; display: inline-block; typsnittstorlek: 13px; font-weight: bold; text-dekoration: ingen; / * text-skugga: 0 1px rgba (0,0,0, .75); * / markör: pekare; marginalbotten: 20px; linjehöjd: 21px; /*.transition();*/ /*.rounded(4px);*/ /*.css-gradient(#999,darken(#999, 5%)); * / &: sväva, &: fokusera färg : @ kotkoda-grå; / * border: 1px solid darken (@ kotkoda-gray, 13%); kantfärg: mörkare (@ kotkoda-grå, 20%); gränsen-vänsterfärg: mörkare (@ kotkoda-grå, 20%); * / gränsen: 0; / *.css-gradient(darken(#444, 5%), mörkare (# 444, 10%)); * / &: aktiv /*.css-gradient(darken(@kotkoda-grey, 5%) , @ kotkoda-grå); * / färg: @ kotkoda-grå;
Ser efter styling.
Låt oss ändra informationsrutan bakgrund till ljusgul, vilket är @ Alert-gul (i mixins.less). Vi behöver inte en gräns, så sätt den till noll.
.info / * border-color: darken (@ alert-blue, 5%); * / gränsen: 0; bakgrund: @ varningsgul;
Det sista steget är att ta bort standard skärmdump och ersätt med Kotkoda en som vi gjort.
Så här ser temat ut på 600 pixlar bred. I nästa handledning kommer vi att rengöra temat från onödiga delar och förbereda det för inlämning till ThemeForest.
