briteskies

So. I have been wanting to make this theme for forever. I started in on it months ago. Never finished it. And then rediscovered it. And now.... am pleased enough to both use it, and share with the class!

This is a [Flexible Squares] Journal Theme that anyone is free to use. Its existence was inspired by, what I hope it quite obviously, the LCARS Interface used throughout the Star Trek series. If I get super inspired, there may be variations of this theme to come in the future. But for now, it's just the one. But I hope that you all enjoy it.

I will warn you though, it works best in Firefox. The curves do not show up in Chrome. I have no idea about IE/Safari. I'm looking into it. But frankly... I use Firefox, so I'm not in all that big of a rush to solve it. Please forgive me.

Preview - though you will note that it is also the theme that I am using currently:

1. Go to the Customize Journal area.

2. Under "#2 Select New Theme," type in FLEXIBLE SQUARES in the search field.

3. Select APPLY THEME under any of the given options.

4. Select CUSTOMIZE YOUR THEME in the upper-right box field. (Or you can also select the CUSTOMIZE button beneath whichever FLEXIBLE SQUARES theme you've just chosen - either way works. *MAKE SURE the "Apply Theme" button underneath has turned into a link that says CUSTOMIZE.)

5. Select CUSTOM CSS - it will be the last option on the left sidebar

6. Change all drop-down options on this page to NO.
*There should be three of them.

7. Copy/Paste this ENTIRE code below into the CUSTOM STYLE SHEET field.

/* Cleaned CSS: */
/*-------------------------------
LCARS Interface - briteskies
Flexible Squares 1050px
-------------------------------*/
body { 
	background-color: #000000; 
	color: #a4a4a4; 
	font-family: arial; 
	font-size: 11pt; 
	line-height: 140%; 
	text-align: justify; 
	text-transform: none; }

a, a:link, a:visited, a:active { 
	color: #d16767;
	font-family: arial;
	font-weight: bold;
	font-size: 10;
	text-transform: uppercase; 
	text-decoration: none;}

a:hover { 
	color: #9b68f3; }

a img {
border:medium none;
}

blockquote { 
	background-color: #9a99ff;	 
	padding: 10px; 
	margin: 7px; 
	color: #000000;
	font-family: impact;
	font-size: 10; 
	text-align: justify; 
	border-right: 1px solid #000000;
	-moz-border-radius-topleft: 8.5%; 
	-moz-border-radius-topright: 8.5%; 
	-moz-border-radius-bottomleft: 8.5%; 
	-moz-border-radius-bottomright: 8.5%; }

code, kbd, pre, tt { font-family: monospace;}

/*-------------------------------
general
-------------------------------*/

#content { 
	width: 1050px; 
	margin-left: auto; 
	margin-right: auto;	
	background-color: transparent; }

#maincontent { 
	margin-left: auto; 
	margin-right: auto; 
	text-align: justify; 
	float: right; 
	background-color: #000000;
	padding: 5px; 
	width: 650px; }

.subcontent { 
	background-color: #000000; 
	margin-top: 20px; padding: 5px 0 5px 0; }

/*-------------------------------
         header
-------------------------------*/

#header{ 
	background-color: #d16767; 
	padding: 35px 0px 0px 5px; 
	margin: 0px 5px 0px 5px; 
	float: right; width: 650px; 
	border: 1px solid #000000; 
	-moz-border-radius-topleft: 6%; 
	-moz-border-radius-topright: 0%; 
	-moz-border-radius-bottomleft: 0%; 
	-moz-border-radius-bottomright: 0%; 
	text-align: right; 
	text-transform: uppercase; 
	letter-spacing: -1px; 
	font-family: arial narrow;
	font-weight: bold; 
	font-size: 14pt; }

div#header a, div#header a:link, div#header a:visited { 
	color: #000000; }

div#header a:hover { 
	color: #FF7E7E; }

ul.navheader { 
	padding: 0 0px 0 0px; 
	margin: 0 0px 0 0px; }

ul.navheader li { 
	display:inline; }

li.view {
	color: #000000;}

/*-------------------------------
         title, subtitle
-------------------------------*/

.title {
	font-family: arial narrow;
	font-weight: bold;
	font-size: 20pt;
	text-transform: uppercase;
	letter-spacing: -1px;	 
	test-align: right;
	color: #FF9F01; 
	background-color: #000000;
	border-left: 14px solid #d16767;
	-moz-border-radius-topleft: 6%; 
	padding: 25px 5px 15px 5px;}

.subtitle { display: none; }

/*-------------------------------
           footer
-------------------------------*/

#footer { 
	background-color: transparent; 
	margin-top: -50px; 
	text-transform: uppercase; 
	letter-spacing: -1px; 
	font-family: arial narrow; 
	font-size:18pt; 
	padding: 5px; 
	float: right; 
	text-align: right; }

div#footer a, div#footer a:link, div#footer a:visited { 
	color:#9c68f3; }

div#footer a:hover { 
	text-decoration: none; 
	color: #9a99ff; }

ul.navfooter{ 
	padding: 5px 0px 5px 0px; 
	margin: 0px 0px 0px 0px; }

ul.navfooter li  { 
	display: block; }

.clearfoot { 
	clear: both; }

#footer .viewing { display:none; }

/*-------------------------------
         sidebar 
-------------------------------*/

#sidebar { 
	width: 300px; 
	margin: 0px 0 0px 0; 
	background-color: #000000; 
	color: #000000; 
	font: 9pt arial black, sans-serif; 	
	line-height: 57px; 
	text-transform: uppercase;
	font-weight: bold;
	float: left; 
	text-align: centert; 
	padding: -10px; 
	}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited { 
	color: #000000; }

div#sidebar a:hover { 
	padding: 25px 50px 18px 200px; 
	margin: 0px 0px 0px 0px; 
	list-style: none; 
	text-align: right; 
	background-color: #9a99ff; 
	border: 1px solid #000000; 
	-moz-border-radius-topleft: 8%; 
	-moz-border-radius-topright: 8%; 
	-moz-border-radius-bottomleft: 8%; 
	-moz-border-radius-bottomright: 8%; 
	text-transform: uppercase; 
	letter-spacing: -1px; 
	font-family: arial black;
	font-weight: normal; 
	font-size: 12pt; }

.defaultuserpic { 
	display: none; }

.sbarheader, .sbarbody { 
	padding: 0px 10px 0px 10px; 
	margin: 20px 0 20px 0; }

.sbarbody2 { 
	margin: 20px 0 0 0; 
	padding: 0px 10px 0px 10px; }

table.calendar { 
	width: 80%; 
	margin-top: 15px; 
	margin-right: auto; 
	margin-left: auto; }

.sbarcalendar {	
	font: 7pt arial, 
	sans-serif; 
	text-align: center; 
	border-color: #202020; 
	border-width: 1px; 
	border-style: solid; }

.sbarcalendarposts { 
	background-color: #232323; 
	font: 8.5pt arial, sans-serif; 
	text-align: center; 
	border-width: 1px; 
	border-color: #202020; 
	border-style: solid; }

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

li.sbaritem { 
	padding: 5px 5px 0px 0px; 
	margin: 0px 0px 0px 0px; 
	list-style: none; 
	text-align: right; 
	background-color: #ff9934; 
	border: 1px solid #000000; 
	-moz-border-radius-topleft: 10%; 
	-moz-border-radius-topright: 10%; 
	-moz-border-radius-bottomleft: 10%; 
	-moz-border-radius-bottomright: 10%; 
	text-transform: uppercase; 
	letter-spacing: -1px; 
	font-family: arial black;
	font-weight: normal; 
	font-size: 12pt; 
	}

li.sbaritem a {
	color: #000000;
	
		}

li.sbartitle { 
	padding: 5px 5px 0px 0px; 
	margin: 0px 0px 0px 0px; 
	list-style: none; 
	text-align: right; 
	background-color: #ff6634; 
	border: 1px solid #000000; 
	-moz-border-radius-topleft: 10%; 
	-moz-border-radius-topright: 10%; 
	-moz-border-radius-bottomleft: 10%; 
	-moz-border-radius-bottomright: 10%; 
	text-transform: uppercase; 
	letter-spacing: -1px; 
	font-family: arial black;
	font-weight: bold; 
	font-size: 14pt; }

/*-------------------------------
          entries 
-------------------------------*/

.entry	{ 
	padding: 10px 140px 5px 20px; 
	margin: 0px 0 0px 0; 
	background-color: #000000; 
	text-align: left; 
	letter-spacing: 0px;
	border-left: 14px; 
	border-color: #cb99cc;
		 }

.entry ul li { 
	padding-left: 5px; 
	margin-left: 15px; }

.entry ol li { 
	padding-left: 5px; 
	margin-left: 15px; }

.entry_text { 
	min-height: 50px; 
	padding-bottom: 20px;}

.entry img { 
	max-width: 450px; 
	overflow: hidden; }

.userpic { 
	margin: 100px 10px 10px 10px; 
	position: relative; 
	float: right; 
	background-color: transparent !important; 
	z-index: 15; }

.userpic img, .userpicfriends img { 
	padding:5px; 
	border-right: 5px solid #d16767;
	border-left: 5px solid #d16767;
	border-top: 5px solid #000000;
	border-bottom: 5px solid #000000;
	-moz-border-radius-topleft: 7%; 
	-moz-border-radius-topright: 7%; 
	-moz-border-radius-bottomleft: 7%; 
	-moz-border-radius-bottomright: 7%;  }

.userpicfriends { 
	margin: 10px 10px 10px 10px; 
	position: relative; 
	float: right; 
	background-color: transparent !important; 
	z-index: 15; 
	text-align: center; }

.userpicfriends a font { 
	color: #8d8d8d; }

.userpicfriends a:hover font { 
	color: #666666; }

.date {	
	padding: 5px 0px 3px 0; 
	margin-left: 20px; 
	top: 5px; 
	color: #000000; 
	test-transform: uppercase;
	font: 9pt arial narrow;  
	text-align: left; }

.subject { 
	padding: 0px 0px 2px 0; 
	margin-left: 20px; 
	color: #000000; 
	background-color: transparent !important; 
	letter-spacing: -1px; 	
	text-align: left; 
	font-size: 15pt; 
	font-family: arial narrow;
	font-weight: bold;
	text-transform: uppercase; 
	}

.subject a, .subject a:link, .subject a:visited { color: #888; }

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

.datesubject { 
	margin: 0px 0 0px 0; 
	padding: 5px 0 5px 0; 
	background-color: #cb99cc;
	border: 1px solid #000000; 
	-moz-border-radius-topleft: 6.5%; 
	-moz-border-radius-topright: 0%; 
	-moz-border-radius-bottomleft: 6.5%; 
	-moz-border-radius-bottomright: 0%; 
	margin-top: 20px; padding: 5px 0 5px 0;  }

/*-------------------------------
  currents, tags, comment links 
-------------------------------*/

.comments { 
	padding: 10px 0 10px 0; 
	position: relative;	
	font: 9pt georgia, sans-serif; 	
	color: #000000; 
	text-transform: uppercase; 
	text-align: center;
	background-color: #ff6634;
	border: 1px solid #000000; 
	-moz-border-radius-topleft: 8%; 
	-moz-border-radius-topright: 8%; 
	-moz-border-radius-bottomleft: 8%; 
	-moz-border-radius-bottomright: 8%; 
	  }

div.comments a, div.comments a:link, div.comments a:visited { 
	color: #000000; }

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

div.ljtags a, div.ljtags a:link, div.ljtags a:visited { 
	color: #000000; }

div.ljtags a:hover { 
	color: #9a99ff; 
	text-decoration: none; }

/*-------------------------------
    comment pages
-------------------------------*/

.box { 
	padding: 10px; 
	clear: left; 
	width: 600px; }

.skiplinks { 
	text-align: center; 
	margin-top: 10px; }

div.skiplinks a, div.skiplinks a:link, div.skiplinks a:visited { color: #ff9934; }

div.skiplinks a:hover {
	color: #ff6634; 
	text-decoration: none; }

.datesubjectcomment { 
	padding: 5px; 
	margin-top: 20px; 
	color: #cb99cc;
	font-size: 0pt; 
	background-color: #transparent; }

.datesubjectcomment a:link, .datesubjectcomment a:visited { 
	color: #000000;
	font-size: 12pt;
	font-family: arial narrow;
	font-weight:bold;}

.datesubjectcomment a:hover { color: #5975bb; }

.userpiccomment { 
	padding: 5px; 
	margin-right: 10px; 
	position: relative; 
	float: left; 
	background-color: #000000;
	border: 1px solid #ececec; z-index: 15; }

input, textarea, select { 
	font-family: arial narrow; 
	font-size: 10px; 
	background-color: #000000; 
	color: #a4a4a4; 
	border-right: 15px solid; 
	border-left: 15px solid;
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-color: #ff6634; 
	-moz-border-radius-topleft: 6%;   
	-moz-border-radius-topright: 6%; 
	-moz-border-radius-bottomleft: 6%; 
	-moz-border-radius-bottomright: 6%; }

textarea.textbox { width: 90% !important; }

.reply { 
	padding: 10px 10px 10px 10px; 
	margin: 10px 10px 10px 10px; 
	position: relative; 
	background-color: transparent; 
	color: #000000; 
	font: 12pt arial narrow, sans-serif; 
	line-height:140%; 
	text-align: justify; }

.replytosubject { 
	background-color: #cb99cc; 
	color: #000000; 
	font-weight: bold; }

.commentreply { 
	margin: 10px; 
	position: relative; 
	color: #000000; 
	font: 12pt arial narrow, sans-serif; 
	line-height:140%; 
	text-align: justify; }

.commentbox { 
	padding: 10px; 
	margin: 10px; 
	background-color: #cb99cc; 
	border: 1px solid #000000; 
	-moz-border-radius-topleft: 10%;  
	-moz-border-radius-topright: 10%; 
	-moz-border-radius-bottomleft: 10%; 
	-moz-border-radius-bottomright: 10%; }

.commentboxpartial { 
	color: #000000; 
	padding: 3px; 
	margin: 5px; 
	background-color: #ff6634;
	border: 1px solid #000000; 
	-moz-border-radius-topleft: 6%; 
	-moz-border-radius-topright: 6%; 
	-moz-border-radius-bottomleft: 6%; 
	-moz-border-radius-bottomright: 6%; }

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

/*-------------------------------
    year/archive page
-------------------------------*/

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

ul.year li { display: inline; }

table.yeartable { 
	background-color: #202020; 
	margin-left: auto; margin-right: auto; }

table.yeartable td.yeardate, table.yeartable td.yearday { 
	background-color: #202020; 
	border-color: #232323; 
	border-width: 1px; 
	border-style: solid; 
	text-align: center; 
	color: #a4a4a4; }

table.yeartable td.yearday {
	background-color: #F85144; 
	text-align: center; 
	color:#585858; }

td.yearmonth { border-style: none; }

/*-------------------------------
    tags page
-------------------------------*/

.ljtaglist { 
	margin: 20px 20px 20px 20px; 
	padding: 10px 40px 10px 40px; 
	background-color: #000000; 
	list-style-type:circle; 
	color: #a4a4a4; }

h2 { display: none; }

/*-------------------------------
            misc 
-------------------------------*/

.separator { 
	height: 40px; 
	background-color: transparent; }

.clear { display: none; }

#lj_controlstrip td { 
	background-color: #000000 !important; }

#lj_controlstrip a { 
	font-family: arial !important; 
	font-size: 10px; 
	color: #ececec!important; 
	text-transform: lowercase; }

/*--------------------------------
  User Community Protected Icons
-------------------------------*/

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
		width: 0;
		height: 0;
		padding: 0 30px 30px 0;
		background: url(http://pics.livejournal.com/briteskies/pic/003q89hh); }

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
		width: 0;
		height: 0;
		padding: 0 30px 30px 0;
		background: url(http://pics.livejournal.com/briteskies/pic/003q89hh); }

.ljuser img { 
	width: 0; 
	height: 0; 
	background-repeat: no-repeat; 
	background-color:transparent; 
	background-image: url(http://i31.tinypic.com/2l95dop.gif); 
	padding: 12px 7px 0 2px !important; }

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { 
	background-color:transparent; 
	background-image: url (http://i31.tinypic.com/2l95dop.gif); 
	padding: 12px 7px 0 2px !important; }

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { 
	background-color:transparent; 
	background-image: url(http://i26.tinypic.com/a0guhe.gif); 
	padding: 11px 11px 0 2px !important; }

/*--------------------------------------------
Pop-Up Windows
-----------------------------------------*/

/* general positioning */
div.ContextualPopup {
margin: 10px 0 0 0px;
font: normal 9px "Lucida Sans Unicode" !important;
}
/* userpic */
div.ContextualPopup img {
padding: 0 5px 0 5px;
margin: 0 1px 0 5px !important;
}
/* defines general look, font color/size/background color*/
div.ContextualPopup div.Inner {
background-color: #000000 !important;
color: #a4a4a4 !important;
border-right: 10px solid #ff6634;
border-left: 10px solid #ff6634;
-moz-border-radius-topleft: 8.5%; 
-moz-border-radius-topright: 8.5%; 
-moz-border-radius-bottomleft: 8.5%; 
-moz-border-radius-bottomright: 8.5%;
padding: 0px;
width: 175px;
text-align: center;
}
/* defines left side of popup without the user icon*/
div.ContextualPopup .Content {
padding: 2px 4px 6px 4px;
}
/* defines the text that shows the relation to the user (XYZ is your mutual friend) */
div.ContextualPopup .Relation {
font-weight: normal !important;
letter-spacing: 1px;
}
/* look of words LJ Talk */
div.ContextualPopup .Content .OnlineStatus {
font-weight: normal;
}
/* element that contains the user icon */
div.ContextualPopup .Userpic {
padding: 4px 4px 0 0;
}
/* defines the look of the links */
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #f85144 !important;
}

#lj_controlstrip table { margin: 0; padding: 0; width: auto; background-color: #eeeeee !important;}

#lj_controlstrip td {
background-color: #fefefe !important;
font-family: Lucida Sans Unicode;
color: #777777;
}

//***************User Icons and Metadata Icons******************//

.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
		width: 0;
		height: 0;
		padding: 12px 9px 0px 0px !important;

background: url(http://i30.tinypic.com/34j6o3t.gif);
		}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
		width: 0;
		height: 0;
		padding: 9px 9px 0px 0px !important;
		background: url(http://i32.tinypic.com/2nrdcsi.gif);
		}

.ljuser img { 
  		width: 0;
  		height: 0;
  		background-repeat: no-repeat;
  		background-color:transparent;
  		background-image: url(http://i31.tinypic.com/2l95dop.gif); 
  		padding: 12px 7px 0 2px !important;
		}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
		background-color:transparent;
  		background-image: url(http://i31.tinypic.com/2l95dop.gif); 
  		padding: 12px 7px 0 2px !important;
		}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
		background-color:transparent;
  		background-image: url(http://i26.tinypic.com/a0guhe.gif); 
  		padding: 11px 11px 0 2px !important;
		}

.currentlocation
       {
	display: none;
       background: url(http://pics.livejournal.com/galenhiril/pic/001z53fz/) no-repeat left center;
       padding: 0px 0px 0px 0px;
       }

.currentmood 
       {
       background: url(http://pics.livejournal.com/galenhiril/pic/002afdkk) no-repeat left center;
       padding: 0px 0px 0px 11px;
       }

.currentmusic 
       {
       background: url(http://pics.livejournal.com/galenhiril/pic/002agbc9) no-repeat left center;
       padding: 0px 0px 0px 12px;
       }
	
.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong 
        {
	color: #777777;
	font-family: "trebuchet", sans-serif;
	font-weight: lighter;
        text-transform: none;
	padding: 4px 0 4px 0;
	}
	
.currenttags {
	background: url(http://pics.livejournal.com/briteskies/pic/003q5aet) no-repeat left center;
	padding: 0px 0px 0px 30px;}

***NOTE: THIS THEME DOES NOT HAVE A HEADER IMAGE!!!!!!

You will notice that in the preview/my own personal journal, there is an image in the upper-left corner of the screen. THIS IS NOT IN THE CSS CODE. The image is inserted into the BLURB area of the SIDEBAR, which you can edit to your liking.

Here is the image that I used, which you are welcome to use as well. Or, you can create your own. Just be sure to keep it 300px wide or under, or it will not fit in the sidebar.

Once you've uploaded the image you would like to use, copy/paste the following into the 'Text To Be Added To The Sidebar' section of the SIDEBAR area of the theme editor.

Other useful images!

Flat | Top-Level Comments Only

From:

cloudyskies2046.livejournal.com

whoa! cool!

melisus.livejournal.com

This looks so totally awesome!

Yeah, the curves don't show up in IE, but that's always easily remedied by a browser shift, lol. Also, the overall effect is still there anyways. This is a sweet theme!

admiral

ahaha, this is adorable. ♥

seereh.livejournal.com

OMGOSH. This is awesome!!

LCARS INTERFACE -- LJ THEME

LCARS INTERFACE -- LJ THEME

no subject

no subject

no subject

no subject

Expand Cut Tags

Profile

Links

Most Popular Tags

Page Summary

Style Credit