Designhjälpsguide

Klicka på länkarna under varje avsnitt för att komma till designhjälp.

Bloggbakgrunden;
>Hur man ändrar sin bloggbakrunds färg eller bild.
>Fixera bakgrunden så att den ligger stilla!
>Ta bort upprepning- och placering av bild

Header;
>Hur man gör sin egen header.
>Hur man tar bort rubriken längst upp på bloggen.

Meny;
>Gör din egen presentation.
>Ta bort understrykning av länkar.
>Redigera texten till kursiv eller fetstilt.

Övrigt;
>Snabb genomgång på de olika koderna i stilmallen.


Snabbgenomgång av koderna i stillmallen!

Hej imed att det är oftast samma sak man ska ändra i still amllen tänkte jag lägga in en snabbegnomgån på det.

#wraper = hela papret som du skriver inlägg på och menyn, allt som inte är bakgrunden på bloggen.

#header = headern så klart! Kan även kallas för logga eller banner.

#side = menyn som finns på höger eller vänster sida i bloggen.

#content = själva stället där man skriver inlägget på.
#header a,h1,h2 = står för rubriktexten högst upp i bloggen.Kolla HÄR för att ta bort det.

h3 = inläggsrubrikerna
.navheader = menyns rubriker tex, "senaste inläggen" "arkiv"osv
. nav = länkarna under "senaste inläggen" "arkiv" "kategorier"

 

.comentaheader = där det står "postat av -namn" i komentarerna

.comenttext = texten i själva kommentaren som någon har skrivit

.comentmeta = länken/bloggadressen under kommentatertexten

 

.comentform = själva rutan där man skriver sina kommentarer

.seperator = linjen som skiljer inläggen åt

form = sök i blogg rutan

Resten behöver man inte använda så ofta.Lycka till!


Gör texten kursiv eller fetstilt osv!

Detta kan ni använda i alla stilmallens avsnitt.

front-style: italic;.......................gör texten kursiv

front-weight: normal;
.................gör texten normal
front-weight: medium;...............gör texten lite fylligare (detta fungerar dock inte alltid)
front-weight: bold;.....................gör texten fetstil

text-decoration: underline;........gör texten understruken
text-decoration: none;...............tar bort understryckningen

Lycka till!


Ta bort understrykning av länkar!

Här är ett exempel hur man tar bort understrykningen på länkar under "senaste inläggen" "arkiv" osv. Skriv in det fetstilta om du vill ta bort understrykningen.

.nav a{color: #000000; text-decoration:none; }
.nav a:hover{color #000000; }

Detta kan man givetvis göra på fler andra ställen på bloggen.Det är bara att testa sig fram.

Lycka till!

Gör din egen presentation!

Börja med att skriva ner din presentation i tex word först så du vet ungefär hur du vill ha den. Gör sedan följande;

1. Gå in i kodmallen" startsida (index)", dvs den första sidan som visas i kod mallen.

2. Bläddra tills du ser koden <div id="side">

3.
Vill du ha en rubrik överst som tex "arkiv","kategorier","senaste inläggen" osv. Så kan du använda dig av följande kod;
<div class="navheader">Din rubrik!</div>

4.
Använnd sedan följande kod;
<front face="times new roman" size="2" color="#000000">Klistra in/skriv din presentation här!</FRONT>

- Här kan du givetvis byta typsnitt till vad som önskas.
- Du kan även byta storlek på presentationen men jag rekomenderar 1 eller 2.
- Färgen kan du också byta #?????? använd dig av denna färgkartan.

5. Vill du ha radbytning så lägger du bara till <BR> där du vill ha radbyte i texten. Men ibland behöver man skriva två <BR> efter varandra men det är bara att testa sig fram.

6. Förgranska och kolla hur det blev. KLART!


Ta bort rubriken högst upp i bloggen!

För att ta bort bloggen rubrik/rubriker som syns allra överst, ibland ovan på headern om man har någon, så finns det två alternativ;

1. Skriv in "0px" vid avsnittet #header a, h1 & h2 i stilmallen. Dock kan det synas ett litet streck om man gör på detta viset. Nästa tips är lite bättre.

2. Ta bort följande koder i kodmallen;

<h1><a href="${BloggTitle}</a></h1>
<h2>${BloggDescription}</h2>

OBS! Du måste ta bort koden på alla sidorna i kodmallen!

Lycka till!


Hur man gör sin egen header!

1. Börja med att gör en egen header i photoshop eller picasa,som jag använder för det mesta, eller i liknande program.

2. När du är klar med din header så spara den i datorn, i .JPEG/JPG format helst.

3.

4.

5.

6.



OBS!
Kom ihåg att alla stilmallar ser olika ut. därför kan du behöva skriva in vissa koder och anpassa headern på ett annat sätt för bästa resultat. Jag utgår ifrån alltid ifrån Fashion men tänk på att Author, Bloom, Anchor &Kottesque inte är anpassade till headers från början!

Lycka till!


Ta bort upprepning av bild&placera bilden!

För att ta bort upprepning av headern eller bakgrunden till exempel, kan ni skriva in koderna nedan, efter parantesen, som är fetstil.

bakground: #000000 url (biladressen) no-repeat;

Om ni dessutom vill ha bilden på en speciell placering kan ni skriva in någon av följande koder efter "no-repeat".Det ända som behövs emellan dessa koder är ett mellanslag. Men glöm inte ; tecknet sisit.
Använd er av; center,right,left,top och bottom.

Till exempel;
bakground: #000000 url (biladressen) no-repeat right bottom;
                                                                          
Lycka till!


Fixera bakgrunden så att den ligger stilla!

För att fixera bakgrunden så att den ligger stilla när man scrollar neråt, kan man skriva in följande kod i stillmallen;
backgrund-attachment: fixed;

Exempel:
body {
margin: 0px
padding: 0px
bakground #897053 url (bildadressen)
bakground-attachment: fixed;
{

Hur man ändrar sin bloggbakgrund!

Om du vill ha enfärgad bakgrund:
Gå in på denna färgkarta eller color schemer,välj en färg och kopiera den sexsiffriga koden efter #. Dessa färgkoder kallas för HEX(hexadecaimala HTML färger).Klistra in färgkoden i bloggens stillmall allra överst där det står bakground: #??????; Nu är du klar, hoppas det gick bra!

Om du vill ha en bild eller ett mönster som bakgrund:
1.
Börja med att välja en bild som du vill ha som bakgrund. Obs! Tänk på att bilden oftast är en liten bild som  upprepas.

2.
 Sen när du hittat en bild som du vill ha som bakgrund och så spara den till datorn.














                                               
                                                              KLART!


RSS 2.0