Thursday, August 15, 2013

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



No comments:

Post a Comment