ssiren

Jag tänkte gå igenom 2 saker som jag tycker hjälper till att göra en hel design, eller ja när jag märker dem så blir det liksom "shit vad snyggt jag vill också ha!*-känsla haha.

Detta tips handlar om att man inte använder blogg.se's standard klocka & datum. Jag personligen tycker det är extremt fult att tex. sekunderna står? Så när jag hittade den här koden, det var kärlek vid första ögonkastet ;)

Det finns lite olika varianter på hur man vill göra, men jag använder just nu den som är 05 FEB 2013 kl. men det är för att det passar min design bäst och detta är även den jag tänkte tipsa om. 

 

1. Gå in i din kodmall och leta upp  {{ entry.date }} & {{ entry.time }}. (de är brevid varandra)

2. Förhandsgranska och kolla att du är nöjd, sedan spara & gör likadant i alla kodmallar! :)

 

Avatar brevid kommentaren.

Hittade detta tips nyligen när jag gick in på min favoritbloggdesigntipsarsida (vad man nu säger) och blev typ kär, tycker kommentarerna blir mycket snyggare! Kom ihåg att för detta tips så behöver den som kommenterat ha skickat genom "skicka signerad som inloggad på blogg.se"-knappen och inte genom den vanliga skicka knappen för att något ska hända.

 

1. Leta upp koden <div class="commentheader"> i inläggs-kodmallen.

2. Klistra in denna kod UNDER <div class="commentheader">
{% if comment.avatar %}
<div class="comment-avatar"><img src="{{ comment.avatar }}" width="50px" height="55px"/></div>
{% endif %}

3. Spara!

4. Gå till stilmallen och klistran in denna kod längst ner:
.comment-avatar{
float: left;

margin-left: 0px;
border-left: 2px solid #fff;

border-top: 2px solid #fff;

border-right: 2px solid #fff;

border-bottom: 2px solid #fff;

-moz-box-shadow:1px 1px 1px #888;

box-shadow: 1px 1px 3px #888;

padding: 0px 0px 0px 0px;

text-align: left;

margin-bottom: 10px;

margin-right: 10px;

margin-top: -1px;

}

5. Spara! :D

Fyfan vad jag velar mellan det här ska jag säga lätta saker eller svåra saker haha! Men jag tror jag gör lite varannan!

 

1. Att alltid designa på en testblogg! Där kan prova sig fram mer eftersom det bara är du som kommer se den, jag gör alltid det och det är hur enkelt som helst att flytta koder mellan bloggarna. Du kopierar bara stilmallarna och kodmallarna från testbloggen och klistrar in på din nya blogg. Håll koll på kodmallarna bara! :)

2. Google is your best friend. Allting finns på google, färdiga koder, guider, hur man gör egna koder, allt!

3. Utgå ur stilmallen Fashion. Åtminstone jag tycker att den är lättast och tydligast att koda ifrån.

 

Detta är basics och ett måste för att överhuvudtaget kunna ändra något i stilmallen. 

h3 {
background: #ffe7eb; <- bakgrundsfärg
font-family: Trajan Pro, Cutive Mono, Georgia, Arial, Helvetica, sans-serif; <-typsnitt
font-size: 25px; <- storlek på texten
padding:2px 5px 0px 5px; 
color: #000000; <- färg på texten
margin: 0px 0px 0px; 
text-align: left; <- vart ni vill att texten ska vara placerad
font-weight: normal; <- tjock/smal text
text-transform: uppercase; <- stora bokstäver eller små bokstäver
}

Detta stycke, h3, styr rubriken och dess utseende. Men koderna ser likadana ut i varje stycke (background kan även heta background-color) och kan ni hur koderna lyder kan ni ändra i varje stycke!
anledningen till att jag inte skrev något på padding & margin är för att det finns ett jättebra inlägg om det här, det är lite överkurs men som är bra att kunna! 

En sak ni måste kunna för att kunna ändra färger är vad en färgkod är. Det är de siffror som står efter # på bakcground & color. Färgkoder hittar ni exempelvis här och vill ni byta färgkod så ska ni akta så att ni inte råkar ta bort # för om ni gör det funkar det inte!

Anledningen till att det står såpass många typsnitt är därför att om en dator inte kan läsa in det första så visas istället det andra, och om datorn inte kan läsa in det andra visas det tredje osv. Det är bra att ha en standard typsnitt i slutet så att man inte har massa avancerade typsnitt som bara ens egen dator kan se:P

Hur man ändrar storleken på texten är bara genom att ändra numret upp eller ner, och för att ändra vart texten ska vara placerad har ni tre val: left (vänster), center (i mitten) & right (höger). Vill ni ändra till tjock (bold) eller smal (normal) text skriver ni bara in det engelska (det inom parantes) istället för det som står där! För att ändra stora bokstäver till små ändrar ni "uppercase" till "normal" och för att ändra små bokstäver till stora gör ni tvärt om.

För att göra det ännu mer simpelt för er har jag även skrivit var man ändrar vad!:

body - bakgrund på hela bloggen

#wrapper - ändra tex. bredden på bloggen

#header - där ändrar ni headern

#side - menyn i helhet (tex. bredd på menyn)

#content - inlägg i helhet (tex. bredd på inläggen

h3 - rubriken på inläggen

.navheader - rubriken på menyn (senaste inlägg, kategorier, arkiv länkar)

.entrybody - typsnitt mm. på inläggen

.commentheader - rubriken på skriva kommentarer

.commenttext- tyspnitt på skrivna kommentarer

Nu blev det väldigt mycket text så jag tror jag avslutar här!

I nästa inlägg:

- Mina favoritdetaljer!

Sa ju förut att jag skulle ha någon typ "designskola" och jag har funderat ganska mycket på hur jag ska göra detta. Har nu funderat klart på detta och tänkte börja lägga ut tips istället, för alla grunder finns på internet! 

Jag vet att ni ville att jag skulle berätta allt från början men nu blir det såhär!

Har redan planerat lite vad jag ska tipsa om, och jag tror att det kommer blir bra, but only time will tell!

Tänkte bara säga det här så att ni inte tror att jag glömt bort det helt haha, och så hörs vi med designtips så fort som möjligt!

Men nu blir det ett avsnitt av någon kul serie och sen ska jag faktiskt sova, är astrött.

Påtal om design, sneak peak på min nya design !