Sidomeny

Bloggdesign – Vanliga missar

Maj 12

Halloj,

Nu är det jag här igen som har en sista fråga inför kommande bloggdesign-kurs. Ett avsnitt kommer heta ”Vanligaste missarna” och jag skulle vilja veta om det är något mer än följande som du och andra har stött på/vill att jag ska gå igenom:

- Varför hamnar sidomenyn nedanför alla inlägg?
- Varför försvinner inte vita bakgrunden runt x?
- Varför tar min bakgrund slut/sitter fel?
- Varför ser jag inte ändringarna jag har gjort?

Tack på förhand mina hjärtan! ♥

Bli först att gilla

Lägg in en inforuta i sidomenyn

Jun 21

Det är ganska svårt att förklara hur man ska göra såvida man inte har en bra grund. Därav knåpade jag ihop en stilmall som har boxar på vänster sida. Om du har blogg.se standardversion som kodmall kommer din profilbild samt beskrivning komma upp automatiskt längst upp i designen (det ändrar du under inställningar > profil).

Jag rekommenderar att du gör detta i en testblogg (skapa en ny blogg och testa designen i den innan du lägger in den i din vanliga blogg).

1 ). Kopiera stilmallen nedan och klistra in den under design > stilmall (glöm inte att ta bort allting som finns där sen tidigare).

body {
margin: 0px;
padding:0px;
background: #cccccc;
}

a {color: #000000; text-decoration:none;}
a:hover {color: #6CA5FF;}

#wrapper {
clear:none;
margin: 20px auto;
padding: 0px;
width: 800px;
}

p {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

#header {
background: #ffffff url() no-repeat left top;
margin: 0px;
width: 800px;
height: 380px;
}

#side {
float: left;
width: 180px;
margin: 0px;
padding: 10px 0px 0px 0px;
}

#content {
background:#ffffff;
overflow: hidden;
width: 600px;
position:relative;
left:0px;
padding: 10px 0px;
voice-family:"\"}\"";
voice-family:inherit;
float: right;
margin: 10px 0px 0px 0px;
}

#header a {
color: #000;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
}

h1 {
font-family: arial, verdana, sans-serif;
font-size: 1em;
font-weight: bold;
color: #000;
text-transform:uppercase;
margin: 0px;
padding: 0px;
}

h2 {
font-family: arial, verdana, sans-serif;
font-size: .7em;
font-weight: normal;
color: #333;
margin: 0px;
padding: 0px;
}

/** Entry headers **/
h3 {
background: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
padding: 0px 0px 10px 0px;
color: #000;
border-bottom:1px dashed #000000;
margin: 10px;
}

.navheader {
font-family:  Arial, Helvetica, Sans-serif;
font-size: 1em;
font-weight: bold;
color: #000000;
padding:5px;
background-color:#ffffff;
text-transform: uppercase;
}

.nav {
font-family: Arial, Helvetica, Sans-serif;
font-size: 0.7em;
font-weight: normal;
color: #000000;
}

.nav ul {
margin: 0px 0px 10px;
padding: 5px;
font-weight: normal;
background-color: #FFFFFF;
border: 0px solid #000000;
}

.nav li {
list-style: none;
padding: 0px 0px 2px 0px;
font-weight: normal;	
}

.nav a { color: #000000; }
.nav a:hover { color: #6CA5FF; }

/** Post's body text **/
.entrybody {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
line-height: 150%;
margin: 0px 0px 10px;
background-color: #FFFFFF;
padding: 5px 10px 10px 10px;
border: 0px solid #000000;
}

/** 'Posted by' txt **/
.entrymeta {
font-family: verdana, arial, sans-serif;
font-size: .65em;
font-weight: normal;
color: #666;
text-align:right;
}

.entrymeta a { color: #809FFF; }
.entrymeta a:hover { color: #6CA5FF; }

.commentheader {
font-family:  arial, helvetica, sans-serif;
font-size: .70em;
font-weight: bold;
background-color:#809FFF;
padding:5px;
color: #fff;
}

.commenttext {
font-family: verdana, arial, sans-serif;
font-size: .70em;
font-weight: normal;
color: #000;
line-height: 130%;
}

.commentmeta {
font-family: verdana, arial, sans-serif;
font-size: .65em;
font-weight: normal;
color: #999;
margin: 10px 0px 20px 0px
}

.commentmeta a { color: #809FFF; }
.commentmeta a:hover { color: #80FF9F; }

.commentform {
font-family: verdana, arial, sans-serif;
font-size: .70em;
font-weight: normal;
color: #333333;
margin: 0px 0px 20px 0px
}

.separator {
border-top: 0px solid #77B5F0;
border-bottom: 0px solid #77B5F0;
margin: 14px 0px 14px 0px
}

.default {
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
color: #333;
font-weight: bold;
padding: 0px 0px 10px 0px;
text-transform: uppercase;
}

.subside {
font-family: "Trebuchet MS" Verdana, Arial, Helvetica, Sans-serif;
font-size: .7em;
font-weight: normal;
padding: 0px 0px 0px 0px;
}


.xmlButton {
border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
font:bold 10px Verdana, Arial, Helvetica, Sans-serif;
color:#FFF;
background:#F60;
text-decoration:none;
margin:0;
}

.image {
border: 0px dashed #4A6FFF;
background-color:;
padding:5px;
margin: 0px 6px 6px 0px;
}

.thumbnail {
border: 0px dashed #77B5F0;
background-color:;
padding:5px;
margin: 0px 6px 6px 0px;
}

.video{
padding: 0px 0px 0px 0px;
}

.fieldName{
font-family: verdana, arial, sans-serif;
font-size: 11px;
margin: 0px 0px 12px 0px
}

select{
font-family: verdana, arial, sans-serif;
font-size: 11px;
}

/*****************************************************************************
* Calendar					                                                 *
*****************************************************************************/

#calendar {
color: #333333;
font-family: 'Trebuchet MS', Verdana, sans-serif;
padding: 10px;
text-align: center;
background-color: #FFFFFF;
border: 1px solid #000000;
margin-bottom: 12px;
}

#calendar table {
padding: 1px;
/*border-collapse: collapse;*/
border: 0px;
}

#calendar table caption {
color: #77B5F0;
font-family : Arial, Helvetica, Sans-serif;
font-size : 0.7em;
border-bottom: 1px solid #999999;
text-align: left;
font-weight: bold;
text-transform: uppercase;
padding: 3px;
letter-spacing: .3em;
}

#calendar table th {
text-align: center;
font-weight: bold;
font-size: xx-small;
}

#calendar table tr td {
border: 1px solid #809FFF;
text-align: center;
font-size: xx-small;
}

#calendar table tr ul  {
color: #BBB;
list-style: dot;
margin: 0px 0px 0px 20px;
padding: 4 0 5 0;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.7em;	
}

#calendar table tr td.cssDayMouseOver {
border: 1px dotted red;
cursor: hand;
}

#calendar table tr td.cssDayMouseOut {
border: 1px solid #809FFF;
}

#calendar table tr td.cssEntryBox {
border: 1px solid gray;
padding: 6px;
text-align: left;
background: #FFFFFF;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.8em;
}

#calendar table tr td ul li {
}

#calendar table tr td div.cssDayEntryHeader {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.8em;
text-align: left;
font-weight: bold;
padding: 4;
}

#calendar table tr td div.cssDayAvailable {
text-decoration: underline;
text-weight: bold;
}

form {
padding: 10px;
border: 0px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 10px;
}

#profile {
background-color: #FFFFFF;
border: 0px solid #000000;
padding: 10px;
margin-bottom: 12px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
}

#profile h4{
display: none;
}

#profile p{

}

2 ). Förhandsgranska stilmallen för att se hur resultatet blir.

3 ). Spara stilmallen. Nu kommer du ha en profilbild samt text längst upp i sidomenyn i en box :)

OBS! Om du vill lägga in egen information + text får man göra det manuellt i kodmallarna. Lägg in det under <div class="nav"> i varje kodmall.

1 person gillar artikeln

Lägg in senaste inlägg, kategorier, arkiv + länkar i menyn (design 7)

Jun 07

Först rekommenderar jag att man använder den version av designen med en extrameny. Det går även att använda versionen med menyer på vardera sida.

1 ). Gå in på design > kodmallar och leta upp ”<div class="navheader">”
Tryck på ctrl + f och skriv in: <div class="navheader"> för att lättast hitta avsnittet.

OBS! På designen med menyer på vardera sida finns två st ”<div class="navheader">” (en för varje sidomeny). Den första du får fram är vänstra sidomenyn och den 2a du får fram är för den högra sidomenyn.

2 ). Efter <div class="nav"> står det en rubrik för sidomenyn (Extrameny eller Sidomeny 1 eller Sidomeny 2) och därefter finns ett </div>. Efter det (</div>) ska du lägga in följande kod:

 <div class="nav"><div class="navheader">Senaste inläggen</div>
   <ul>
       <tag:recentlist limit="20">
     <li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
       </tag:recentlist>
   </ul>
   <div class="navheader">Kategorier</div>
   <ul>
     <tag:categorylist>
        <li><a href="${CategoryLink}">${CategoryName}</a></li>
       </tag:categorylist>
   </ul>
   <div class="navheader">Arkiv</div>
   <ul>
    <tag:archivelist>
     <li><a href="${ArchiveLink}">${ArchiveName}</a></li>
    </tag:archivelist>
   </ul>
   <tag:if test="${hasLinks == 'true'}">
   <div class="navheader">Länkar</div>
   <ul>
    <tag:linklist>
     <li><a href="${LinkURL}" title="${LinkDescription}">${LinkName}</a></li>
    </tag:linklist>
   </ul>
   </tag:if>
<div class="navheader">Design & layout</div>
<ul>
<li>
<a href="http://tescho.se/" onfocus="blur()" target="_blank"><img src="http://tescho.se/designikon.gif" border="0"/></a>
</li>
</ul>
</div>

3 ). Spara kodmallen och gör samma sak på resterande kodmallar (inläggssida, kategorisida & arkivsida).

4 ). När du har lagt in koderna (som finns på punkt nr 2) i alla kodmallar ska du ta bort dropmenyerna i headern. Gå in på design > kodmallar och leta upp: <div id="dropdown">

5 ). Du ska ta bort allting från <div id="dropdown"> till strax ovanför <div id="content"> (du ska lämna kvar ett </div> innan <div id="content">) Se hjälpbild: { länk }

6 ). Spara kodmallen när du har tagit bort det avsnittet och ta bort samma koder i resterande kodmallar.

Bli först att gilla

Lägg in fler boxar (design 15)

Maj 07

Denna guide visar hur man lägger in boxar ovanför senaste inlägg. Säg till om du vill ha boxarna på annat ställe så förklarar jag det.

1 ). Gå in på design > kodmallar

2 ). Leta upp (ctrl + f): nav

3 ). Kopiera koden nedan och klistra in den precis under nav (som jag visar på hjälpbilden nedanför koderna).

   <div class="navheader">RUBRIK</div>
   <ul>
     <li>INNEHÅLL</li>
     
   </ul>

HJÄLPBILD:

4 ). Byt ut ”RUBRIK” mot det du vill ha som rubrik samt ”INNEHÅLL” till det innehåll du vill ha i boxen.

5 ). Spara kodmallen och gör samma sak i resterande kodmallar.

Bli först att gilla

Lägg till fler boxar i sidomenyn (design 14)

Apr 08

1 ). Gå in på design > kodmallar

2 ). Leta upp (ctrl + s): Design & layout

Precis där ovan ska du kopiera en bild. Se hjälpbild nedan för att se vad du ska göra:

3 ). Spara kodmallen och gör samma sak i resterande kodmallar.

Bli först att gilla

1 2 3 … 5 Nästa Till toppen

Tescho

blogg om foto, webb(design), hus & hem, skapa, kreativitet, hundliv

sidomeny

Bloggdesign – Vanliga missar

Lägg in en inforuta i sidomenyn

Lägg in senaste inlägg, kategorier, arkiv + länkar i menyn (design 7)

Lägg in fler boxar (design 15)

Lägg till fler boxar i sidomenyn (design 14)

Senaste inlägg

Följ formrikt på Facebook!

Senaste kvittret

sidomeny

Senaste inlägg

Följ formrikt på Facebook!

Etiketter

Senaste kvittret