Share
Folosim o temă de pornire pentru a construi un site nou.
Vom urmări direct de la tutorialul anterior din această serie. Deci, hai să intrăm în ea:
Vom folosi două fonturi din biblioteca Google Font: Arvo și PT Sans. Puneți acest cod în functions.php fişier. Acest cod va trage codul CSS care conține font-face proprietăţi.
Accentsconagua
funcția wptuts_googlefonts_styles () // Introduceți foile de stil astfel: 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'); Să setăm Arvo pentru titluri (base.less) și PT Sans pentru copie corporală. Putem seta fontul cu familie de fonturi. De asemenea, definim serif și sans-serif, ceea ce înseamnă că vom primi un font implicit dacă fontul personalizat nu poate fi încărcat.
h1, h3, h3, h3, h3, h3, h4, .h4, h5, .h5 font-family: 'Arvo', serif; -serif; ...
H1, subsol, antet Dimensiunea fontului va fi 4em. Trebuie să modificăm footer.php pentru a adăuga conținut și base.less fișier pentru stiluri. Setați fundalul (cu fundal), marginea inferioară (cu border-bottom) și padding (top 10px, 0px pentru stânga și dreapta, și 15px pentru partea de jos). Pentru header, un gradient de zgomot redus de 10 ori va fi bun, salvat ca fișier (kotkoda_header_bg.gif) și trebuie să fie în oase / bibliotecă / imagini pliant. Codul CSS intră în base.less fişier. Grafica va fi repetată orizontal (repeat-x) și începeți din stânga sus (0 0).
h1, .h1 font-size: 4em; /*2.5em*/line-height: 1.333em;
© . Această pagină este protejată de Guvernul XXYY și armata. Citiți cu atenție totul. Ne puteți contacta prin poștă la kukori @ kotkoda.com.
.footer clar: ambele; fundal: # f6f6f6; frontieră-fund: 5px solid # FFD400; padding: 10px 0 15px;
.header background: url (... /images/kotkoda_header_bg.gif) 0 0 repet-x;
Acesta este modul în care se ocupă după modificarea subsolului.
Acesta este modul în care se potrivește după adăugarea graficii.
Putem seta un nou favicon de 16x16 în header.php fişier. În href parte am stabilit calea pictogramei, get_template_directory_uri ne va da URL-ul directorului principal al șablonului. Pentru titlul paginii, înlocuiți codul original cu acesta și setați descrierea în interfața de administrare. Acest cod PHP va ecou câmpul de descriere a blogului.
...<?php echo get_bloginfo( 'description', 'display' ); ?>
Acesta va arăta astfel după adăugarea pictogramei.
Navigarea principală pentru pagini va primi și un stil minimal. Cu afişa setat la in linie aspectul va fi orizontal, iar marginea stângă va fi albă (-Chenarul din stânga).
.meniu border-left: 1px solid @white; umplutură-stânga: 1em; .menu ul umplutură: 1em 0 1em; înălțime: 1,5; .menu ul li afișare: inline; margin-dreapta: 1em;
Noul aspect al meniului principal.
Comentariile vor avea un aspect mai simplu. Stilurile au fost numite ciudat și chiar ar trebui să fie goale (sau comentate) și Li elementul devine a -Chenarul din stânga. Cea mai potrivită legătură într-text va fi și albă, să o colorăm @alb. Butonul de răspuns va primi și un stil nou. Trebuie să setăm culoarea, culoarea de fundal și opacitățile (acestea sunt șterse).
.comentariu li position: relative; clar: ambele; overflow: ascuns; listă-tip: none; marginea inferioară: 1,5; padding: 0.7335em 10px; border-left: 1px solid @white; ... / * clase de comentarii generale * / .alt .odd / * background: #eee; * / .even / * background: #fefefe; vcard * / .vcard margine-stânga: 50px; cite.fn font-greutate: 700; font-style: normal; a.url timp float: right; o culoare: @white; ... / * comentariu răspuns răspuns * / .comment-reply-link text-decoration: none; float: dreapta; fundal: @ alb; padding: 3px 5px; culoare: # 999; margin-bottom: 10px; greutatea fontului: 700; font-size: 0.9cm; &: hover, &: focalizare culoare: @ kotkoda-gri;
Noul look.
Nu avem nevoie de frontieră (frontieră: 0) și fundalul ar trebui să fie @alb (base.less). Există o mulțime de stiluri de lux de care nu avem nevoie (tranziție, rotunjit, gradient), astfel încât trebuie să schimbăm frontierele și mediile, să ștergem rotunjirea și tranziția. Asta merge în noi mixins.less fişier.
textarea padding: 3px 6px; fundal: @ alb; / * # efectfef; * / frontieră: 0; / * 2px solid #cecece; * /
.buton, .button: vizitat / * border: 1px solid darken (@ kotkoda-gri, 13%); frontieră-culoarea de sus: întunecată (@ kotkoda-gri, 7%); border-left-color: întunecat (@ kotkoda-gri, 7%); * / margine: 0; padding: 4px 12px; culoare: # 999; afișare: inline-block; font-size: 13px; font-weight: bold; text-decoration: nici unul; / * text-shadow: 0 1px rgba (0,0,0, .75); * / cursor: pointer; margin-bottom: 20px; linia-înălțime: 21px; /*.transition();*/ /*.rounded(4px);*/ /*.css-gradient(#999,darken(#999, 5%)); * & &: hover, &: focus culoare : @ kotkoda-gri; / * frontieră: 1px întunecat solid (@ kotkoda-gri, 13%); frontieră-culoarea de sus: întunecată (@ kotkoda-gri, 20%); border-left-color: întunecat (@ kotkoda-gri, 20%); * / margine: 0; /*.css-gradient(darken(#444, 5%), întunecat (# 444, 10%)); * / &: active /*.css-gradient(darken(@kotkoda-grey, 5%); , @ kotkoda-gri); * / culoare: @ kotkoda-gri;
Aspectul după stil.
Să schimbăm fundalul casetei info la galben deschis, care este @ Alertă galben- (în mixins.less). Nu avem nevoie de o frontieră, deci setați-o la zero.
.info / * border-color: darken (@ alertă-albastru, 5%); * / frontieră: 0; fundal: @ alertă-galben;
Ultimul pas este să ștergeți imaginea de ecran prestabilită și să o înlocuiți cu cea pe care am făcut-o Kotkoda.
Iată cum arată tema cu o lățime de 600 de pixeli. În următoarele tutoriale vom curăța tema de la părțile inutile, apoi o vom pregăti pentru a fi trimise la ThemeForest.
