Share
Vi bruker et forrettstema for å bygge et nytt nettsted.
Vi kommer til å følge rett fra den forrige opplæringen i denne serien. Så la oss hoppe inn i det:
Vi bruker to fonter fra Google Font-biblioteket: Arvo og PT Sans. Sett denne koden i functions.php fil. Denne koden vil trekke inn CSS-koden som inneholder skrifttype eiendommer.
Accentsconagua
funksjon wptuts_googlefonts_styles () // Vellgjøre skrifttypestilsettene slik: 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'); La oss sette Arvo for overskrifter (base.less) og PT Sans for kroppskopi. Vi kan angi skriften med font-family. Vi definerer også serif og sans-serif, noe som betyr at vi vil få en standard skrift hvis den tilpassede skrifttypen ikke kan lastes inn.
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 font-family: 'Arvo', serif; ... ... kropp font-familie: 'PT Sans', sans -serif; ...
H1, bunntekst, Overskrift Skriftstørrelsen vil være 4em. Vi må endre footer.php å legge til innhold og base.less fil for stiler. Sett bakgrunnen (med bakgrunn), nederste kant (med nedre kant) og polstring (topp 10px, 0px for venstre og høyre, og 15px for bunnen). For toppteksten vil en lydgradient som er endret med 10 ganger, bli god, lagret som en fil (kotkoda_header_bg.gif) og det må være i bein / bibliotek / bilder mappe. CSS-koden går inn i base.less fil. Grafikken vil bli gjentatt horisontalt (repeat-x) og start øverst til venstre (0 0).
h1, .h1 font-size: 4em; /*2.5em*/ linjehøyde: 1,333em;
© . Denne siden er beskyttet av XXYY regjeringen og hæren. Les alt nøye. Du kan nå oss via mail på kukori @ kotkoda.com.
.footer clear: both; bakgrunn: # f6f6f6; border-bottom: 5px solid # FFD400; polstring: 10px 0 15px;
.header bakgrunn: url (... /images/kotkoda_header_bg.gif) 0 0 repeat-x;
Slik ser det etter at du endrer bunnteksten.
Slik ser det etter at du legger til grafikken.
Vi kan sette inn et nytt 16x16 favicon i header.php fil. I href del vi satte banen til ikonet, get_template_directory_uri vil gi oss malens hovedkatalogadresse. For sidetittelen, erstatt originalkoden med denne og sett beskrivelsen i administrasjonsgrensesnittet. Denne PHP-koden vil ekko bloggens beskrivelsesfelt.
...<?php echo get_bloginfo( 'description', 'display' ); ?>
Det vil se slik ut etter at du har lagt til ikonet.
Hovednavigasjonen for sider vil også få en minimal stil. Med vise satt til på linje utseendet vil være horisontalt og den venstre grensen blir hvit (border-left).
.meny border-left: 1px solid @white; padding-left: 1em; .menu ul padding: 1em 0 1em; høyde: 1,5em; .menu ul li display: inline; margin-høyre: 1em;
Det nye utseendet på hovedmenyen.
Kommentarer vil få et enklere utseende. Stilene heter merkelig og til og med bør være tomt (eller kommentert ut) og li elementet får a border-left. Den rette datateksten er også hvit, la oss fargelegge den @hvit. Svarknappen vil også få en ny stil. Vi må sette fargen, bakgrunnsfargen og opasitetene (disse er slettet).
.kommentarliste li stilling: relativ; klare: begge; overløp: skjult; liste-stil-type: none; margin-bunn: 1,5em; polstring: 0.7335em 10px; border-left: 1px solid @white; ... / * generell kommentar klasser * / .alt .odd / * bakgrunn: #eee; * / .even / * bakgrunn: #fefefe; * / ... / * vcard * / .vcard margin-left: 50px; cite.fn font-weight: 700; font-style: normal; a.url tid float: right; en color: @white; ... / * kommentar svar link * / .comment-reply-link text-decoration: none; flyte: høyre; bakgrunn: @white; polstring: 3px 5px; farge: # 999; margin-bunn: 10px; font-weight: 700; fontstørrelse: 0.9em; &: svever, &: fokus farge: @ kotkoda-grå;
Det nye utseendet.
Vi trenger ikke grensen (grense: 0) og bakgrunnen skal være @hvit (base.less). Det er mange flotte stiler vi ikke trenger (overgang, avrundet, gradient) så vi må endre grenser og bakgrunner, og slette rundhet og overgang. Dette går inn i vår mixins.less fil.
textarea polstring: 3px 6px; bakgrunn: @white; / * # efefef; * / border: 0; / * 2px solid #cecece; * /
.knapp,. knapp: besøkt / * border: 1px solid mørkere (@ kotkoda-grå, 13%); border-top-farge: mørkere (@ kotkoda-grå, 7%); border-left-color: mørkere (@ kotkoda-grå, 7%); * / border: 0; polstring: 4px 12px; farge: # 999; display: inline-block; skriftstørrelse: 13px; font-weight: bold; tekst-dekorasjon: ingen; / * tekstskygge: 0 1px rgba (0,0,0, .75); * / markør: pointer; margin-bunn: 20px; linjehøyde: 21px; /*.transition();*/ /*.rounded(4px);*/ /*.css-gradient(#999,darken(#999, 5%)); * / &: svever, &: fokus color : @ kotkoda-grå; / * grense: 1px solid mørkere (@ kotkoda-grå, 13%); border-top-farge: mørkere (@ kotkoda-grå, 20%); border-left-color: mørkere (@ kotkoda-grå, 20%); * / kantlinje: 0; /*.css-gradient(darken(#444, 5%), mørkere (# 444, 10%)); * / &: aktiv /*.css-gradient(darken(@kotkoda-grey, 5%) , @ kotkoda-grå); * / farge: @ kotkoda-grå;
Ser etter styling.
La oss endre info-boksen bakgrunn til lys gul, som er @ Varsel-gul (i mixins.less). Vi trenger ikke en grense, så sett den til null.
.info / * border-color: darken (@ varselblå, 5%); * / grense: 0; bakgrunn: @ alarm-gul;
Det siste trinnet er å slette standard skjermdump og erstatte med Kotkoda en vi laget.
Slik ser temaet ut i 600 piksler bredt. I de neste opplæringsprogrammene vil vi rydde temaet fra unødvendige deler og forberede den til innsending til ThemeForest.
