Här är en simpel, minimalistisk stilmall som jag själv tycker gör sig bäst i den nya bredden på 940px, men den fungerar även utan problem i den gamla bredden på 800px. Hörnen på bilder du postar blir automatiskt rundade och likaså sidhuvud-bilden, som i den här mallen bör vara 200 pixlar på höjden.



(Klicka på bilden för att se den större.)

För att installera den här stilmallen så kopierar du koden i rutan här nedanför och klistrar in den i Google Analytics-fältet på Inställningar-sidan.

<style type="text/css">body { line-height: 17px; font-size: 10px; color: #333333 !important; } .blog_topnav_head a img { moz-border-radius: 0px; border-radius: 0px; } .random, .submit, .create, .create a, .login, .login a { font-family: Helvetica, Arial, sans-serif; font-size: 10px !important; text-transform: lowercase; color: #FFFFFF !important; } input.searchfield { color: #000000; font-size: 10px !important; font-family: Arial, Helvetica, sans-serif !important; } .create a:hover, .login a:hover, .random a:hover, .submit a:hover { color: #FFFFFF !important; background: transparent !important; text-decoration: none !important; border: 0 !important; } .create:hover, .login:hover, .random:hover, .submit:hover { color: #FFFFFF !important; background: transparent !important; text-decoration: none !important; border: 0 !important; } .khlogo_right, .ratata_topnav { filter: alpha(opacity=50); opacity: 0.5; } .innerrim { moz-border-radius: 9px; border-radius: 9px; } #header { moz-border-radius: 9px; border-radius: 9px; height: 200px; margin: 0 0 30px 0; } .heading { padding-top: 15px; font-size: 24px !important; } .quot { font-size: 14px !important; } img { moz-border-radius: 7px; border-radius: 7px; margin: 0 0 1px 0; } .share img { moz-border-radius: 1px; border-radius: 1px; width: 9px; height: 9px; border: 0; margin: 0 !important; padding: 0; } a, a:link, a:visited { color: #4B3621 !important; } a:hover, a:visited:hover, a:focus, a:visited:hover { color: #704214 !important; text-decoration: none !important; } a:active, a:visited:active { color: #C2B280 !important; } a.adminButton { font-size: 9px; background-color: #FFFFFF !important; } .post_head { padding-right: 95px; } .post_head, .post_foot { width: 500px !important; text-align: right !important; } table.post_foot tr td .new_comment { text-align: right !important; width: 150px; border: 0; float: right; margin: 0 0 0 -20px !important; padding: 0 !important; } .comments_image { width: 20px !important; text-align: right; margin: 0 -95px 0 0 !important; padding: 0 0 0 0 !important; } .arrows { width: 40px !important; text-align: right !important; margin: 0 -98px 0 0 !important; padding: 0 !important; background-color: #FFFFFF !important; float: right !important; font-size: 12px !important; } .arrows a { color: #C2B280 !important; } .arrows a:hover { color: #704214 !important; } h1, h1 a, h2, h3 { font-weight: bold; font-size: 10px; font-style: normal !important; color: #4B3621 !important; letter-spacing: 1px; text-transform: uppercase; } .date, .new_comment a { font-size: 10px !important; font-weight: normal !important; font-family: Georgia, 'Times New Roman', serif !important; color: #4B3621 !important; text-transform: uppercase !important; letter-spacing: 1px; } .new_comment a:hover, .new_comment a:visited:hover { color: #704214 !important; } .left_zone .post { margin: 0 0 30px 0 !important; padding: 0 0 25px 0 !important; border-bottom: 50px #ffffff solid !important; } .post_text { width: 500px !important; } .post_text div { padding: 0 0 10px 0; text-align: justify; color: #333333 !important; } .comments_image a { font-size: 30px !important; color: #C2B280 !important; line-height: 22px; } .comments_image a:hover { color: #704214 !important; } .comment { max-width: 500px; margin: 0 0 50px 0 !important; padding: 0 !important; } .comment .content { margin: 0 !important; padding: 0 !important; } .comment .content div { text-align: justify; margin: 0 !important; padding: 0 !important; } .comment h3 a { font-weight: bold; } .comment h3 a:after { content: '-------->'; letter-spacing: -3px; padding: 0 0 0 5px; color: #C2B280; } .left_zone { border-right: 0 !important; } .right_zone div { color: #555555; } .right_zone h1 { font-size: 10px !important; font-weight: normal !important; font-style: normal !important; text-transform: uppercase; letter-spacing: 1px; } .right_zone .date { display: none; } .right_zone a[href*="/start-atom/"] img { moz-border-radius: 1px; border-radius: 1px; width: 9px; height: 9px; border: 0; margin: 0 !important; padding: 0 !important; } .right_zone a.button[href*="/archive/"] { text-transform: uppercase; letter-spacing: 1px; font-style: normal; margin: 20px 0 0 0 !important; padding: 0; } div.list .comment:nth-child(2n) { background-color: #FFFFFF !important; } div.list .comment.forced, .Archive table.section tr:nth-child(2n) td, .Search table.section tr:nth-child(2n) td { background: transparent !important; border: 0 !important; margin: 0 !important; padding: 0 !important; } .comment_form { width: 500px !important; } .comment_form td { color: #4B3621 !important; letter-spacing: 1px; font-style: italic; text-align: right; } .comment_form input, .comment_form textarea { font-family: Georgia, 'Times New Roman', serif; font-size: 10px; color: #4B3621; border: 0 !important; background-color: #F5F5DC !important; moz-border-radius: 3px; border-radius: 3px; padding: 3px; width: 400px; float: right; } .captcha { border: 0 !important; background-color: transparent !important; text-transform: none; margin: 0 -5px 0 0 !important; padding: 3px !important; width: 200px !important; float: right !important; } .captcha .row .w100 { color: #4B3621 !important; } .captcha input { width: 140px !important; } .captcha h3 { font-size: 10px; text-transform: uppercase; font-weight: normal; margin: 0; padding: 0; color: #4B3621 !important; } .section { max-width: 500px !important; } .section a.button { padding: 0 !important; margin: 0 0 0 20px !important; } .right_zone .comment { margin: 0 !important; padding: 0 !important; } table.section { width: 500px !important; } td.month h2 { background-color: #4B3621 !important; moz-border-radius: 3px; border-radius: 3px; padding: 3px; font-weight: normal; } td.date { font-style: italic !important; float: right; } .button span a { text-transform: uppercase; font-size: 10px; font-style: italic; letter-spacing: 1px; } </style>

Kom ihåg att klicka på "Spara" och så är det klart!

Jag tycks vara långt ifrån den enda som stört mig på den där smala linjen mellan spalterna, och för att få bort den så använder du denna kod:
<style type="text/css"> .left_zone { border: 0 !important; }</style>

Det var någon som frågade om det här för en tid sen och nu tänkte jag att jag äntligen skulle ta mig tid att berätta hur man ska göra. Den mini-ikon jag pratar om är alltså den man t.ex. kan se invid adressfältet, en sådan kallas alltså "favicon". Enligt standard är denna ikon här på Ratata-bloggarna en svart ruta med ett vitt r på, men den kan man alltså byta ut till något mera eget, så som jag har gjort här på bonbon, till denna:


Vad man ska börja med är att ha en pytteliten bild som är 16×16 pixlar i storlek. Den laddar du upp, t.ex. helt enligt standard då man laddar upp bilden till bloggen. (Du måste ju inte publicera den fast du laddar upp den.) Sen kopierar du adressen till bilden. Min bild hittas exempelvis på http://bonbon.ratata.fi/data/bonbon/images/bb.gif.

Koden till att få mini-ikonen att framträda ser ut såhär:
<link type="image/x-icon" rel="icon" href="DIN BILDADRESS HÄR!" />
Men du byter förstås ut DIN BILDADRESS HÄR! till den riktiga bildadressen. Min egen kod till min egna bonbon-favicon ser således ut såhär:

  <link type="image/x-icon" rel="icon" href="http://bonbon.ratata.fi/data/bonbon/images/bb.gif" />

Och ungefär så ska din kod också se ut.

Denna kod ska som vanligt klistras in i Google Analytics-fältet som du hittar under Inställningar på din blogg. Sätt den skilt för sig, utanför alla övriga koder du kan tänkas ha där.

Molniga sidhuvuden, ett som tyder på vackert väder och ett som är lite mulet kanske. Kom ihåg att använda den fullstora versionen till uppladdningen.





Info om hur man laddar upp en bild till sidhuvudet finns här: ratata.fi/faq!

Det har visat sig att på alla ratata-bloggar så gömmer sig tre stycken "dela"-knappar under varje inlägg, den första låter en tipsa en kompis via ett meddelande sänt till deras epost, den andra postar en länk till inlägget på Facebook, och den tredje postar länken på din Twitter-logg. Och jag tänker att det här är väl ändå en sån behändig funktion att den vill man gärna ha i bruk hellre än att den bara gömmer sig där bakom ytan?

Så här ser alltså knapparna ut:


Och såhär ser koden ut:
<style type="text/css">.share { display: block !important; }</style>
Den ska du klippa ut och klistra in i Google Analytics-fältet som du hittar under Inställningar på din blogg.


Uppdatering:
Det verkar som att någon dag efter att jag postade det här så blev det standard på alla Ratata-bloggar att dela-knapparna är synliga? (Eller så har det verkligen spridit sig som löpeld — men det alternativet känns ganska omöjligt för varje blogg jag än klickar in mig på tycks ha de här knapparna.) Nåjo, det är bara bra, tycker jag, men är det så att knapparna är synliga automatiskt nu för tiden så gör det ju det här inlägget ganska överflödigt. ;) Men istället för att ta bort det så tänker jag att kanske är det nån som inte vill att de här knapparna ska synas, och är du en av de ska du istället använda dig av den här koden:<style type="text/css">.share { display: none !important; }</style>
Även den ska förstås in i Google Analytics-fältet som du hittar under Inställningar på din blogg.

Här är en stilmall som varit klar en bra tid redan men som jag helt och hållet glömt bort. Jag gjorde den i våras när jag som mest längtade efter sommaren och drömde om Hawaii och retroreklamaffischer. Den här stilmallen är gjord på så vis att det är inte möjligt att ändra bakgrundsfärg et.c. förutom om man går in i koden och trixar, men att ladda upp ett eget sidhuvud är inget problem!



(Klicka på bilden för att se den större.)

För att installera den här stilmallen så kopierar du koden i rutan här nedanför och klistrar in den i Google Analytics-fältet på Inställningar-sidan.

<link href='http://fonts.googleapis.com/css?family=Lobster:regular' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'><style type='text/css'>body { font-size: 14px !important; line-height: 18px; color: #222222 !important; background-color: #fffff0 !important; } .outerrim, .innerrim { background-color: #fffff0 !important; } .left_zone .post { padding: 0 0 50px 0 !important; width: 500px !important; margin: 0 0 50px 0 !important; border-bottom: 4px double #da2d16; } .left_zone { 500px; border: 0px !important; } #header { background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_honolulu1954.png'); background-color: #fffff0 !important;} #header .heading { font-family: Lobster; font-size: 55px !important; text-shadow: 2px 2px 1px #ffffff, -1px -1px 1px #ffffff, 3px 2px 3px #00aca8; letter-spacing: 2px; color: #da2d16 !important; } #header .quot { font-family: Rokkitt; font-style: normal !important; font-size: 30px !important; font-weight: normal; text-shadow: 1px 1px 1px #ffffff, 0px 0px 1px #ffffff; letter-spacing: 1px; color: #00aca8 !important; } .date, .right_zone .comment .date { text-transform: uppercase; letter-spacing: 2px; font-family: Georgia, 'Times New Roman', serif !important; font-size: 11px !important; font-style: italic; font-weight: normal !important; color: #daa416 !important; padding: 0 0 0 20px; } .new_comment { float: right !important; text-transform: uppercase; font-size: 11px !important; font-style: italic; letter-spacing: 2px; color: #da8c6b; } .new_comment a { color: #da8c6b; } .new_comment a:hover { color: #8c4124; text-decoration: none !important; letter-spacing: 5px; } h1 { font-family: Rokkitt; font-size: 24px; font-weight: normal !important; text-shadow: 1px 1px 2px #ffffff; text-decoration: none; text-transform: none; letter-spacing: 1px; word-spacing: 3px; color: #00aca8 !important; background-color: #e9dfcb; background-image: url('http://bonbon.ratata.fi/data/bonbon/images/honolulu1954_rubrikvanster.png'); background-position: top left; background-repeat: no-repeat; padding: 0 0 0 20px; width: 480px !important; border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; -khtml-border-radius: 0px 5px 5px 0px; } h1 a { color: #00aca8 !important; text-decoration: none; } h1 a:hover { color: #da2d16 !important; text-decoration: none !important; } .post_text, .post_text div { width: 500px !important; text-align: justify; word-spacing: 2px; border-right: 0px #fffff0 solid; } .post_text a, .post_text a:link { text-decoration: none; color: #00928f; padding: 0px 2px 1px 2px !important; } .post_text a:hover { text-decoration: none !important; color: #00928f; background-color: #c9e1e1; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; } .post_text a:visited { color: #00726f; } .post_text i, .post_text em, .post_text b, .post_text strong, .post_text u, .post_text s, .post_text strike { color: #000000; } h2 { font-family: Rokkitt; font-size: 20px !important; color: #00aca8 !important; letter-spacing: 1px; word-spacing: 3px; text-shadow: 1px 1px 1px #ffffff !important; text-transform: uppercase; } h3 { font-style: italic !important; font-size: 17px !important; text-shadow: 1px 1px 1px #ffffff; text-decoration: none; text-transform: none; letter-spacing: 1px; word-spacing: 3px; color: #da2d16 !important; } .comment { clear: both !important; margin: 0 0 20px 0 !important; } .comment .date { color: #c3a771 !important; padding: 0 !important; clear: both !important; } .comment .response .date {margin: 0 !important; } .comment .content div { color: #333333 !important; text-align: justify; } .comment .response .content div { color: #444444 !important; } .right_zone { width: 200px !important; float: right; } .right_zone div { color: #666666 !important; font-size: 11px !important; } .right_zone .userimage { background-color: #fffff0 !important; } .right_zone h1 { background: transparent !important; padding: 0; color: #c3a771 !important; font-size: 20px !important; font-weight: bold !important; letter-spacing: 0px; } .right_zone a, .right_zone a:link { color: #333333; padding: 0 2px 0 2px; } .right_zone a:hover { background-color: #e9dfcb; text-decoration: none !important; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; } .right_zone .section .post a { font-size: 11px !important; color: #333333; padding: 0 2px 0 2px; } .right_zone .button { font-family: 'Lobster'; font-size: 25px !important; font-weight: normal !important; font-style: normal !important; color: #00aca8 !important; letter-spacing: 1px; text-shadow: 1px 1px 1px #ffffff; text-transform: lowercase; float: right !important; margin: 20px auto auto auto; } .right_zone .button:hover { background-color: transparent !important; color: #c3a771 !important; } .right_zone img { margin: 20px 0 20px 0; } .right_zone a img { display: none; } .right_zone .post a { margin: 0; padding: 0; line-height: 15px; font-size: 12px !important; } div.right_zone .Module { padding: 0 !important; margin: 0 0 20px 0 !important; } .right_zone div.list .comment { font-size: 12px !important; margin: 0 !important; padding: 5px 0 5px 0 !important; } div.list .comment:nth-child(2n) { background-color: transparent !important; clear: both !important; } div.list .comment.forced,.Archive table.section tr:nth-child(2n) td, .Search table.section tr:nth-child(2n) td { background: transparent !important; border-top: 1px dashed #00aca8 !important; border-bottom: 1px dashed #00aca8 !important; margin: 0 !important; padding: 5px 0 5px 0 !important;} a.adminButton { background-color: #f0ffff !important; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-transform: uppercase; color: #000000 !important; } a.adminButton:hover { background-color: #ccffff !important; border: 0; color: #000000 !important; } .section { margin-bottom: 0 !important; } .Archive td.month h2, .Search td.header h2 { margin:0; font-size: 13px !important; display:block; background: transparent !important; padding: 0 !important; color: #333333 !important; letter-spacing: 2px; } body.color_01 .comments_image { background: transparent; margin: 0 0 0 -50px; } body.color_01 .comments_image a { line-height: 30px !important; font-size: 30px !important; font-family: Lobster; color: #da8c6b !important; text-shadow: 1px 1px 2px #ffffff, 0px 0px 1px #ffffff; } body.color_01 .comments_image a:hover { text-decoration: none !important; color: #8c4124 !important; } .arrows { background-color: #00aca8 !important; font-size: 12px !important; font-weight: bold !important; margin: 0 0 0 -50px !important; }</style>

Kom ihåg att klicka på "Spara" och så är det klart!

Triangelmanin fortsätter, här i tapetmodell. Kopiera koden i rutan under den förhandstitt du föredrar och klistra in den i Google Analytics-rutan på Inställningar-sidan.

<style type="text/css">body { background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_triangeltapet_001.jpg'); }</style>

<style type="text/css">body { background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_triangeltapet_002.jpg'); }</style>

<style type="text/css">body { background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_triangeltapet_003.jpg'); }</style>

<style type="text/css">body { background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_triangeltapet_004.jpg'); }</style>

<style type="text/css">body { background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_triangeltapet_005.jpg'); }</style>

Har har vi alltså fem triangeldraman i fem färgvariationer, bara att välja och vraka. Kom ihåg att klicka på bilderna för att se dem i fullstorlek innan du sparar. Info om hur man laddar upp en bild till sidhuvudet finns här: ratata.fi/faq!

För att byta ut den tunna linjen som finns mellan inlägg mot en av de här så kopierar du texten i rutan under den färgversion du föredrar och klistrar in den i Google Analytics-rutan som du hittar på Inställningar-sidan.

Grå

<style type="text/css">.left_zone .post { padding: 0 0 50px 0 !important; margin: 0 0 50px 0 !important; border: 0 !important; width: 500px !important; background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_linje_trianglar_001.jpg'); background-position: bottom left; background-repeat: no-repeat; }</style>

Sepia

<style type="text/css">.left_zone .post { padding: 0 0 50px 0 !important; margin: 0 0 50px 0 !important; border: 0 !important; width: 500px !important; background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_linje_trianglar_002.jpg'); background-position: bottom left; background-repeat: no-repeat; }</style>

Flerfärgad sval
<style type="text/css">.left_zone .post { padding: 0 0 50px 0 !important; margin: 0 0 50px 0 !important; border: 0 !important; width: 500px !important; background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_linje_trianglar_003.jpg'); background-position: bottom left; background-repeat: no-repeat; }</style>

Flerfärgad varm

<style type="text/css">.left_zone .post { padding: 0 0 50px 0 !important; margin: 0 0 50px 0 !important; border: 0 !important; width: 500px !important; background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_linje_trianglar_004.jpg'); background-position: bottom left; background-repeat: no-repeat; }</style>

Flerfärgad blek

<style type="text/css">.left_zone .post { padding: 0 0 50px 0 !important; margin: 0 0 50px 0 !important; border: 0 !important; width: 500px !important; background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_linje_trianglar_005.jpg'); background-position: bottom left; background-repeat: no-repeat; }</style>

Jag har legat lågt en tid men nu är jag tillbaka! Kanske har jag blivit lite ringrostig, för "separerare" är knappast den mest klipska benämningen, men vad jag syftar på är alltså den där tunna linjen som befinner sig mellan två inlägg och har som funktion att tydligt avgränsa dem ifrån varandra. "Plupp" syftar, förstås, på den där upprepade runda formen... poetiskt, jag vet.

För att byta ut denna tunna linje mot ett av dessa alternativ, så kopierar du texten i rutan under den färgversion du föredrar och klistrar in den i Google Analytics-rutan som du finner längst ner på Inställningar-sidan.

Grå

<style type="text/css">.left_zone .post { padding: 0 0 50px 0 !important; margin: 0 0 50px 0 !important; border: 0 !important; width: 500px !important; background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_linje_pluppar_001.jpg'); background-position: bottom left; background-repeat: no-repeat; }</style>

Sepia

<style type="text/css">.left_zone .post { padding: 0 0 50px 0 !important; margin: 0 0 50px 0 !important; border: 0 !important; width: 500px !important; background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_linje_pluppar_002.jpg'); background-position: bottom left; background-repeat: no-repeat; }</style>

Rödlila

<style type="text/css">.left_zone .post { padding: 0 0 50px 0 !important; margin: 0 0 50px 0 !important; border: 0 !important; width: 500px !important; background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_linje_pluppar_003.jpg'); background-position: bottom left; background-repeat: no-repeat; }</style>

Turkos

<style type="text/css">.left_zone .post { padding: 0 0 50px 0 !important; margin: 0 0 50px 0 !important; border: 0 !important; width: 500px !important; background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_linje_pluppar_004.jpg'); background-position: bottom left; background-repeat: no-repeat; }</style>

Olivgrön

<style type="text/css">.left_zone .post { padding: 0 0 50px 0 !important; margin: 0 0 50px 0 !important; border: 0 !important; width: 500px !important; background-image: url('http://bonbon.ratata.fi/data/bonbon/images/xl/xl_linje_pluppar_005.jpg'); background-position: bottom left; background-repeat: no-repeat; }</style>