Share
Vi använder ett starttema för att bygga en ny responsiv webbplats.
Ben är ett helt gratis starttema (inte ett ramverk) byggt med de senaste bästa metoderna. Det fungerar som en utmärkt bas för att bygga ett WordPress-tema. Detta är en ofullständig funktionslista om ben:
Du kan ladda ner starttemat från Themble-webbplatsen.
Packa upp ZIP-filen till wp-content / teman och byt namn på sin katalog till ben.
Ställ in temat i WP-administratörsgränssnittet till ben (vid Utseende / Teman).
Så här ser webbplatsen ut med det grundläggande benämnet. Upplösningen är 1440x900 pixlar.
Det här är platsen för temanamn, beskrivning, författare, version och så vidare. De style.css filen finns i temakatalogen. I grunden använder de teman som baseras på Bones inte några riktiga stilar här, men bara data för att visa informationen i admingränssnittet.
/ ************************************************* *********************** Tema Namn: Kotkoda Tema URI: http://wp.tutsplus.com Beskrivning: Denna webbplats byggdes med hjälp av Bones Development Theme . Författare: Adam Burucs Författare URI: http://burucs.com Version: 1.0 Taggar: flexble-width, translation-ready, microformats, rtl-language-support Licens: GPL2 Licens URI: http://www.gnu.org/ licenser / gpl-2.0.html
Det här verktyget behövs för att kompilera och begränsa Bones-stilar till en CSS-produktion. Jag valde WinLESS eftersom jag arbetar med Windows 7.
I ben / bibliotek / mindre katalog hittar du alla filer för att anpassa temat. Dessa är de stilar vi behöver:
Vi använder orange bakgrund och midgrå (@ Kotkoda-grå) textfärg i grundlös. (Använd färg för att ställa in teckensfärg och bakgrundsegenskap för att ställa in bakgrundsfärgen.)
kropp font-family: Georgia, serif; typsnittstorlek: 14px; linjehöjd: 1,5; färg: @ kotkoda-grå; bakgrund: # ED7626; / * huvud bakgrundsfärg * /
Och detta går in i mixins.less. Du kan definiera en färgvariabel i LESS med följande: @ Kotkoda-grå är färgvariabeln och efter kolon är färgkoden (# 19171A). Varje variabelnamn börjar med @ skylt.
@ kotkoda-grå: # 19171A;
För länkar blir färgen @vit, men @ Alert-gul kommer att användas för svävar och fokus stilar. Använd färgegenskapen för att ställa in värdet. Varje rubrik och rubrik med länkar kommer att vara @ Kotkoda-grå. Vi behöver lite mörkare grå för detta, det ursprungliga värdet var # 999. Med Färg regel vi kan ställa in det till # 444 (vilket är lika med # 444444).
/ ********************* LINK STYLES ********************* / a, a: besökte färg: @white; / * på sväva * / &: sväva, &: fokusera färg: @ varningsgul; ... ... h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 font-family: sans-serif; text-rendering: optimizelegibility; font-vikt: 500; / * Om du ska använda webbfonter, se till att kontrollera dina vikter http://css-tricks.com/watch-your-fontweight/ * / / * Ta bort textdekoration från alla rubriklänkar * / a text-dekoration: ingen; färg: @ kotkoda-grå; ... / * posta meta * / .meta färg: # 444; ...
Så här ser det ut i 600 pixlar bred.
Vi kommer till slutet av den första delen av denna handledningsserie.
Accentsconagua