sjufoto ~ -

Ny header!
2013-02-01 / 16:56:46 / Bloggdesign / Kommentera (29)

Har uppdaterat headern, som ni ser ovan! Vad tycker ni om den? c:

Tips på textstilar
2013-01-12 / 14:30:47 / Bloggdesign / Kommentera (32)

Knåpade ihop en liten bild med tips på några av mina favorit-textstilar. Alla finns att hitta och ladda ner på dafont.com.

Hoppas det kan vara till någon nytta för er! c:

Genomskinlig ram runt bloggen
2013-01-04 / 08:09:00 / Bloggdesign / Kommentera (35)

Har fått in många frågor om hur jag har gjort den genomskinliga ramen runtom min blogg. Så tänkte försöka förklara för er! c:

1.Börja med att öppna Photoshop och gör en bild som har storleken 400 x 400 pixlar. (Det går att göra detta i Gimp också, dock vet inte jag hur det fungerar!)

2. Gå ner till lagerna och lås upp bakgrundslagret. Börja med att kopiera det genom att dra ner det till

och sedan raderar du det låsta lagret genom att dra ner den till

Då kommer du bara ha kvar ett lager som på bilden nedan:

3. Sedan är det dags att fixa den "gemonskinliga effekten". Det gör du genom att dra ner Opacitet/Opacity till någonstans mellan 30-50, jag använde mig av 45 tror jag. Du drar ner den med regaglet eller skriver in värdet i rutan.

4. Sedan är det dags att spara, det viktigaste är att du tänker på att spara din bild i filformatet PNG.

Så den kommer att heta bildnamn.png om du sparar den i tex JPEG försvinner den genomskinliga effekten.

5. Ladda upp din bild, på bloggen eller tinypic eller vad du föredrar. Om du ska ladda upp bilden på bloggen,
ladda upp den i 1000px.

6. Sedan tar du koden nedan och klistrar in i wrapper avsnittet (innan } ), längst ner som på bilden nedan.

background: transparent url(HÄR SKA DU LÄGGA IN DIN BILDKOD);

Om du skulle vilja ändra hur stor kanten ska vara gör du det på padding där det står 20px, testa dig fram för att se hur stor du vill att kanten ska vara!

Hoppas du förstod och om inte eller om det skulle vara
några problem, tveka inte att skicka iväg en kommentar eller ett mejl! c:

Ny design!
2012-12-31 / 09:51:01 / Bloggdesign / Kommentera (39)

Nu är den nya designen uppe! Tryck F5 eller cmd r och det ser konstigt ut. c:

Dela upp kategorierna
2012-12-07 / 13:06:00 / Bloggdesign / Kommentera (3)

För ett tag sedan fick jag in en liten fråga hur man delar upp kategorierna i underubriker. Som på bilden ovan.
Tex Emma, Foto osv. Så jag tänkte försöka förklara hur man gör detta!

1. Gå in i din kodmall och bläddra ner till Kategorier-avsnittet (se ovan ^). Förmodligen ser det
ut ungefär som ovan om du inte ändrat något.

2. Du tar bort allt mellan <ul> & </ul>
alltså detta ska bort:

{% for category in categories %}
<li><a href="{{ category.url }}">{{ category.name }}</a></li>
{% endfor %}

3. Och emellan de två <ul> klistrar du in detta istället:

<font face="textstil på rubriken" font size="storlek 1-5"><b>Namn på rubriken (tex Foto)</b></font><br>
<a href="http://bloggnamn/category/kategorinamn.html">KATEGORI NAMN</a> <br>
<a href="http://bloggnamn/category/kategorinamn.html">KATEGORI NAMN</a> <br>
<a href="http://bloggnamn/category/kategorinamn.html">KATEGORI NAMN</a><br>
<a href="http://bloggnamn/category/kategorinamn.html">KATEGORI NAMN</a> <br>
<a href="http://bloggnamn/category/kategorinamn.html">KATEGORI NAMN</a> <br>

4. För att hitta rätt länk kan du besöka din egen blogg, klicka in dig på kategorierna och kopiera länken i adressfältet! (Om du ska skriva namnet själv så har man - mellan varje ord, å,ä,ö används inte!)

5. När du är klar kan det se ut någoting som på bilden under! :)

Hoppas du förstod och att detta var till någon hjälp! Om det är något du undrar eller inte förstår,
skicka bara iväg en kommentar! :)

Lite designändringar
2012-12-02 / 17:25:00 / Bloggdesign / Kommentera (19)

Jag har precis gjort en lite juligare header och lagt till fallande snö här på bloggen! Jag tycker det blev mycket mysigare såhär. Lite mer julkänsla såhär i december. :)

Vad tycker du om den nya headern?

Dropdownmeny
2012-11-11 / 09:33:00 / Bloggdesign / Kommentera (3)

Fick in en fråga hur jag hade gjort min dropdown meny som ni ser ovan ^

1: Kopiera och klistra in denna koden längst ner i din stilmall och spara.

}
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; } /* Ändra till right om du vill ha menyn till höger*/
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #000000; /*Ändra färgen på menyflikarna här*/
color: #fff; /*Ändra färgen på texten här*/
text-decoration: none;
font-family: verdana; /*Ändra typsnittet*/
font-size: 14px; } /*Ändra storleken på texten*/
#navbar li ul {
display: none;
width: 10em; /* Ändra bredden på undermenyn */
background-color: #EFEFEF;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #EFEFEF; /*Ändra färgen på undermenyn*/
border-bottom: 1px solid #fff;
color: #000000; } /*ändra textfärgen på undermenyn*/
#navbar li li a:hover {
background-color: #FF9DC1; } /*Ändra färgen när man håller musen över undermenyn*/

2: Gå in i kodmallen och klistra in denna koden under <div id="header">, spara sedan!

<ul id="navbar">

<li><a href="LÄNK">LÄNK</a></li>

<li><a href="#">LÄNK1/NAMN</a>
<ul>
<li><a href="LÄNKEN">UNDERLÄNK1</a></li>
<li><a href="LÄNKEN">UNDERLÄNK2</a></li>
<li><a href="LÄNKEN">UNDERLÄNK3</a></li>
<li><a href="LÄNKEN">UNDERLÄNK4</a></li>
</ul>
</li><li><a href="#">LÄNK2</a>
<ul>
<li><a href="LÄNKEN">UNDERLÄNK5</a></li>
<li><a href="LÄNKEN">UNDERLÄNK6</a></li>
</ul>
</li>
<li><a href="#">LÄNK3</a>
<ul>
<li><a href="LÄNKEN">UNDERLÄNK7</a></li>

<li><a href="LÄNKEN">UNDERLÄNK5</a></li>

</li>
</ul>

Vill du lägga till en underlänk kopierar du bara <li><a href="LÄNK">UNDERLÄNK5</a></li> och klistrar in under de andra underlänkarna. OBS! Du måste lägga koden innan </ul>.

3: Vill du att menyn ska vara genomskinlig/transparent, lägger du till denna kod längst ner i stilmallen och spara!

#navbar ul {
filter:alpha(opacity=86);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7; }

4: Gå sedan in i stilmallen där du kan redigera färgerna, textstil, var menyn ska vara osv! :)

Hoppas ni förstod, att det var till någon hjälp och om inte - fråga bara! :)

Presentation av dig själv i menyn
2012-10-30 / 14:56:55 / Bloggdesign / Kommentera (14)

Fick en fråga hur man gör en sådan ^ presentation av sig själv i menyn.

1. Gå in på Design > Kodmallar.

2: Leta upp <div id="side"> och <div class="nav">(det kanske annourlunda ut i din kodmall, men de två koderna finns. Du kan söka om du klickar CTRL + F).

3: Under <div class="nav"> klistrar du in koden här under.

4: Sedan är det bara att skriva din presentation och spara. Vill du byta rad skriver du <br>, vill du ha din text kursiv = <i>text</i>, tjock <b>text</b> understruken <u>text</u>.

KODEN:

<div class="navheader">RUBRIK</div>

Varför man skriver sin rubrik inom <div class="navheader"> är för att den ska få samma typsnitt som de andra rubrikerna i menyn och för att den ska komma på exakt samma ställe!

Hoppas ni förstår, kommentera bara om du har någon fråga!

new in
2012-10-29 / 13:21:51 / Bloggdesign / Kommentera (14)

Ja, då var den nya designen äntligen klar! Tryck F5 eller cmd + R om det ser konstigt ut!