Le Petit Graphix - [Tabula Rasa] - Burst of Colours

You're viewing

littlegraphix
Create a Dreamwidth Account Learn More

Reload page in style: site light

Previous | Memories | Tell Someone | Next

adlina
[littlegraphix]

18 July 2009 @ 09:23 pm

[Tabula Rasa] - Burst of Colours

BURST OF COLOURS : LIVE PREVIEW @ affogato

Layout type: Tabula Rasa
Layout Style: One Column
Easy installation

01. Go to Organize >> Select Style page. Choose show all and apply Tabula Rasa as your theme.
02. Next, select "1 Column (no sidebar)" when asked to choose a page setup. Apply layout.
03. Hit 'Customize Selected Theme' and go to Custom CSS.
04. Untick 'use layout's stylesheet(s)'. Make sure you do this. We don't want overlapping styles.
05. Put this link into the field ''use an external stylesheet": http://wimg.co.uk/2TC.css
06. Alternatively, you may access the CSS file from your browser, select all text and paste into the 'use embedded CSS' field. This is preferrable if you want to alter bits and pieces of the layout.
07. If you have a long list of links, tags and page summary, consider adding one of these lines to the existing codes:

/* For Tags */ 
.module-tags_list ul{ 
height: 200px; /*or whatever height you want */ 
overflow: auto; 
overflow-x: hidden; 
padding:0px;}  

/* For Links */ 
.module-typelist ul{ 
height: 200px; /*or whatever height you want */ 
overflow: auto; 
overflow-x: hidden; 
padding:0px;}  

/*For Page Summary*/ 
.module-pagesummary ul{ 
height: 200px; /*or whatever height you want */ 
overflow: auto; 
overflow-x: hidden; 
padding:0px;}  

/* Extra long lists for ALL of three of the above */ 
.module-typelist ul, .module-tags_list ul, .module-pagesummary ul{ 
height: 200px; /*or whatever height you want */ 
overflow: auto; 
overflow-x: hidden; 
padding:0px;}

08. Save your changes and that's it! Enjoy your new layout. Please consider crediting

adlina or

littlegraphix somewhere in your profile if you use it~

Tags: layout: one-column, layout: tabula rasa

56 comments | Leave a comment

Page 1 of 2
<<	[1] [2]	>>

( Post a new comment )

yvi on July 18th, 2009 10:26 am (UTC)

Oh, so pretty *applies and credits*

(Reply) (Thread) (Link)

adlina on July 18th, 2009 10:41 am (UTC)

Thanks! Glad you like ;)

(Reply) (Parent) (Link)

phoenix on July 18th, 2009 10:28 am (UTC)

Ooh, that's just *lovely*. I'm really tempted to use it (though I'm trying to make myself make a layout instead and having a nice layout wouldnt encourage that).

(Reply) (Thread) (Link)

adlina on July 18th, 2009 10:42 am (UTC)

Thanks for the compliment ^^ I'm sure you'll do just fine, good luck!

(Reply) (Parent) (Link)

turlough on July 18th, 2009 12:44 pm (UTC)

VERY nice!! Definitely one of the pretties and most usable custom layouts I've seen on DW so far. I'm not taking it (I always use layouts I've made myself) but I wanted to tell you.

(Reply) (Thread) (Link)

adlina on July 18th, 2009 02:26 pm (UTC)

Thank you! I'm still trying to improve ^^

(Reply) (Parent) (Link)

josiemus_prime on July 18th, 2009 01:03 pm (UTC)

Awesome! I'm using it at my other journal with credit ♥

(Reply) (Thread) (Link)

adlina on July 18th, 2009 02:27 pm (UTC)

Cool, thank you! Glad you liked :D

(Reply) (Parent) (Link)

moriarty on July 18th, 2009 02:22 pm (UTC)

That is absolutely gorgeous! +Mems for future use :D

(Reply) (Thread) (Link)

adlina on July 18th, 2009 02:28 pm (UTC)

Glad you like! Thanks!

(Reply) (Parent) (Link)

omgaeula on July 18th, 2009 03:55 pm (UTC)

Lovely! I am bookmarking for future use. Thank you for sharing!

(Reply) (Thread) (Link)

adlina on July 18th, 2009 04:34 pm (UTC)

Glad you like, thanks!!

(Reply) (Parent) (Link)

ex_luludi775 on July 18th, 2009 04:16 pm (UTC)

It's lovely! Is there a way to make it wider, though? I need about twice that much room.. lol ;)

(Reply) (Thread) (Link)

adlina on July 18th, 2009 04:26 pm (UTC)

Thanks~ :)

If you want it wider, you'll have to change the width values of all three of the properties below to your liking. The widths of .one-column #secondary and .one-column #tertiary must add up to the width of #canvas for it to work properly.


#canvas {
width:600px;
background:#000;
margin:0 auto
}
.one-column #secondary {
float:left;
width:300px
}
.one-column #tertiary {
float:right;
width:300px
}

Edited 2009-07-19 02:50 am (UTC)

(Reply) (Parent) (Link)

kateness on July 18th, 2009 05:45 pm (UTC)

GORGEOUS. Definitely memming this for later use. :)

(Reply) (Thread) (Link)

adlina on July 18th, 2009 11:54 pm (UTC)

Thank you! Glad you like :)

(Reply) (Parent) (Link)

lucybird on July 18th, 2009 05:52 pm (UTC)

ooh this is pretty, still sticking to my current one though I think

(Reply) (Thread) (Link)

adlina on July 19th, 2009 12:00 am (UTC)

Thanks for the input ^^

(Reply) (Parent) (Link)

shiegra on July 18th, 2009 06:30 pm (UTC)

This is lovely! Thank you for making.

(Reply) (Thread) (Link)

adlina on July 19th, 2009 12:06 am (UTC)

Thank you! And you're welcome :)

(Reply) (Parent) (Link)

lyktemenn on July 18th, 2009 09:17 pm (UTC)

So very pretty:D Snagged and credited.

(Reply) (Thread) (Link)

adlina on July 19th, 2009 12:02 am (UTC)

Sweet~ Glad you like!

(Reply) (Parent) (Link)

azurite on July 18th, 2009 10:05 pm (UTC)

Colors! And shiny! I've already applied and credited. Thanks!

(Reply) (Thread) (Link)

adlina on July 19th, 2009 12:03 am (UTC)

Cool, thanks! Enjoy~

(Reply) (Parent) (Link)

baggyeyes on July 18th, 2009 10:19 pm (UTC)

Thank you for sharing. I will definitely credit when I use this. :)

(Reply) (Thread) (Link)

adlina on July 19th, 2009 12:03 am (UTC)

You're welome :) Thanks for checking it out!

(Reply) (Parent) (Link)

orchidfire on July 19th, 2009 07:58 am (UTC)

Cute layout; I'm using it at

orchidfire :D Question, though—the bottom of my page doesn't look like yours; do I need to mess with the module order, and, if so, how? Thanks!

(Reply) (Thread) (Link)

adlina on July 19th, 2009 11:27 am (UTC)

Thanks, I'm glad you like it :)

What you'd like to be on the left side goes under Group One, and everything on the right goes under Group Two. Does that help?

(Reply) (Parent) (Thread) (Link)

orchidfire on July 19th, 2009 03:11 pm (UTC)

nakuru on July 19th, 2009 03:21 pm (UTC)

It's so pretty! I'm definitely going to use it ♥

(Reply) (Thread) (Link)

adlina on July 20th, 2009 06:04 am (UTC)

Thank you ^^

(Reply) (Parent) (Link)

jesslove on July 19th, 2009 06:25 pm (UTC)

I likey. It's definitely unique and cute! Thanks!

(Reply) (Thread) (Link)

adlina on July 20th, 2009 06:05 am (UTC)

You're welcome, and thanks for checking it out :D

(Reply) (Parent) (Link)

wishfulclicking on July 19th, 2009 06:38 pm (UTC)

I ended up using it and it came out so good! Your instructions are very clear, I didn't have any mishaps and this is my first time playing around with layouts on LJ and DW.

Thanks for making this, and I'll definitely credit on my profile :)

(Reply) (Thread) (Link)

adlina on July 20th, 2009 06:03 am (UTC)

I'm glad you found no prob with it ^^ Enjoy it~

(Reply) (Parent) (Link)

siriusgirl9 on July 19th, 2009 09:21 pm (UTC)

Going to use for my comm, will credit thanks!

(Reply) (Thread) (Link)

adlina on July 20th, 2009 06:04 am (UTC)

You're welcome and thank you! I haven't tested it with communities, so do tell if you run into any probs :)

(Reply) (Parent) (Link)

fearless on July 20th, 2009 04:15 am (UTC)

Love the concept but I do wish you had made the content area a bit bigger and had both a one column version and a 2 column version. Regardless, well done!

(Reply) (Thread) (Link)

adlina on July 20th, 2009 06:01 am (UTC)

Thanks for the input. I'm actually making two and three column versions of it, as well as one with fluid width :)

(Reply) (Parent) (Thread) (Link)

azurite on July 21st, 2009 02:25 am (UTC)

fearless on October 26th, 2009 07:03 pm (UTC)

impalalove on July 20th, 2009 09:03 pm (UTC)

Gorgeous. Mem+.

ghosthack on July 21st, 2009 10:03 pm (UTC)

This is really cool! I don't normally use other people's layouts and stuff, I always make my own... at LiveJournal that is. I'm having a bit of trouble getting the hang of it over here. So until I do, I'm going to use this, it's just beautiful! I hope you don't mind if I make just a few altercations. Thanks for making this, and double thanks for sharing! :)

lindevi on July 27th, 2009 03:42 pm (UTC)

Beautiful and fun! I love the bottom navigation theme, not to mention the colors! So brilliant and original. Snagging and crediting, merci.

boosette on July 28th, 2009 02:44 pm (UTC)

I love this layout - thank you *so much* for coding it for us!

tokiwartooth on July 29th, 2009 03:32 am (UTC)

I was trying to do the thing where you copy/paste from the source, but maybe I did it wrong? All I got was a white bg with plain, black text. *Blinks* I wonder if I copied it incorrectly??

I mean, I put in the http: one you provided, but I wanted to change the text from Verdana to something else...so I was trying to do that first thing. x.x;

(Reply) (Thread) (Link)

adlina on July 29th, 2009 06:08 am (UTC)

Oh, now that's weird. Maybe your browser is refusing to open .css file? Anyway, I've pasted the whole code for you here:


h1,h2,h3 {
margin:.25em 0;
padding:.25em 0
}

img {
border:none;
padding:5px
}

.entry-content hr,.comment-content hr {
display:block;
margin:1em 10%
}

body {
font-family:Verdana, sans-serif;
font-size:8.5pt;
background-color:silver;
background-image:url(http://i45.photobucket.com/albums/f59/angel_adlina/tabula01-bg.png);
background-repeat:repeat-x;
background-position:top;
letter-spacing:.5px;
line-height:15px;
margin:0 auto;
padding:0
}

.userpic {
float:left;
padding:0 5px 5px 0;
position: relative
}

a,a:active,a:visited {
color:#8e7997;
text-decoration:none
}

a:hover {
color:#000;
cursor:help
}

#canvas {
width:600px;
background:#000;
margin:0 auto
}

.one-column #canvas {
float:none;
background:#000
}

#footer {
clear:both;
text-align:center;
background-image:url(http://i45.photobucket.com/albums/f59/angel_adlina/tabula01-headerbg.png);
background-position:bottom;
background-repeat:repeat-x;
margin:0;
padding:.5em .5em 30px
}

#header {
clear:both;
text-align:center;
background-color:#000;
background-image:url(http://i45.photobucket.com/albums/f59/angel_adlina/tabula01-headerbg.png);
background-position:top;
background-repeat:repeat-x;
color:#FFF;
margin:0;
padding:30px .5em .5em
}

#subtitle {
font-weight:400;
color:#f0ccff;
font-style:italic
}

#primary {
float:left;
width:100%;
margin-right:-100%;
margin-left:0;
background:#FFF
}

.one-column #primary {
float:none
}

#primary > .inner:first-child {
padding:1em
}

.one-column #secondary {
float:left;
width:300px
}

#secondary > .inner:first-child {
background:#000;
color:#FFF;
padding:1em
}

#secondary ul {
display:block
}

.module-list-item {
list-style-type:none;
background:url(http://i25.tinypic.com/2gyd3eo.jpg);
background-repeat:no-repeat;
background-position:left;
padding-left:20px
}

.one-column #tertiary {
float:right;
width:300px
}

#tertiary > .inner:first-child {
background:#000;
padding:1em
}

.navigation li {
display:inline;
padding:0 .5em
}

.entry {
background:#FFF;
color:#383838
}

.entry .entry-title h3 {
color:#000
}

.separator-after {
height:50px;
background-image:url(http://i31.tinypic.com/moxlg.jpg);
background-repeat:no-repeat;
background-position:center
}

.entry h3 a,.entry h3 a:visited,.entry h3 a:active {
color:#000;
font-size:20px;
font-family:Verdana, sans-serif;
text-decoration:none;
font-weight:700;
margin:0 auto
}

.entry h3 a:hover {
color:#92386f
}

.entry-title {
background:url(http://i32.tinypic.com/fcv8u1.jpg);
background-repeat:no-repeat;
background-position:left;
height:32px;
padding-left:35px;
padding-top:20px
}

.datetime {
font-size:8pt;
background:url(http://i26.tinypic.com/zkfp.jpg);
background-repeat:no-repeat;
background-position:left;
height:10px;
padding-left:15px
}

.contents {
border-top:#cacaca 1px dashed;
padding-top:5px;
margin-top:5px
}

.entry-content ul li {
background: #fffced;
margin-bottom: 5px;
border-bottom: #cacaca 1px dotted;
padding: 3px;
}

.entry-content ol li {
background: #e0fce2;
margin-bottom: 5px;
border-bottom: #cacaca 1px dotted;
padding: 3px;
}

.metadata {
margin-top:5px;
float:none
}

.metadata ul {
display:block;
list-style:none;
padding:5px
}

.metadata li {
margin-bottom:2px;
background:url(http://i25.tinypic.com/2gyd3eo.jpg);
background-repeat:no-repeat;
background-position:left;
padding-left:20px
}

.tag {
float:right;
font-weight:700
}

.tag ul {
display:inline;
list-style:none;
margin-left:.5em;
padding-left:0;
font-weight:400
}

.tag ul li {
display:inline;
padding:.25em
}

.tag ul li a {
font-weight:400
}

ul.entry-management-links {
list-style:none;
margin-left:0;
padding-left:0;
border-top:#cacaca 1px dashed
}

ul.entry-interaction-links li {
display:inline;
width:100px;
padding:0 .25em
}

ul.entry-interaction-links li a {
background:#000;
color:#FFF;
padding:5px
}

ul.entry-interaction-links li a:hover {
background:red;
color:#FFF
}

.userlite-interaction-links {
clear:both;
text-align:right
}

.comment-wrapper {
padding:.5em 0
}

textarea#commenttext {
width:100%
}

table.month {
border-collapse:collapse;
margin:0 auto
}

table.month td,table.month th {
border:1px solid;
padding:3px
}

table.month td p {
margin:0;
padding:3px
}

.month dl dt {
font-weight:700
}

.month dl span.time {
padding-right:.5em
}

.month dl h3 {
display:inline;
font-size:medium
}

.month dl .tag ul {
margin-top:0
}

.module {
background:none;
color:#FFF
}

.module-content {
clear:both;
margin-bottom:10px
}

.module-content ul {
list-style:outside;
margin-left:1em;
padding-left:0
}

.module-content li {
margin:.5em 0
}

ul.userlite-interaction-links li {
display:inline;
padding:0 .20em
}

.module-calendar .module-content {
text-align:center;
display:block
}

.module-calendar table {
margin:0 auto
}

.module-calendar td {
padding:1px
}

.module-calendar td a {
display:block;
padding:2px
}

.module-navlinks {
background:none
}

.module-navlinks li {
color:#FFF;
margin-bottom:2px;
background:#795275;
border-left:#d9295f 5px solid;
padding:2px
}

.module-navlinks li a:hover {
background:#d9295f;
border-left:#795275 5px solid
}

hr,.defaultuserpic,.module-powered,.module-time {
display:none
}

#footer a:hover,.module a:hover,.module-navlinks li a,.module-navlinks ul li a:visited,.module-navlinks ul li a:active {
color:#FFF
}

#title,.module h2 {
text-transform:uppercase
}

#secondary ul li,#tertiary ul li {
list-style-type:none
}

.navigation ul,ul.comment-interaction-links,ul.userlite-interaction-links {
list-style:none;
margin-left:0;
padding-left:0
}

ul.entry-management-links li,ul.comment-management-links li,ul.comment-interaction-links li {
display:inline;
padding:0 .25em
}

ul.entry-interaction-links,ul.comment-management-links {
list-style:none;
margin-left:0;
padding-left:0;
text-align:right
}

.module-photo .module-content,.module-user-links .module-content,.module-syndicate .module-content {
text-align:center
}

(Reply) (Parent) (Thread) (Link)

tokiwartooth on July 30th, 2009 02:29 am (UTC)

rising on August 7th, 2009 10:10 am (UTC)

This is absolutely gorgeous. I've yoinked it and began to tweak it to width and text stuff specifications.

I do have one question. Is there some way that I can add some bit of css to automatically indent numbered and bulleted lists by a few pixels? At the moment, they're currently bleeding into the background on my reading page, and while I don't use them myself I do want them to display all properly shiny.