Share
In deze zelfstudie bespreken we hoe u vijf snelle CSS-aanpassingen kunt doen die uw blog laten opvallen. Zelfs als u niet weet wat CSS is, kunt u de instructies volgen en het standaard uiterlijk van uw thema wijzigen.
Als je dat nog niet weet, laat ik je zien hoe je deze dingen kunt vinden en instellen. Op die manier kunt u de lay-out van uw website of blog veilig bewerken. Als uw website al live is en verkeer ontvangt, kan het een goed idee zijn om een "down for maintenance" -plugin te gebruiken, zodat bezoekers niet in verwarring raken door de steeds veranderende lay-out.
Een ander alternatief is om een ontwikkelomgeving op uw lokale computer in te stellen en vervolgens de wijzigingen naar de server te uploaden zodra ze zijn voltooid.
Uiteindelijk is het aan jou.
Sommige thema's hebben al de mogelijkheid om delen van de CSS-stylesheet te overschrijven, zodat u uw eigen lay-out kunt maken zonder extra plug-ins te installeren of een kindthema te maken. Dit is te vinden onder de Uiterlijk> Thema-opties menus.
Soms bevindt het zich in een van de subcategorieën, maar zoek je naar een vak met "CSS bewerken" als kopregel.
Als uw thema geen dergelijke optie heeft, wordt de Jetpack-plug-in geleverd met een CSS-editorfunctie, maar om deze te gebruiken, moet u de plug-in verbinden met uw WordPress.com-account of een nieuwe maken.
Het bespaart je revisies, wat het gemakkelijk maakt om terug te gaan naar een vorige lay-out als je het gevoel hebt dat je het ergens verprutst hebt, maar als je niet geïnteresseerd bent in de andere functies van de Jetpack-plug-in, zou een sneller alternatief de eenvoudige aangepaste CSS-plug-in.
Nadat je de plug-in hebt geïnstalleerd en geactiveerd, kun je de css bewerken via Uiterlijk> aangepaste CSS. (In Jetpack bevindt dit zich onder de menuoptie Uiterlijk> CSS bewerken.)
Als je bereid bent om uitgebreide veranderingen aan te brengen, is het het beste idee om een kindthema op te zetten. Het probleem met aanpassing door override is dat je overbodige regels code krijgt en dat het blog of de website langzamer kan laden voor een uitgebreide bewerking.
Bovendien is het een stuk eenvoudiger om dingen bij te houden wanneer u de code op één plaats bewerkt. U kunt een plug-in zoals Orbisius Child Theme Creator of een duplicaatthema gebruiken om direct een kindthema te maken.
Je kunt ook gewoon een nieuwe themamap maken, noem die THEMENAME child, create style.css in de nieuwe themamap en importeer de hoofd stylesheet. (THEMENAME moet worden vervangen door het thema dat u wilt bewerken.)
Accentsconagua
@import url ("... /THEMENAME/style.css"); Voor meer informatie over het maken van een kindthema, kun je onze handleiding bekijken. Nu je helemaal klaar bent, is het tijd om onze handen vuil te maken. We beginnen met iets heel basaals: de achtergrond van je blog / website veranderen. Ik zal je ook laten zien hoe je een stijlvolle achtergrondafbeelding kunt toevoegen.
Om de achtergrond van uw website te veranderen, moet u eerst vertrouwd raken met de vormgeving van het thema. Is de achtergrondkleur eenvoudig onder het lichaam of is deze in een eigen frame ingebouwd??
Sommige thema's zijn niet zo intuïtief als andere, dus als degene die u momenteel gebruikt, begrijpelijk is, wilt u misschien een ander thema kiezen voordat u begint met bewerken. (Degene die ik in het voorbeeld gebruik, is het gratis Catchbox-thema en een heel gebruikelijk startthema is eenentwintig.)
Bij de meeste niet-breedtethema's staat de achtergrondkleur eenvoudig onder het lichaam. En overrulen is vrij eenvoudig.
body achtergrondkleur: # 477C67;
Je kunt de W3Schools HTML-kleurkiezer gebruiken om je kleuren te krijgen, of een Chrome-extensie, een Firefox-plug-in of een WordPress-plug-in installeren om dingen mee te versnellen terwijl je onderweg aan het bewerken bent.
Ik koos voor een diepblauwe achtergrondkleur: # 477C67:
Als dit codefragment de achtergrondkleur van je blog niet wijzigt, is het waarschijnlijk dat gestileerde lege containers worden gebruikt om de achtergrond te vullen.
Als u een afbeelding als achtergrond wilt instellen, uploadt u eerst de afbeelding. Zorg dat het een hoge resolutie heeft, anders ziet het er niet goed uit. Kopieer vervolgens de URL. Je hebt alleen het gedeelte na het blog nodig, dus als je het bestand via WordPress hebt geüpload, moet het pad er ongeveer zo uitzien: "wp-content / uploads / 2014/01 / IMAGE.jpg"
body background: url (location / img.jpg) no-repeat midden gecentreerd; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; achtergrondformaat: omslag;
Het eindresultaat zou er ongeveer zo uit moeten zien:
Het leuke is dat de foto blijft staan, zelfs als je naar beneden scrolt door de pagina. Voor geweldige foto's die u gratis kunt gebruiken zonder tegoed te geven (hoewel het waarschijnlijk welkom is), kunt u unsplash.com bezoeken.
Soms stuit je op een geweldig thema. Het ziet er geweldig uit, maar er is slechts één probleem. Het lettertype is klein en grijs, dus het is bijna onleesbaar. Maar maak je geen zorgen, je kunt dit in een eenvoudige stap veranderen.
body font-size: 16px; kleur: # 000
Voeg dit korte codefragment toe aan de aangepaste CSS en het probleem wordt opgelost. (Zet het na de code over de achtergrond als je die van jou hebt veranderd.)
Een goed formaat voor het standaard lettertype van uw website of blog is 14-16 pixels. Vermijd de 12 pixels die verplicht waren voor bijvoorbeeld schoolrapporten, omdat je hoofddoel niet is om papier te besparen. U wilt dat uw inhoud ademt en dat deze leesbaarder wordt. Als u denkt dat het standaardlettertype van uw thema er onprofessioneel uitziet, kunt u deze regel toevoegen:
lichaam font-family: Arial, Helvetica, sans-serif;
Het hele ding er zo uit laten zien:
lichaam font-family: Arial, Helvetica, sans-serif; lettergrootte: 16px; kleur: # 000
Als u de kleur van de links wilt wijzigen, kunt u dit vrij eenvoudig doen. Het enige wat u hoeft te doen is de parameter te gebruiken voor koppelingen in CSS "a" en dan de kleur te veranderen in wat u wilt.
a color: # BA2323;
Ik besloot om voor een rood te gaan (# BA2323) en het zag er uiteindelijk zo uit.
Er zijn een paar meer opties voor hoe je je links wilt stylen. U kunt bijvoorbeeld beslissen hoe u wilt dat de link reageert wanneer iemand eroverheen zweeft. De meest voorkomende is onderstrepen, maar u kunt de primaire kleur of achtergrondkleur wijzigen.
a: hover color: # 222; background-color: # BA2323;
U kunt bijvoorbeeld de tekst in grijs veranderen en de achtergrondkleur in de gebruikelijke tekstkleur veranderen. Vervolgens kunt u de stijl van bezochte links wijzigen. Meestal is er een kleurverandering, maar u kunt ook een van de vorige wijzigingen gebruiken.
a: bezocht color: # 004A4A;
De kop van een bericht is meestal in een h1-element, en de sub-kop gebruikt in berichten is meestal in een h2-element (hoewel dit iets is dat je zelf kiest bij het maken van een bericht). Maar als je thema specifiek de kleur van posttitels aanpast, zal het veranderen van de stijl van h1-tags niet helpen. Dus je moet uitzoeken of het thema dat je gebruikt dit wel of niet doet.
U kunt controleren of uw thema een specifieke stijl gebruikt voor posttitels door de paginabron en het zoeken te openen (druk op Controle-F) voor "berichttitel". Als de resultaten laten zien ""dan style je h1 niet, dan moet je styling voorzien in het" some-style "-attribuut.
Als u verschillende wijzigingen gaat aanbrengen, kunt u ook een browserextensie installeren die u de CSS-stijl van de geselecteerde tekst laat zien. Het zal meestal "entry-title" zijn, want dat is de standaard voor WordPress-ontwikkeling.
Ga hiervoor naar Editor onder de Verschijning menu. en zoek naar "some-style". Zoals ik al zei, is die stijl meestal "entry-title". Bekijk vervolgens welke regels u moet overschrijven. Soms is er een stijl specifiek voor de gekoppelde titel, dus misschien moet je die ook wijzigen. Dit wordt weergegeven als "h1 a " of "some-style a ".
Om de kleur en het formaat van mijn kop te bewerken, zou ik deze regels moeten toevoegen:
.ingangstitel color: #WANTEDCOLOR; font-size: WANTEDSIZEpx; .entry-title a color: #WANTEDCOLOR;
Ik koos voor een lichtblauw (# 5CBDBD).
Houd er rekening mee dat ik nogal in het oog springende kleuren gebruik om duidelijk te maken welke wijzigingen ik in het thema heb aangebracht. Je wilt waarschijnlijk een beetje subtieler zijn en een beter kleurenschema vinden.
Als u de stijl van koppen wilt bewerken die u in uw inhoud gebruikt, dan in plaats van .sommige-stijl, open je met h1 of h2 of h3 .
Als er vervelende hoeken zijn waarvan je denkt dat die moeten worden afgerond, of sommige die te veel zijn afgerond, hier is een snelle oplossing.
Zoek de stijl van de betreffende container in het originele stylesheet. (Open de originele stylesheet in het WordPress-dashboard of in een tekstbestand en zoek vervolgens naar een tekst die uniek is voor de container die u wilt bewerken. Of u kunt een plug-in gebruiken.) Widgets zijn meestal onder .widget, en de postcontainer is meestal onder de inhoud.
De code die u hier moet gebruiken, is:
-moz-border-radius: SIZEpx; grensradius: SIZEpx;
Als u een huidige gebogen hoek wilt opheffen en deze plat wilt draaien, stelt u de grootte in op 0. Als u wilt zien hoe rondingen een bepaalde container zoeken, begint u met 5 en ziet u hoe dat eruitziet.
Over het algemeen kunt u de pagina doorzoeken als u de hoeken van de hele pagina wilt bewerken. U kunt de inhoudscontainer meestal vinden door ernaar te zoeken .hentry als je de hoeken van de inhoud wilt bewerken. Mogelijk moet u de koptekst en de voettekst afzonderlijk bewerken. Of zoek de widget door te zoeken naar widget.
Een van de gemakkelijkste manieren om een cool kleurenschema voor uw widgets in te stellen is om een andere achtergrondkleur te hebben voor de widget zelf die de widgettitel is. U doet dit door de stijlklasse van de widgettitel te identificeren. (Als u niet meer weet hoe, kopieert u de titel van een widget en zoekt u ernaar in de paginabron h1 bijschrift rond de titel, de klas is onthuld.)
Het heeft de neiging eenvoudig te zijn widget-titel. En als u de achtergrondkleur van de widget zelf wilt wijzigen, zoekt u de stijl voor de widget op, meestal onder .widget. Kies vervolgens een kleur en voeg deze code toe aan je eigen css- of kindthema:
.widget achtergrond: #COLOR; .widget-title background-color: #COLOR;
Ik koos oranje en groenblauw zonder duidelijke reden. Zoals je kunt zien, bevat het titelgedeelte van het kleurenschema geen titel, dus als je consistentie wilt, moet je titels toevoegen aan al je widgets.
Hoewel het in het begin misschien ontzettend afschrikwekkend lijkt om met de code van je website te gaan spelen, zijn de meeste stylesheets intuïtief genoeg dat als je basiskennis van de Wordpress-functionaliteit hebt, je de dingen op de hoogte kunt houden.
Natuurlijk hebben we hiermee nauwelijks het oppervlak geschraapt, maar je weet genoeg om een aantal keuzes te maken voor het betere.
