Share
We gebruiken een startthema om een nieuwe responsieve site te bouwen.
Bones is een volledig gratis startthema (geen kader), gebouwd met de nieuwste praktische tips. Het dient als een uitstekende basis om een WordPress-thema te bouwen. Dit is een onvolledige lijst met functies over Bones:
U kunt het startersthema downloaden van de Themble-site.
Pak het ZIP-bestand uit in wp-content / themes en hernoem de map naar beenderen.
Stel het thema in de WP admin-interface in op Bones (op uiterlijk / thema's).
Zo ziet de website eruit met het basisbones-thema. De resolutie is 1440x900 pixels.
Dit is de plaats van de thema-naam, beschrijving, auteur, versie enzovoort. De style.css bestand bevindt zich in de themamap. Eigenlijk gebruiken de thema's op basis van Bones hier geen echte stijlen, maar alleen de gegevens voor het weergeven van de info in de beheerdersinterface.
/ ************************************************* ******************* Naam onderwerp: Kotkoda Theme URI: http://wp.tutsplus.com Beschrijving: Deze site is gebouwd met behulp van het Bones Development Theme . Auteur: Adam Burucs Auteur URI: http://burucs.com Versie: 1.0 Labels: flexble-width, klaar voor vertaling, microformats, rtl-taal-ondersteuning Licentie: GPL2 Licentie-URI: http://www.gnu.org/ licenties / gpl-2.0.html
Deze tool is nodig om de stijlen van botten te compileren en te verkleinen in een productie-CSS-bestand. Ik koos voor WinLESS omdat ik met Windows 7 bezig ben.
In de bones / bibliotheek / minder map kunt u alle bestanden vinden om het thema aan te passen. Dit zijn de stijlen die we nodig hebben:
We gebruiken oranje achtergrond en halfgrijs (@ Kotkoda-grijs) tekstkleur in ongegrond. (Gebruik kleur om de kleur van het lettertype in te stellen en de eigenschap background om de achtergrondkleur in te stellen.)
lichaam font-family: Georgia, serif; lettergrootte: 14 px; regelhoogte: 1,5; kleur: @ kotkoda-gray; achtergrond: # ED7626; / * hoofdachtergrondkleur * /
En dit gaat in mixins.less. U kunt een kleurvariabele in MINDER definiëren met het volgende: @ Kotkoda-grijs is de naam van de kleurvariabele en na de dubbele punt is de kleurcode (# 19171A). Elke variabele naam begint met de @ teken.
@ kotkoda-gray: # 19171A;
Voor links is de kleur @wit, maar @ Alert-geel wordt gebruikt voor zweef- en focusstijlen. Gebruik de eigenschap Color om de waarde in te stellen. Elke kop en kop met links zal zijn @ Kotkoda-grijs. Hiervoor hebben we een beetje donkerder grijs nodig, de oorspronkelijke waarde was # 999. Met de kleur regel waar we het op kunnen zetten # 444 (wat gelijk is aan # 444444).
/ ********************* LINK STIJLEN ********************* / a, a: bezocht color: @white; / * on hover * / &: hover, &: focus color: @ alert-yellow; ... ... h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 font-family: sans-serif; tekstweergave: optimaliseerbaarheid; font-gewicht: 500; / * als u webfonts gaat gebruiken, controleer dan uw gewichten op http://css-tricks.com/watch-your-font-weight/ * / / * verwijderen van tekstdecoratie uit alle koplinks * / a tekstdecoratie: geen; kleur: @ kotkoda-gray; ... / * post meta * / .meta color: # 444; ...
Dit is hoe het eruit ziet in 600 pixels breed.
We komen aan het einde van het eerste deel van deze tutorialserie.
Accentsconagua