Chris Schmidt (crschmidt) wrote in s2component,
Chris Schmidt
crschmidt
s2component

Component stylesheet, with properties

Since Component is closed source, all tutorials up to this point have not included information on the properties in the stylesheet. I needed to look at the stylesheet extensively for a support request, so I figured I'd just go through and reverse engineer the properties.

So, from now on, you should be able to use this stylesheet rather than one you copy yourself. There may be some differences that you will have to manually correct, such as the font_size, because I'm not sure the exact math used in creating that variable. Additionally, the palimg stuff isn't something I understand at all, so those might be a little off. However, the rest of it, including all of the colors, should be all find and dandy.

Hopefully this helps some people out when trying to create or recreate component styles. My next task is to release all of the html included in each of the builtin functions so that they can be more easily overridden.

Good luck, and happy styling!

function print_stylesheet() {
var string lineht = $*lineheight + "px";
var string linesmall = ($*lineheight-2)+"px";
var string palimg = $*header_bgcolor.as_string->substr(1,6);
var string $bgimg = $*page_background_image + "p0000000";
"""
		body { background-color: $*main_bgcolor;

			background-image: url("$bgimg");
			background-repeat: repeat;
			background-position: center;
			background-attachment: scroll;
		
			margin-top: 0px; margin-left: 0px;
			margin-right: 0px;
			font-family: $*font_family;
			font-size: .65em;  #font_size seems to be involved somehow
			color: $*entry_fgcolor;
		}
		
		td, tr {
			font-family: $*font_family;
			font-size: 100%;
			color: $*entry_fgcolor;
			line-height: $*lineht;
		}

		h1, h2, h3, h4 { line-height: normal; }
		
		a {
			color: $*entry_link;
			
		}
		
		a:visited {
			color: $*entry_link_visited;
		}
		
		a.calendarLink {
			color: $*calendar_link;
		}
		
		a.header {
			color: $*header_link;
		}
		a.headerLinks {
			color: $*header_link;
		}
		
		
			select, input, textarea {
				font-family: $*font_family;
				font-size: 100%;
				background-color: $*comp_bgcolor;
				color: $*comp_fgcolor;
			}
			

		input { line-height: normal; }

		.subject { font-weight: bold; }
		.small { margin-top: 3px;}
	
		.header {
			background-image: url("http://www.livejournal.com/palimg/component/top-bg.gif/pt$palimg");
			background-repeat: repeat-x;
			height: 25px;
		}
		
		.userTitle {
			font-size: 130%;
			text-weight: bolder;
			color: $*header_fgcolor;
			line-height: 17px;
		}
		
		.userSubTitle { 
			font-size: 120%;
			color: $*header_fgcolor_lt;
			line-height: $lineht;
		}
		
		.header-item {
			padding-left: 15px;
			position: relative;
			top: 5px;
		}
		
		.dkLine { background-color: #000000; }
		.ltLine { background-color: #000046; }
		.medLine { background-color: #000000; }
		.divLine { background-color: $*header_fgcolor; }
		.tabBg { background-color: $*header_bgcolor; }
		
		.entryDate {
			font-size: 100%;
			color: $*header_fgcolor_lt;
		}
		
		.entryHolderBg {
			background-color: $*comp_bgcolor;
			color: $*comp_fgcolor;
			padding-top: 7px;
			padding-right: 7px;
			padding-left: 7px;
			padding-bottom: 7px;
		}
		
		.entry {
			padding-top: 7px;
			padding-right: 7px;
			padding-left: 7px;
			padding-bottom: 7px;
			background-color: $*entry_bgcolor;
			font-size: 100%;
		}
		
		.entryHeader {
			font-size: 110%;
			font-weight: bold;
		}
		
		.entryComments {
			margin-top: 8px;
			margin-left: 8px;
			font-size: 100%;
			color: $*comp_fgcolor;
		}
		
		.entryDash {
			background-color: #000000;
			width: 100%;
			height: 1px;
		}
		
		.sideHeader {
			color: $*header_fgcolor;
		}
		
		.comp { margin-bottom: 3px; }

		.compBg { background-color: $*comp_bgcolor; }

		.compContent {
			padding-left: 6px;
			padding-right: 6px;
			padding-bottom: 6px;
			padding-top: 3px;
			line-height: 18px;
			color: $*comp_fgcolor;
		}
		
		.compList {
			line-height: $linesmall;
			padding-left: 6px;
		}
		
		.userPic { border-color: #000000; }
		
		.shortLine {
			width: 20px;
			background-color: #000000;
			margin-bottom: 1px;
		}

		a.calendartitle {
			font-size: 11px;
		}
		
		.calendarInactive {
			background-color: $*calendar_inactive;
			font-size: 9px;
			letter-spacing: 2px;
			color: $*calendar_fgcolor;
		}
		
		.calendarActive {
			color: $*calendar_link;
			background-color: $*calendar_active;
			font-size: 9px;
			letter-spacing: 2px;
		}
""";
}		

Subscribe
  • Post a new comment

    Error

    default userpic
  • 16 comments