Blog Layout 12b

*Updated with an additional hide code 9-12-2013


					    !!!!!!!!!!!!Read It!!!!!!!!!!!!

                                                (⊙.⊙(☉_☉)⊙.⊙)

ALL COLORS CAN BE CHANGED.For color changes, see the color palette section in About Me.  There are a ton of color schemes online.  It won't take you long to change the color set-up on this profile.


There are div ids/classes, img classes and tables (<table><tr><td>) in this layout.  Be VERY, VERY, VERY careful not to drop off any of the coding.


............................
BACKGROUND
The background is set to fill the entire area of your page no matter what your monitor size.  When you replace the background, you should do so with a .jpg image that is at least 1920x1080; otherwise, people with larger monitors will see a pixelated image.  If you would prefer not to have a size-adjusting background but rather one that just sits off to the right, do the following:

Remove the below from the Body:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

AND ChANGE THE POSITION FROM        background-position:center center;
TO                                  background-position:top right;

.......................................

Hover Image Panels
To replace the images in the hover panels, replace my image url with your own wherever you see div id image urls like this:

<div id="sidebarimg" style="background-image:url(http://i.imgur.com/D3vrTwl.png);">

.......................................





                        Don't forget to replace the XXXXX with your friend ID number.

                                                     (>‿◠)✌


                *****************************SAVE YOUR WORK AS YOU GO.*******************************





DO NOT REMOVE THE .VICARIOUS MARKERS FROM ANY VICARIOUS LAYOUT.

-----------------------------Blog Stylesheet---------------------------------






<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Tangerine:400,700|Quattrocento|Just+Another+Hand);
.vicarious {BE RESPECTFUL TO THE LAYOUT CODER/CREATOR.  DO NOT REMOVE THE .VICARIOUS CREDIT!
Blog Layouts available @ http://vicarious-bloglayouts.tumblr.com/}


.vicarious{Cross Type Shared Commons}

.blogcommentsprofile, p.blogtimestamp, .blog     {background-color:transparent!important;}
.blogcomments { border-top:1px solid!important;border: 1px solid!important;  }

.vicarious{Background/Blog Properties}

body{
background-image: url("http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/Untitled-1_zps3835305d.jpg~original");
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top:-100px;
margin-left:0px;
left:0%;
top:0%;
position:absolute;
z-index:1;
}


.vicarious{ Google Chrome Scrollbar }
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {border: 1px solid !important; }
::-webkit-scrollbar-thumb {border: 1px solid!important; }


.blog {
width:480px!important;
}

.main {
border:1px solid !important;
left:0%;
top:0%;
width:500px!important;
visibility:visible;
z-index:100;
margin-left:260px;
margin-top:0px;
position:absolute;
padding-top: 100px!important;
}


img { max-width:450px!important;   }

.vicarious{Text Shared Commons}

a, a:link, a:active, a:visited, a:hover, td, .text, table, td.txt_label , tr, td, li, p, div, input, txt, i, b, .main u, .main font, a.first,

a.first:link, a.first:active, a.first:visited, a.content, a.content:link, a.content:active, a.content:visited, big, p.blogtimestamp,

.blogsubject {
font-family: tahoma  !important;
visibility: visible!important;
text-decoration:none !important;
line-height:90%  !important;
background-color:transparent !important;
font-size: 9pt !important;
}

p { text-align:justify!important;   }

.vicarious{Text Properties}

.blogsubject, big, small {
font-family: 'Quattrocento', serif!important;
font-size: 16pt !important;
line-height:100%!important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align:center!important;
text-transform:uppercase !important;
}

big { font-size: 13pt !important;   display:block; }
small{ font-size: 11pt !important;  display:block; }
p.blogtimestamp { text-align:right !important;    }
i { font-family: Tangerine!important;   }

b {
font-family: 'Just Another Hand', cursive!important;
font-size:9pt!important;
font-weight:bold!important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
 }



a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited {
font-family: 'Just Another Hand', cursive!important;
font-size:12pt!important;
text-align:center!important;
text-transform:uppercase!important;
line-height:30px !important;
height:30px !important;
width:77px;
display:block !important;
font-weight:norma!important;
text-decoration:none!important;
-webkit-transition: all 2.4s ease-out;
-moz-transition: all 2.4s ease-out;transition:
all 2.4s ease-out;
margin-bottom:2px !important;
}

a.second, a.second:link, a.second:active, a.second:visited {width:auto; line-height:14px!important;  height:14px!important;  }

a.third, a.third:link, a.third:active, a.third:visited {
font-family: copperplate gothic light!important;
font-size: 12pt !important;
line-height:100%!important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align:center!important;
margin:10px 0px;
display:block;
text-transform:uppercase!important;
text-decoration:none!important;
-webkit-transition: all 1.4s ease-out;
-moz-transition: all 1.4s ease-out;transition:
all 1.4s ease-out;
}



.vicarious{Div Style Classes}

#sidebar, #sidebar2  {
border:1px solid ;
visibility:visible;
left:0%;
top:0%;
position:fixed;
z-index:2;
margin-top:0px;
text-align:center !important;
 }

#sidebartext, #sidebar:hover #sidebartext, #sidebar2text, #sidebar2:hover #sidebar2text, #context {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}

#sidebartext, #sidebar2text, #context {
text-align:left !important;
overflow:hidden;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}

#sidebar:hover #sidebartext, #sidebar2:hover #sidebar2text, #context:hover  {
overflow:auto;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

#sidebar {
width:250px;
height:1200px;
margin-left:0px;
overflow:none;
}

#sidebarimg {
width:250px;
height:350px;
}

#sidebartext {
width:220px;
height:320px;
padding:15px;
text-align:left!important;
}

#sidebar2 {
width:200px;
height:auto;
overflow:none;
margin-left:800px;
padding-top:15px;
 }

#sidebar2img {
width:200px;
height:200px;
margin-left:0px;
margin-top:0px;
 }

#sidebar2text {
width:190px;
height:190px;
padding:5px;
text-align:left!important;
}

  .connlinks {
width:190px;
height:150px;
overflow:auto;
padding:5px 0px;
text-align:left !important;
margin-bottom:10px;
}


 .vicarious{ Color Palette }

 body { background-color:17171a !important; }
::-webkit-scrollbar-track {background-color:2a2a2e  !important; border-color:333333  !important;}
::-webkit-scrollbar-thumb {background-color:5d5d64 !important;  border-color:333333 !important;}
a, a:link, a:active, a:visited, a:hover, td, .text, table, td.txt_label , tr, td, li, p, div, input, txt, i, b, .main u, .main font {color:434343 !important; }
big, .blogsubject, small { color:a5a5b2 !important;}
I { color:dbdbdb !important; }
p.blogtimestamp, B { color:6e6e74 !important; }
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited {
color:a6a6ae !important; background-color:323236!important;  }
a.first:hover, a.second:hover  {color:616161 !important; background-color:19191e !important;  }
a.third, a.third:link, a.third:active, a.third:visited { color:a5a5b2 !important;}
a.third:hover {color:616161!important; }
.main, .blogcomments, #sidebar, #sidebar2 { background-color:2a2a2e!important; border-color: #333333 !important; }
#sidebartext, #sidebar2text   { background-color:121212 !important; }
 td.txt_label  { background-color:737378!important; }













 .vicarious{Hide Codes}
.blogContentInfo{ display:none !important;visibility:hidden!important; }
.profile { display:none !important;visibility:hidden!important; }
.nav, .spacer, .googleafc, .commentspacer, hr {display: none!important;}
#ctl00_cpMain_googlead   { display:none !important;visibility:hidden!important; }
images/spacer.gif{ display:none !important;visibility:hidden!important; }
.st_sharethis_hcount, .st_facebook_hcount, .st_twitter_hcount, .st_pinterest_hcount  { display:none !important;visibility:hidden!important; }
#IL_IF_RIGHT, .IL_BASE { display:none !important;visibility:hidden!important; }
.vicarious {Blog Layouts available @ http://vicarious-bloglayouts.tumblr.com/}

</style>




<div id="sidebar">
<div id="sidebarimg" style="background-image:url(http://i.imgur.com/D3vrTwl.png);">

<div id="sidebartext">

<big>Big Header</big>
<small>Small header</small>
<p><B>Put something else behind here other than your stats window.  Header tags are not scripted as they don't necessarily

work in conjunction with blogs; however, you can use big and small in this section for headers.  These have been included.

Alternatively you can remove everything from div id sidebartext down to the first closed div tag below and just leave this section

as an image.
</b>
</div>

</div><center>


<big>➳ IM: Screename ➳</big>


<table><tr>
<td><a class="first" href="/logincomplete.php">Home</a></td>
<td><a class="first" href="/send_message.php?member_id=xxxxxx">Message</a></td>
<td><a class="first" href="/add_comment.php?member_id=xxxxxx">Comment</a></td>
</tr><tr>
<td><a class="first" href="/gallery.php?member_id=xxxxxx">Photos</a></td>
<td><a class="first" href="/view_member_blog.php?member_id=xxxxxx">Blogs</a></td>
<td><a class="first" href="/invite_friend.php?friend_id=xxxxxx">Add</a></td>
</tr></table>

<a class="third" href="PUT THE LINK TO YOUR PROFILE HERE">Back to Profile</a>


<BR><BR>

MUSIC PLAYER HERE


</center></div>

<div id="sidebar2"><center>

<p><big>Content</big>
<div class="connlinks">
<a class="second" href="LINK TO BLOG HERE">TITLE</a>
<a class="second" href="LINK TO BLOG HERE">TITLE</a>
<a class="second" href="LINK TO BLOG HERE">TITLE</a>
<a class="second" href="LINK TO BLOG HERE">TITLE</a>
<a class="second" href="LINK TO BLOG HERE">TITLE</a>
<a class="second" href="LINK TO BLOG HERE">TITLE</a>
<a class="second" href="LINK TO BLOG HERE">TITLE</a>
<a class="second" href="LINK TO BLOG HERE">TITLE</a>
<a class="second" href="LINK TO BLOG HERE">TITLE</a>
 </div>


<div id="sidebar2img" style="background-image:url(http://i.imgur.com/XAlHzAg.png);">

<div id="sidebar2text">


<p><B>If you don't have that many content links, you can shorten the div for that by scrolling up to .connlinks and changing

the height to a smaller number (ie 100px etc).
<p>Put something else behind here other than your personality window.  Header tags are not scripted as they don't necessarily

work in conjunction with blogs; however, you can use big and small in this section for headers.  These have been included.

Alternatively you can remove everything from div id sidebar2text down to the first closed div tag below and just leave this section

as an image.
</b>
</div>


</div></center></div>