Mercy (mercscilla) wrote in street_of_mercy,
Mercy
mercscilla
street_of_mercy

  • Mood:

CSS Tutorial (for beginners) for Flexible Squares

Well, this was fun. Really... *slightly crazy look* eirenealetheia wanted a tutorial for how to tweak a CSS (of Flexible Squares) to your liking. I hope, it is easy for you (aka css-tweaking for dummies *grins*)

This is the first time I did a CSS tutorial. I just started playing with CSS two months ago, so bear with me ;)

I made screencaps from the steps (before -> after) and added them in thumbnails.

How to go from to

Part I

Go to Manage Accounts -> Customize Journal and select in the Style System box S2


Go to Look and Feel and select Flexible Squares


Go to Custom Options -> Colors. It is your decision if you want to change colors now or later in the css


Hit Save Changes

(I keep the default colors because for tutorial it's easier to work with)



Part II

a) Go to your Recent page (http://www.yourname.livejournal.com)

b) Right-click on it and select Source or Page Source

c) A page with lots, lots of HTML will come up. Look through it for this:
<link rel='stylesheet' type='text/css' media='screen'
 href='http://mercscilla.livejournal.com/res/10306362/stylesheet?1150834530' />

d) Copy & paste the link part (http://...) into the address bar of your browser and click Go

e-1) You should now see text like this:

             body    {
		background-color: #99aece;
		
		text-align: center;
                        ...

e-2) !!! If you can't find the part from step c, look for something that starts with this:

<style type="text/css">/* Cleaned CSS: */

	
	body	{
		background-color: #99aece;
		
		text-align: center;
                        ...


and ends with this:

.separator{
		/* for formatting separators between entries */
		height: 35px;
	}
    
</style>


f) Open Notepad and copy & paste this entire page (or text) into it. Save it as myljstyles.css




Part III

! From now on we will work with the CSS ! And we will make a b/w layout with a little color thrown in ;) Take a look at this image to get overview what each part is called.


Now we can start to tweak our css... open the CSS so you can follow the steps.

Body

body	{
		background-color: #99aece;
		
		text-align: center;
		color: #000000;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		margin: 20px 0 20px 0;
		}


Body is the wrapping, so to speak.

a) If I want a different background-color, I change the numbers: background-color: #99aece -> background-color: #F1F1F1;

b) To take out the margin between the layout and the top/bottom, I change the numbers for top and bottom to 0: margin: 20px 0 20px 0; -> margin: 0px 0 0px 0; [20px (top) - 0 (right) - 20px (bottom) - 0 (left)]
(DO NOT change the second and fourth number! It's going to make your layout go wacko!)

body	{
		background-color: #F1F1F1;
		
		text-align: center;
		color: #000000;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		margin: 0px 0 0px 0;
		}


->




Content

	#content
	{  	
		width: 80%;
		margin-left: auto; margin-right: auto;
		background-color: #a9b3c4;
		border-width: 1px;
		border-style: solid;
		border-color: #999999;
		padding: 15px;
	}


a) To change the width of your layout: width: 80%; -> width: 800px; (i like to work with px because it's easier)

b) DO NOT change margin-left: auto; margin-right: auto; if you want you layout to be centered!

c) To change the background-color of your content: background-color: #a9b3c4; -> background-color: #FFFFFF; because we want a white background

d) Take out the border-parts

e) Padding: is the space between the margin (and border) and the actual content. I'm gonna change it to 0: padding: 15px; -> padding: 0px; Now the content has a padding of 0px all around.
(If you want to have your content to have a padding of 13px from the right and left, you write: padding: 0px 13px 0px 13px;)

f) To ensure the position of your content, write: position: relative; top: 0px;

g) To ensure the right text-align, write: text-align: justify;

	#content
	{  	
	        width: 800px;
	        margin-left: auto; margin-right: auto;
	        background-color: #FFFFFF;
	        padding: 0px;
	        position: relative; top: 0px; 
	        text-align: justify;
	}


->




Maincontent

 	#maincontent {	 	
		margin-top: 15px;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		background-color: #c2cde0;
		color: #000000;
		border-style: solid;
		border-color: #999999;
		border-width: 1px;
		margin-right: 180px;
		text-align: left;
		}


a) To change the margin-top: margin-top: 15px; -> margin-top: 0px;

b) Take out the background-color

c) Take out the border-parts

d) Change margin-right: 180px; to margin-left: 180px; because our sidebar will be on the left, not right!

e) Change text-align: left; to text-align: center;

 	#maincontent {	 	
		margin-top: 0px;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		color: #000000;
		margin-leftt: 180px;
		text-align: center;
		}


->




Sidebar

	#sidebar {
		
		padding-top: 15px;
		margin-top: 15px;
		background-color: #c2cde0;
		border-color: #999999;
		border-width: 1px;
		border-style: solid;
	  	font-size: 11px;
		font-family: "Verdana", sans-serif;
	  	color: #000000;
		width: 160px;
		float: right;
		text-align: left;
		}


a) Your decision if you change padding-top: 15px; to padding-top: 10px;

b) Your decision if you change margin-top: 15px; to margin-top: 5px;

c) Take out the background-color

d) Take yout the border-parts

e) Change float: right; to float: left;

	#sidebar {
		
		padding-top: 10px;
		margin-top: 5px;
	  	font-size: 11px;
		font-family: "Verdana", sans-serif;
	  	color: #000000;
		width: 160px;
		float: left;
		text-align: left;
		}


->




Header

#header {		
		width: 100%;
		padding: 10px 0px 20px 0px;
		margin: 0px;
		text-align: center;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 2px;	
		border-style: solid;
		border-color: #999999;
		border-width: 1px;
		background-color: #d4dce8;
		color: #000000;	
		}


a) DO NOT change the width (unless you want your header to be a specific size)

b) Your decision if you change padding: 10px 0px 20px 0px; to padding: 15px 0px 15px 0px;

c) You decision if you cahnge margin but I did not

d) Take out the border-parts

e) Take out the background-color

->




Footer

#footer {			
		width: 100%;
		text-align: center;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 1px;
		background-color: #d4dce8;
		color: #000000;
		border-color: #999999;
		border-width: 1px;
		border-style: solid;
		z-index: 100;
		clear: both;
		}


a) Take out background-color

b) Take out the border-parts

	#footer {			
		width: 100%;
		text-align: center;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 1px;
		color: #000000;
		z-index: 100;
		clear: both;
		}


->




/* header -- links to views; title of journal; subtitle of journal */

Scroll down to

	ul.navheader li  {
		display: inline;
		padding: 0 3px 0 3px;
		}


To create a spiffy border thingy, add border-left: 1px #000000 solid; and border-right: 1px #000000 solid;. That way we get a left and right border, which width is 1px and it's solid.

If you want a border on all sides, add border: 1px #000000 solid;

	ul.navheader li  {
		display: inline;
		padding: 0 3px 0 3px;
	            border-left: 1px #000000 solid;
	            border-right: 1px #000000 solid;
		}


->

If you want to change the title and subtitel, do so. You know, like color, font-size, etc.




/* sidebar */

Scroll down to

.sbarcalendar {
		border-color: #000000;
		border-width: 1px;
		border-style: solid;
		text-align: center;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		}


Take out the border-parts

.sbarcalendar {
		text-align: center;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		}


->

Scroll down to

li.sbaritem
	{
		padding-left: 15px;
		list-style: none;		
	}


Change padding-left: 15px; to padding-left: 5px; and add padding-right: 5px;

li.sbaritem {
	padding-left: 5px;
	padding-right: 5px;
	list-style: none;	
            }


After that this code should follow:

li.sbartitle
	{
		padding-left: 15px;
		list-style: none;		
		border-style: solid;
		border-width: 1px;
		border-color: #999999;
		background-color: #919bad; 
		margin-bottom: 10px;
		margin-top: 10px;
	} 


a) Take out padding-left: 15px;

b) Take out the border-parts and add instead: border-bottom: 1px #000000 dotted;

c) Change the background-color to #F1F1F1

d) Add text-align: center; to center the titles

li.sbartitle
	{
		list-style: none;		
		border-bottom: 1px #000000 dotted;
		background-color: #F1F1F1; 
		margin-bottom: 10px;
		margin-top: 10px;
                        text-align: center;
	} 


->




/* maincontent */

Scroll down to

.entry	{
		margin: 0px 10px 10px 30px;
		padding: 10px;
		background-color: #d4dce8;
		color: #000000;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		text-align: left;
		border-width: 1px;
		border-color: #919bad;
		border-style: solid;
		}


a) Change margin: 0px 10px 10px 30px; to margin: 0 0 0 1px;

b) Take out the background-color

c) Change text-align: left; to text-align: justify;

d) Take out the border-parts

.entry	{
		margin: 0 0 0 1px;
		padding: 10px;
		color: #000000;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		text-align: justify;
		}


->

Scroll down to

.userpic {
		position: relative;
		float: left;
		background-color: #d4dce8;
		padding: 5px;
		margin: 10px;
		z-index: 15;
		border-width: 1px;
		border-color: #919bad;
		border-style: solid;
		}


a) Change float: left; to float: right;

b) Change background-color: #d4dce8; to background-color:transparent !important;

c) Change margin: 10px; to margin: 5px;

d) Take out the border-parts

.userpic {
		position: relative;
		float: right;
		background-color:transparent !important;
		padding: 5px;
		margin: 5px;
		z-index: 15;
		}


->

Scroll down to

.userpicfriends {
		position: relative;
		float: left;
		padding: 5px;
		margin: 10px;
		text-align: center;
		border-style: solid;
		border-width: 1px;
		border-color: #919bad;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		z-index: 15;
		}


a) Add background-color:transparent !important;

b) Change float: left; to float: right;

c) Change margin: 10px; to margin: 5px;

d) Take out the border-parts

e) Add text-align: center;

.userpicfriends {
	background-color:transparent !important;
	position: relative;
	float: right;
	padding: 5px;
	margin: 5px;
	text-align: center;
            font-family: "Verdana", sans-serif;
	font-size: 11px;
	z-index: 15;
	}



Scroll down to

.date {		
		line-height: 200%;		
		top: 5px;
		color: #000000;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		}


a) Change line-height: 200%; to line-height: 100%;

b) Add margin: 2px;

c) Add padding: 0px 20px 1px 20px;

d) Add font-style: italic;

.date {
	line-height: 100%;
	top: 5px;
	color: #000000;
	font-family: "Verdana", sans-serif;
	font-size: 11px;
	margin: 2px;
	padding: 0px 20px 1px 20px;
	font-style: italic;
	}


Scroll down to

.subject {			
		font-weight: bold;
		padding: 10px;
		color: #000000;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		}


a) Take out font-weight: bold; (unless you want your subjectline to be bold)

b) Add background-color: #F1F1F1;

c) Change padding: 10px; to padding: 0px 10px 1px 10px;

d) Add margin: 2px;

e) Change font-size: 11px; to font-size: 15px; (unless you prefer a small title)

.subject {
	background-color: #F1F1F1;
	padding: 0px 10px 1px 10px;
	margin: 2px;
	color: #000000;
	font-family: "Verdana", sans-serif;
	border-bottom: 2px  solid #000000;
    font-size: 15px;
	}


->

The scroll down to

	.datesubject {				
		background-color: #919bad;
		padding: 5px;
		}


a) Change background-color: #919bad; to background-color: transparent;

b) Add text-align: left;

.datesubject {
	background-color: transparent;
	padding: 5px;
	text-align: left;
            }


->

Scroll down to

	.comments {
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		text-align: right;
		background-color: #919bad;
		padding: 0px 5px 0px 5px;
		position: relative;
		top: 15px;
		}


a) Change background-color: #919bad; to background-color: #F1F1F1;

b) Change padding: 0px 5px 0px 5px; to padding: 0px 5px 10px 5px;

	.comments {
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		text-align: right;
		background-color: #F1F1F1;
		padding: 0px 5px 10px 5px;
		position: relative;
		top: 15px;
		}


Scroll down to

div.comments a, div.comments a:link, div.comments a:visited{
		color: #ffffff;
	}


a) Change the color to #000000

div.comments a, div.comments a:link, div.comments a:visited{
		color: #000000;
	}


->




/* maincontent -- entry, reply pages */

Scroll down to

.datesubjectcomment {				
			background-color: #919bad;
			padding: 5px;
			margin-top: 20px;
			}


a) Take out background-color: #919bad;

b) Add border-bottom: 1px solid #000000;

.datesubjectcomment {
	padding: 5px;
            margin-top: 20px;
	text-align: right;
	border-bottom: 1px solid #000000;
	}


->

Scroll down to

.userpiccomment {
		position: relative;
		border-width: 5px;
		border-style: solid;
		border-color: #d4dce8;
		background-color: #d4dce8;
		top: -30px;
		left: 0px;
		padding: 5px;
		margin: 10px 10px -20px 10px;
		z-index: 15;
		float: left;
		border-width: 1px;
		border-color: #919bad;
		border-style: solid;
		}


a) Change background-color: #d4dce8; to background-color:transparent !important;

b) Take out the border-parts

c) Change float: left; to float: right;

.userpiccomment {
	position: relative;
	background-color:transparent !important;
	top: -30px;
	left: 0px;
	padding: 5px;
	margin: 10px 10px -20px 10px;
	z-index: 15;
	float: right;
	}


->

Scroll down to

.box {
		border-style: solid;
		border-width: 1px 0px 0px 0px;
		border-color: #999999;
		padding: 10px;
		clear: left;
		}


a) Change border-color: #999999; to border-color: #000000;

b) Add margin-top: 15px;

c) Take out clear: left;

d) Add text-align: left;

.box {
	border-style: solid;
	border-width: 1px 0 0 0;
	border-color: #000000;
	padding: 10px;
	margin-top: 15px;
	text-align: left;
	}


->

Scroll down to

input, textarea {
		background-color: #d4dce8;
		color: #000000;
		}


a) Change background-color: #d4dce8; to background-color: #F1F1F1;

input, textarea {
                        background-color: #F1F1F1;
		color: #000000;
		}


The scroll down to

.reply	{
		position: relative;
		margin: 20px 30px 10px 30px;
		padding: 25px 10px 10px 10px;
		text-align: left;
		font-family: "Verdana", sans-serif;
		font-size: 11px;
		line-height: 125%;
		background-color: #d4dce8;
		color: #000000;
		}


a) Take out background-color: #d4dce8; (unless you want your bg to have a specific color)

.reply	{
	position: relative;
	margin: 20px 30px 10px 30px;
	padding: 25px 10px 10px 10px;
	text-align: left;
	font-family: "Verdana", sans-serif;
	font-size: 11px;
	line-height: 125%;
	color: #000000;
	}




Scroll down to

.commentbox {
		border-color: #999999; 
		border-width: 1px; 
		border-style: solid; 
		padding: 10px; 
		margin: 10px; 
		background-color: #d4dce8;
		}


a) Change border-color: #999999; to </b>border-color: #000000;</b>

b) Change padding: 10px; to padding: 5px;

c) Take out background-color: #d4dce8;

d) Add text-align: left;

.commentbox {
	border-color: #000000;
	border-width: 1px;
	border-style: solid;
	padding: 5px;
	margin: 10px;
	text-align: left;
	}


->

Scroll down to

.datesubjectcomment a:link, .datesubjectcomment a:visited {
		color: #ffffff;
		}


a) Change the color (otherwise you won't see the links in the comment parts)

.datesubjectcomment a:link, .datesubjectcomment a:visited {
		color: #000000;
		}


Scroll down to

.commentboxpartial {
		border-color: #999999; 
		border-width: 1px; 
		border-style: solid; 
		padding: 10px; 
		margin: 10px; 
		background-color: #d4dce8;
		}


a) Change border-color: #999999; to border-color: #999999;

b) Take out background-color: #d4dce8;

.commentboxpartial {
		border-color: #000000; 
		border-width: 1px; 
		border-style: solid; 
		padding: 10px; 
		margin: 10px; 
		background-color: #d4dce8;
		}


Scroll down to

.commentinfo {
		background-color: #d4dce8; 
		margin-top: 10px; 
		width: 100%;
		}


a) take out background-color: #d4dce8;

.commentinfo {
		margin-top: 10px; 
		width: 100%;
		}


->




/* maincontent -- year/achive pages */

Scroll down to

table.yeartable td.yeardate, table.yeartable td.yearday {
		border-width: 1px;
		border-style: solid;
		border-color: #999999;
                        }


a) Change border-color: #999999; to border-color: #000000;

table.yeartable td.yeardate, table.yeartable td.yearday {
		border-width: 1px;
		border-style: solid;
		border-color: #999999;
                        }


Scroll down to

table.yeartable td.yearday {
		background-color: #d4dce8;
		text-align: center;
		}


a) Change background-color: #d4dce8; to background-color: #F1F1F1;

b) Add color: #000000

table.yeartable td.yearday {
		background-color: #F1F1F1;
                        color: #000000;
		text-align: center;
		}


->




Adding a headerímage

Scroll down to

.headerimage {
		/* for formatting header image */
		}


a) Add position: relative;

b) Add the width of your headerimage

c) Add the height of your headerimage

d) Add margin-left: auto; and margin-right: auto; to center your headerimage

e) Add background-image: url(your image url);

f) Add background-position: center;

g) Add background-repeat: no-repeat

.headerimage {    
	 position: relative;
	 width: 800px;
	 height: 300px;
               margin-left: auto;
               margin-right: auto;
               margin-top: 0px;
	 background-image: url(http://www.universefairytales.com/cssheader.jpg);
	 background-position: center;         
        	 background-repeat: no-repeat
}







Part VI

Go to Manage Accounts - Customize Journal

Go to Custom Options - Custom CSS

Make sure you disable Use layout's stylesheet(s) and Use external stylesheets

Now copy & paste the CSS code into the box



Hit Save Changes

That's it *throws confetti* *dances*
Tags: tutorial, tutorial: misc
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 116 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →