Öka eller minska vidden på din blogg

En fråga jag ofta får är hur man gör bloggen bredare eller smalare.

I den här tutorialen utgår jag från Bloggers Minima-mall, om du har en annan mall får du försöka hitta samma eller liknande wrappers. Om du har frågor om just din mall kan du länka till din blogg i kommentarerna så ska jag se om jag kan hitta svaret i din bloggs källkod.

Det är enkelt att fixa själv, du gör så här:



Gå till din bloggs kodmall. Scrolla ner till Header-wrapper.

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
 
Öka  eller minska vidden (width) med så mycket du känner att du vill ha din blogg bredare eller smalare. Kanske 100 eller 200 pixlar?

Gå vidare och öka vidden på Header .description lika mycket.

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }

Nästa steg är att öka Outer Wrapperns storlek till samma siffra som Header wrappern.

#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

Nu behöver du bestämma om du enbart vill öka kolumnen där du skriver dina blogginlägg, alltså Main-wrappern, eller om du vill öka din andra kolumn också.

Du kan inte öka de två kolumnernas storlek med mer sammanlagt än vad du ökade Outer wrappern med. Om du valde 100 pixlar kan du nu öka main och sidebaren med 50+50px (eller med den fördelning du föredrar) men inte mer!

  #main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

 
 #sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}


Du kan se hur din blogg ser ut under tiden du testar olika mått, klicka bara på Förhandsgranska.
Om det inte blev som du tänkt dig och du inte vill prova mer klickar du på Rensa redigering. Då ser din blogg ut som den gjorde innan du började ändra i kodmallen.  När du är nöjd klickar du på Spara mall.