Designhjälp för din blogg

Ändra utseende på sökrutan och sökrutetexten

Kategori: Övrigt

1. Gå in i din Stilmall (Kugghjulet -> Design -> Redigera HTML -> Stilmall)


Längst ned i din stilmall lägger du in följande:

.sokknapp {
background:#ffffff url();
color:#666;
font-family:tahoma;
font-size:11px;
text-transform: uppercase;
border:1px solid;
height:30px;
width:40px;
}

.sokruta {
background:#ffffff url();
color:#666;
font-family:tahoma;
font-size:12px;
border:1px solid;
height:30px;
width:150px;
}

.sokrubrik {
font-size: 15px;
color: #fff;
margin: 0px; font-weight:normal;
font-family: 'Armata', sans-serif;
text-transform: uppercase;
}


2. Spara

3. Gå nu in i din HTLM-mall (Kugghjulet -> Design -> Redigera HTML (Startsida))

4. Ta bort <section id="search">Här står det lite olika beroende på vilken design du använder dig av</section>

5. Klista in följande exakt på samma ställe:

<section id="search">
<div class="sokrubrik">Sök i bloggen</div>
<form action="http://www.google.se/search" name="search" method="get">
<input type="search" class="sokruta" name="q" value="" size="12" maxlength="64" />
<input type="hidden" name="sitesearch" value="{{ blog.url }}" />
<input type="submit" class="sokknapp" value="Sök" />
</form>
</section>


6.
Spara

7. Nu kan du gå in i din stilmall igen och ändra utseende på knappen genom att ändra i koderna som du skrev in i steg 1.

Här kommer lite hjälp med att ändra utseendet:

sokknapp {
background:#ffffff url(); <----- Ändra bakgrundsfärg på sökknappen
color:#666;  <----- Ändra textfärg på sökknappen
font-family:tahoma;
font-size:11px;
text-transform: uppercase;
border:1px solid;
height:30px; <----- Ändra höjd på sökknappen
width:40px; <----- Ändra längd på sökknappen
}

.sokruta {
background:#ffffff url(); <----- Ändra bakgrundsfärg i sökrutan
color:#666;
font-family:tahoma;
font-size:12px;
border:1px solid;
height:30px; <----- Ändra höjd på sökrutan
width:150px; <----- Ändra längd på sökrutan
}

.sokrubrik {
font-size: 15px; <----- Ändra storlek på texten "Sök i bloggen".
color: #fff; <----- Ändra färg på texten "Sök i bloggen".
font-weight:normal;
font-family: 'Armata', sans-serif; <----- Ändra typsnitt på texten "Sök i bloggen".
text-transform: uppercase; 
}


Ändra utseende på Tidigare- resp. Nyareinläggs knappen

Kategori: Övrigt
 
 

1.
Gå till din kodmall och vidare till kategorier.

2. Leta sedan upp stycket som jag markerat nedan.



3. Det är nämligen koderna för hur Tidigare inlägg respektive Nyare inlägg knappen/länken ska se ut.

Om du vill ändra utseende på texten. Ta bort stycket jag markerade ovan. Ersätt det med:

{% if loop.last and pagination %}
<div style="text-align: center; font-size: 30px; margin-bottom:35px;">

{% if pagination.page_number not in (pagination.total_pages, pagination.total_pages - 1) %}
<a style="font-size:20px; padding-right: 30px color:#000000; font-family:arial; text-decoration:none;" href="{{ category.slug }}-{{ pagination.page_number + 1 }}.html">Nyare inlägg</a>
{% endif %}

{% if pagination.page_number == pagination.total_pages - 1 %}
<a style="font-size:20px; padding-right: 30px color:#000000; font-family:arial; text-decoration:none;" href="{{ category.slug }}.html">Nyare inlägg</a>
{% endif %}


{% if pagination.page_number != 1 %}
<a style="font-size:20px; padding-right: 30px color:#000000; font-family:arial; text-decoration:none;" href="{{ category.slug }}-{{ pagination.page_number - 1 }}.html">Tidigare inlägg</a>
{% endif %}
</div>
{% endif %}


Var noga med att du tar bort allt och sedan också får med allt.

Där det står font-size:20px; padding-right: 30px color:#000000; font-family:arial; text-decoration:none;  är där du ändrar utseendet! Vill du ha större text öka 20px efter font-size:, vill du ha annan färg ändra på 000000 efter color:# osv... 


Om du vill döpa om knappen/länkara så ersätter du bara texten där det nu står Nyare inlägg och/eller Tidigare inlägg till det du vill ha istället. T.ex. Äldre inlägg.


4. Spara!


Mellanrum mellan inläggen

Kategori: Övrigt
 
För att få en liten luftigare blogg eller för att få varje inläggen lite mer inramat kan man göra mellarum mellan varje inlägg som är samma färg som bakgrunden.

1. Börja med att gå in i din stilmall och leta upp #content {
 
Under det stycket ändrar du background: #XXX; till background: none;
 
2. Under entryheaders/h3
entrymeta
entrybody
 
Ändrar du/lägger till background: #fff;
 
3. Nu måste du se till att det står margin 0px; under samma stycken som jag nämde i steg 2.
 
Margin bestämmer ju mellanrum till objekt runt om, så där du nu har skrivit margin: 0px; kanske det inte kommer att se så snyggt ut. Då får du istället ordna mellanrum genom att använda padding: X px;  !

4. Förhandsgranska/spara



Hos blogghjalparn.blogg.se finner du textguider om HTML & CSS. Guiderna riktar sig till bloggare som vill ha hjälp med sin bloggdesign. Man kan själv läsa sig till hur man ska göra eller så kan man beställa sin egna design alternativt köpa en redan färdig design.

Copyright © 2017 Blogghjälparn

BLOGGHJÄLPARN


Senaste inläggen

Portaler & Listor
Webbdesign