Jag har ju tidigare skrivit om hur man kan få färg på kursiv och fet text genom att bara klicka på ”B” eller ”I” i verktygsfältet. Men hur vet du vilken färg du ska välja och framförallt hur väljer du färg?

Bloggdesign.nu har en jättebra artikel med en färgkarta där du kan välja färg exakt hur du vill och till och med testa den. För att kunna göra det så måste du klicka in på denna här. [länk]
Vill du lära dig lite mer om ”färgkoderna” (hexadecimal, RGB och färgnamn) så rekomenderar jag dig att kika här [länk]

> Design tips 23:34, 29 september 2009 Inga kommentarer »

Jag har sedan tidigare berättat hur man sätter färg på kursiv text i bloggen utan att behöva skriva in krångliga koder varje gång. Nu har jag även fått en förfrågan om hur man gör med en fet text.

Jag gjorde som jag gjort tidigare, letade reda med hjälp utav källkoden vad koden för fet text skrivs ner om man använder verktygsfältet, det är nämligen ”strong” så därför så behöver du bara lägga in denna kod i din STILmall:

strong {
font-weight: bold;
color: #DF0000;
}

Förklaringar:

font-weight: bold = tjockleken på texten
abcdefghijklmopqrstbold = fet
color: #666……….= färgen på texten
——————eyoius–.#DF0000 = färgen (mörk röd)

OBS, glöm inte att ändra till valfri färg :)

> Design tips 19:35, 24 september 2009 Inga kommentarer »

Att bloggdesigner kan se olika ut i olika webbläsare är något man ofta stöter på, många har därför på ett enkelt och på ett väldigt enligt mig, lat sätt gjort det acceptabelt genom att skriva ”designen passar bäst i firefox” till exempel.

Jag kan erkänna att jag gjorde det förr också, men det var för att jag inte visste bättre. Jag säger inte detta bara för att framstå mig bättre än andra när jag säger detta utan jag är bara mer envis, så ni inte får detta om bakfoten.

Man kan få en design att se likadan ut i olika webbläsare, men ibland kan man behöva få bra tips på vägen så man inte torskar ut totalt.

Några tips är att:

• Ha flera olika webbläsare till hands, Internet explorer och Mozilla firefox är två av de vanligaste och finns lätt tillgängliga. Jämför och kolla så att allting ser bra ut.
• Validera dina kod och stilmallar. Har du add-on verktyget Web developer [Ladda ner] till firefox, där finns massvis med bra funtktioner till dig som designar mycket. Du kan enkelt använda valideringsverktyget i detta add-on istället för att komma ihåg eller spara de 2 valideringsadresserna. Mer information om det hittar du här. [länk]

  Med valideringsverktyget kan du lätt se vilka problem som behöver åtgärdas och var du hittar dem.

• Designer ser olika ut med olika upplösningar, fråga vänner och dina läsare hur designen ser ut, be dem skicka en skärmdump till exempel så du kan se de möjliga fel som de kan se men inte du.

Detta var några tips på hur du kan göra då designen krånglar, det viktigaste för en webbdesignare är att du är tålamodig och envis. Utan detta kommer du ha halvfärdiga projekt och designer som egentligen inte uppnår ett riktigt mål.

> Design tips 16:47, 8 september 2009 1 Kommentar »

Här har en liten lista på olika add-ons för firefox som jag använder, och jag lovar dig att det underlättar för dig som håller på med designer och liknande varje dag.

1. Firebug [Ladda ner]
   Med firebug kan du enkelt kika på css och html koder. Vet du inte var ”side” ligger till exempel så kan du kika upp det genom att hålla muspekaren på ”#side” i html koderna. Då markerar firebug området så du exakt kan se var det ligger. Dessutom kan du även se hur margin och paddingen ligger jämtemot området.

   (Läs mer…)

> Design tips 23:51, 13 augusti 2009 1 Kommentar »

Jag har faktsikt själv ganska nyss upptäckt detta med skugga i texten. Hur skönt skulle det inte vara att slippa att göra bilder till varje rubrik i menyn för att få en skugga? Dessutom kan du ha skuggor i rubrikerna så du kan matcha menyn.

Detta är då koden som ska in i den kod där texten sitter.
Exempelvis "#h3" – inläggsrubrik eller "#navheader" – meny rubrik
Jag rekomenderar däremot inte att ha det i en vanlig text, t ex. inlägg eller menylänkar, då det kan bli jobbigt att läsa.

text-shadow: 10px -11px 2px #000000;

10px - Anger hur många pixlar åt höger skuggan ska ligga (ange minus "-" för motsatt håll)
11px – Anger hur många pixlar neråt skuggan ska ligga (samma som ovan)
2px – Anger i pixlar vilken "grad" av oskärpa skuggan ska ha.
#000000 - (svart färg) Anger vilken färg skuggan ska ha.
; – Man avslutar alltid en rad med semikolon (;) för att berätta för webbläsarn att raden är slut. Typ som en punkt i en mening.

OBS, TÄNK PÅ ATT DETTA INTE FUNGERAR FÖR ALLA. ENDAST CSS 2 OCH CSS3. Sedan kan webbläsare spela roll också.

> Design tips 21:49, 7 augusti 2009 1 Kommentar »

Jag har fått frågor om hur man lägger in en header, det man inte får glömma är att man måste ladda upp den i rätt storlek.

Denna guide utgår från stilmallen Fashion

1. Då du laddar upp headern och är osäker på dess storlek, ta då det högsta alternativet 1000px (de pixlar som står, är antalet pixlar bred bilden ska laddas upp)
   
2. Ta sedan url adressen på bilden, lättast att ta den är att kopiera den från adressfältet.
   
3. Nu ska du klicka dig in till STILmallen. För att komma dit så klickar du på Design > redigera stilmall
   
4. Leta upp #header i stilmallen, för att underlätta så kan du trycka på ctrl + F så kommer det fram en liten sökruta där du kan skriva in "#header".
5. Då du hittat det så ska du byta ut en del av koden som ser ut såhär
   background: #FFFFFF url(http://static.blogg.se/shared/img/css/fashion_top.jpg) no-repeat right center; 
6. Byt ut "http://static.blogg.se/shared/img/css/fashion_top.jpg" till din nya url adress.
7. Glöm inte att förhandsgranska först så du ser att allting blir rätt.

Händer det att det inte alls blir rätt?

• Var noga med att kolla om headerns storlek stämmer med resten utav designen.
• Kolla så att height och width stämmer överens med headern
• Funkar det inte får du prova dig fram, jag kan tyvärr inte hjälpa dig mer än såhär.

Jag hoppas denna guide är en bra vägledning och att allt går som det ska.
Trevlig kväll!

> Design tips 18:27, 24 juni 2009 Inga kommentarer »

Du kanske någongång har tänkt på hur du får dina bilder ifrån inlägget att synas på bloglovin?

1. Klicka in på "inställningar"  uppe i menyn
   
2. Bocka i "Lämna ut hela inlägg i rss-flödet"
   
3. Klicka på "Spara inställningar" så har du fixat det!

> Design tips 00:39, 22 juni 2009 Inga kommentarer »

Det man kan göra är att exprimentera lite, hur får jag färg på kursiva texten? Hur läggs det i html form?  Kursiv text blir < em > i html då du gör det kursivt med hjälp av verktygsfältet vi använder då vi bloggar på blogg.se.  (ska du skriva in det själv av någon anledning så är det egentligen <i>, <em> i sig är text du vill betona, framhålla, understryka)

Ja, det är det man tar reda på då man vill få fram svar, det enda man behöver göra är att tänka logiskt. Okej, om det läggs som "em" då kan jag ju göra en egen klass för den i stilmallen, som jag i min egen definitiion har beskrivit tidigare  som "inredningen" till detta "em".

Detta är det du behöver lägga in i stilmallen, var du vill:

em {
font-style: italic;
letter-spacing: 1px;
font-weight: normal;
color: #CC0256;
}

Förklaringar:
font style = där skriver du hur du vill att texten ska se ut, som i detta fall kursivt
letter spacing = det betyder hur långt du vill ha mellan bokstäverna, persoligen tycker jag litet passar bättre än mycket då det gäller kursiv text.
font-weight = Här är det hur fet du vill att texten ska vara, normal är ingen alls och bold betyder fet.
color = Detta är det viktigaste då det gäller detta, här kan du välja vilken färg du vill att texten ska vara. Kom ihåg att ljus text är jobbig att läsa så välj någon som passar din blogg, men inte är för ljus. För färgkarta, kolla här  [länk]

Jag hoppas detta hjälpte dig och att du klarar av att göra precis samma sak :)

> Design tips 19:10, 15 juni 2009 Inga kommentarer »

Jag får ofta frågor om vad vissa saker är i stilmallen då de vill ändra typsnitt eller färg på en bakgrund. Jag har nu suttit och gjort så att du, jag säger inte lätt, men lättare kan hitta det du söker.

För varje kod så har jag lagt en bakgrundsfärg/typsnittsfärg så du kan se vad det är du ska ändra.
Tex, bakgrunden är blå = blå text i stilmallen

Startsidan

Kommentarssidan
 

Det kan verka stökigt och krångligt, men detta tycker jag är en bra helhelts förklaring. Vill du veta vad rubrikerna i inlägget är för kod, ja du kollar du på bakgrundsfärgen och kollar på på stilmallen som jag har lagt upp här ovan och kollar vilken färg som är likadan. Inga svårigheter :D

> Design tips 23:33, 19 april 2009 Inga kommentarer »

Det finns hundra säkert tusentals otroligt duktiga blogg/web designare i bloggvärlden, som även också kan göra misstag ibland. Ofta har man lärt sig att designa genom att prova sig fram. Jag har upptäckt många gånger då jag designar en blogg att kodmallen kan vara "stökig".

Jag ska förklara hur jag ser på saken då det gäller kodmall (html) och stilmall (css)
Då en byggfirma bygger ett hus inreder de inte den på samma gång, det gör man själv då man flyttar in.

Kodmallen är som ett hus, det är själva byggnaden, stilmallen är däremot inredningen i huset.  Man ska inte inte lägga koder som beskriver något i kodmllen utan något som är.

Dvs. <font color="#000000"> SKALL ICKE stå i kodmallen, även om det skulle vara enkelt att göra på det viset. Skapa då en CLASS till denna text, eller ännu enklare DIV (ett nytt rum), som du sedan inreder (bestämmer färg, storlek etc) i stilmallen.

Hoppas inte detta inlägg gör dig förvirrad, men detta är något som många designare gör tyvärr…

> Design tips 22:34, 29 mars 2009 Inga kommentarer »