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;
}

Thursday, August 15, 2013

CSS Schemes for OUR OLD SPACE - "Merzbau"

Here's a CSS theme for Our Old Space with a little bit more 'grunge' if you will. First published on my OOS 'test page' 2013/08/08

Mathematically and geometrically, this latest effort is based on Existential Pathos' nice clean two-column layout, inspired by Blogger and other Wordpress-type blog sites.


(It's probably a good idea to read his own notes before you procede any further!)

But the resemblance ends there! Quite a lot of his code I left alone, but the results are rather different, as you can see. I hope this demonstrates how flexible this CSS lark can be and how it is possible to make a page your very own!

I've taken as my inspiration the 'merz' collage works of the dAdA artist KURT SCHWITTERS, who is something of an artHero of mine (boy, you should hear his 'poetry'!).

http://ppmews.blogspot.co.uk/2012/01/merz-and-me.html

The result is something with a modicum more grungitude than I'd originally intended, but ain't that the way these things often go?!?


The page should look as if it's pieced together in a haphazard fashion, determined by chance, but it really took a lot of deliberation to get it to look like that! (Come to think of it, that's definitely true of Schwitters' own work as well)

What I find particularly amusing about this style is that the 'random' look of the page actually helps cover up some of the typographic anomalies that still lurk within. It makes the 'mistakes' look as if they were deliberate design decisions! But don't tell anyone!

Here's the links to the background images I used:-

http://1-art.eu/images/backgrounds/old-paper/really-old-manuscript-paper.jpg
http://1-art.eu/images/backgrounds/old-paper/old-paper.jpg
http://www.goldclipart.com/24k.images/goldimages/back.gif

...and EP's little pointer icon which remained:

http://s2.wp.com/wp-content/themes/pub/shaan/images/pointer.gif

...and here's the rest of the script that you'll need.

body {
background: url(http://1-art.eu/images/backgrounds/old-paper/really-old-manuscript-paper.jpg)!important;
font-family: courier new, monospace !important;
font-weight: normal;
color: #000000;
}
textarea {
z-index: 99;
}
form {
z-index: 99;
}
div {
border: 0;
margin: 0;
}
a {
color: #880000!important;
}
#global_attachment_status {
background: rgba(224,202,126,0.8) !important;
}
#header {
background: rgba(224,202,126,0.6)!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.3)!important;
}
#header_left a#logo {
color: #ffffff!important;
font-family: verdana, sans-serif!important;
font-weight: bold!important;
}
#header_menu_holder ul li a {
color: rgba(0,0,0,0.6) !important;
}
#header_menu_holder ul li a.active {
color: #000000 !important;
}
#header_menu_holder ul li a.active:hover {
color: #000000 !important;
}
#holder_notify ul li a.notify_drop_link:hover {
color: #000000 !important;
}
#header_menu_holder ul li ul li a {
color: #000000 !important;
}
#header_menu {
background: rgba(100,100,100,0.1)!important;
box-shadow: 0px 6px 6px rgba(0,0,0,0.4)!important;
}
#header_menu ul li a:hover {
border-right: 1px solid rgba(0,0,0,0.6) !important;
background: #ffffff !important;
color: rgba(0,0,0,0.6) !important;
}
#header_menu ul li a {
border-right: 1px solid rgba(0,0,0,0.1) !important;
color: rgba(0,0,0,0.5) !important;
}
.holder {
background-color: rgba(0,0,0,0) !important;
}
#content_holder {
background: rgba(0,0,0,0.1)!important;
border: 7px solid rgba(224,202,126,0.6);
padding: 10px!important;
border-radius: 0!important;
width: 950px !important;
}
#left {
width: 301px;
background: transparent !important;
float: right !important;
margin: 0px 0px 0 0px !important;
padding: 250px 0 0 0 !important;
border-right: 0 !important;
}
#left > div {
border: 0;
width: 100%!important;
}
#left > div div {
border: 0 !important;
}
#left li {
width: 170px !important;
background: url('http://s2.wp.com/wp-content/themes/pub/shaan/images/pointer.gif') no-repeat 0 10px;
margin-left: 3px;
padding-left: 10px !important;
}
#left div div li a {
padding-left: 10px !important;
font-size: 10px !important;
color: #800000 !important;
text-shadow: none!important;
width: 1005!important;
}
#left>div:nth-child(1) {
position: absolute;
top: 0;
left: -999em;
width: 110px !important;
margin-left: -35px;
}
#left>div:nth-child(2) {
position: absolute;
left: .5em;
top: 9em;
background: url(http://www.goldclipart.com/24k.images/goldimages/back.gif) !important;
width: 360px!important;
opacity: 0.5!important;
height: 137px;
margin: 0 0 0 0!important;
padding-left: 10px !important;
border: none!important;
border-radius: 3px;
box-shadow: 0px 0px 15px rgba(0,0,0,.4);
z-index: 99;
-moz-transform: rotate(-2deg)!important;
-webkit-transform: rotate(-2deg)!important;
-o-transform: rotate(-2deg)!important;
-ms-transform: rotate(-2deg)!important;
}
#left>div:nth-child(2) div {
width: 140px;
margin: 0 !important;
padding: 0!important;
}
#left>div:nth-child(2) .box_hdng {
position: absolute;
left: -999em;
}
#left>div:nth-child(3) {
position: absolute;
left: 58em;
top: 3.5em;
width: 300px !important;
padding: 10px !important;
z-index: 10;
}
#left>div:nth-child(3) div ul li#js_add_friend_on_profile {
color: #000000 !important;
text-shadow: 2px 2px 3px #000000;
padding-left: 20px !important;
}
#left>div:nth-child(3) div+div {
float: left;
clear: left;
width: 150px;
border: none!important;
background: url(http://www.goldclipart.com/24k.images/goldimages/back.gif) !important;
border-radius: 3px;
box-shadow: 0px 0px 15px rgba(0,0,0,.4);
opacity: 0.5!important;
-moz-transform: rotate(3deg)!important;
-webkit-transform: rotate(3deg)!important;
-o-transform: rotate(3deg)!important;
-ms-transform: rotate(3deg)!important;
}
#left>div:nth-child(3) div+div+div {
clear: none!important;
margin-left: 20px;
}
#left>div:nth-child(3) .box_hdng {
float: left
clear: both;
width: 60px;
height: 19px;
overflow: hidden;
position: relative!important;
left: -40px;
margin: 0 0 15px 100px;
}
#left>div:nth-child(3) li {
height: 12px;
padding-left: 4px !important;
margin-left: 3px;
width: 110px !important;
text-align: left!important;
}
#left>div:nth-child(3) li img {
position: absolute;
left: -999em;
}
#left>div:nth-child(3) li div {
position: absolute;
left: -999em;
}
#left a.first {
position: relative;
}
#left a.inlinepopup {
position: relative;
}
.profile_pic {
position: absolute;
left: 1028em;
top: 100px;
width: 100px;
background: transparent;
margin: 0 0 0 -25px;
z-index: 100;
transform: rotate(4deg)!important;
-moz-transform: rotate(4deg)!important;
-webkit-transform: rotate(4deg)!important;
-o-transform: rotate(4deg)!important;
-ms-transform: rotate(4deg)!important;
}
.profile_pic img {
width: 85px;
height: auto;
padding: 5px;
border: 1px solid #ddd !important;
}
h1.pro_name {
position: absolute;
left: -999em;
color: rgba(0,0,0,0)!important;
}
.prfl_details {
position: absolute;
left: -999em;
}
.online_now {
position: absolute;
left: -999em;
}
.box_hdng {
background: transparent;
color: rgba(0,0,0,0.5) !important;
padding-left: 10px !important;
font-size: 12px !important;
text-shadow: none!important;
width: 250px!important;
-moz-transform: rotate(-3deg)!important;
-webkit-transform: rotate(-3deg)!important;
-o-transform: rotate(-3deg)!important;
-ms-transform: rotate(-3deg)!important;
}
#left table.table_one {
position: relative!important;
margin: 10px 0 0 0px !important;
padding: 10px 0px 10px 10px !important;
background: url(http://www.goldclipart.com/24k.images/goldimages/back.gif)!important;
border: 3px dotted rgba(0,0,0,0.3)!important;
width: 100% !important;
opacity: 0.6!important;
}
#left>div:nth-child(3) table.table_one {
margin: 187px 0 0 1px !important;
background-color: rgba(255,255,255,0.3)!important;
z-index: 80;
width: 300px !important;
}
td {
color: #000000!important;
padding: 6px !important;
font-size: 9px !important;
border: none!important;
}
table.table_one tr td.lf {
width: 40px !important;
padding-left: 10px !important;
background: transparent url('http://s2.wp.com/wp-content/themes/pub/shaan/images/pointer.gif') no-repeat 0 50%!important;
border: 0!important;
color: #800000 !important;
font-size: 11px !important;
font-weight: normal!important;
text-shadow: none!important;
vertical-align: middle!important;
}
table.table_one tr td.rg {
background-color: rgba(255,255,255,0.8)!important;
min-height: 50px !important;
width: 190px !important;
padding: 10px 10px 20px 10px !important;
border-left: 1px solid rgba(160,0,0,0.3)!important;
border-right: 0!important;
color: #000000!important;
font-weight: normal;
font-size: 11px !important;
}
td.rg img {
position: relative !important;
background-color: rgba(255,255,255,0.3)!important;
max-width: 175px !important;
height: auto !important;
margin: 10px 0 0 12px !important;
padding: 5px !important;
border: 2px solid #800000 !important;
-webkit-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, .15)!important;
}
#left div:nth-of-type(5n) table.table_one tr td.lf {
width: 44px !important;
border-bottom: 1px solid rgba(160,0,0,0.1)!important;
}
#left div:nth-of-type(5n) table.table_one tr td.rg {
width: 190px !important;
padding-bottom: 0px !important;
padding-top: 0px !important;
border-bottom: 0 !important;
border-top: 0 !important;
}
#left .pages_view_sub_menu {
width: 115px !important;
position: absolute;
top: 0px;
left: 832px;
z-index: 99;
}
#left .pages_view_sub_menu ul li {
padding-top: 5px;
padding-bottom: 0!important;
height: 16px;
}
#left .pages_view_sub_menu ul li a {
padding-left: 10px!important;
color: #800000 !important;
}
#main_content {
width: 68%;
background-color: transparent !important;
margin: 0px 0 0 0px!important;
padding: 0px 0 0 0px!important;
}
#main_content_holder {
background: transparent;
}
#main_content_padding {
background: transparent !important;
padding: 0 0 0 0!important;
}
.profile_header {
width: 950px!important;
min-height: 250px!important;
margin: 0px -305px 0px 0 !important;
padding: 15px 0;
float: left!important;
clear: left;
border-bottom: 0 !important;
background: transparent!important;
}
.profile_header_inner h1 {
position: relative!important;
padding: 0px !important;
font-family: impact,sans-serif;
text-transform: lowercase!important;
margin: 0px !important;
padding-left: 14em !important;
width: 900px!important;
transform: rotate(-1deg)!important;
-moz-transform: rotate(-1deg)!important;
-webkit-transform: rotate(-1deg)!important;
-o-transform: rotate(-1deg)!important;
-ms-transform: rotate(-1deg)!important;
}
.profile_header_inner h1 a {
font-size: 50px !important;
font-weight: bold;
text-align: left !important;
color: rgba(0,0,0,0)!important;
text-shadow: 0px 0px 2px rgba(160,0,0,0.4);
}
.profile_header_inner h1 a:hover {
text-decoration: none!important;
color: rgba(0,0,0,0.4)!important;
}
.profile_header_inner h1 a+span+a {
font-size: 16px!important;
color: #000000 !important;
}
#section_menu {
position: absolute;
left: 30em !important;
top: 24.5em !important;
right: 0 ! important;
z-index: 99;
}
#section_menu a {
background: linear-gradient(-90deg, #ffffff, #cccccc) !important;
-webkit-border-radius: 1em !important;
-moz-border-radius: 1em !important;
border-radius: 1em !important;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
box-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
color: #666 !important;
filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ed1c24', endcolorstr='#aa1317');
}
#section_menu_drop {
position: absolute;
left: 30em !important;
top: 26.5em !important;
right: 0 !important;
}
.profile_info {
color: rgba(0,0,0,0.6) !important;
padding: 0 0 0 9px;
}
#content_load_data {
width: 100%!important;
background: transparent !important;
margin: 0px 0 0 0px !important;
}
#content.content_float.content3.content2 {
width: 600px;
margin: 0 !important;
z-index: 80;
}
#content.content_float.content2 {
margin-left: 0px !important;
margin-top: -120px !important;
}
#site_content {
padding-top: 125px;
width: 550px;
}
.activity_feed_form_share {
margin: 40px 0 0 0px;
padding-left: 25px !important;
border-top: 1px solid rgba(200,0,0,0.3) !important;
width: 100%;
}
.activity_feed_form_holder {
z-index: 99;
background: transparent !important;
opacity: .6!important;
}
.activity_feed_form_button {
z-index: 99;
}
ul.activity_feed_form_attach a div {
color: #800000;
}
ul.activity_feed_form_attach li.share {
color: #000000;
}
.activity_feed_form {
width: 550px;
margin: 0 0 0 25px;
z-index: 100;
}
.activity_feed_form_button_position {
z-index: 100;
}
#js_activity_feed_form {
z-index: 200;
width: 545px;
}
.message {
float: left;
}
.js_feed_view_more_entry_holder {
width: 625px !important;
background: transparent !important;
margin: 35px 0 50px 0 !important;
padding: 0px !important;
border: 0 !important;
font-family: verd
font-size: 14px;
line-height: 1.6;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
.activity_feed_content {
background: transparent url(http://1-art.eu/images/backgrounds/old-paper/old-paper.jpg) repeat-x top;
-moz-background-size: cover !important;
-webkit-background-size: cover !important;
background-size: cover !important;
margin: 0 0 0 0px;
font-family: courier new, monospace !important;
box-shadow: 0px 0px 12px rgba(0,0,0,0.5)!important;
border: 6px dashed rgba(0,0,0,0.1)!important;
}
.activity_feed_content_text {
padding: 55px 12px 12px 55px;
}
.activity_feed_content_info {
color: #000000!important;
margin: -50px 0 0 0;
}
span.user_profile_link_span a {
color: #800000 !important;
font-family: courier new, monospace !important;
font-size: 19px;
line-height: 1.4;
text-shadow: none!important;
}
.activity_feed_content_float span.user_profile_link_span a {
font-size: 18px !important;
color: #000000 !important;
line-height: 40px !important;
}
.comment_mini_content span.user_profile_link_span a {
color: #000000 !important;
font-size: 13px !important;
line-height: 16px !important;
}
.activity_feed_content_status {
padding: 30px 0 0 10px;
color: #000000 !important;
}
.activity_feed_content_link {
margin: 30px 0 0 0;
}
.activity_feed_content_image {
max-width: 530px !important;
height: auto;
margin: 5px !important;
padding: 5px !important;
border: 2px solid rgba(224,202,126,0.8) !important;
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.4) !important;
background: #fff !important;
}
.activity_feed_content_image a img {
max-width: 520px !important;
max-height: none !important;
height: auto !important;
margin: 5px !important;
padding: 0px !important;
}
.activity_feed_content_image a.play_link.no_ajax_link img {
max-width: 120px !important;
max-height: 90px !important;
margin: 0 !important;
}
img.photo_holder {
max-width: 520px !important;
height: auto;
}
.js_comment_like_holder {
color: #000000 !important;
}
.js_feed_comment_border div {
background: transparent !important;
}
.js_feed_comment_border {
margin: 40px 0px 0 50px;
border-top: 0 !important;
}
.comment_mini_content_border {
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
.js_feed_comment_form {
margin: 0 10px 0 0px;
}
.activity_like_holder.comment_mini span.user_profile_link_span a {
font-size: 13px !important;
color: #000000 !important;
}
.comment_mini_link_like {
margin-bottom: 10px;
padding: 5px 0 5px 0;
border-top: 1px solid rgba(160,0,0,0.2);
border-bottom: 1px solid rgba(160,0,0,0.2);
}
.comment_mini_text {
color: #000000!important;
font-size: 11px !important;
}
.comment_mini_end {
background-image: none !important;
}
.comment_mini {
border-bottom: 0 !important;
}
.comment_mini_link_like ul li a {
color: #000000 !important;
text-shadow: none!important;
}
.js_view_more_part {
color: #000000 !important;
text-shadow: none!important;
}
.activity_feed_content_display {
color: #000000 !important;
text-shadow: none!important;
}
a.activity_feed_content_view_more {
color: #000000 !important;
text-shadow: none!important;
}
span.js_view_more_full {
color: #000000 !important;
text-shadow: none!important;
}
.comment_mini_content {
margin-left: -5px !important;
padding-left: 40px;
}
div.row1 {
border: 0;
}
div.row2 {
border: 0;
}
#right {
position: relative;
margin: 0px -304px 0px 0px;
width: 301px !important;
max-width: 301px !important;
float: right!important;
clear: right!important;
background: transparent !important;
padding: 450px 0 0 0px!important;
font-size: 13px;
line-height: 1.5;
}
h3.blrbs_ttle {
background: transparent;
color: #800000 !important;
padding-left: 10px !important;
font-family: courier new, monospace !important;
font-size: 16px !important;
text-shadow: none!important;
text-align: center!important;
border-bottom: 1px solid rgba(160,0,0,0.4)!important;
}
h3.abt_me {
background: transparent;
color: #ffffff !important;
padding-left: 10px !important;
text-indent: 10px;
font-family: courier new, monospace !important;
font-size: 16px !important;
font-weight: bold!important;
text-shadow: none!important;
border: 0 !important;
border-bottom: 0 !important;
text-transform: uppercase!important;
}
.abt_me_cnt {
position: relative;
color: #000000 !important;
margin-bottom: 50px !important;
min-height: 150px;
text-indent: 0px!important;
padding: 5px 5px 0 20px !important;
font-size: 12px;
line-height: 1.5;
}
.abt_me_cnt div {
position: relative !important;
}
.abt_me_cnt img {
float: left;
position: relative !important;
max-width: 250px !important;
height: auto !important;
margin: 10px 0 20px 0px !important;
padding: 5px !important;
border: 2px solid rgba(80,0,0,0.4) !important;
-webkit-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, .15) !important;
background: #fff;
}
#right .blurbs {
position: absolute;
left: 5px;
top: 10px;
background: url(http://1-art.eu/images/backgrounds/old-paper/old-paper.jpg)!important;
width: 265px;
min-height: 385px;
float: left;
margin: 0 0 0 10px;
padding: 2px 0 5px 10px;
border: 1px solid rgba(224, 202, 126, 1) !important;
border-radius: 3px;
box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
z-index: 81;
}
.blurbs .abt_me_cnt {
position: absolute;
left: -999em;
}
.blurbs h3.blrbs_ttle {
position: relative !important;
width: 200px !important;
height: 16px;
overflow: hidden;
background: transparent !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
border: 0 !important;
font-size: 12px !important;
font-family: courier new, monospace!important;
color: #800000 !important;
text-shadow: none!important;
font-weight: bold;
text-align: left !important;
}
#all_frnds {
width: 260px;
height: 163px;
overflow: hidden;
margin: 0px;
padding: 20px 0 0 0;
padding-left: 0px;
}
.block_listing_inline {
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}
.block_listing_inline ul {
margin: 0;
padding: 0;
}
.block_listing_inline ul li {
position: relative!important;
background: transparent;
width: 255px !important;
height: 50px !important;
margin: 0px 0px 4px 0px !important;
padding: 0 0 0 0px !important;
float: none !important;
}
.block_listing_inline ul li div {
position: absolute;
left: 70px;
top: 8px;
background: transparent !important;
width: 190px !important;
height: 30px !important;
overflow: hidden;
padding: 2px 0 0 0 !important;
color: #000000 !important;
text-align: left;
font-family: courier new, monospace!important;
font-size: 11px !important;
font-weight: bold !important;
z-index: 10;
}
.block_listing_inline ul li img {
position: absolute;
left: 1px !important;
top: 1px !important;
width: 46px !important;
height: 46px !important;
background: transparent;
margin: 0 0 0 0 !important;
padding: 2px 2px 2px 2px !important;
border: 1px solid #ffffff !important;
box-shadow: none!important;
}
#js_block_border_friend_mutual-friend {
position: absolute;
left: 5px;
top: 270px;
width: 255px !important;
max-width: 250px !important;
background: transparent !important;
margin: 0 0px 0px 15px !important;
padding: 0 0 10px 5px !important;
border-top: 1px solid rgba(160,0,0,0.5)!important;
z-index: 99;
}
#js_block_border_friend_mutual-friend .title {
max-width: 250px !important;
background: transparent !important;
margin: 0 0 -10px 0 !important;
border-bottom: 0 !important;
color: #800000 !important;
}
#js_block_border_friend_mutual-friend .block_listing_inline ul li {
position: relative;
width: 50px !important;
height: 50px !important;
float: left !important;
margin: 0 3px 0 0 !important;
padding: 0px !important;
border: 1px solid rgba(160,0,0,0.5)!important;
}
#js_block_border_friend_mutual-friend .block_listing_inline ul li img {
position: absolute;
left: 4px;
top: 4px;
width: 44px;
height: 44px;
background: #fff;
padding: 0px !important;
}
#right>div:nth-last-of-type(2) {
float: left !important;
clear: both !important;
max-width: 280px !important;
margin: -15px 15px 35px 15px !important;
padding: 0 !important;
font-size: 9px !important;
color: #000000 !important;
font-family: courier new, monospace!important;
font-weight: bold;
z-index: 99;
}
#right>div:nth-last-of-type(2) a {
font-size: 10px !important;
font: 300 20px courier new, monospace;
color: #000000!important;
font-weight: bold!important;
}
.js_ad_space_parent {
margin: 15px 0 0 0;
}
#js_block_border_custom_cf_movies {
position: absolute;
left: -999em;
}
#js_block_border_custom_cf_interests {
position: absolute;
left: -999em;
}
#js_block_border_custom_cf_music {
position: absolute;
left: -999em;
}
#js_block_border_custom_cf_books {
position: absolute;
left: -999em;
}
#js_block_border_custom_cf_heroes {
position: absolute;
left: -999em;
}
#js_block_border_custom_cf_television {
position: absolute;
left: -999em;
}
#js_feed_content .message js_no_feed_to_show {
position: absolute;
left: -999em;
}
#js_block_border_profile_info {
margin: 150px 0 0 0;
padding: 5px 0 0 10px!important;
}
#content div.info {
border-bottom: 0!important;
color: #000000 !important;
}
#js_block_border_custom_cf_about_me .abt_me_cnt {
position: relative !important;
left: 0 !important;
}
#js_block_border_custom_cf_who_i_d_like_to_meet .abt_me_cnt {
position: relative !important;
left: 0 !important;
}
#js_block_border_custom_cf_about_me .title {
background: transparent !important;
color: #000000!important;
border: 0 !important;
}
#js_block_border_custom_cf_who_i_d_like_to_meet .title {
background: transparent !important;
color: #000000!important;
border: 0 !important;
}
#js_block_border_custom_cf_about_me .js_custom_content {
background: rgba(224,202,126,0.5) !important;
width: 93%;
margin: 0 0 0 10px!important;
padding: 10px 10px 100px 15px;
border: 1px solid rgba(34, 73, 111, 0.075)!important;
border-radius: 3px;
box-shadow: 1px 1px 6px -1px rgba(0,0,0,.4);
color: #000000;
text-indent: 10px;
font-size: 13px;
}
#js_block_border_custom_cf_who_i_d_like_to_meet .js_custom_content {
background: rgba(224,202,126,0.5) !important;
width: 93%;
margin: 0 0 0 10px!important;
padding: 10px 10px 100px 15px;
border: 1px solid rgba(34, 73, 111, 0.075)!important;
border-radius: 3px;
box-shadow: 1px 1px 6px -1px rgba(0,0,0,.4);
color: #000000;
text-indent: 10px;
font-size: 13px;
}
.js_custom_content img {
max-width: 560px !important;
height: auto !important;
float: left;
margin: 7px 20px 10px 0px !important;
padding: 5px !important;
border: 2px solid rgba(160,0,0,0.4) !important;
-webkit-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, .15)!important;
}
.js_custom_content #clearmyphoto {
clear: both;
min-height: 10px !important;
border: 0 !important;
}
.js_custom_content #clearmyphoto2 {
clear: both;
min-height: 10px !important;
border: 0 !important;
}
#site_content .clear {
position: absolute;
left: -999em;
}
.pager_links_holder {
margin: 700px 0 0 0 !important;
}
.go_left {
width: 230px !important;
height: 100px !important;
background: rgba(224,202,126,0.5)!important;
margin: 0 0 10px 20px !important;
padding: 0 !important;
border: 1px solid #800000 !important;
}
.go_left div {
position: relative !important;
width: 130px;
height: 20px;
margin: 30px 0 0 95px !important;
text-align: right !important;
}
.go_left div span a {
font-size: 10px !important;
color: #800000 !important;
}
.go_left .t_center {
width: 100px !important;
height: 100px !important;
margin: 0 !important;
padding-left: 0px !important;
}
.t_center img {
width: 99px !important;
height: 99px !important;
float: left;
margin: 0 !important;
padding: 0 !important;
}
.row_title {
background: rgba(224,202,126,0.5)!important;
margin-left: 20px;
border: 1px solid rgba(160, 0, 0, 0.3)!important;
border-radius: 3px;
box-shadow: 0px 0px 15px rgba(0,0,0,.4);
}
.extra_info_link {
margin-left: 10px !important;
}
.extra_info_link span.user_profile_link_span a {
font-size: 13px !important;
color: #800000 !important;
}
.blog_content .comment_mini_link_like {
min-height: 20px;
padding-top: 2px !important;
}
.blog_content .comment_mini_link_like ul {
margin-top: 2px!important;
}
.extra_info .user_profile_link_span a {
color: #000000 !important;
font-size: 12px !important;
}
.blog_content .item_tag {
color: #000000 !important;
text-shadow: none!important;
}
.blog_content .item_tag_holder span a {
color: #800000 !important;
text-shadow: none!important;
}
.block .content {
border: 0 !important;
}
.js_mp_fix_width.photo_holder {
padding: 5px !important;
border: 1px solid rgba(160,0,0,0.3)!important;
box-shadow: 0px 0px 15px rgba(0,0,0,.4)!important;
}
.header_bar_menu {
position: absolute;
left: 0;
top: 27em;
min-height: 30px;
z-index: 101;
}
.header_bar_search {
position: absolute;
left: 10px;
top: 5;
width: 250px;
}
.header _bar_search form {
position: relative !important;
}
#video-container1 {
height: 0;
overflow: hidden;
position: relative;
padding-bottom: 56.25% !important;
padding-top: 30px !important;
}
#video-container1 iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
#video-container1 object {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
#video-container1 embed {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
#video-container2 {
height: 0;
overflow: hidden;
position: relative;
padding-bottom: 56.25% !important;
padding-top: 30px !important;
z-index: 10;
}
#video-container2 iframe {
position: absolute;
top: 0;
left: 0px;
width: 100% !important;
height: 100% !important;
z-index: 10;
}
#video-container2 object {
position: absolute;
top: 0;
left: 0px;
width: 100% !important;
height: 100% !important;
z-index: 10;
}
#video-container2 embed {
position: absolute;
top: 0;
left: 0px;
width: 100% !important;
height: 100% !important;
z-index: 10;
}
#footer {
}
ul#footer_menu {
}
div#left div div ul li a {
width: 200px!important;
}
div.header_menu_login_sub label {
color: #000000!important;
}
div#copyright {
color: #000000!important;
}


CSS schemes for OUR OLD SPACE - "Woody"

Another 'readymade' CSS hack for Our Old Spacers... Here's something a little bit 'woody', ready for the autumn (and/or fall, depending on where you are located). Not that the weather we're having now would suggest that we're ready for it just yet... but I digress... First published on my OOS 'test page' 2013/08/02


This scheme should be dead simple for everyone to have a go at! None of that complicated mucking about with resizing and moving the columns about, the sort of mad stuff we've been exploring elsewhere. Nope, just a simple colouring in of the existing layout, with some new features I've been trying out, like that rather nifty wooden table on the left!


As usual, I'll link the background images here for anyone who wants to use them. In other words, this is where I got them from, but you could google for 'autumn HD wallpapers' and find lots of others that you might prefer... or use something of your own. Just substitute your own image URLs where you see those bracketed 'background' bits...

You'll notice that, on mine, I rotated the 'woodback' image by 90 degrees - it looks better if the 'slats' run horizontally instead of vertically. You can do this with your favourite paint program, before uploading the image to your own storage site.

http://www.acidblueltd.com/woodback.jpg
http://hdnaturepictures.com/wp-content/uploads/2013/05/Good-Autumn-Wallpapers.jpg

Okay, so here's that pesky CSS code. Just copy the following into your profile editor...


body {
background-color: #521e08!important;
font-family: comic sans ms!important;
}
#header {
position: absolute;
width: 100%!important;
top: 0px;
z-index: 1007;
background: linear-gradient(to bottom, rgb(82,30,08) 9%, rgb(0,0,0) 73%) repeat scroll 0% 0% transparent!important;
background-color: #521e08!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
}
#js_photo_cover_position {
opacity: .5!important;
}
img.profile_user_image {
opacity: .5!important;
}
body > #header {
position: fixed;
}
#main_core_body_holder #main_content_holder {
margin-top: 70px;
}
#main_core_body_holder_guest #main_content_holder {
margin-top: 130px;
}
body.main_core_body_holder_class #header {
position: static;
margin-top: 0px;
}
body.main_core_body_holder_class #main_core_body_holder #main_content_holder {
position: static;
margin-top: 0px;
}
#content_holder {
background-color: rgba(0,0,0,0);
border: none!important;
border-radius: 0px!important;
}
div {
border: none!important;
color: #ffffff;
font-size: 11px!important;
}
.profile_info {
color: #ffffff!important;
padding-top: 10px!important;
}
ul {
color: #ffffff;
font-size: 11px!important;
}
#js_is_user_profile {
background: url(http://hdnaturepictures.com/wp-content/uploads/2013/05/Good-Autumn-Wallpapers.jpg) no-repeat center top fixed!important;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
background-color: #521e08!important;
}
#header_menu {
background: linear-gradient(to bottom, rgb(82,30,08) 9%, rgb(0,0,0) 73%) repeat scroll 0% 0% transparent!important;
background-color: rgb(82,30,8);
box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
}
.activity_feed_form_share ul {
font-size: 10px!important;
font-weight: normal!important;
}
.activity_feed_form_share div {
font-size: 10px!important;
font-weight: normal!important;
}
.activity_feed_content_text {
padding-left: 10px!important;
color: #ffffff!important;
}
.activity_feed_content_link .activity_feed_content_no_image .activity_feed_content_display {
color: #ffffff!important;
}
.activity_feed_content_status {
color: #ffffff!important;
}
.activity_feed_content_info {
color: #ffffff!important;
}
.js_feed_view_more_entry_holder {
background-color: rgba(0,0,0,0.6)!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
color: #ffffff;
padding: 12px;
}
#js_feed_content {
background: rgba(82,30,8,0.5)!important;
box-shadow: 0px 0px 12px rgba(82,30,8,1)!important;
}
.comment_mini_link_like {
padding-left: 10px!important;
}
.box_hdng {
background-image: url(http://www.acidblueltd.com/woodback.jpg)!important;
color: #ffffff;
font-size: 10px!important;
text-align: left!important;
text-transform: uppercase!important;
width: 234px!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
h3.blrbs_ttle {
background-image: url(http://www.acidblueltd.com/woodback.jpg)!important;
color: #ffffff!important;
font-size: 10px!important;
text-transform: uppercase!important;
border: none!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
p {
color: #ffffff;
font-size: 11px!important;
}
strong {
color: #ffffff;
font-size: 11px!important;
}
a {
color: #ff9000!important;
}
a:hover {
color: #ffff00!important;
}
#header_menu a.ajax_link {
color: rgba(255,255,255,0.7)!important;
border-right: 1px solid rgba(255,255,255,0.3)!important;
text-shadow: 1px 1px 1px rgba(0,0,0,1)!important;
}
#header_menu a.ajax_link:hover {
background-color: #000000!important;
color: #ff8000!important;
text-shadow: 0px 0px 12px rgba(255,0,0,1)!important;
}
.has_drop_down.no_ajax_link {
color: #ffffff!important;
}
.has_drop_down.no_ajax_link:hover {
color: rgba(255,200,0,0.5)!important;
text-shadow: 0px 0px 12px rgba(255,200,0,1)!important;
}
.profile_online_status {
color: #ff9000!important;
}
.online_now {
opacity: .3!important;
}
a#logo {
color: rgba(255,255,255,0.3)!important;
font-family: verdana,sans-serif!important;
font-weight: bold!important;
}
a#logo:hover {
color: rgba(255,200,0,0.2)!important;
font-family: verdana,sans-serif!important;
font-weight: bold!important;
text-shadow: 0px 0px 12px rgba(255,200,0,1)!important;
}
.content {
background-color: rgba(0,0,0,0.5)!important;
border: none!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
.row_title {
background-color: rgba(0,0,0,0.5)!important;
border: none!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
table {
background-image: url(http://www.acidblueltd.com/woodback.jpg)!important;
border: 1px solid #521e08!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
td {
background-color: rgba(82,30,8,0.5)!important;
border: 1px solid rgba(255,200,0,0.2)!important;
color: rgba(255,200,0,1)!important;
font-weight: normal!important;
font-size: 11px!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
.title.js_sortable_header {
background-color: #521e08!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
color: #ffffff!important;
}
h3.abt_me {
border-bottom: 1px solid rgba(255,200,0,0.3)!important;
color: rgba(255,200,0,1)!important;
text-transform: uppercase!important;
font-size: 11px!important;
font-weight: bold!important;
}
.block_listing_inline div {
font-size: 11px!important;
font-weight: normal!important;
}
.abt_me_cnt p {
font-size: 11px!important;
}
.abt_me_cnt a {
font-size: 9px!important;
}
#all_frnds {
font-size: 8px!important;
padding-left: 45px!important;
text-align: center!important;
background: url(http://www.acidblueltd.com/woodback.jpg)!important;
border: 1px solid rgba(255,200,0,0.5)!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
.blurbs .abt_me_cnt p {
color: rgba(255,255,255,1)!important;
font-weight: normal!important;
}
#js_can_move_blocks_3 div {
font-size: 8px!important;
}
img.js_hover_title {
border: 1px solid rgba(255,255,255,0.3)!important;
width: 50px!important;
height: 50px!important;
}
.activity_feed_image img {
border: 1px solid rgba(255,200,0,0.5)!important;
}
.comment_mini_image img {
border: 1px solid rgba(255,200,0,0.5)!important;
}
.blurbs .abt_me_cnt a {
color: rgba(255,255,255,0.7)!important;
}
h1 {
color: rgba(0,0,0,0)!important;
}
h1 a {
color: rgba(255,200,0,1)!important;
}
h1 a:hover {
color: rgba(255,200,0,0.6)!important;
}
#js_is_user_profile .profile_header {
border-bottom: 1px solid rgba(255,200,0,0.3)!important;
}
.message.js_no_feed_to_show {
background-color: rgb(0,0,0)!important;
border: none!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4)!important;
color: #ffffff!important;
}
#feed_view_more {
background-color: rgba(255,255,255,0.3)!important;
border: none!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4)!important;
}
a.global_view_more.no_ajax_link {
background-color: rgb(255,255,255)!important;
border: none!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4)!important;
}
.js_user_feed {
border-bottom: 1px solid rgba(255,200,0,0.3)!important;
}
.profile_user_image {
box-shadow: 10px 10px 10px rgba(0,0,0,1)!important;
margin-left: 12px;
}
#section_menu ul li a {
background: linear-gradient(to bottom, rgb(82,30,8) 9%, rgb(0,0,0) 73%) repeat scroll 0% 0% transparent!important;
color: rgba(255,255,255,0.7)!important;
box-shadow: 3px 3px 3px rgba(0,0,0,0.7)!important;
text-shadow: 2px 2px 2px rgba(0,0,0,0.8)!important;
border: 1px solid rgba(0,0,0,0.6)!important;
border-radius: 6px 6px 6px 6px!important;
}
#section_menu ul li a:hover {
color: rgba(255,200,0,0.4)!important;
text-shadow: 0px 0px 12px rgba(255,200,0,1)!important;
}
#header_sub_menu_search {
opacity: .6!important;
}
input.button {
background: linear-gradient(to bottom, rgb(60,60,60) 9%, rgb(0,0,0) 73%) repeat scroll 0% 0% transparent!important;
color: rgba(255,255,255,0.4)!important;
box-shadow: 3px 3px 3px rgba(0,0,0,0.7)!important;
border: 1px solid rgba(0,0,0,0.6)!important;
border-radius: 6px 6px 6px 6px!important;
}
.comment_mini_text {
color: #000000!important;
}
.comment_mini_content {
color: #000000!important;
padding: 12px!important;
}
.activity_feed_content_display {
color: #000000!important;
}
.comment_mini_entry_time_stamp {
color: #808080!important;
}
.activity_like_holder.comment_mini {
color: #909090!important;
}
.user_profile_link_span {
color: #808080!important;
}
.js_view_more_part {
color: #808080!important;
}
.comment_mini_content_holder {
opacity: .8!important;
}
.activity_feed_form {
border-radius: 8px!important;
opacity: .8!important;
}
.activity_feed_form_button {
border-radius: 8px!important;
opacity: .8!important;
}
.drop {
opacity: .8!important;
}
textarea {
border: none!important;
}
.notify_drop_link:hover {
background-color: #000000!important;
}
.notify_drop_link {
opacity: .8!important;
}
.drop_data_image img {
border: 1px solid rgba(255,0,255,0.3)!important;
}
#left > div:nth-child(3) li {
height: 18px;
margin: 1px 0px 0 0!important;
text-align: left!important;
padding: 1px !important;
width: 162px !important;
color: #ff9000!important;
position: relative;
left: 16px;
}
#left > div:nth-child(3) li a {
text-align: left!important;
color: #ff9000!important;
position: relative;
left: -4px;
}
#left>div:nth-child(3) li a img {
height: 0px !important;
width: 0px!important;
}
#left>div:nth-child(3) li img {
height: 0px !important;
width: 0px!important;
}
#left>div:nth-child(3) li a div {
position: absolute;
left: -999em;
height: 0px !important;
width: 0px !important;
}
#left {
background-color: rgba(30,8,0,0.6)!important;
box-shadow: 0px 0px 12px rgba(30,8,0,1)!important;
}
#right {
background-color: rgba(30,8,0,0.6)!important;
box-shadow: 0px 0px 12px rgba(30,8,0,1)!important;
}

CSS schemes for OUR OLD SPACE - "PP's Green Feet"

The next in our series of CSS profile customizations for OurOld Space. This was my own profile page for a while, using a simple tiled backgound and colour-coordinating everything else to match. First published on my OOS 'test page' 2013/07/24

Now that I'm in the process of changing the design of my own page, I thought I might post the details my old one here on the 'tutorial' blog... Mainly because I'm sure some of you might be interested in how I skewed the profile picture like that!


As usual, I will post the whole kit 'n' kaboodle here, so that you can either use it 'as is' (unlikely!), or as the basis of your own experiments (recommended!). Obviously, you might want to substitute your own background-image tiles. Most of the content in front of the background has various degrees of transparency so that the background pattern shows through in a subtle and delightful way.

As you can see, this is one those instances where you have to include several different-but-similar versions of the 'transform' script to suit all those different browsers out there.


body {
font-family: georgia,serif!important;
background-image: url(http://mintydiary.coffeecup.com/tile3.gif );
}
#header {
background-color: #043234;
}
div {
border: none!important;
color: #aaaaaa;
font-size: 11px!important;
}
ul {
color: #000000;
font-size: 11px!important;
}
#js_is_user_profile {
background-image: url(http://mintydiary.coffeecup.com/tile3.gif);
}
#header_menu {
background: linear-gradient(to bottom, rgb(52, 102, 100) 0%, rgb(4, 50, 52) 100%) repeat scroll 0% 0% transparent!important;
background-color: rgb(52, 102, 100);
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.activity_feed_form_share ul {
font-size: 10px!important;
font-weight: normal!important;
}
.activity_feed_form_share div {
font-size: 10px!important;
font-weight: normal!important;
}
.activity_feed_content_text {
padding-left: 10px!important;
}
.comment_mini_link_like {
padding-left: 10px!important;
}
.js_feed_view_more_entry_holder {
background-color: rgba(0,20,30,0.4);
color: #88ffff;
padding: 12px;
}
.feed_share_holder {
background-color: rgba(0,0,0,0.5);
}
.box_hdng {
background: rgba(0,0,0,0.3)!important;
color: #88ffff;
font-size: 10px!important;
text-align: center!important;
text-transform: uppercase!important;
width: 234px!important;
}
h3.blrbs_ttle {
background: rgba(0,0,0,0)!important;
color: rgba(0,0,0,0)!important;
border: none!important;
}
p {
color: #ffffff;
font-size: 11px!important;
}
strong {
color: #ffffff;
font-size: 11px!important;
}
a {
color: #33a0c0!important;
}
a:hover {
color: #ffa500!important;
}
#content_holder {
background-color: rgba(4,50,52,0.7);
border: 1px solid #346664!important;
}
a.ajax_link {
color: rgba(255,255,255,0.5)!important;
border-right: 1px solid #043234!important;
text-shadow: 2px 2px 2px rgba(0,0,0,0.8)!important;
}
a.ajax_link:hover {
background-color: #002020!important;
}
.has_drop_down.no_ajax_link {
color: #346664!important;
}
a#logo {
color: rgba(52,102,100,0.6)!important;
font-family: verdana,sans-serif!important;
font-weight: bold!important;
}
.content {
background-color: rgba(0,0,0,0.4);
border: 1px solid #346664;
}
table {
background-color: rgba(80,250,255,0.1)!important;
border: 1px solid #346664!important;
}
td {
background-color: rgba(0,0,0,0)!important;
border: 1px solid rgba(0,0,0,0.3)!important;
color: rgba(255,255,255,0.7)!important;
font-weight: normal!important;
font-size: 11px!important;
}
h3.abt_me {
border-bottom: 1px solid #346664!important;
color: #88ffff!important;
text-transform: uppercase!important;
font-size: 11px!important;
font-weight: bold!important;
}
.block_listing_inline div {
font-size: 11px!important;
font-weight: normal!important;
}
.abt_me_cnt p {
font-size: 11px!important;
}
.abt_me_cnt a {
font-size: 9px!important;
}
#all_frnds {
font-size: 8px!important;
font-family: arial,sans-serif!important;
padding-left: 45px!important;
text-align: center!important;
background-color: rgba(80,250,255,0.1)!important;
border: 1px solid #346664!important;
}
.blurbs .abt_me_cnt p {
color: rgba(0,0,0,0)!important;
}
#js_can_move_blocks_3 div {
font-size: 8px!important;
}
img.js_hover_title {
border: 1px solid #346664!important;
width: 50px!important;
height: 50px!important;
}
.activity_feed_image img {
border: 1px solid #346664!important;
}
.comment_mini_image img {
border: 1px solid #346664!important;
}
.blurbs .abt_me_cnt a {
color: rgba(0,0,0,0)!important;
}
h1 a {
text-shadow: 2px 2px 2px rgba(0,0,0,1);
font-weight: normal!important;
color: rgba(255,255,255,0.6)!important;
}
h1 a:hover {
text-shadow: 2px 2px 2px rgba(0,0,0,1);
font-weight: bold!important;
text-transform: uppercase!important;
color: #33a0c0!important;
}
h1.pro_name {
opacity: .0!important;
}
.prfl_details {
opacity: .0!important;
}
#js_is_user_profile .profile_header {
border-bottom: 1px solid rgb(52, 102, 100)!important;
}
.message.js_no_feed_to_show {
background-color: rgb(52, 102, 100)!important;
border: none!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4)!important;
color: #ffffff!important;
}
#feed_view_more {
background-color: rgb(52, 102, 100)!important;
border: none!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4)!important;
}
a.global_view_more.no_ajax_link {
background-color: rgb(52, 102, 100)!important;
border: none!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4)!important;
}
.js_user_feed {
border-bottom: 1px solid rgb(52, 102, 100)!important;
}
.profile_user_image {
transform: rotate(6deg)!important;
-moz-transform: rotate(6deg)!important;
-webkit-transform: rotate(6deg)!important;
-o-transform: rotate(6deg)!important;
-ms-transform: rotate(6deg)!important;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4)!important;
border: 1px solid #909090!important;
margin-left: 20px;
width: 200px;
height: 240px;
}
#section_menu ul li a {
background: linear-gradient(to bottom, rgb(52, 102, 100) 0%, rgb(4, 50, 52) 100%) repeat scroll 0% 0% transparent;
color: rgba(255,255,255,0.5)!important;
box-shadow: 3px 3px 3px rgba(0,0,0,0.7)!important;
text-shadow: 2px 2px 2px rgba(0,0,0,0.8)!important;
border: 1px solid rgb(52,102,100)!important;
border-radius: 6px 6px 6px 6px!important;
}
input.button {
background: linear-gradient(to bottom, rgb(52, 102, 100) 0%, rgb(4, 50, 52) 100%) repeat scroll 0% 0% transparent;
color: rgba(255,255,255,0.3)!important;
box-shadow: 3px 3px 3px rgba(0,0,0,0.7)!important;
border: 1px solid rgb(52,102,100)!important;
border-radius: 6px 6px 6px 6px!important;
}
a.item_bar_action {
background: linear-gradient(to bottom, rgb(52, 102, 100) 0%, rgb(4, 50, 52) 100%) repeat scroll 0% 0% transparent;
box-shadow: 3px 3px 3px rgba(0,0,0,0.7)!important;
border: 1px solid rgb(52,102,100)!important;
border-radius: 6px 6px 6px 6px!important;
}
.comment_mini_text {
color: #000000!important;
}
.comment_mini_content {
color: #707070!important;
padding: 12px!important;
}
.comment_mini_entry_time_stamp {
color: #707070!important;
}
.activity_like_holder.comment_mini {
color: #707070!important;
}
.user_profile_link_span {
color: #000080!important;
}
.js_view_more_part {
color: #808080!important;
}
.comment_mini_content_holder {
opacity: .8!important;
}
.activity_feed_form {
border-radius: 8px!important;
opacity: .8!important;
}
.activity_feed_form_button {
border-radius: 8px!important;
opacity: .8!important;
}
.drop {
opacity: .8!important;
}
.friend_notification.notify_drop_link {
opacity: .4!important;
}
.message.notify_drop_link {
opacity: .4!important;
}
.notification.notify_drop_link {
opacity: .4!important;
}
.drop_data_image img {
border: 1px solid rgb(52,102,100)!important;
}


CSS schemes for OUR OLD SPACE - "Dark & Gothic"

Continuing on with the 'readymade' CSS scripts for Our Old Space, here's one for all you lovers of the dark arts or children of the night... First published om my OOS 'test page' - 2013/07/22


Obviously, to keep things really monochrome in the colour-coordination department, you should also choose a profile/avatar picture to match. For the purpose of this exercise, I pinched mine off a site that was full of such 'gothic' images and wallpapers. I also chose the background picture from a site such as these:-

http://crazy-frankenstein.com/gothic-wallpapers.html
http://gothicwallpapers.org/
http://www.gothicwallz.net/
http://www.fanpop.com/clubs/gothic

In fact, whenever I do any page layout like this, I generally start with the background picture and make that the basic of my colour 'palette' for the rest of the page. Obviously in this case, that means mainly shades of grey! I'm afraid I haven't yet found a way to colour-coordinate the bloody great advert for Filipino Fillies that will inevitably appear on the page! (whispers... use an AdBlocker!)


MAKE YOUR PROFILE NAME INTO A "BAND LOGO"

One interesting new 'feature' I explored with this design was the idea of replacing the header username with something more logo-like. You could do this just using fonts and styling, but there is always the problem that the people looking at your page won't necessarily have those same fonts on their machine. Many graphic designers today wander off the 'web-safe fonts' path by using an @font-face script to 'embed' their own custom font into the site, but this doesn't seem to work on all browsers. The only sure-fire way is to create a graphic image of your 'logo' and display that on the page instead.


I've highlighted the relevant parts of the main script below in red, so you can hopefully follow what I'm talking about.

First of all, you need to make the existing username text 'invisible', so I've turned all instances of the 'h1' style into 'see-through black' by giving them an RGBA colour value of (0,0,0,0). You could write it like this (and then the secret spacebots will reformat it and split it up for you!)

h1, h1 a, h1 a:hover {color: rgba(0,0,0,0)!important;}

Now create your graphic. For these purposes, it should be fairly hi-contrast, as high a resolution as you can get away without making the file size too big, and you should save it as a 'png' or 'gif' graphic with a transparent background colour. The graphic should be no more than 40 pixels deep and, ideally, be between 200 and 300 pixels wide. You will need to store the graphic somewhere, eg; on a Photobucket, Flickr, PhotoStream or similar picture 'hosting' site. Make a note of the URL of the stored image as you will need to enter that between the brackets where mine is.

The username sits in a div on your page called 'div.profile_header_inner'. Having made the original text invisible, we are going to make the new graphic form the background image for that div, and position it in the top left of the box like so:-

.profile_header_inner {
background: url(http://i708.photobucket.com/albums/ww81/grambler/b... ) no-repeat left top !important;
}

Notice that all-important 'no-repeat'. If you miss that out, the image will think it's a tile and fill the entire 'div' with copies of itself!

That's all you need really. The whole code follows in full. Substitute the URLs for your own imagery and enjoy fiddling around with it and making it your very own!

body {
background-color: #000000!important;
font-family: constantia, book antiqua, serif !important;
}
#header {
position: absolute;
width: 100%!important;
top: 0px;
z-index: 1007;
background: linear-gradient(to bottom, rgb(60,60,60) 9%, rgb(0,0,0) 73%) repeat scroll 0% 0% transparent!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
#js_photo_cover_position {
opacity: .5!important;
}
body > #header {
position: fixed;
}
#main_core_body_holder #main_content_holder {
margin-top: 70px;
}
#main_core_body_holder_guest #main_content_holder {
margin-top: 130px;
}
body.main_core_body_holder_class #header {
position: static;
margin-top: 0px;
}
body.main_core_body_holder_class #main_core_body_holder #main_content_holder {
position: static;
margin-top: 0px;
}
#content_holder {
background-color: rgba(0,0,0,0.6);
border: none!important;
border-radius: 0px!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
div {
border: none!important;
color: #909090;
font-size: 11px!important;
}
.profile_info {
color: #808080!important;
padding-top: 10px!important;
}
ul {
color: #808080;
font-size: 11px!important;
}
#js_is_user_profile {
background: url(http://crazy-frankenstein.com/....... ) no-repeat center top fixed!important;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
background-color: #101010!important;
}
#header_menu {
background: linear-gradient(to bottom, rgb(60,60,60) 9%, rgb(0,0,0) 73%) repeat scroll 0% 0% transparent!important;
background-color: rgb(0,178,255);
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.activity_feed_form_share ul {
font-size: 10px!important;
font-weight: normal!important;
}
.activity_feed_form_share div {
font-size: 10px!important;
font-weight: normal!important;
}
.activity_feed_content_text {
padding-left: 10px!important;
color: #808080!important;
}
.activity_feed_content_status {
color: #dddddd!important;
}
.activity_feed_content_info {
color: #909090!important;
}
.js_feed_view_more_entry_holder {
background-color: rgba(0,0,0,0.1)!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
color: #808080;
padding: 12px;
}
#js_feed_content {
background-color: rgba(0,0,0,0.9)!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
.comment_mini_link_like {
padding-left: 10px!important;
}
.box_hdng {
background: rgba(0,0,0,1)!important;
color: #a0a0a0;
font-size: 10px!important;
text-align: center!important;
text-transform: uppercase!important;
width: 234px!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
h3.blrbs_ttle {
background: rgba(0,0,0,1)!important;
color: #a0a0a0!important;
font-size: 10px!important;
text-transform: uppercase!important;
border: none!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
p {
color: #808080;
font-size: 11px!important;
}
strong {
color: #808080;
font-size: 11px!important;
}
a {
color: #909090!important;
}
a:hover {
color: #ff0000!important;
}
#header_menu a.ajax_link {
color: rgba(255,255,255,0.5)!important;
border-right: 1px solid rgba(255,255,255,0.3)!important;
text-shadow: 1px 1px 1px rgba(0,0,0,1)!important;
}
#header_menu a.ajax_link:hover {
background-color: #000000!important;
color: #ff0000!important;
text-shadow: 0px 0px 12px rgba(255,0,0,1)!important;
}
.has_drop_down.no_ajax_link {
color: #707070!important;
}
.has_drop_down.no_ajax_link:hover {
color: rgba(255,0,0,0.5)!important;
text-shadow: 0px 0px 12px rgba(255,0,0,1)!important;
}
.profile_online_status {
color: #606060!important;
}
.online_now {
opacity: .3!important;
}
a#logo {
color: rgba(255,255,255,0.3)!important;
font-family: verdana,sans-serif!important;
font-weight: bold!important;
}
a#logo:hover {
color: rgba(255,0,0,0.2)!important;
font-family: verdana,sans-serif!important;
font-weight: bold!important;
text-shadow: 0px 0px 12px rgba(255,0,0,1)!important;
}
.content {
background-color: rgba(0,0,0,0.4);
border: none!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
table {
background-color: rgba(0,0,0,0.1)!important;
border: 1px solid #000000!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
td {
background-color: rgba(100,100,100,0.1)!important;
border: 1px solid rgba(255,255,255,0.2)!important;
color: rgba(255,255,255,0.6)!important;
font-weight: normal!important;
font-size: 11px!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
.title.js_sortable_header {
background-color: #000000!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
color: #808080!important;
}
h3.abt_me {
border-bottom: 1px solid rgba(0,0,0,0.4)!important;
color: rgba(255,255,255,0.4)!important;
text-transform: uppercase!important;
font-size: 11px!important;
font-weight: bold!important;
}
.block_listing_inline div {
font-size: 11px!important;
font-weight: normal!important;
}
.abt_me_cnt p {
font-size: 11px!important;
}
.abt_me_cnt a {
font-size: 9px!important;
}
#all_frnds {
font-size: 8px!important;
padding-left: 45px!important;
text-align: center!important;
background-color: rgba(255,255,255,0.1)!important;
border: 1px solid rgba(255,255,255,0.3)!important;
box-shadow: 0px 0px 12px rgba(0,0,0,1)!important;
}
.blurbs .abt_me_cnt p {
color: rgba(255,255,255,0.1)!important;
}
#js_can_move_blocks_3 div {
font-size: 8px!important;
}
img.js_hover_title {
border: 1px solid rgba(255,255,255,0.3)!important;
width: 50px!important;
height: 50px!important;
}
.activity_feed_image img {
border: 1px solid rgba(255,255,255,0.5)!important;
}
.comment_mini_image img {
border: 1px solid rgba(0,0,0,0.5)!important;
}
.blurbs .abt_me_cnt a {
color: rgba(255,255,255,0.5)!important;
}
h1 {
color: rgba(0,0,0,0)!important;
}
h1 a {
color: rgba(0,0,0,0)!important;
}
h1 a:hover {
color: rgba(0,0,0,0)!important;
}
.profile_header_inner {
background: url(http://i708.photobucket.com/albums/ww81/grambler/b... ) no-repeat left top!important;
}
#js_is_user_profile .profile_header {
border-bottom: 1px solid rgba(255,255,255,0.1)!important;
}
.message.js_no_feed_to_show {
background-color: rgb(0,0,0)!important;
border: none!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4)!important;
color: #ffffff!important;
}
#feed_view_more {
background-color: rgba(255,255,255,0.3)!important;
border: none!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4)!important;
}
a.global_view_more.no_ajax_link {
background-color: rgb(255,255,255)!important;
border: none!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4)!important;
}
.js_user_feed {
border-bottom: 1px solid rgba(255,255,255,0.3)!important;
}
.profile_user_image {
box-shadow: 0px 0px 5px rgba(255,255,255,0.5)!important;
margin-left: 12px;
}
#section_menu ul li a {
background: linear-gradient(to bottom, rgb(60,60,60) 9%, rgb(0,0,0) 73%) repeat scroll 0% 0% transparent!important;
color: rgba(255,255,255,0.4)!important;
box-shadow: 3px 3px 3px rgba(0,0,0,0.7)!important;
text-shadow: 2px 2px 2px rgba(0,0,0,0.8)!important;
border: 1px solid rgba(0,0,0,0.6)!important;
border-radius: 6px 6px 6px 6px!important;
}
#section_menu ul li a:hover {
color: rgba(255,0,0,0.4)!important;
text-shadow: 0px 0px 12px rgba(255,0,0,1)!important;
}
#header_sub_menu_search {
opacity: .6!important;
}
input.button {
background: linear-gradient(to bottom, rgb(60,60,60) 9%, rgb(0,0,0) 73%) repeat scroll 0% 0% transparent!important;
color: rgba(255,255,255,0.4)!important;
box-shadow: 3px 3px 3px rgba(0,0,0,0.7)!important;
border: 1px solid rgba(0,0,0,0.6)!important;
border-radius: 6px 6px 6px 6px!important;
}
.comment_mini_text {
color: #000000!important;
}
.comment_mini_content {
color: #707070!important;
padding: 12px!important;
}
.activity_feed_content_display {
color: #909090!important;
}
.comment_mini_entry_time_stamp {
color: #808080!important;
}
.activity_like_holder.comment_mini {
color: #909090!important;
}
.user_profile_link_span {
color: #808080!important;
}
.js_view_more_part {
color: #909090!important;
}
.comment_mini_content_holder {
opacity: .8!important;
}
.activity_feed_form {
border-radius: 8px!important;
opacity: .8!important;
}
.activity_feed_form_button {
border-radius: 8px!important;
opacity: .8!important;
}
.drop {
opacity: .8!important;
}
textarea {
border: none!important;
}
.notify_drop_link:hover {
background-color: #000000!important;
}
.notify_drop_link {
opacity: .8!important;
}
.drop_data_image img {
border: 1px solid rgba(255,0,255,0.3)!important;
}



CSS schemes for OUR OLD SPACE - "Pinky Blue"

Following on from the previous article, I'm 'archiving' all of the CSS scripts here on this blogspot for posterity. This project is definitely a 'work in progress', but if you're an OurOldSpacer, feel free to help yourself to the code, if you like what you see! This one was first published on 2013/07/18 on my OOS 'test page'.

Anyone who knows me of old will recognise that, decor-wise, this is loosely modelled on my "Minty Blue Minimalism" Stylish script, that I created to help make the old M*Sp*** homepage habitable.

Copy everything you see below into the CSS editor screen and hit 'save', and you should see a page design that looks something like this (only without my ugly face on it, naturally!)


This one explores the idea of having the menu-bar/heading locked in a fixed position, while the rest of the page scrolls under it. At first I had trouble making that co-exist with the big banner 'cover' pictures that some folks like to have on their walls, but "The Administrator" helped me fill in the gaps and provided some all-important little tweaks that made it work properly!


When you're feeling brave, feel free to change things as you go (I know I have!). Don't worry if you mess it up (I know I have!), you can't do any permanent damage and you can always wipe the slate clean and start from scratch (I know I have!). I would welcome any helpful suggestions and/or queries - this is a 'learning curve' for us all!


body {
font-family: verdana,sans-serif!important;
background: url(http://i708.photobucket.com/albums/ww81/grambler/backgrounds/blue-tones-wallpaper.jpg) fixed!important;
}
#header {
position: absolute;
width: 100%!important;
top: 0px;
z-index: 1007;
background: linear-gradient(to bottom, rgb(0,178,255) 9%, rgb(0,67,200) 73%) repeat scroll 0% 0% transparent!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
body > #header {
position: fixed;
}
#main_core_body_holder #main_content_holder {
margin-top: 70px;
}
#main_core_body_holder_guest #main_content_holder {
margin-top: 130px;
}
body.main_core_body_holder_class #header {
position: static;
margin-top: 0px;
}
body.main_core_body_holder_class #main_core_body_holder #main_content_holder {
position: static;
margin-top: 0px;
}
#content_holder {
background-color: rgba(255,200,255,0.2);
border: none!important;
border-radius: 0px!important;
}
div {
border: none!important;
color: #000088;
font-size: 11px!important;
}
.profile_info {
color: #000088!important;
}
ul {
color: #000088;
font-size: 11px!important;
}
#js_is_user_profile {
background: url(http://i708.photobucket.com/albums/ww81/grambler/backgrounds/blue-tones-wallpaper.jpg) fixed!important;
}
#header_menu {
background: linear-gradient(to bottom, rgb(0,178,255) 9%, rgb(0,67,200) 73%) repeat scroll 0% 0% transparent!important;
background-color: rgb(0,178,255);
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.activity_feed_form_share ul {
font-size: 10px!important;
font-weight: normal!important;
}
.activity_feed_form_share div {
font-size: 10px!important;
font-weight: normal!important;
}
.activity_feed_content_text {
padding-left: 10px!important;
color: #000088!important;
}
.activity_feed_content_info {
color: #000088!important;
}
.js_feed_view_more_entry_holder {
background-color: rgba(255,255,255,0.1)!important;
color: #000088;
padding: 12px;
}
#js_feed_content {
background-color: rgba(255,255,255,0.1)!important;
}
.comment_mini_link_like {
padding-left: 10px!important;
}
.box_hdng {
background: rgba(255,0,255,0.1)!important;
color: #ffffff;
font-size: 10px!important;
text-align: center!important;
text-transform: uppercase!important;
width: 234px!important;
}
h3.blrbs_ttle {
background: rgba(255,0,255,0.1)!important;
color: #ffffff!important;
font-size: 10px!important;
text-transform: uppercase!important;
border: none!important;
}
p {
color: #000088;
font-size: 11px!important;
}
strong {
color: #000088;
font-size: 11px!important;
}
a {
color: #ff00ff!important;
}
a:hover {
color: #ff60ff!important;
}
#header_menu a.ajax_link {
color: rgba(255,255,255,0.8)!important;
border-right: 1px solid rgba(255,255,255,0.3)!important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.9)!important;
}
#header_menu a.ajax_link:hover {
background-color: #0000cc!important;
}
.has_drop_down.no_ajax_link {
color: #0000cc!important;
}
.profile_online_status {
color: #ff88ff!important;
}
a#logo {
color: #ffffff!important;
font-family: verdana,sans-serif!important;
font-weight: bold!important;
}
.content {
background-color: rgba(255,255,255,0.4);
border: 1px solid #ffffff;
}
table {
background-color: rgba(255,255,255,0.1)!important;
border: 1px solid #ffffff!important;
}
td {
background-color: rgba(0,200,255,0.1)!important;
border: 1px solid rgba(0,0,0,0.1)!important;
color: rgba(0,0,0,0.7)!important;
font-weight: normal!important;
font-size: 11px!important;
}
h3.abt_me {
border-bottom: 1px solid rgba(255,0,255,0.4)!important;
color: rgba(255,0,255,0.4)!important;
text-transform: uppercase!important;
font-size: 11px!important;
font-weight: bold!important;
}
.block_listing_inline div {
font-size: 11px!important;
font-weight: normal!important;
}
.abt_me_cnt p {
font-size: 11px!important;
}
.abt_me_cnt a {
font-size: 9px!important;
}
#all_frnds {
font-size: 8px!important;
font-family: arial,sans-serif!important;
padding-left: 45px!important;
text-align: center!important;
background-color: rgba(255,0,255,0.1)!important;
border: 1px solid rgba(255,255,255,0.3)!important;
}
.blurbs .abt_me_cnt p {
color: rgba(0,0,0,0)!important;
}
#js_can_move_blocks_3 div {
font-size: 8px!important;
}
img.js_hover_title {
border: 1px solid rgba(255,0,255,0.3)!important;
width: 50px!important;
height: 50px!important;
}
.activity_feed_image img {
border: 1px solid #ffffff!important;
}
.comment_mini_image img {
border: 1px solid rgba(255,0,255,0.3)!important;
}
.blurbs .abt_me_cnt a {
color: rgba(0,0,0,0)!important;
}
h1 a {
text-shadow: 1px 1px 1px rgba(0,0,0,1);
font-weight: normal!important;
color: rgba(255,255,255,1)!important;
}
h1 a:hover {
text-shadow: 2px 2px 2px rgba(0,0,0,1);
font-weight: bold!important;
text-transform: uppercase!important;
color: #ff00ff!important;
}
h1.pro_name {
opacity: .0!important;
}
#js_is_user_profile .profile_header {
border-bottom: 1px solid rgba(255,0,255,0.3)!important;
}
.message.js_no_feed_to_show {
background-color: rgb(255,255,255)!important;
border: none!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4)!important;
color: #ffffff!important;
}
#feed_view_more {
background-color: rgba(255,0,255,0.3)!important;
border: none!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4)!important;
}
a.global_view_more.no_ajax_link {
background-color: rgb(255,255,255)!important;
border: none!important;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4)!important;
}
.js_user_feed {
border-bottom: 1px solid rgba(255,0,255,0.3)!important;
}
.profile_user_image {
transform: rotate(6deg)!important;
-moz-transform: rotate(6deg)!important;
-webkit-transform: rotate(6deg)!important;
-o-transform: rotate(6deg)!important;
-ms-transform: rotate(6deg)!important;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4)!important;
border: 1px solid rgba(255,255,255,0.6)!important;
margin-left: 20px;
width: 200px;
height: 200px;
}
#section_menu ul li a {
background: linear-gradient(to bottom, rgb(0,178,255) 9%, rgb(0,67,200) 73%) repeat scroll 0% 0% transparent!important;
color: rgba(255,255,255,0.8)!important;
box-shadow: 3px 3px 3px rgba(0,0,0,0.7)!important;
text-shadow: 2px 2px 2px rgba(0,0,0,0.8)!important;
border: 1px solid rgba(0,67,200,0.6)!important;
border-radius: 6px 6px 6px 6px!important;
}
input.button {
background: linear-gradient(to bottom, rgb(0,178,255) 9%, rgb(0,67,200) 73%) repeat scroll 0% 0% transparent!important;
color: rgba(255,255,255,0.6)!important;
box-shadow: 3px 3px 3px rgba(0,0,0,0.7)!important;
border: 1px solid rgba(0,67,200,0.6)!important;
border-radius: 6px 6px 6px 6px!important;
}
.comment_mini_text {
color: #000000!important;
}
.comment_mini_content {
color: #707070!important;
padding: 12px!important;
}
.activity_feed_content_display {
color: #000000!important;
}
.comment_mini_entry_time_stamp {
color: #000088!important;
}
.activity_like_holder.comment_mini {
color: #000088!important;
}
.user_profile_link_span {
color: #000088!important;
}
.js_view_more_part {
color: #000000!important;
}
.comment_mini_content_holder {
opacity: .8!important;
}
.activity_feed_form {
border-radius: 8px!important;
opacity: .8!important;
}
.activity_feed_form_button {
border-radius: 8px!important;
opacity: .8!important;
}
.drop {
opacity: .8!important;
}
textarea {
border: none!important;
}
.friend_notification.notify_drop_link {
opacity: .8!important;
}
.message.notify_drop_link {
opacity: .8!important;
}
.notification.notify_drop_link {
opacity: .8!important;
}
.drop_data_image img {
border: 1px solid rgba(255,0,255,0.3)!important;
}



Thursday, August 8, 2013

CSS customizing for Our Old Space

I've been working on some 'readymade' page styles for the new social media site Our Old Space. Some are more 'readymade' than others!

Our Old Space is a newish social network set up to appeal to exiles from Classic MySpace (as well as a few disgruntled Facebookers) who yearn for a site that is "just like the good old days".

Remember when every MySpace profile looked different from every other MySpace profile? When MySpace put the emphasis on the "My"? A page which could show off your artistic bent, rather than a uniform handed down to you by whichever megacorp is running things this week?

Well, that is the thinking behind this site.

There is an opportunity for bloggers, musicians and visual artists to share their talents. This is not just some Hollywood-centric, money-led idea of what constitutes 'culture' in this day and age. This is a place for the independent artists of this world, folks who are 'doing it for themselves' or just for the craik. "Just like the good old days", in fact... a social network that doesn't boast that it can number its membership in the billions, isn't full of extremely rude people trolling about and doesn't just reflect the musical tastes of people called Justin.

When you first open up a new account your page will bear a passing resemblance to those old blue white and orange MySpace Profile 1.0 layouts. Seasoned MySpacers will feel instantly at home!

The site has its own profile designer interface, which will allow you to change the colours and fonts to your heart's content. A good many folks will be satisfied with that option alone. But for me, the real fun starts when you click on that button marked 'CSS'. With the help of our old friend the Cascading Style Sheet, just about anything is possible!

For the last few weeks, a select band of like-minded nerds have been putting in the hours trying to come up with some 'readymade' CSS styles. Folks who habitually run a mile from anything that looks like geekspeak, should be able to copy and paste our scripts into their profile designers without getting their hands too dirty. It's rather like those "Pimp Your Profile" things that used to be all the rage back in the day.

Here's a little gallery of what we've been working on, which I hope will demonstrate just how flexible this CSS malarkey can be and how it is possible to make a page your very own, by only using all those handy little tags and markups that the fine folk at W3C have shared with the world...









www.ouroldspace.com

PP's OurOldSpace profile
PP's OurOldSpace test page

EP's OurOldSpace profile
EP's OurOldSpace test page