Kategoriarkiv: Utseende

Ikoner med Font Awesome Icons

Meh!NjaeOkejGrymtToppen! (1 röster, med ett snitt på: 4,00 av max 5)
Loading...
Ibland vill du säkert piffa till text med hjälp av lite snygga ikoner. Antingen i ett inlägg, eller varför inte i en textwidget?
Nu har våra egna teman Spring13, Bookly13 och Stock13 ett typsnitt med ikoner som heter Font Awesome inbäddat och klart att användas. Och hur gör du det? Häng med, så visar jag.

Exempel 1 | Inlägg med ikoner

1.

Skärmavbild 2014-12-07 kl. 13.00.51

Här tänkte jag skriva ett vanligt inlägg där jag vill tipsa om WordPress-appen för mina läsare och ge länkar till de olika ”app-affärer” som finns.
Eftersom vi ska jobba lite med ”kod” så har jag växlat över till ”Text”-läget, så vi ser koden i inlägget. (Du hittar de två knapparna för ”Visuell” och ”Text” uppe till höger i innehållsfältet där vi skriver vårt inlägg.)

2.

Kodsnutten för att lägga in en ikon är

<i class="fa fa-ikonnamn"></i>

där vi byter ut ”fa-ikonnamn” mot den ikon vi vill använda.
http://fontawesome.io/icons/ hittar ni en lista med bilder på alla ikoner som finns med namn till.

De tre ikoner jag skulle vilja använda är fa-apple, fa-android och fa-windows då jag ska länka till deras respektive butiker.

3.

Skärmavbild 2014-12-07 kl. 13.14.45

Som ni ser har jag nu lagt till kodsnutten för mina respektive ikoner. Dags att förhandsgranska. Det kan vi göra genom att klicka på ”förhandsgranska” som ligger i samma ruta ovanför ”publicera”.

Skärmavbild 2014-12-07 kl. 13.17.04

Så här kommer inlägget att se ut, nu med toksnygga ikoner. 🙂

4.

Skärmavbild 2014-12-07 kl. 13.18.44

Nu går vi tillbaka och redigerar inlägget igen. Dags att göra länkar. Markera första raden och klicka på ”link” i verktygsraden ovanför.

Skärmavbild 2014-12-07 kl. 13.20.23

Klistra in länken till den adress du vill länka till. Välj om länken ska öppnas i ett nytt fönster och klicka på ”Lägg till länk”.
Gör likadant med alla länkar.

5.

Skärmavbild 2014-12-07 kl. 13.23.33

Nu ser ni att länkarna är klara. Bara att testa att de funkar.

Exempel 2 | Widget

Du kan även använda detta i en text-widget. Jag har lagt till en text-widget och tänker göra en kom-ihåg-lista.

1.

Skärmavbild 2014-12-07 kl. 13.33.23

Här har jag skrivit upp saker som jag vill lista. Glöm inte att bocka för ”Lägg till styckesindelning automatiskt” så det blir radbryt i texten.

2.

Skärmavbild 2014-12-07 kl. 13.40.20

Jag använder de båda ”fa-check-square-o” och ”fa-square-o” som i det ena fallet är en ruta och den andra en ibockad ruta.
Spara när du är nöjd och förhandsgranska.

Skärmavbild 2014-12-07 kl. 13.40.38

Nu är allt klart! Det är bara till att låta fantasin spela fritt nu. Ta en titt på vilka ikoner som finns.

 

Fixa till en ram på bilder

Meh!NjaeOkejGrymtToppen! (1 röster, med ett snitt på: 5,00 av max 5)
Loading...
Som en del av er märkt, så försvann möjligheten till att lägga till ramar på era bilder i mediahanteraren i o m uppdateringen till WordPress 3.9. Det kan vara möjligt att de återinför det, men vilket som, får ni ett litet kodexempel på hur man kan göra ämdå.

Skärmavbild 2014-05-16 kl. 14.52.21

1. Börja med att ladda upp och infoga en bild, precis som vanligt.

Skärmavbild 2014-05-16 kl. 14.52.49

2. Växla från ”visuell” till ”text”-läget, som du hittar längst till höger i redigeringsfältet. Nu ser du koden bakom inlägget, i stället för det visuella.
Leta rätt på den infogade bildens kod genom att leta efter den kodsnutt som börjar med <img...

Skärmavbild 2014-05-16 kl. 14.53.41

3. Lägg nu till kodsnutten style="border: 10px solid #000;" så att det ser ut som det blåmarkerade på bilden ovan.

Skärmavbild 2014-05-16 kl. 14.53.50

4. Nu kan du gå tillbaka till det visuella läget, så har du en svart, 10 pixlar bred ram runt din bild.

Du kan givevis ändra antalet pixlar på ramen. Ju fler, desto fetare. Solid kan bytas ut mot dashed eller dotted, för streckad eller prickad linje och #000 mot någon annan färg, exempelvis #FFF för vitt.

Hur får jag en egen avatar (bild)?

Meh!NjaeOkejGrymtToppen! (2 röster, med ett snitt på: 4,50 av max 5)
Loading...
Hur gör jag för att få en liten avatar (bild) att visas i stället för den smått oidentifierbara ikonen som dyker upp, när jag exempelvis lägger kommentarer?
Som i exemplet här under, där jag (Micke) har en bild vid min kommentar, men inte personen ovan mig.

Skärmavbild 2014-04-07 kl. 08.25.27

Det är rätt enkelt. WordPress och en hel del andra sajter därute använder sig av en tjänst som heter Gravatar, som ni hittar på sv.gravatar.com. Registera er där, med den e-post som ni registrerat er blogg med och ladda upp ett foto som ni vill använda som avatar.
När ni sedan kommenterar på bloggar och sajter runtom på internet där Gravatar stöds, kommer även er bild dyka upp där, om ni anger er e-postadress. Ni kan också registrera flera e-postadressen om ni nu skulle ha det.

Gravatar är en tjänst från Automattic, som står bakom bl a WordPress.

Hur gör jag för att lägga till en Twitter-widget?

Meh!NjaeOkejGrymtToppen! (1 röster, med ett snitt på: 5,00 av max 5)
Loading...
Många frågor har kommit in kring hur man lägger upp en Twitter-widget som visar sin tidslinje eller annat. Du behöver först ha aktiverat och anslutit dig till Jetpack.

1. Först ska vi skapa en widget på twitter.com. Gå till (eller klicka på länken) till https://twitter.com/settings/widgets

t1

Klicka på ”Skapa ny” efter att du har loggat in.

2. Nu ska vi välja vad vi vill visa i vår widget. Det som kommer upp per default är din tidslinje. Till höger ser du en förhandsgranskning över hur det kommer att se ut. Du behöver inte bry dig om höjd och annat, utan det viktigaste är att vi väljer vilket innehåll vi vill ha.
Du skulle t ex kunna välja en hashtag eller annat också. Då får du välja ”Sök” i verktygsfältet och skriva in den taggen.

t2

När du är nöjd klickar du på ”Skapa widget”.

3. När din widget har skapats får du titta uppe i adressfältet på din webbläsare. Efter https://twitter.com/settings/widgets/ kommer en serie av siffror. Dessa ska du kopiera (för att i nästa steg klistra in i din Twitter-widget på din blogg). På bilden här under har jag ”suddat ut” dessa siffror.

t3

4. Logga in på din blogg och gå till ”Widgets” under ”Utseende”. Aktivera widgeten ”Twitter Timeline (Jetpack)” genom att dra upp den dit du vill ha den. Klistra sedan in numret du kopierade i föregående steg under ”Widget ID”

t4

Här kan du även välja till lite i utseende som att ta bort ramar mm. Den är bara att testa. Glöm inte att spara inställningarna längst ned i widgeten.

5. Klart

t5

Snö! Jag vill ha snö på min sajt!

Meh!NjaeOkejGrymtToppen! (1 röster, med ett snitt på: 5,00 av max 5)
Loading...
Skärmavbild 2013-12-15 kl. 11.42.22

Eftersom vi inte (i Stockholm) har fått någon snö ännu, får jag väl passa på att tipsa om en liten funktion i WordPress, som ligger i adminpanelen under ”Inställningar” > ”Allmänt”. Längst ned där finns en ruta man kan bocka för som heter ”Snö”. Då får man det lite juligt på sin blogg/sajt till och med den 4 januari.