Styla dina listor

Så här kan en vanlig enkel lista se ut i en blogspot-blogg. Runda diskar framför varje rad och med antalet objekt i parentes efter ordet.
Inte så där jätteskoj alla gånger kanske. Även om dina listor inte har diskar eller fyrkanter framför orden kan man vilja fixa till dem och göra dem lite roligare.
Observera att koderna som följer nedan gäller de nya Designmallarna från Malldesignern!



Du kan med en enkel kod styla listor i din sidokolumn och göra något lite roligare. Här har jag lekt lite med nyanser och ramar, du kan anpassa koden till det du själv vill ha.

Jag har lagt till en streckad ram, flyttat texten till mitten, givit varje rad lite padding och bakgrund samt en hover-effekt när man håller musen över (mittenlänken). Helt plötsligt blev min lista till en rad knappar i stället.
Jag öppnade också min etikettsgadget och ändrade lite där, tog bort rubriken och visningen av antal inlägg.
Vill du så kan du också redigera vilka etiketter som visas.

Du väljer själv om du vill styla enskilda list-gadgets eller alla samtidigt, men tänk på att om du väljer alla så påverkar du också alla listor. Om du har t.ex Populära inlägg-gadgeten kan det se lite lustigt ut, likaså påverkas också gadgets som Blogglistor etc.
Testa gärna med den enklare koden först och om du inte blir nöjd med resultatet kan du radera koden du la in och börja styla enskilda listor istället.

Läs i slutet på inlägget vad alla rader i koden betyder och vilka olika val du kan göra!

För att styla alla listgadgets du har i dina sidokolumner väljer du den här koden:

/*  Rutan bakom hela listan */
.sidebar .widget  ul {
width: 200px;
background: #eeeeee;
border: 1px dashed #bf0000;
padding: 0;
}

/* Varje enskild rad i listan */
.sidebar .widget  ul li {
background: #d2d2d2;
border-bottom: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
padding: 10px;
margin:10px;
list-style: none;
text-align: center;
}

/* Enskild rad med musen över */
.sidebar .widget  ul li:hover {
background: #f2f2f2;
}

/* Texten/länkarna i listan */
.sidebar .widget  ul li a {
text-transform: uppercase;
text-shadow: 1px 1px #ffffff;
font-weight:normal;
color: #bf0000;
}

Om du däremot hellre vill styla en eller ett par listor ska du göra så här:

Gå till din kodmall och rulla allra längst ner.

Här hittar du dina gadgets, vad de heter och viktigast - vilket id de har. Spar id'et till de gadgets du vill förändra, på ett papper eller i ett anteckningsdokument på datorn. Det är viktigt att du behåller exakt stavning, stora resp. små bokstäver och siffran i slutet på id'et, så var noga!
De små 'tecknen' på respektive sida om id'et hör inte till, de ska inte med.

Nu är det dags att lägga in din kod.
Ska du bara ändra en gadet är det enkelt, du byter bara ut mitt ord id mot din gadgets id på varje rad där det förekommer (rödmarkerat i koden).

div#Label1 ul {
width: 200px;
background: #eeeeee;
border: 1px dashed #bf0000;
padding: 0;
}

Vill du däremot förändra fler gagets (och styla dem lika) ska du göra så här:

Lägg in din första gadgets id i det rödmarkerade id'et. Upprepa för varje stycke.
Kopiera hela raden fram till, men inte med {-tecknet.
Sätt ett kommatecken efter det första id'et, gör ett mellanslag och klistra sen in det du nyss kopierade. Byt ut det första id'et mot nästa gadgets.
Det kan alltså se ut så här:

div#Label1 ul,  div#Label2 ul, div#PageList1 ul {
width: 200px;
background: #eeeeee;
border: 1px dashed #bf0000;
padding: 0;
}

Se du att jag fick med ul för varje gadget? Det är det viktiga, att du både har gadgetens id och att listelementet kommer med.
Upprepa för varje stycke.

Här kommer koden:

/*  Rutan bakom hela listan */
div#id ul {
width: 200px;
background: #eeeeee;
border: 1px dashed #bf0000;
padding: 0;
}

/* Varje enskild rad i listan */
div#id ul li {
background: #d2d2d2;
border-bottom: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
padding: 10px;
margin:10px;
list-style: none;
text-align: center;
}

/* Enskild rad med musen över */
div#id ul li:hover {
background: #f2f2f2;
}

/* Texten/länkarna i listan */
div#id ul li a {
text-transform: uppercase;
text-shadow: 1px 1px #ffffff;
font-weight:normal;
color: #bf0000;
}

Ett bra tips kan vara att kopiera över den här koden till ett anteckningsdokument på din dator och lägga in dina listors id där. När du är säker på att du klistrat in allt rätt kan du lägga in koden i din kodmall.

Så är det dags att lägga in koden i kodmallen.
Eftersom en del bloggare upplevt att koden som läggs i Malldesignerns css-ruta försvinner och blir osynlig (=svår att redigera) så lägger vi den här koden direkt i kodmallen. Är man lite noga är det enkelt!

När du öppnat kodmallen ska du rulla ner tills du ser den här rubriken: /* Widgets */
Längst ner i det stycket (under de andra koderna, men innan nästa rubrik kommer) lägger du in din kod.

Börja med att förhandsgranska.
Du kommer säkert att vilja ändra en hel del i utseendet och just därför har jag lagt in ett antal val. Radera de rader du inte är intresserad av, men prova gärna lite först, kanske hittar du användning för de flesta alternativen om du tänker efter lite.
Förhandsgranska sen efter varje ändring tills du är nöjd. Glöm inte att titta hur alla gadgets i bloggen ser ut om du använder den första, allmänna koden. Kanske påverkas en gadget på ett sätt du inte gillar, det är lätt att missa någon om man har många.
När du är nöjd - Spara!


Ps, vill du ENBART ta bort de där punkterna/fyrkanterna framför listor?
Lägg då in den här koden istället:

 .sidebar .widget  ul li {
list-style: none;
}

Här följer en förklaring för den som vill veta lite mer om de olika radern i koden.

background:  Bakgrundsfärg  Använd färgkod  # + 6 siffror/bokstäver Ex. #ffffff  = vit

color:  Textfärg  Använd färgkod  # + 6 siffror/bokstäver Ex. #000000 = svart

text-transform: Stora eller små bokstäver. Radera raden om du hellre vill påverka texten via gadgetens egen text när du öppnar gadgeten i bloggens layoutläge.
     Alternativ: uppercase   lowercase

font-weight: Normal eller fetad stil.   
     Alternativ: normal   bold   bolder   lighter

text-shadow: Skugga på bokstäver. 1px 1px #ffffff  betyder vit skugga en pixel nedåt och åt höger.
     Textshadow syns inte i Internet Explorer!

border: Ram. Kan läggas runt hela objektet genom att skriva ex. border: 1px solid #000000; eller på enskild sida genom att skriva ex. border-top: 1px solid #000000;
     Alternativ - placering: border-top   border-bottom   border-left   border-right 
     Alternativ - utseende: solid   dotted   dashed   double   ridge   groove   inset   outset

width: Vidden på bakgrunden i det här fallet. Finns med i koden ifall du behöver öka eller minska vidden. Radera om du ej behöver använda. 

margin: Marginalen till element som ligger utanför det aktuella elementet.
     Alternativ:  margin   margin-top   margin-bottom   margin-left   margin-right

padding: Marginalen inne i ett element, t.ex hur mycket tomt utrymme som ska vara runt en text innan bakgrundens kanter kommer. Är du osäker på skillnaden på margin och padding - prova och se vad som händer.
     Alternativ:   padding  padding-top   padding-bottom   padding-left   padding-right

text-align: Textens placering.
     Alternativ:  left   center   right

list-style: Vad som finns framför varje enskild länk i listan, alltså den där lilla kvadraten eller disken.
    Alternativ:  none   - inget
                        circle  -cirkel
                        disc  -    ifylld cirkel
                        square - kvadrat
                        decimal - siffor  ex. 1, 2, 3
                        lower-alpha  - bokstäver  ex, a, b, c
                        upper-alpha  - bokstäver  ex A, B, C
                        lower-roman  - romerska siffror  ex  i, ii, iii, iv
                        upper-roman  - romerska siffror  ex I, II, III, IV