Thursday, August 15, 2013

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


No comments:

Post a Comment