13. juni 2008

bloggfikling :: borders

Utgangspunktet her er minima-malen laget av Douglas Bowman for Blogger, - den første som dukker opp når du velger deg en mal (hvordan bloggen din skal se ut) i Blogger.

Klikk deg til "oversikt" og videre til "utforming".
Klikk på fanbrevet med "rediger HTML".

Blogger anbefaler at du lagrer koden din før du gjør endringer.
Back-up er alltid smart om noe skal gå galt.
Jeg lagrere mal-kopienen mine i egne mappe på skrivebrodet.
Klar?

og her sitter vi og fikler med bloggens utseende :: here we are, trying to make the blogs more functional (or prettier)

Let deg fram ned i html-koden, til "sidebar content" delen
--> rull nedover koden forbi "header" - "outer-wrapper" - "headings" - "posts" - "comments".

Dette er kodendelen vi skal se nærmere på:

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}

I første omgang vil vi fjerne den skillelinja  som styres av { border-bottom } - koden. Det kan gjøres på tre måter:
* Vi kan fjerne border-bottom:1px dotted $bordercolor;
* Vi kan erstatte  1px dotted $bordercolor; med koden none;
* Vi kan endre 1px til 0px

Jeg foreslår 0px koden fordi da er det lettere å endre tilbake til samme skillelinje eller en annen skillelinje.

Den nye kodedelen din skal da se slik ut:

.sidebar .widget, .main .widget {
  border-bottom: 0px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}

Klikk "forhåndsvisning" og se om du liker forandringen.
Liker du endringene, så gå tilbake til malen og klikk "lagre mal".

etterskrift ::
Dette fungerer for meg og i mine HTML- maler.
En sikker garanti kan jeg ikke gi, ei heller alltid vite hva som foregår bak kulissene hos Blogger.
Vil du forsøke, så lykke til!

This is how I removed the dotted line between the elements in my sidebars.
There are many tutorials written in English on "how to" change your blogger template. It's not too hard to find them, - I've listed one of them at the bottom of this post.

Noen flere tips:
* teste ut flere typer "border-bottom"
* blogspot 101 - borders

1 kommentar:

  1. Hej, vilken fin blogg du har! Tack för länken, bra den kunde hjälpa dig! :)

    SvarSlett