spandexy | babby's first layout

let's be real here for a second: i don't have a god damn clue what i'm doing.

live preview:

carapacing
this is me opening notepad, scrawling bits and pieces of code down, laboriously studying how other people made their journal layouts, creating the basest of frameworks i can, and then testing out a few cute little beautification options to see if i can do things like make corners rounded or make a background translucent. and then getting pissed off at all the extraneous junk floating around and sweeping it all under the "display: none" rug.

so let's make this absolutely crystal clear: this is a terrible layout for terrible people and therefore you are wholly encouraged to edit the FUCK out of this layout.

that is why i added LOTS AND LOTS OF EDITOR'S COMMENTS to label stuff and talk about which bits of code affect which components of the page. i ramble a lot in some places. you should be able to use my dumb comments to figure out the basics of how dreamwidth css functions. you're welcome. have fun. and please make a better layout than this one someday.

HOW TO INSTALL THIS TERRIBLE LAYOUT

0. (optional) read through the "babby's first layout" CSS and edit the FUCK out of it

1. go to your journal customisation page

2. select any Tabula Rasa style

3. page setup: 2 Column (sidebar on the left)

4. go to advanced customisation

5. click Custom CSS

6. uncheck "Use layout's stylesheet(s)"

7. paste the "babby's first layout" CSS into the big box

BABBY'S FIRST LAYOUT CSS

/* BABBYS FIRST LAYOUT by SMALLDEER */

/* --- HEADER --- */

/* this is how your Journal Title is displayed. it should appear above the circle icon on the left over the sidebar. */

#header {
	z-index: 2;
	position: absolute;
	margin-top: 10px;
	background: transparent;
	padding-left: 10px;
	padding-right: 10px;
	font-family: Calibri;
	font-size: 20px;
	text-shadow: 0 0 3px #ffffff;
	color: #0e3343;
	width: 200px;
}

/* --- BODY --- */

/* this specifies all the basic stuff. maybe don't mess with the text-align
as it applies to the WHOLE PAGE on a base level and will fuck everything up.

please, PLEASE re-save the background and upload it somewhere else,
or use a different background image (or none). if my photobucket bandwidth breaks
because everybody hotlinked, i'm not fixing it. */

body {
	text-align: justify;
	background-color: #FFFFFF;
	background: url(http://i1150.photobucket.com/albums/o612/whitescientist/fancygrey_zpsjd52iqvt.png) repeat;
	background-attachment: fixed;
}

/* --- END OF BODY --- */

/* --- LINK STYLES --- */

/* these change all the normal hyperlinks on the page
from that ugly default blue colour. edit away! */

a, a:link, a:visited {
	color: #487e95;
	text-transform:uppercase;
	text-decoration: none;
}

a:hover {
	color: #8bc5dd;
}

/* this one is for the weird dreamwidth user tag link! */

.ljuser a {
	color: #933157;
}

/* --- END OF LINK STYLES --- */

/* --- IMPORTANT --- */

/* things you can probably safely mess with: color, font size, line height, text decoration
a personal note: petition to stop tiny fonts.... in the age of huge monitors with tiny pixels,
your tiny fonts are proving a huge accessibility issue. i don't even HAVE major vision issues
and tiny fonts strain the heck out of my eyes. please stick to at least 12px and above?
thanks. i love you. have fun out there, sport */

#inner {
	position: absolute;
	background-color: transparent;
	overflow: hidden;
	text-align: justify;
	color: #ffffff;
	font-family: Calibri;
	font-size: 16px;
	line-height: 16px;
	text-decoration: none;
}

/* --- ENTRIES --- */

/* this whole part applies to actual journal entries */

#primary {
	z-index: 3;
	border: none;
	border-radius: 20px;
	overflow: visible;
	height: auto;
	color: #27576b;
	font-family: Calibri;
	font-size: 16px;
	text-decoration: none;
	position: absolute;
	margin-left: 300px;
	margin-top: 20px;
	margin-right: 200px;
}

/* this stuff specifies the journal entry background!
the "wrapper" is basically the jacket the content wears */

.entry-wrapper {
	background-color: rgba(0, 0, 0, 0.9);
	border-radius: 10px;
	padding-bottom: 10px;
}

/* the header and footer are pretty self-explanatory.
they're the top & bottom "pieces" of the journal entry,
though these also become default for other headers & footers */

.header {
	text-align: center;
}

.footer {
	text-align: center;
}

/* this is for the date and time displayed on a journal entry */

span.datetime, .datetime a, .datetime a:hover {
	padding-top: -10px;
	color: rgba(255,255,255,0.7);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size: 10px;
	line-height: 10px;
}

/* ok this part is important. the entry-content is
basically the interior decorating of your journal entries.
feel free to experiment */

.entry-content {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	min-height: 150px;
}

/* this part specifies the maximum size of images
within journal entries. 100% will limit images to the full
width of the entry itself, or you can specify a px value.
the "height: auto" part automatically matches
the height to the width, so images keep their aspect ratio */

.entry-content img, .comment-content img {
	max-width: 100%;
	height: auto;
}

/* the primary userpic is the one that floats beside journal entries.
you can turn this off by adding display: none;
or you can change the size or make it rounded or whatever */

div#primary .userpic img {
	float: right;
	margin-right: -150px;
	margin-top: -50px;
	border: 10px solid rgba(0, 0, 0, 0.9);
}

/* this bit shows the username of the person who posted
the entry. you can turn it off, tweak the aesthetics, etc.
having this visible is often useful for community journals */

span.poster.entry-poster {
	margin-top: 80px;
	margin-right: -150px;
	text-align: center;
	float: right;
	width: 120px;
	background-color: rgba(0, 0, 0, 0.9);
	font-family: Calibri;
	font-size: 16px;
}

/* all this tag stuff specifies what journal entry tags look like. */

span.tag-text {
	text-transform: uppercase;
	font-color: #ffffff;
	
}

.tag {
	padding-top: 10px;
	list-style: none;
}

.tag ul {
	display: inline;
	font-size: 16px;
	padding: 10px;
	line-height: 16px;
	list-style: none;
}

.tag ul li {
	display: inline;
	padding: 5px;
}

.tag ul li a {
	color: #cd5e89;
	background-color: #1a010b;
	padding: 5px;
	font-weight: bold;
}

.tag ul li a:hover {
	color: #f395b9;
}

/* entry management links are the ones you click to edit an entry
or to add it to your memories etc. */

ul.entry-management-links {
	color: #cd5e89;
	font-family: Calibri;
	font-size: 14px;
}

ul.entry-management-links li {
	display: inline;
	padding: 5px;
}

ul.entry-management-links.text-links {
	padding: 0px;
}

/* the metadata is basically all the stuff like current mood, location, music, etc */

.metadata ul {
	display: inline block;
	list-style: none;
	margin-top: 0px;
	margin-bottom: 0px;
}

.metadata-item-location, .metadata-item-music, .metadata-item-mood {
	color: #933157;
}

/* this part changes what blockquotes look like.
same rules for the photobucket links, please! aka host
your own you bandwidth-sucking varmints */

blockquote {
	font-size: 14px;
	line-height: 1.3;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	margin: 10px 10px 10px 10px;
	background: transparent url(http://i1150.photobucket.com/albums/o612/whitescientist/misc%20storage/bg_zpsplu7tnk5.png) repeat;
	border-radius: 10px;
}

/* this is for when you use the html textarea tag
to show some copy-pasteable code or whatever */

textarea {
	background: transparent url(http://i1150.photobucket.com/albums/o612/whitescientist/misc%20storage/bg_zpsplu7tnk5.png) repeat;
	color: #27576b;
}

/* --- TITLES AND HEADERS --- */

/* ok, there are basically a bunch of different "h" html tags
for varying sizes and styles of header text so that users can
organise their posts into sections with nice-looking titles.

feel free to experiment with these, just be aware that certain parts
of your journal's building blocks are set up to use the header tags,
so it's important to make sure they match.

if you still don't understand what these are, try using a h2
or whatever in a journal post and previewing it with a few different numbers! */

h1#title {
	position: relative;
	width: 100%;
	text-align: center;
	font-size: 26px;
	line-height: 20px;
	font-family: Calibri;
	text-transform: uppercase;
	text-decoration: none;
	color: #ffffff;
	letter-spacing: 2px;
	padding-bottom: 10px;
}

h2 {
	width: auto;
	font-size: 20px;
	line-height: 20px;
	font-family: Calibri;
	text-transform: uppercase;
	text-decoration: none;
	color: #8bc5dd;
	letter-spacing: 5px;
	position: relative;
	left: 20px;
	float: left;
}

h3 {
	margin-bottom: 0px;
}

h3.entry-title a {
	padding-top: 15px;
}

h3.entry-title a {
	display: inline-block;
	font-size: 20px;
	font-family: Calibri;
	text-transform: uppercase;
	letter-spacing: 5px;
	color: #ffffff;
	text-shadow: 0 0 3px #ffffff;
	text-align: center;
	padding-top: 20px;
	width: 80%;
	margin-bottom: 0px;
}

h4 {
	margin-top: 5px;
}

/* --- COMMENTS SECTION --- */

/* this specifies what commenters' userpics look like. */

.comment .userpic img {
	float: left;
	height: 70px;
	width: 70px;
	border: 10px solid rgba(0, 0, 0, 0.9);
}

/* this is what the body text of comments looks like */

.comment-content {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: justify;
}

/* the management and interaction links are the ones
you click to edit and delete comments and reply to comments */

ul.comment-management-links {
	display: inline;
	padding: 5px;
	font-size: 14px;
	list-style-type: none;
}

ul.comment-management-links li {
	display: inline;
	list-style-type: none;
}

ul.comment-interaction-links {
	display: inline;
	padding: 5px;
	font-size: 14px;
}

ul.comment-interaction-links.text-links, ul.entry-interaction-links {
	display: inline;
	padding: 5px;
	font-size: 14px;
}

ul.comment-interaction-links.text-links a, ul.entry-interaction-links a {
	color: rgba(255, 255, 255, 0.7);
}

ul.comment-interaction-links.text-links a:hover, ul.entry-interaction-links a:hover {
	color: #ffffff;
	text-shadow: 0 0 3px #ffffff;
}

ul.comment-interaction-links li, ul.entry-interaction-links li {
	display: inline;
	padding: 5px;
	margin-bottom: 5px;
}

/* the comment title is the subject line of a comment */

h4.comment-title {
	background-color: transparent;
	margin-bottom: 0px;
}

h4.comment-title a {
	font-size: 16px;
	font-family: Calibri;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: #ffffff;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}

/* this specifies where the date and time stuff of a comment goes */

#comments .inner {
	text-align: center;
}

/* this is for displaying a commenter's username and ip address */

span.comment-from-text, span.comment-ip-text {
	text-transform: uppercase;
}

span.comment-poster, span.poster-ip {
	padding: 10px;
}

/* this is the little piece of text that appears when you post
a comment that tells you the comment was successfully posted */

div.comment-posted {
	text-align: center;
	color: #ffffff;
	text-shadow: 0 0 3px #ffffff;
	text-transform: uppercase;
	font-weight: bold;
}

/* this specifies where the comments go on the page.
the margin-left thing i wrote here makes a top-level comment
indent about 20px from the left hand side of the entry width.
if you're still confused, change it to 200px, refresh the page
and watch what happens to the comments. */

#comments { margin-left: 20px; }

/* the wrapper is the jacket the comments wear, in this case
the black translucent background with rounded corners. */

.comment-wrapper {
	background-color: rgba(0, 0, 0, 0.9);
	border-radius: 10px;
	padding: 10px;
}

/* these are the "flat" "top level comments only" links */

.comment-pages.toppages {
	text-align: center;
	font-size: 14px;
}

.comment-pages.bottompages {
	text-align: center;
	font-size: 14px;
}

/* --- COMMENTS SECTION ENDS HERE --- */

/* --- SIDEBAR --- */

/* this specifies the basics for the sidebar,
including the background and font */

div#secondary {
	display: inline;
	position: absolute;
	width: 200px;
	height: auto;
	margin-left: 10px;
	background-color: rgba(0, 0, 0, 0.9);
	text-decoration: none;
	font-family: Calibri;
	font-size: 16px;
	overflow: visible;
	float: left;
}

/* this specifies what the sidebar userpic looks like.
feel free to turn it off with display: none; */

div#secondary .userpic img {
	display: block;
	position: relative;
	margin-left: 50px;
	margin-right: 50px;
	margin-top: 90px;
	z-index: 4;
	border-radius: 50px;
}

/* this is the journal username that appears on the sidebar */

div.journal-name {
	text-align: center;
	text-transform: uppercase;
	font-family: Calibri;
	font-size: 18px;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 0 3px #ffffff;
	letter-spacing: 2px;
	padding-top: 5px;
}

/* this pads out the sidebar links */

ul.module-list {
	padding: 5px;
	margin-top: 10px;
}

/* these specify what the sidebar links look like */

.module-list-item, .module-list-item a {
	display: block;
	width: 100%;
	text-align: center;
	font-family: Calibri;
	letter-spacing: 1px;
	color: rgba(255,255,255,0.7);
}

.module-list-item a:hover {
	display: block;
	width: 100%;
	text-shadow: 0 0 3px #ffffff;
	color: #ffffff;
}

/* the rest of these are to do with the different modules
you can enable or disable in the journal customisation settings.
these aren't comprehensive of all of them, because i'm lazy */

div.module-navlinks.module {
	font-size: 20px;
}

div.module-tags_list.module {
	font-size: 14px;
	list-style: none;
}

.manage-link {
	display: block;
	text-align: center;
	font-size: 14px;
	margin-top: -10px;
}

div.module-typelist.module {
	background-color: #ff0000;
	display: inline;
}

div.module-typelist.module a {
	background-color: #ff0000;
	display: inline;
}

div.module-content {
	color: #27576b;
}

div.module-calendar.module {
	margin-left: 30px;
}

div.module-customtext.module {
	padding: 10px;
}

div.module-powered.module {
	position: fixed;
	bottom: 20px;
	left: 20px;
	font-family: Calibri;
	font-size: 10px;
	text-transform: lowercase;
	color: #010e13;
	background-color: rgba(0, 0, 0, 0.6);
}

div.module-time.module {
	position: fixed;
	bottom: 5px;
	left: 20px;
	font-family: Calibri;
	font-size: 10px;
	text-transform: lowercase;
	color: #8bc5dd;
	background-color: rgba(0, 0, 0, 0.6);
}

/* this is the little thing you can click to open
all the cut tags on a journal page at once */

div.module-cuttagcontrols.module {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* --- MISC ---*/

/* these are for the link you click to go forward or back a page of entries */

div.inner li.page-back {
	list-style-type: none;
	background-color: transparent;
	display: inline;
}

li.page-forward {
	list-style-type: none;
	background-color: transparent;
	text-align: right;
	padding-right: 40px;
}

/* this is the post box thing for posting comments and such */

form#postform {
	background-color: rgba(0, 0, 0, 0.9);
	border-radius: 10px;
}

/* this changes what selections look like, aka when you highlight
some text on the page with your mouse */

::selection {
  background: #cd5e89;
}

::-moz-selection {
  background: #cd5e89;
}

/* this is a universal thing for lists? the bullet-pointed kind.
but, uh, lists are also used for a lot of other things on dreamwidth
pages, so be careful when you tweak it and preview as you go.

right now it's just set to indent lists a little bit from the left. */

ul {
	padding-left: 15px;
}

/* --- EXTRA PAGES --- */

/* look, if you've gotten this far, you've probably figured out
the basics on what all the css bits and pieces refer to. and the
thing is, i hate styling the extra pages and i'm feeling lazy right now.
so there'll be no more comments from now on. i'm, like, mega bored
and by now you should have already gotten the basic gist lmao sorry */

/* TAGS PAGE */

div.tags-container {
	background-color: rgba(0, 0, 0, 0.9);
	border-radius: 10px;
	padding: 10px;
	list-style: none;
}

ul.ljtaglist.tags_multilevel {
	display: inline block;
	list-style: none;
	width: 500px;
	padding-top: 50px;
	padding-bottom: 50px;
	margin-bottom: 0px;
}

li.visibility-public {
	margin-top: 5px;
}

/* ARCHIVE PAGE */
div#archive-year {
	background-color: rgba(0, 0, 0, 0.9);
	border-radius: 10px;
	padding: 10px;
	list-style: none;
	text-align: center;
	width: 250px;
}

div.month {
	text-align: center;
}

table.month {
	text-align: center;
	width: 240px;
	height: 240px;
}

caption {
	display: none;
}

span.label {
	height: 20px;
}

li.active {
	list-style: none;
}

/* --- HIDDEN STUFF --- */

/* you can make these visible if you're curious,
but i don't advise it unless you feel like having a learning experience.

i'll admit, most of these are invisible because i'm either being a lazy bum,
or they seemed important to have just in case but i couldn't figure out what they were.
so, uh, it might be worth playing around a bit.

sorry my code is such a mess, you guys.
the majority of the time i have no idea what i'm doing.
you're welcome. */

h2.module-header {
	display: none;
}

ul.userlite-interaction-links.icon-links {
	display: none;
	padding: 10px;
}

ul.userlite-interaction-links.icon-links li {
	display: inline;
	padding: 10px;
}

ul.userlite-interaction-links.text-links {
	display: none;
	padding: 10px;
}

.bottomcomment ul.entry-management-links.text-links { display:none; }

h2#pagetitle, h2#subtitle {
	display:none;
}

li.page-separator { display: none; }

div.separator.separator-after { display: none; }

hr.above-entry-interaction-links { display: none; }

hr.below-reply-container { display: none; }

div.page-top { display: none; }

li.link.link_next { display: none; }

li.link.link_prev.first-item { display:none; }

div.navigation.bottomnav { display:none; }

/* --- END OF HIDDEN STUFF --- */

and you're done.

shine on, you crazy diamonds.

babby's first layout

HOW TO INSTALL THIS TERRIBLE LAYOUT

no subject

no subject

no subject

no subject