Skugga bakom rubrikerna
Nu ska jag lära er hur man gör skugga bakom inläggsrubrikerna så att det ser lite ut som glöd, eller jag tycker det i alla fall. Detta går att göra med annan text i designen bara att man lägger det på rätt plats i stilmallen.
Först ska man öppna stilmallen och leta upp inläggsrubrikerna, som brukar alltså heta "entryheader" eller "h3". Min ser ut såhär.
Sen lägger man till "text-shadow: 0px 0px 6px #b2119f;" var som helst inom { och }.
Färgen går såklart att ändra till vilken man vill.
Ungefär såhär ska det se ut.
Sen är det bara att föhandsgranska och spara om det ser rätt ut!
Här har ni före och efter!
Hoppas det hjälpte!
Undrar ni något så är det bara att fråga i kommentarerna!
Blogg.se's nya Designeditor
Som ni vet så har man alltid haft två möjligheter när det kommer till att ändra sin design här på Blogg.se. Man kan gå in på design och sedan redigera stilmall/kodmall eller så kan man använda deras Designeditor, där man ser bloggen bredvid mallen.
Många av er har säkert märkt att för några dagar sedan så har blogg.se tagit bort det förra alternativet, så bara den nyare designeditorn fanns kvar.
Jag vet att jag är inte den enda som blev precis vansinnig, jag funderade även på att byta bloggportal och det har jag aldrig övervägat innan. Det var så pass att jag till och med skickade ett långt brev till Kundservice. Det enda svaret jag fick från dom var:
"Vi har inte tagit bort det.
Du kan nå kodmaller/stilmallen via Designeditor --> "Redigera HTML" knappen"
Du kan nå kodmaller/stilmallen via Designeditor --> "Redigera HTML" knappen"
Vilket var inte vad jag frågade om...
Men aja, efter mycket letande så kollade ja om det fanns någon info på blogg.se's forum och tillslut hittade jag att någon skrev att man kunde hålla inne "ctrl" och "alt" och då komma åt den gamla design funktionen. Det visade sig att det räckte bara med att hålla inne Alt!
Sen därifrån finns det några alternativ att välja mellan men det är Design vi är ute efter, klickar man där så kommer man till den klassiska design funktionen!
Hoppas det hjälpte någon som fortfarande har problem med detta!
Hur man lägger ett hjärta i sidomeny listan
Som ni vet så har jag ett hjärta framför varje länk i mina sidomeny listar, alltså framför varje kategori, arkivmånad och inlägg. Det är säkert många som vill veta hur man fixar det så jag tänkte ta på mig det att lära er! Denna metoden går ut på att använda symboler men man kan också använda sig av små bilder om man vill det. Symboler tycker jag är enklare och snyggare om ma bara ska ha en enkel symbol, som hjärta till exempel!
Det första man måste göra är att ta reda på html koden för symbolen man vill ha, eftersom html stödjer inte alla symboler. Om ni bara ska ha ett hjärta som jag har så är koden ♥ men vid intresse kan jag lägga ut en lista över koderna för olika symboler!
När du har koden öppnar du upp dina kodmallar. Sen så bestämmer du var för någonstans vi vill ha hjärtana. Om du vill ha dom som jag har, slltså innan varje länk i listorna gör du som på bilden. Alltså måste koden stå mellan {{ ???.url/link }} "> och {{ ???.title/name }}.
Glöm inte att lägga till det i alla kodmaller! Sen är det bara att förhandsgranska och sen spara!
Som sagt lägger jag gärna ut en lista över koder om ni så vill!
Puss på er!
Få bort Bloggnamn och Beskrivning från Headern
Ni vet när man använder fria designtema gjorda av Blogg.se så står alltid ditt bloggnamn och bloggbeskrivning över header. Är det rätt placerad så kan det ofta vara snyggt samt praktiskt om man vill ändra beskrivning men inte göra en helt ny header. Men oftast är det bara i vägen och man vill ta bort det, nu ska jag lära er hur!
- Gå i er godmall och leta upp koden markerad gult på bilden, den brukar vara rätt högt upp eftersom den står precis under header.
- Ta bort den i alla kodmallar.
- Förhandsgranska och spara.
Så enkelt är det!
Här har ni koden om ni skulle vilja lägga till den igen någon gång;
<h1>{{ blog.title }}</h1>
<h2>{{ blog.description }}</h2>
<h2>{{ blog.description }}</h2>
Undrar ni något så är det bara att fråga i kommentarerna!
Puss på er!
Runda hörn på bilder i inläggen!
Hej! Idag ska jag lära er hur man gör så att alla bilderna i inläggen har runda hörn. Alltså ska ni fixa det här i stilmallen så ni inte behöver använda ett redieringsprogram för varenda bild ni vill ha!
Gör så här.
- Öppna stilamallen och leta upp ".image".
- Klistra in koden "border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;" - Tänk på att det måste hamna efter"{" och innan "}".
- Klicka på förhandsgranska för att se hur det blev och spara om du är nöjd!
Sen så kan ni alltid ändra siffran till vilken ni vill, desto högre siffra, desto mer runda kanterna blir därmed blir mindre siffra nästan inte runda alls.
Puss på er!
Hur man laddar ner typsnitt
Hej på er! Denna gången tänkte jag visa er hur man laddar ner nya och unika typsnitt som man kan använda t.ex. på bilder i redigeringsprogram(såsom, Photoshop, Gimp, Paint osv) och då även på din blogg!
- Börja med att gå till www.dafont.com och leta upp ett typsnitt du vill ha. Man kan både bläddra igenom kategorier eller skriva in ett sökord i rutan. På bilden har jag redan valt ett typsnitt. När du har hittat det du vill ha klickar du på "Download" knappen bredvid.
- Klicka sen på filen när den är färdigt nerladdat.
- Då kommer WinRar, Winzip eller liknande program öppnas upp(om du inte har något sånt program måste du ladda ner det först, jag använder WinRar vilket finns att ladda ner gratis). Där kommer filerna du har laddat ner sitta i en lista, nästan alltid med en anteckningsfil som ingen behöver. Dubbelklicka på typsnittet/typsnitten du ska ha.
- Då öppnas upp ett OpenType fönster där du ser typsnittet. Då är det bara att klicka på "Installera" och voila! Då finns typsnittet på din dator.
Baskunskaper om Text
Så sist så lärde vi oss vad alla kategorier i stilmallen är för något så nästa steg borde då vara hur man ändrar dessa grejerna. Detta kan till exempel vara att ändra storlek eller färg på något, eller kanske ändra något i typsnittet.
Color ändrar färgen på texten, det gör du med att sätta ett "#" och sedan en färg kod.
Exempel: color: #b2119f;
På så sätt kan du ändra färg på t.ex. rubrikerna på inlägget texterna i inlägget och i stort sätt alla andra texter! Det är upp till dig var du lägger koden.
HÄR har ni en färgkarta.
Font Family ändrar vilket typsnitt man vill ha. Kom ihåg att man kan bara välja dom standard typsnitten som finns på datorn. Det finns sätt att få in special typsnitt men det förklarar jag inte här. Om du inte vet vad du ska ha för typsnitt, testa öppna ett Word dokument och kolla igenom vilka som finns!
Exempel: font-family: arial, serif;
Text Transform handlar om du vill ha stora eller små bokstäver. Det finns tre alternativ(förutom none som är vanligt), uppercase, lowercase, capitalize. "Uppercase" gör så att hela texten har stora bokstäver, "lowercase" gör tvärtom så det blir små bokstäver och "capitalize" gör så att första bokstaven i varje ord har stor bokstav.
Exempel: text-transform: uppercase;
Text Decoration är om du vill ha någon linje på texten. Om du väljer "underline" så kommer det en linje under texten, "overline" kommer det en linje över texten och "line-through" blir det en linje rakt genom texten.
Exempel: text-decoration: overline;
Font Size är helt enkelt storleken på texten. Det bästa man kan göra här är nog att prova sig fram. Lägre siffra betyder mindre storlek på texten och högre siffra större storlek.
Exempel: font-size: 12px;
Line Height är avståndet mellan varje linje i texten. Utrymmet mäts i procent och desto högre siffra, desto mer mellanrum mellan raderna.
Exempel: line-height: 130%;
Jag tror jag lyckades täcka alla grunderna vad det gäller text i bloggen. Som vanligt är det bara att prova sig fram och om något inte funkar så är det bara att fråga. Säg gärna vad ni vill lära er nästa gång!
Puss på er!
Vad är vad i stilmallen?
Tänkte nu börja med att hjälpa er litegrann med bloggdesign och det känns som att en bra början skulle vara att berätta om alla "kategorier" i stilmallen och förklara vad dom betyder.
Body är bakgrunden på bloggen.
Wrapper är allting framför bakgrunden, alltså inläggen och sidomenyn.
Header är den stora bilden eller rubriken överst på bloggen.
Content är själva inlägget.
Entry Headers eller h3 är rubrikerna på inläggen.
h1 är blogg titeln som står över headerbilden, många väljer att ta bort den.
h2 är bloggbeskrivningen som står över headerbilden, månge väljer att ta bort den med.
Side är sidomenyn, oftast antingen bredvid inläggen eller även på varsin sida.
Navheader är rubrikerna i sidomenyn, t.ex. "Arkiv", "Kategorier" osv.
Nav ul & li är punktlistorna i sidomenyn.
Nav är resten av texten i sidomenyn.
Entrybody är själva innehållet(texten) i dina inlägg.
Entrymeta är den lilla texen som oftast sitter under inlägget där det står datum, kategori, permalink osv.
Commentheader är "rubriken" på kommentarerna, alltså namnet på den som skrev kommentaren.
Commenttext är själva kommentaren.
Commentmeta är datum, tid och eventuellt står det också bloggen hos den som skrev kommentaren.
Commentform är bakgrunden bakom där man fyller i damn, blogg, kommentar osv.
Om ni tittar på er stilmall så ser ni att varje kategori böjar med ett "#" och det är så man vet att en ny kategori har börjat. Om du ska lägga till eller ändra något i någon kategori måste du alltid avsuta med en ";" och allting måste hamna efter varje kategoris "{" och innan "}".
Hoppas det hjälpte! Sen är det bara att säga till vad ni vill lära er nästa gång så försöker jag mitt bästa!
Puss på er!