Log in

No account? Create an account

Previous Entry | Next Entry

Starter Stylesheet

  • Sep. 14th, 2006 at 2:26 PM
Here is a stylesheet that combines the elements from the various theme stylesheet and theme-variation stylesheets into one, with all the extra Vox stuff stripped out. This is a useful starting point if you're creating a completely new layout, not just making color/font/header changes. (You might also want to read this first)

general formatting
page structure
page banner header
header nav styles
hover edit (sticky post header in LJ)
widget styling
asset styling
utitlity code

/* general formatting --------------------------------------------------- */
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
background: url(body.gif) center top repeat-y #e9e9e9;


a {
font-weight: bold;
text-decoration: underline;
color: #555555;

a:hover {
text-decoration: none;

/* page structure ----------------------------------------------------------- */

#page-inner {
width: 940px;
margin: 0 0 0 0;
background-color: #cccccc;

#content-inner {
padding-top: 15px;
padding-right: 0;
margin: 0;

#alpha-inner {
margin: 0 20px 25px 20px;

#gamma-inner { padding: 0 0 25px 0; margin: 0; }

/* variations of sidebar backgrounds */
.layout-tw #content-inner,
.layout-wt #content-inner,
.layout-wtt #content-inner,
.layout-twt #content-inner {
background-position: top right;
background-repeat: repeat-y;

.layout-wt #content-inner { background-image: url(content-bg-wt.gif); }

.layout-twt #content-inner,
.layout-tw #content-inner {
background-position: top left;
background-image: url(content-bg-tw.gif);

/* Three columns on home pages */
.layout-wtt #content-inner { background-image: url(content-bg-wtt.gif); }
.layout-twt #content-inner { background-image: url(content-bg-twt.gif); }

/* page banner header ----------------------------------------------------------- */

.page-header1 { font-size: 28px; }
.page-header2 { font-size: 22px; }
.page-header3 { font-size: 18px; }
.page-header4 { font-size: 14px; }

.widget-header {
font-family:Arial, Helvetica, sans-serif;

#header {
position: static; /* fixes positioning issue on IE where header content displays outside #header-content */
background-color: #000000;

#header-inner {
position: static; /* fixes positioning issue on IE where header content displays outside #header-content */
background-position: left bottom;
background-repeat: repeat-x;
background-image: url(header.gif);

#header-content-inner {
margin: 20px 15px 5px 20px;
padding-bottom: 60px;

#header-text {
float: left;
margin-top: 10px;
width: 635px;

#header-name {
font-size: 34px;

#header-name a {
color: #990000;
text-decoration: none;

#header-name a:hover {
text-decoration: underline;

#header-description {
font-size: 14px;

#header-description a {
color: #cccccc;

/* header nav styles ------------------------------------------------- */
.nav a {
color: #cccccc;
.nav .item {
border-color: #cccccc;
.nav .current a {

/* headers and captions -------------------------------------------- */

.asset-name { font-weight: bold; }

.asset-name a,
.page-header3 {
color: #444444;

/*hover edit --------------------------------------------------*/
/*in LJ, this is the sticky post header*/
.asset-name-hover {
background-color: #f6f8f2;

/* widget styling --------------------------------------------------*/

.widget-header {
padding: 10px 15px;
font-size: 13px;
font-weight: bold;


.widget .widget-header a:hover {
text-decoration: underline;

.archive-widget ul.widget-list .item,
.widget a { color: #242424; }

.widget .widget-header, /*extra class keeps rule above from overwriting in variants*/
.widget .widget-header a {
color: #cccccc;
text-decoration: none;

.widget-content {
padding: 0 15px;
font-size: 11px;

.widget .widget-header {

.widget-header .edit a {
border-left-color: #fff;
font-size: 10px;

.widget ul, .widget ol, .widget dl { margin-bottom: 0; }

.widget-footer {
font-size: 11px;

.widget-footer p {
line-height: 1;
margin: 0;
padding: 0;

* html .widget-footer a {
/* Win IE < 7 */
padding: 0 15px;
word-wrap: break-word;

/* widget styling --------------------------------------------------*/

.widget-header {

.archive-widget ul.widget-list .item,
.widget a { color: #dddddd; }

/* asset styling --------------------------------------------------*/

.asset-content blockquote {
background-image: url(blockquote.gif);
background-position: top left;
padding: 10px;
font-size: 12px;
/* Win IE < 7 */
* html .asset-content ol { margin-left: 25px;}

.asset-stream-list .post-asset .asset-name { margin-top: 0; }

.asset-tags-list {
font-size: 12px;

.asset-tags-header { font-size: 12px; font-weight:bold;}

.asset-stream-grid .asset-inner {
background-color: #eff3f7;
padding: 0;

.asset .asset-meta dd a {
color: #333333;

.asset-meta-list .datetime {

#alpha .asset-meta-list a {

.asset-meta-list .item {
border-color: #444444;

.asset-footer {

.asset-tags-list a:hover {

#comments .comment-even,
.comment-error {
background-color: #b7b7b7;

#comments .comment-odd {
background-color: #a7a7a7;

#comments input, #comments textarea {
border: 1px solid #7f7f7f;

.asset-detail .asset-containers,
.comment-error {
border-width: 0px;
border-style: solid;
border-color: #d9ecc7;

#comment-form textarea {
border: 1px solid #979797;
border-right-color: #e5e4e4;
border-bottom-color: #e5e4e4;

.comment-form-footer input { border: 1px #a9a9a9 solid; }

.recent-activity-posts .post-asset,
.asset-containers .post-asset {
background-position: 0 4px;

/* Pager ------------------------------------------------------------------ */
.pager a,
.pager .current a { color: #478bb6; }

/* Utility Code --------------------------------------------------- */

/* clear floats, inspired by positioniseverything.net/easyclearing.html */
.widget .user-pic:after {
content: ".";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0.1px;

/* float in post bodies around enclosures */
.asset-body {
height: 1%;

/* Win IE < 7 */
* html #header-name a { word-wrap: break-word; }


( 25 comments — Leave a comment )
Sep. 14th, 2006 10:07 pm (UTC)
/* Win IE>7 */ will (should) throw an error in the css parser.
Sep. 14th, 2006 10:08 pm (UTC)
and it's actually < but i think either will trip it.
Sep. 14th, 2006 11:15 pm (UTC)
Won't it ignore it because it's in a comment? Anything within a comment tag (namely /* */) should be invisible to the parser.
Sep. 15th, 2006 05:52 am (UTC)
if it's invisible to the parser (which i'm sure it's not) i could put nasty javascript in there to snatch cookies from people using browsers that don't understand css comments...
Sep. 16th, 2006 05:00 pm (UTC)
I used this style sheet to work with my community, starbase668 and I'm not sure if I'm just being blind (I'm sick, it's possible) or if there really isn't anything specifying the styling for the user icons in your style sheet here. I want the text to wrap around them like they do in the style I'm using on my journal, and from what I've seen, every other standard expressive style, so I figure they need a float: left; added to the styling for the user pic container, but I'm still too sick to dig for which name or class is applied, so I was hoping it was something I just failed to see while scanning the code.

Help please.
Sep. 21st, 2006 04:35 pm (UTC)
Hi, I'm no expert (I've just been experimenting with customising the stylesheet) but I added a float: left and some padding to .user-icon, which I found from using the visual guide in this post.

Hope that helps. :)
Sep. 23rd, 2006 09:40 pm (UTC)
I'm pretty sure that's what I already tried, however now that I'm trying it again, I'm trying to validate the CSS to make sure there aren't any sloppy mistakes, and I can't because the style isn't sound in HTML. Meh. This is why I usually try not to use other peoples styles for things, however I am not a programmer, so I can't use s2 if I don't use other people's styles. Meh.

Thank you for trying to help, I'll keep poking at it.
Jan. 26th, 2007 05:25 pm (UTC)
I'm admittedly new (and clueless) to CSS. What I want to do is set Trebuchet MS as my font while using Expressive Seasonal (with the Aurora layout). I tried copying the above and changing the font set to Trebuchet MS, but when I did, it removed the background image even WITH the URL in place.

Anyone have any idea how to help? Thanks in advance!
Feb. 7th, 2007 04:03 pm (UTC)
You should look through the posts tagged with "fonts". If you still can't find anything, post a top-level entry (to the community itself).
Feb. 7th, 2007 06:07 pm (UTC)
Feb. 8th, 2007 03:56 am (UTC)
Thanks so much - I found an entry where you'd assisted (twice) and copy/pasted and tweaked to my preferred font!
Apr. 6th, 2007 04:01 pm (UTC)
Thank you so much for this! I've been looking for a CSS starter sheet to play with, and this is just the thing I was looking for! :D
Mar. 25th, 2008 02:59 pm (UTC)
First of all, thanks for these handy tutorials on how to change the LJ lay-outs.

I have been able to use most of this, but I came accross a tiny problem

I am using the California Poppies template and have been able to adjust most important stuff about it, except for the red border that's underneath the header.
I cannot seem to find that bit of css script for it.
Maybe someone can help me with this? *^___^*
Maybe I am overlooking something here.

http://community.livejournal.com/sweetlytwisting/ is the community I am trying to adjust.

thanks in advance!!
May. 30th, 2008 05:21 pm (UTC)
gahh, why does lj css have to be sooo confusing??? this is ridiculous. I don't think I'll ever figure it out.
Jul. 2nd, 2008 03:48 am (UTC)
Anyone wanna help the hapless?
What I am trying to accomplish (if it's even possible) is to ONLY change the image behind the page title. I am using Ghouls Black which is an Expressive, and basically want to figure out what THAT layout uses for all the confusing settings and such, copy it, and just (once again, if possible) change the url for the background image. If anyone could help, I would greatly appreciate it.
Feb. 9th, 2013 08:43 am (UTC)
Re: Anyone wanna help the hapless?
I'm trying to do this now. Ever find a fix?
Oct. 13th, 2008 06:11 am (UTC)
Hi, you have so much knowledge. May I ask a question? People tell me that it's so "easy" to add a header/banner to an already existing LJ account. When I do CSS off line, it seems pretty clear. But I'm doing basic things like background color, text, and I have put up a banner when working off line. But when I go to my plus account to try and add CSS, it won't show up. What am I doing wrong? What exactly do I put in these parts:

Use layout's stylesheet(s)
Custom external stylesheet URL
Custom stylesheet

Oct. 13th, 2008 07:24 am (UTC)
Re: question
I figured it out. Sorry to bother you. I wasn't typing in the url exactly! I'm up and running.
(Deleted comment)
Mar. 20th, 2009 04:37 am (UTC)
This community is for help with your CSS if you're using an Expressive or Mixit based layout. See the profile for more info. You're using a Bloggish layout. You can find help for that at s2bloggish and s2_bloggish.
May. 2nd, 2009 12:16 am (UTC)
Style sheet application to real page?
I can see the code on the style sheets. I can see the resulting page. But where is there a concordance between the code and which parts of the page it produces? Surely someone has marked up a graphic image of a finished page with the code parts identified in their proper places?

If not, it would would be a big help for anyone who does not have a few spare dozen hours to do trial and error.
May. 2nd, 2009 02:37 am (UTC)
Ok, found the gif with the general layout names. But I don't see ALL the different kinds of stuff on it-- like borders, for instance.
Jun. 23rd, 2010 09:57 am (UTC)
professional is a "create your own" alternative for both female and women to author abercrombie jeans squirrel the due color, size, crocheting color, and monogrammed quote of improved. Women's lacoste polo shirts further occur prestige the packed pony version, classic-fit and skinny-fit polos, long-sleeved beaded ski or image polos, want or concise sleeved pennies sign polos, USA blot out polos, and flat a dip-dyed clothesline of the massive ed hardy jeans. unbroken of these ed hardy swimwear are untrue from a breathable resolution cotton lattice for too comfort. These popular polos are available not unitary command the retail stores that fork over ed hardy women directly, but also importance outlet and online stores. Outlet stores mention minor prices on divers items that are keen power the retail stores, stint masterly are websites that urge the sale of polos from ed hardy bikini at an supine subordinate remuneration.
Jan. 9th, 2011 03:43 am (UTC)
Is this outdated or something because this just made my journal look like html 1.0 garbage....
May. 15th, 2011 11:00 pm (UTC)
I'm trying to move the page over to the left so there is extra space on the right, so how do I do that? Right now the page is in the middle, so how do I move it? I've tried saying that there's no padding on the left, and simply #page {positon: left;} but nothing happens. Am I unable to move it to the side like that?
Apr. 21st, 2012 09:57 am (UTC)
Is it possible to edit css for each .nav li.item ?
As far as I understend there are two ways:
.nav .item.first{}
.nav .item.current {}

For example,it`s possible to edit - asset-meta-list li.item [href*="reply"]

I want to edit each nav li.item. How can I do this
Recent Entries | Archive | Friends | User Info
( 25 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars