Most recent comments
Liveblogg nyttårsaften 2017
Tor, 11 months, 1 week
Jogging og blogging
Are, 1 year, 11 months
Liveblogg nyttårsaften 2016
Are, 1 year, 11 months
Reading in dark times
Are, 2 years
Moldejazz 2016
Camilla, 2 years, 4 months
Dørskilt
Karoline, 2 years, 4 months
Halifax
Tor, 2 years, 5 months
Sony Smartwatch 3 review
Tor, 2 years, 6 months
Numerikk, takk
Tor, 2 years, 6 months
Topp tur
Camilla, 2 years, 8 months
50 book challenge
Camilla, 11 months, 1 week
Ten years ago
Pics or it never happened!
Tor
Controls
Register

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.