Friday, September 27, 2013

CSS Schemes for OUR OLD SPACE - "Bauhaus"

The latest in the continuing series of page customization styles for OurOldSpace...

This page design is inspired by the STAATLICHES BAUHAUS, a design school founded by Walther Gropius in Weimar at the early part of the last century, which had a considerable influence.

Architects, visual artists, typographers, film makers, furniture and product designers (like a certain Mr Steve Jobs) have all cited the Bauhaus as a big influence. Even some of the fonts we use every day can be traced back to 1920s Weimar!

http://www.metmuseum.org/toah/hd/bauh/hd_bauh.htm#slideshow1
http://www.barbican.org.uk/generic/large-images.asp?id=12409&im=15457&af=artgallery
http://www.bauhaus.de/index+M52087573ab0.html

 



(All those years I spent at art college, having Nikolaus Pevsner's "The Sources of Modern Architecture & Design" crammed down my throat, finally came in useful at last!)

They were very keen on flat, primary colours (see also the Dutch 'De Stijl' school of Piet Mondrian and their Russian contemporaries Lissitsky and Kandinsky). You'll notice that all of the text on the page (with the exception of the sacrosanct OurOldSpace logo) has been turned to a lower-case sans-serif font, because that was one of their particularly favourite design features. The only thing missing which would make for a really authentic Bauhaus typographical 'look' would be if I could tilt the entire page through thirty degrees, but there are some things that CSS can't fix so easily!

This is a fairly simple CSS style, so there are very few changes to the actual layout, it's merely a 'colouring in' exercise.

Links for the images:-
The 'cover' image: http://www.ouroldspace.com/photo/9004/bauhaus1/
The stripes: http://i36.tinypic.com/2ekp1zl.jpg
The grainy grey fill: http://1-art.eu/images/backgrounds/canvas/canvas-a...

...and here's the rest of the code:-


body {
font-family: trebuchet ms, trebuchet, helvetica, sans-serif;
text-transform: lowercase;
}
a {
color: #ff0000;
}
a:hover {
color: #0085ff;
}
#js_is_user_profile {
background: url(http://i36.tinypic.com/2ekp1zl.jpg)!important;
}
#content_holder {
border: none!important;
border-radius: 0!important;
background: #ffffff;
color: #ffffff!important;
}
#main_content {
background: url(http://1-art.eu/images/backgrounds/canvas/canvas-abstract.jpg)!important;
width: 723px;
}
.table_one {
background: url(http://1-art.eu/images/backgrounds/canvas/canvas-abstract.jpg)!important;
color: #000000;
border: none!important;
}
td.lf {
background: rgba(0,0,0,0.5)!important;
color: #ffffff;
border: none!important;
}
td.rg {
background: rgba(0,0,0,0);
}
#main_content_padding {
padding: 0 0 0 0!important;
}
h1 a {
color: #ffffff;
font-size: 24px!important;
font-weight: bold;
}
.profile_info {
color: rgba(255,255,255,0.2)!important;
font-size: 24px!important;
font-weight: bold;
position: absolute;
left: 0px;
bottom: 0px;
}
.profile_breadcrumb {
font-size: 24px;
color: rgba(255,255,255,0.5);
}
.profile_online_status {
color: rgba(0,0,0,0)!important;
}
.online_now {
opacity: 0.0!important;
}
div.prfl_details {
color: #000000!important;
}
#section_menu {
position: relative;
top: 40px!important;
left: 450px!important;
}
#section_menu ul li a {
background: none!important;
border: none!important;
box-shadow: none!important;
color: #000000;
}
#section_menu ul li a:hover {
color: #ffffff;
}
#header {
background-color: #880000;
}
#header_menu {
background-color: #880000;
}
#header_menu ul li a.ajax_link {
border-right: 1px solid #ffffff;
}
#header_menu ul li a.ajax_link:hover {
background-color: #000000;
}
.profile_header {
padding: 0px 0px 20px 0px!important;
margin: 0px 0px 0px 0px!important;
border: none!important;
background-color: #bc2534;
}
a#logo {
font-family: verdana, vera sans, geneva, sans-serif!important;
font-weight: bold!important;
color: rgba(255,255,255,0.5);
text-transform: none!important;
}
h1.pro_name {
font-size: 58px!important;
color: #ededed;
-moz-transform: rotate(90deg)!important;
-webkit-transform: rotate(90deg)!important;
-o-transform: rotate(90deg)!important;
-ms-transform: rotate(90deg)!important;
position: relative;
top: 0px;
left: 115px;
}
.profile_pic {
position: relative;
left: 0;
top: -100px;
}
#content.content_float.content3.content2 {
background: #202020;
border-right: 20px solid #000000;
}
div.content {
border: none!important;
padding: 12px!important;
}
#js_feed_content {
border: none!important;
padding: 12px!important;
}
.activity_feed_form {
background: rgba(255,255,255,0.1);
border: none!important;
}
div#left div {
border: none!important;
}
div.box_hdng {
background-color: #000000;
color: #ffffff;
font-size: 11px!important;
width: 310px;
position: relative;
left: -7px;
}
h3.blrbs_ttle {
background-color: #000000;
color: #ffffff;
font-size: 11px!important;
position: relative;
left: -12px;
width: 300px;
border: none!important;
}
#js_block_border_music_new-album.block {
background: rgba(255,255,255,0.3);
}
#js_block_border_music_new-album.block .title {
background-color: #000000;
color: #ffffff;
font-size: 11px!important;
border: none!important;
}
h3.abt_me {
font-size: 12px!important;
font-weight: bold!important;
color: #880000!important;
border: none!important;
position: relative;
left: -7px;
}
div.abt_me_cnt {
color: #000000!important;
position: relative;
left: -7px;
}
div.abt_me_cnt p b a {
color: #990000!important;
}
div.comment_mini_content {
color: #000000!important;
}
div.activity_feed_content_display {
color: #ffffff!important;
}
div.block_listing_inline {
color: #880000;
}
img.js_hover_title {
width: 50px!important;
height: 50px!important;
border: 1px solid #707070;
}
div.activity_feed_image a img {
border: 1px solid #707070;
}
a.active {
color: #cccccc!important;
}
iframe#aswift_0 {
border: 1px solid #707070!important;
}
div.comment_mini_image a img {
border: 1px solid #707070!important;
}
.comment_mini_content_holder {
width: 370px!important;
border-bottom: 0!important;
}
.comment_mini_content_border {
width: 370px!important;
border-bottom: 0!important;
}
.js_feed_comment_view_more_holder {
width: 370px!important;
border-bottom: 0!important;
}
.js_feed_comment_border {
width: 370px!important;
border-bottom: 0!important;
}
input.button {
background: #880000!important;
border: 1px solid #880000;
border-radius: 3px;
}
.comment_mini_text {
padding: 6px;
}
div.row_title {
border: 2px solid #000000;
}

No comments:

Post a Comment