Thursday, August 15, 2013

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

1 comment: