Most recent comments
2021 in Books -- a Miscellany
Are, 2 years, 11 months
Moldejazz 2018
Camilla, 5 years, 4 months
Romjulen 2018
Camilla, 5 years, 11 months
Liveblogg nyttårsaften 2017
Tor, 6 years, 11 months
Selvbygger
Camilla, 1 month, 4 weeks
Bekjempelse av skadedyr II
Camilla, 11 months
Kort hår
Tor, 3 years, 11 months
Ravelry
Camilla, 3 years, 6 months
Melody Gardot
Camilla, 5 years, 5 months
Den årlige påske-kommentaren
Tor, 5 years, 8 months
50 book challenge
Camilla, 11 months, 3 weeks
Ten years ago
Nissebading
Tor
Controls
Register
Archive
+ 2004
+ 2005
+ 2006
+ 2007
+ 2008
+ 2009
+ 2010
+ 2011
+ 2012
+ 2013
+ 2014
+ 2015
+ 2016
+ 2017
+ 2018
+ 2019
+ 2020
+ 2021
+ 2022
+ 2023
+ 2024

Custom CSS

I've made a slight change to the way the page loads custom css. Earlier, this css was loaded instead of the regular one, now it is loaded after the regular one. This means that any styling you enter will override the corresponding styling in the standard css, while leaving the rest. This gives a lot of flexibility in creating your personal style.

For example, the standard styling of the main background is:
body{background-color:#9DA963}

To override this, you would add something like
body{background-color:#335588}

to the custom css box in your profile. Similarly, you can change the background of the center column by adding
.article_box{background-color:#9DA963}

The background of an article:
.article{background-color:#9DA963}

The side columns:
.column_box{background-color:#9DA963}

It is even possible to set a background image for any of these things:
body{
background: url(http://www.presskanne.com/kaffe_stor.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

If you end up with something you feel would be of interest to others, please let me know, and we can consider turning it into a selectable standard style. Also please let me know if you find anything wrong and/or annoying about the html and the classes and ids and so on.

-Tor Nordam

Comments

Camilla,  23.01.11 23:04

Tor,  23.01.11 23:07

Så fordømt vanskelig er det ikke. Redigér din profil, gå til der det står custom css, legg til

body{background-color:#335588}


og kryss av for å bruke custom css. Så er det bare å justere tallene.
Tor,  23.01.11 23:47

It's possible to use transparent or semi-transparent background colours on different elements. For example:

.article_box{background-color:rgba(255,255,255,0.6)}

The first three numbers control red, green and blue, from 0 to 255, where 255 is the lightest. The last numbers controls transparency, and runs from 0 to 1, where 0 is fully transparent.

Also, to style links, modify these:

A:link{background-color:transparent; color:#5F654F ;text-decoration:none;}
A:visited{background-color:transparent; color:#5F654F ;text-decoration:none;}
A:hover{background-color:transparent; color:#5F654F ;text-decoration:none;}
A:active{background-color:transparent; color:#5F654F ;text-decoration:none;}
Camilla,  24.01.11 17:30

body{
background: url(http://folk.ntnu.no/nordam/bakgrunn/presskanne.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.article_box{background-color:rgba(102, 0, 0, 0.6)}
.article{background-color:rgba(250,250,250,0.6)}
#normal_header{color:black}
div.column_box{background-color:rgba(250,250,250,0.7)}

A:link{background-color:transparent; color:grey ;text-decoration:none;}
A:visited{background-color:transparent; color:grey ;text-decoration:none;}
A:hover{background-color:transparent; color:grey ;text-decoration:none;}
A:active{background-color:transparent; color:grey ;text-decoration:none;}

Hmm

Camilla,  24.01.11 17:31

med unntak av en ting: kommentar-bokene blir ikke gjennomsiktige.

Ah

Tor,  24.01.11 19:50

Legg til

.comment{background-color:transparent}
Camilla,  24.01.11 20:00

i alle fall
.comment{background-color:rgba(250,250,250,0.7)}
Tor,  24.01.11 23:27

I should have done this from the beginning. I'm currently running with this setup:

body{
background: url(http://folk.ntnu.no/nordam/bakgrunn/ark.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.article_box{background-color:rgba(255,255,255,0.6)}
.comment{background-color:transparent}
div.column_box{background-color:rgba(255,255,255,0.6)}
#normal_header{color:black}
.tab_active .tab_title {background-color:transparent;}

A:link{background-color:transparent; color:#333333 ;text-decoration:none;}
A:visited{background-color:transparent; color:#333333 ;text-decoration:none;}
A:hover{background-color:transparent; color:#333333 ;text-decoration:none;}
A:active{background-color:transparent; color:#333333 ;text-decoration:none;}

I feel it looks quite nice, but it seems to very heavy for the browser to render the page when scrolling. Probably something to do with the combination of transparency and a non-moving background image. Whatever.