Log in

No account? Create an account

Previous Entry | Next Entry

Sample external style sheets

  • Sep. 6th, 2006 at 2:29 PM
Some external style sheets that may be useful as bases. At least, they do some things people have been asking about.

Base. A stripped-down base style sheet, listing (almost) all the classes and ids in the voxhtml more or less in order of appearance.

Boxes. Based on Fleur White, elements are set off with borders and text colors.

Blocks. Elements are set off with blocks of background color.

Accents. Based on Playful Cherry Blossoms, elements are set off with images marking headers and between entries.

Flexible Squares. A duplicate of Flexible Squares, re-engineered for voxhtml. I love this layout, and I find it easier to customize this way.

These are all flexible-width layouts, but they can be refitted to fixed-width easily. Making #alpha margin:0 and width:75% usually seems to work pretty well. Also, the double-sidebar layouts in Base are not very well tested, since I never use two sidebars. I wouldn't be surprised if those require some messing around with margins to make them look good.

I'm making these public, of course, but if you want to use Boxes or Accents it would be nice if you uploaded the background images to your own Scrapbook. ^_^


( 11 comments — Leave a comment )
Sep. 6th, 2006 10:56 pm (UTC)
I tried the Flexible Squares stylesheet and it looks pretty borken in Firefox - teatest. What am I doing wrong?
Sep. 6th, 2006 11:41 pm (UTC)
*peeks at the code*

Ah, I see. Two things. To make these work at all, you need to not be using the base layout. So, if you go to Customize Journal > Custom Options > Custom Css and select "No" in that first dropdown, that'll be the first thing.

Next, you need to either change the style-sheet so that it's fixed-width or else make a new theme that will let the flex-width layout work. (It's currently set for flex-width.) This entry will tell you how to make a new theme. If you decide you want to switch the style-sheet to fixed-width instead, you need to replace the current body.layout-wt with:

body.layout-wt #alpha { width: 70%; float: left; }
body.layout-wt #beta { float: right; }

See if either of those work.
Sep. 7th, 2006 12:21 am (UTC)
Thanks! I'll try that. I do want flexible width, so that's great. Perhaps you can link to information on making layout flexible-width in the entry itself, in case others are also confused :)
Sep. 6th, 2006 10:57 pm (UTC)
*busily saving to her 'Things to Tinker With' folder*

I think I may have an addiction to this layout business.
Sep. 6th, 2006 11:42 pm (UTC)
*grins* It's the siren song of That Looks Cool.
Sep. 6th, 2006 11:56 pm (UTC)
have I told you you're awesome?
Flexible Squares. A duplicate of Flexible Squares, re-engineered for voxhtml. I love this layout, and I find it easier to customize this way.

*dies* The only reason I haven't switched is because I <3 Flexible Squares too much, even though I find this easier to customize.
Sep. 7th, 2006 12:05 am (UTC)
Re: have I told you you're awesome?
*blushing and grinning* Flexible Squares is love.
Sep. 8th, 2006 03:14 am (UTC)
I tried Accents but for some reason the sidebars are wonked to no end. I love the everything... but...
Sep. 8th, 2006 03:36 am (UTC)
Re: Herm.
*takes a look at it* Hm. I have no idea why the sidebar is displaying at one hundred percent of the page, but it's down at the bottom because the style sheet is set to flex-width, and that requires that #beta come before #alpha.

If you want to use the sheet as is, then follow these directions to make a flex-width theme, and select that.

If you want to just make the style sheet fixed-width, put this code:

body.layout-wtt #alpha { width: 70%; float: left; }
body.layout-wtt #beta, #gamma { float: right; display: inline; }

up at the top of the style sheet with the rest of the body.layout commands. *smiles* There currently isn't any set of commands on that style sheet for the double-sidebar configurations.
Sep. 8th, 2006 04:00 am (UTC)
Re: Herm.
Still no dice, though at least they are in proper columns now... just at the bottom of the page.
Sep. 8th, 2006 04:14 am (UTC)
Re: Herm.
*looks some more* Oh, you're using twt layout. *frowns* Ummmm. The code for that is different:

body.layout-twt #alpha { float: right; width: 70%; display: inline }
body.layout-twt #beta { float: left; display: inline; }
body.layout-twt #gamma { float: right; display: inline; }

And I'm not entirely sure that will work. I don't use double-sidebars myself, so I haven't really tested those variations. wtt (that is, sidebars both on the right, the code I gave above) I'm at least fairly sure of.
( 11 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars