layoutlounge | 58. Games of Thrones

Layout Style: S2 Flexible Squares
Features: Sidebar at Top, Sidebar Scrolling, Transparency
Layout Width: 800px

[ Preview ] [ Live ]

Font(s) Used: Kelt

Layout:

layout_lounge
Header:

graffitigraphic

Sidebar: Using Layouts, Layout Changes for Beginners, Font Tutorial, or Tiny Icon Help see How To Guides.

/*--------------------------------
S2 Flexible Squares
Layout by http://community.livejournal.com/layout_lounge/
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #000000;
 background-image: url(BACKGROUNDimageURL);
 background-repeat: repeat;
 background-attachment: fixed;
 color: #eeeeee;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 12px;
 margin: 0px 0 20px 0;
 }

a, a:link, a:visited { color: #84A0A4; text-decoration: none; }

a:hover { color: #1da4e6; text-decoration: none; }

blockquote {
 width: 550px;
 padding: 0 18px 18px 18px; 
 color: #eeeeee;
 font-size: 12px;
 line-height: 14px;
 font-family: "verdana", arial, verdana, sans-serif;
 text-align: left;
border:10px solid #333333;
 }

img.special { border: 10px solid #333333;   -moz-border-radius: 2%; }

b, strong {color: #A19C7F;}
i, em {color: #ebebc7;}
s, u {color: #867200;}

p, td{  }
code, kbd, pre, tt {font-family: "monospace";	}
ul.ljtaglist { text-align: left; padding-left: 5px; }

/*--------------General------------*/

#content {  	
 width: 800px;	
 margin-left: auto; 
 margin-right: auto;  
 text-align: left;
 padding: 0px;
 }

#maincontent {
 width: 800px;
 float: left;
 margin: -5px 0px 0px 0px;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 13px;
 color: #eeeeee;
 text-align: center;
 }

.subcontent {
 width: 800px;
 background-color: rgba(0, 0, 0, 0.2) ;
 min-height: 200px;
 margin: 15px 0px 0 0;
 padding-top: 15px;
 }

.title { display: none; }

.subtitle { 
 color: #333333;
 font-family: century gothic,georgia;
 font-size: 42px;
 font-style: normal;
 text-align: right;
 letter-spacing: -1px;
 margin: -150px 5px 0 0;
 text-transform: uppercase;
 }

/*---------------Header--------------*/
#header {		
 position: relative;
 width: 800px;
 height: 30px;
 text-align: center;
 color: #ffffff;
 margin: 0px 0px 7px 0px;
 padding: 12px 0px 15px 0;
 font-family: Kelt, verdana, arial !important;
 font-size: 20px !important;
 letter-spacing: 1px;
 text-transform: lowercase;
 font-weight: normal;
 background-color: rgba(0, 0, 0, 0.2) ;
}

div#header a, div#header a:link, div#header a:visited,

div#header a, div#header a:link, div#header a:visited, div#header a:active {
 padding: 15px 10px 21px 10px;
 font-family: Kelt, verdana !important;
 letter-spacing: 1px;
 color: #ffffff;
 text-align: center;
}

div#header a:hover, div#header li.view { 
 padding: 15px 9px 21px 9px;
 color: #ffffff;
 text-shadow: 2px 2px 6px #888888;
 background-color: #84A0A4 !important;
 border: 1px solid #688f92;
 }

ul.navheader { list-style: none; margin-top: auto; margin-bottom: auto;}

ul.navheader li  {
 display: inline;
 list-style: none;
 }
	
.title, .subtitle { display: none; }

/*-----------Footer------------*/

#footer {			
 width: 800px;
 height: 30px;
 margin: 0px 0px 7px 0px;
 padding: 12px 0px 15px 0;
 text-align: center;
 font-family: Kelt, verdana, arial !important;
 font-size: 20px;
 color: #ffffff;
 background-color: rgba(0, 0, 0, 0.2) ;
 z-index: 100;
 }

div#footer a {
 padding: 15px 9px 21px 9px;
 color: #ffffff;
 text-align: left;
 text-shadow: 2px 2px 6px #bbbbbb;
 }

div#footer a:hover, div#footer li.view {
 padding: 15px 9px 21px 9px;
 color: #ffffff;
 text-shadow: 2px 2px 6px #888888;
 background-color: #84A0A4 !important;
 border: 1px solid #688f92;
 }

ul.navfooter{  list-style: none; margin-top: auto; margin-bottom: auto; }

ul.navfooter li  { display: inline;  list-style: none; }
	
.clearfoot {	clear: both;}

/*-------------Sidebar--------------*/

#sidebar {
 background-color: rgba(0, 0, 0, 0.2) ;
 padding: 2px 0 2px 0;
 margin-left: auto;
 margin-right: auto;
margin-top: 5px; 
 margin-bottom: 5px;
 font-size: 11px;
 font-family: "arial", verdana, sans-serif;
 text-transform: normal;
 color: #dddddd; 
 width: 800px;
 height: 170px;
 vertical-align: center;
 overflow: none;
 text-align: left;
 }

/*-----------  Sidebar -----------*/

.sbarheader { padding: 0px 5px 0px 5px; }

.sbarbody {
 padding: 0px;
 float: left;
 margin: -2px 2px 5px 2px;
 height: 16px;
 }

.sbarbody2 {
 padding: 2px 5px 0px 5px;
 float: left;
 margin: 5px 2px 2px 2px;
 width: 360px;
 height: 160px;
 overflow-x: hidden; 
 overflow-y: auto;
 text-align: left;
 -moz-border-radius: 4%;
 }

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
 color: #84A0A4;
 display: inherit;
 text-decoration: none;
 padding: 1px 1px 1px 5px;
 margin: 0px; 
 }

div#sidebar a:hover {
 color: #053e69;
 padding: 1px 1px 1px 5px;
 margin: 0px;
 }

/*----------Sidebar Components ------------*/
#sidebar_tags .sbarcontent {
 width: 220px; 
 height: 160px;
 overflow-x: hidden; 
 overflow-y: auto;
}

l.tagList {width: 100%;}
     .tagBox {
 width: 220px; 
     height: 160px;
     overflow-x: hidden;
     overflow-y: scroll;
     scrollbar-arrow-color: #688f92;
     scrollbar-base-color: #222222;
     scrollbar-face-color: #222222;
     scrollbar-highlight-color: #688f92;
     scrollbar-darkshadow-color: #222222;
     scrollbar-shadow-color: #222222;
}

.defaultuserpic {
 text-align: center;
 vertical-align: center;
 padding: 5px;
 float: left;
 margin: 4px; 
 list-style: none; 
 width: 21%;
 height: 148px;
 }

#sidebar_summary .sbarcontent {
 width: 215px;
 height: 160px;
 overflow-x: hidden; 
 overflow-y: auto;
}

#sidebar_summary li.sbaritem {
 color: #777777;
 padding: 3px;
 text-transform: normal;
 margin: 3px;
 text-align: left;
 border-top: 1px solid #dddddd;
 border-bottom: 1px solid #dddddd;
 }

#sidebar_summary li.sbaritem a {
 text-decoration: none;
 display: inline !important;
 color: #777777;
 border: 0px solid #6DA9C1 !important;
 background-color: transparent !important;
 }

#sidebar_summary li.sbaritem a: hover{
 text-decoration: none;
 color: #777777;
 border: 0px solid #777777;
 background-color: transparent !important;
 }

#sidebar_linklist .sbarcontent {
 width: 180px;
 height: 160px;
 overflow-x: hidden; 
 overflow-y: auto;
 text-align: left;
 }

/*------------  Sidebar - link box contents----------*/

ul.sbarlist { padding-left: 0px; margin-left: 0px;  list-style: none; }

li.sbaritem {padding-left: 0px; list-style: block; }

li.sbartitle	{
display: none;
 }

/*-----------Entries-----------*/
.entry	{
 padding: 15px;
 margin: 0px;
 color: #eeeeee;
 font-family: "arial";
 font-size: 13px;
 text-align: left;
 }
	
hr {
 color: transparent;
 height: 1px;
 border-bottom: 1px solid #333333;
 }

.entry ul li, ol li, li {
 padding-left: 5px;
 margin-left: 5px;
 list-style: normal;
 list-style-position: outside;
 }

.userpic {
 background-color: #333333 !important;
 position: relative;
 float: right;
 padding: 5px;
 margin: 23px 10px 10px 10px;
 z-index: 15;
 color: #333333 !important;
 border: 2px #eeeeee solid;
 -moz-border-radius: 2%;
 }

.userpicfriends {
 background-color: #333333 !important;
 position: relative;
 float: right;
 padding: 5px;
 margin: 23px 10px 10px 10px;
 text-align: center;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 11px;
 z-index: 15;
 border: 2px #333333 solid;
 -moz-border-radius: 2%;
 }

.userpicfriends a font {color: #14C0CF;}

.date {
 width: 200px;
 margin: -5px -110px 0 0;
 float: right;
 text-align: right;
 color: #555555;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 8px;
 text-transform: uppercase;
 }

.subject {
 font-weight: none;
 padding-bottom: 5px;
 padding-top: 5px;
 padding-left: 15px;
 margin-top: -15px;
 color: #A19C7F;
 font-family: "Kelt", Verdana, Arial;
 font-size: 30px;
 text-transform: normal;
 text-decoration: none;
 border-bottom: 0px solid #333333;
 }
	
.subject a, .subject a:link, .subject a:visited {color: #A19C7F;}

.subject a:hover {color: #888888;}

.datesubject {
 background-color: transparent;
 padding: 0px;
 text-align: left;
 }

span.ljuser a b {
 padding: 2px 0 2px 0;
 color: #1da4e6;
 font-weight: normal;
 }

span.ljuser a:hover b {
 padding-top: 2px;
 padding-bottom: 2px;
 color: #84A0A4;
 font-weight: normal;
 }

/*-----Currents, tags, comment links-----*/

.ljtags {
 margin-top: 5px;
 color: #eeeeee;
 font-weight: lighter;
 font-size: 10px;
 font-family: "Verdana", arial;
 text-transform: lowercase;
 margin: 15px 0px 0px 0px;
 padding: 2px 0px 5px 18px;
 background: URL(http://i31.tinypic.com/15p046e.jpg) no-repeat center left;
 }
	
.currents strong, .currentmood strong, .currentmusic .currentlocation,

.ljtags strong {
 font-family: "Verdana", arial;
 font-size: 10px;
 color: #eeeeee;
 font-weight: lighter;
 text-transform: lowercase;
 }

.currents, .currentmood, .currentmusic, .currentlocation {
 font-family: "verdana", arial;
 font-size: 10px;
 color: #eeeeee;
 font-weight: lighter;
 text-transform: lowercase;
 }

.ljtags a, .ljtags a:link, .ljtags a:visited {
 color: #5c89a4;
 font-family: "verdana", arial;
 font-size: 10px;
 text-transform: lowercase;
 font-weight: lighter;
 }

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
 color: #5c89a4;
 font-family: "verdana", arial;
 font-size: 10px;
 text-transform: lowercase;
 font-weight: lighter;
 }
	
.currentlocation a:hover, .ljtags a:hover {
 color: #84a0a4;
 font-family: "verdana", arial;
 font-size: 10px;
 font-weight: lighter;
 text-transform: lowercase;
 }

.comments {
 font-family: Kelt, Verdana, arial;
 font-size: 24px;
 font-weight: none;
 color: #dddddd;
 text-align: center;
 padding: 5px 5px 5px 5px;
 position: relative;
 clear: center;
 margin-top: 5px;
 text-transform: lowercase;
 }
	
div.comments a, div.comments a:link, div.comments a:visited{
 color: #cccccc;
 padding: 3px 6px;
 }

div.comments a:hover { color: #999999; text-decoration: none;  }

/*------------Comments Page--------*/
.box, form div.box {
 padding: 0px;
 margin-top: 0px;
 text-align: left;
 clear: left;
 width: 810px;
 text-align:center;
 }

.skiplinks {
 text-align: center;
 margin-bottom: 0px;
 margin-top: 10px;
 font-family: "Verdana", arial;
 padding: 10px;
 font-size: 9px;
 letter-spacing: 1px;
 color: #eeeeee;
 background-color: rgba(0, 0, 0, 0.2) ;
 -moz-border-radius:2%;
 }

.datesubjectcomment {
 margin-top: 10px;
 text-align: right;
 padding: 5px;
 color: #eeeeee;
 }	
	
.userpiccomment {
 background-color: #333333 !important;
 position: relative;
 top: -30px;
 left: 0px;
 padding: 5px;
 margin: 20px 10px -20px 10px;
 z-index: 15;
 float: left;
 border: 2px #333333 solid;
 color: #eeeeee;
 -moz-border-radius: 2%;
 }

div#content input,
div#content textarea,
div#content select { color: #777777; border: 1px solid #e6e6e6e6; }
	
textarea.textbox  {width: 100% !important;}

.reply	{
 position: relative;
 margin: 20px 30px 10px 30px;
 padding: 25px 10px 10px 10px;
 text-align: left;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 12px;
 line-height: 125%;
 color: #eeeeee;
 }
	
.replytosubject {
 color: #eeeeee;
 font-weight: bold;
 text-transform: normal;
 padding: 5px;
 }

.replytoposter {
 color: #1da4e6;
 text-transform: normal;
 padding: 5px;
 }

.commentreply {
 text-align: left;
 position: relative;
 margin: 10px;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 12px;
 color: #eeeeee;
 }
	
.commentbox {
 background-color: rgba(0, 0, 0, 0.2) ;
 padding: 5px;
 margin: 10px;
 text-align: left;
 clear: left;
 -moz-border-radius: 2%;
 }
	
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #1da4e6;}
	
.datesubjectcomment a:hover {color: #84A0A4;}

.commentboxpartial { padding: 10px; margin: 10px; }

.commentinfo { margin-top: 10px; width: 100%; }

/*-----------Year/Archive Page----------*/

ul.year { 	text-align: center; 	padding: 5px; }

ul.year li {display: inline;}

table.yeartable { margin-left: auto; margin-right: auto; padding: 10px 100px 10px 100px; }

table.yeartable td.yeardate, table.yeartable td.yearday { border: 1px solid #333333; color: #eeeeee; }

table.yeartable td.yearday { text-align: center; color: #eeeeee; }

td.yearmonth { color: #eeeeee; border-style: none; }

/*-----------Tags Page---------*/

ul.ljtaglist {
 color: #eeeeee;
 font-family: "verdana", arial, verdana, sans-serif;
 font-size: 12px;
 padding: 8px 8px 8px 20px;
 }

ul.ljtaglist li  {list-style: normal;}

/*----------SECTION: Tiny Icons----------*/

.currentlocation {
 background: url(http://i26.tinypic.com/33v1ds4.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmood  {
 background: url(http://i32.tinypic.com/2vhsnxy.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmusic {
 background: url(http://i38.tinypic.com/14w3igm.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentgroups {
 background: url(http://i28.tinypic.com/ta3abn.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

/* PROTECTED ENTRY */
.subject img[src*="icon_protected.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i26.tinypic.com/2r2nkht.jpg); 
 }

/* PRIVATE ENTRY */
.subject img[src*="icon_private.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i30.tinypic.com/b8nwj7.jpg); 
 }

/* USER */
.ljuser img {
 width: 0;
 height: 0;
 background-repeat: no-repeat;
 background: transparent url(http://i38.tinypic.com/npngpd.jpg) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

.ljuser img[src*="userinfo.gif"] {
 background: transparent url(http://i38.tinypic.com/npngpd.jpg) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/* COMMUNITY */
.ljuser img[src*="community.gif"] {
 background: transparent url(http://i33.tinypic.com/vie5bq.jpg) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/*-----------Mics-----------*/
.clear { height: 0px; font-size: 0.01px; }
	
#lj_controlstrip_statustext {
 color: #eeeeee;
 font-size: 12px;
 font-weight: bold;
 }

#lj_controlstrip td {
 font-family: "georgia" !important;
 font-size: 12px;
 background-color: #000000 !important;
 border: 0px solid #333333;
 }

#lj_controlstrip a, #lj_controlstrip a:visited {
 font-family: "georgia" !important;
 font-size: 11px;
 color: #eeeeee !important;
 text-transform: lowercase;
 }

#lj_controlstrip a:hover { color: #6DA9C1 !important; }
	
.headerimage {
 position: relative;
 width: 800px;
 height: 250px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 5px;
 padding: 0px;
 background-color: transparent;
 background-image: url(HEADERimageURL);
 background-position: center;         
 background-repeat: repeat;
 }

.separator { height: 0px; }

Background Images That Work Well With Transparency:

PLEASE NO HOTLINKING IMAGES

Headers @

graffitigraphic
More Background Images @ Layout Lounge Site

RULES:
No Hotlinking Images
Header can be changed
Background image can be changed or removed.

Flat | Top-Level Comments Only

Awww I seriously need to download this show. Great job as always! Do you take requests?

I'm not currently because I've been working on some layouts for comms I'm involved in plus I have a huge amount of iconing to do... and real life.

But I'm curious what you want.

Also, love the show. Do dl it. Also thank you.

I have one of your other ones on

agent_afloat, a comm for my friend and I's collaborations in our crossover universe. We agreed we prefer a darker layout but its just toooo dark for me and I am not well enough to have the patience to play wiht the coding to tweak colors and stuff.

I like the layout you have on this one (game of thrones) but the menu bar is a bit too big. Also the text colors to have more of a contrast with maybe pinks and greens against the darker colors (general entry text could be white). I don't make much sense right now (took my meds).

So you want this layout... basically just with some more color and a smaller navbar?

Yes (I think...Sorry narc pain cloudy head). But yeah, bright pinks and neon like greens?

{{{{{{{HUGS}}}}}}}

You're going to use the same header or do you have one I can match it with?

umm...i had an image but lost it when my comp crashed. the only one I have is for my bigbang story. i'll make one based on the dimensions of the one you have up here.

That works. 800 width but the height can be whatever you want. 300 isn't the rule I just don't like to make headers bigger than that.

http://i51.tinypic.com/246lv2q.jpg

Go to

workshop_rees and check out what I have. You can give me suggestions for changes and feedback on what is there. I changed the background to one of the 4 above... you can cycle through them and see what you like.

looks great! just the menu could be smaller and maybe closer to the lighter greenish/blue in the header?

The menu? You mean the links and such at the top? Essentially the sidebar?

The Link/Recent/Archive/Friends/Info area

I just realized you are probably seeing it really big because you don't have the Kelt text font....

Gonna change the font.

Okay. Check it out...

workshop_rees

FUCKING AWESOME!!!!!!!!!!!! YOU ARE THE BESTESTBESTESTBESTEST!!

*taps chin*
I can't tell if you like it. *lol*

Okay so I'm going to post at

workshop_rees with your layouts coding. So you can check it out there.

GOT IT!!! IT LOOKS GREAT IF YOU WANT TO GO LOOK! THANK YOU SO MUCH!!!

agent_afloat

Edited 2011-05-04 22:55 (UTC)

It does look lovely. I'm glad you like it.

Why? Oh, why is it so perfect?
I made my actual layout and it's so useful but this is... pretty? (More than that, I guess). Ohhhh, why?

*lol* I looked at your layout and I love it. So pretty. It is simple but stylish.

As for why this one is so perfect... I don't know. Fit of inspiration? Well enjoy using it or just looking at it.

Also, that is one of the best reactions I've ever had. Thanks for that.

Edited 2011-05-04 19:34 (UTC)

Oh, I could make it because of your instruccions in the help posts... I read it and I begin to understand how HTML works so... Thank you twice!

Oh that is cool. That was my goal though. I'm glad I could help you!

Oooh your layout is pretty!!!

I love this! Great job! :)

Thanks.

I love this layout :D have been searching a long while for a good Game of Thrones Layout!

So I changed the background, header, userheads and opacity a bit (I hope that's okay?) and for some reason that I can't get behind the username doesn't show under the userpic, any clue why?

Hi -- I just found this comm and snagged this layout. Thank you so much. I've credited on my profile, but used my own header. Thank you so so much. :)

I'm so glad you like it. Enjoy. I went to check it out and it looks like some of your images got moved. Otherwise... awesome.

58. Games of Thrones

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Thanks!

Re: Thanks!