How to Customize Layouts
So I've come up with a little guide for tweaking layouts, because I noticed some questions come up quite frequently.
CHANGING THE BACKGROUND COLOR:
The beginnig of most of my layouts look something like this
body {
background-color: #34BEDA;
text-align: center;
color: #555555;
font-family: Helvetica, sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
Look for the section thats in red and change the hex code to whatever colour you want.
For example; White is #ffffff and Black is #000000.
Do not get rid of the # sign in front of the code
ADDING A BACKGROUND IMAGE
to add a background image, Add the section in red to the code. Put in you image url, you can upload your image to an image hosting site like TINYPIC.COM.
body {
background-color: #ffffff;
background: url ("IMAGE URL GOES HERE") repeat #ffffff
text-align: center;
color: #555555;
font-family: Helvetica, sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
If you don't want the background to repeat change the word "repeat" to "no-repeat"
There are alot options you can also add:
background: url ("IMAGE URL GOES HERE") no-repeat fixed top right #ffffff;
fixed: so that the background doesnt scroll
repeat-y: will make the background repeat only vertically
repeat-x: will make the background repeat only horizontally
top right: the position, can be: left, right, top or bottom
CHANGING THE LINKS COLOR:
The links usually look something like this
a, a:link, a:visited {
color: #BA597E;
font-weight:bold;
text-decoration: none;
font-style:italic;
}
Same thing as above.
Look for the section thats in red and change the hex code to whatever colour you want.
For example; White is #ffffff and Black is #000000.
Do not get rid of the # sign in front of the code
Here a:link, a:visited are together. Sometimes they are separate so you'll have to change each one. Each one can have it's own color, font-weight, text-decoration and font-style.
a, a:link {
color: #BA597E;
font-weight:bold;
}
a:visited {
color: #adadad;
font-weight:bold;
}
a:hover {
color: #f8f8f8;
font-weight:bold;
}
a:link - just any regular link
a:visited - a link that you've already clicked on
a:hover - when you hover your mouse over a link.
CHANGING OTHER COLORS
So this is pretty straight forward if you want to change the color of the links which just happens to be the same color of the entry title. Use the FIND TOOL in your internet browser or press CTRL + F. Type in the hex code for the color that you want to get rid of and just replace what you found. (hope that made sense)
CHANGING THE WIDTH OF A LAYOUT
This part of the code varies with the style of layout. The first is for Flexible Squares the second is for Smooth Sailing. they are pretty much the same, just the SELECTOR NAMES are different.
#content{
width: 850px;
margin-left: 20px; margin-right: auto;
background-color: #000000;
border-width: 0px;
padding: 15px;
}
.bodyblock {
width: 75%;
margin-left: auto; margin-right: auto;
background-color: #000000;
border-width: 0px;
padding: 15px;
}
Change the section of the code in RED for the width of the layout. The width can either be in pixels or a percentage.
The first one is 850px, putting a smaller number will make it narrower and putting a larger number will make is wider.
The second is 75%. So it is 75% of the size of the browser. Making the size of your browser smaller will make the layout smaller, maximizing you browser will make the layout larger.
NOTE: Some layouts are made to stay at one size and will mess everything up if you change the width or put in a percentage.
CHANGING THE POSITION OF A LAYOUT
#content{
width: 850px;
margin-left: 20px; margin-right: auto;
background-color: #000000;
border-width: 0px;
padding: 15px;
}
.bodyblock {
width: 75%;
margin-left: auto; margin-right: auto;
background-color: #000000;
border-width: 0px;
padding: 15px;
}
Change the section of the code in BLUE to change the positioning of the layout. Leaving both "AUTO" will make your layout in the center
margin-left: auto; margin-right: auto;
Or you can make it closer to left or right. Again this can be in Pixels or a Percentage. Putting in 0px will make it right up against the edge. This one has 20px, so it is 20px away from the left side.
margin-left: 20px; margin-right: auto;
CHANGING THE SIZE OF ICONS
There are three separate icon selectors;
.userpic img - This is for the icons on your RECENT ENTRIES page
.userpicfriends img - this is for the icons on your FRIENDS page
.userpiccomment - This is for the icons for COMMENTS on any page
NOTE: some layouts use the word "usericon" instead of "userpic"
.userpic img{
border-width: 0px;
background: #444444;
padding: 1px;
width:70px;
height:70px;
}
.userpicfriends img{
border-width: 0px;
background: #444444;
padding: 1px;
width:70px;
height:70px;
}
.userpiccomment {
position: relative;
border-width: 1px;
border-style: solid;
border-color: #555555;
background-color: #ffffff;
top: -30px;
left: 0px;
padding: 0px;
margin: 27px 10px -20px 0px;
z-index: 15;
float: left;
width:60px;
height:60px;
}
Change the section of the code in RED.The smaller the number the smaller the icons. personally i wouldn't go smaller than 50px. 100px is the default setting, don't go any more that 100px. If you want default sized icons you can just delete the height and width part altogether and it will reset to the default size on it's own.
The width and height must be the same number or it'll end up being a rectangle instead of a square.
FIXING THE POSITION OF ICONS
If you change the size of the userpic chances are you'll have to change the position of the icons too. It's usually pretty easy to find this becuse the format goes something like this
.userpic
.userpic img
.userpicfriends
.userpicfriends img
so look for the section that DOESN'T say "img" at the end and change the section in RED. The margin is the space around whatever it is your trying to position, in this case the icons.
.userpic {
position: relative;
float: left;
padding: 0px;
margin: 10px 5px 0px 10px;
z-index: 15;
border-width: 0px;
background: transparent!important
}
margin: 10px 5px 0px 10px;
margin: top right bottom left
each side can have it's own number, from 0 to Infinity! not that you would want to.
If you get to 0 and the postion just doesnt look right you can try negative numbers too.
Or for example; In the code above the icon has a 10px space/margin on the left, from the edge of the entry section. If you want it to be off the page you can make the right value a negative number instead.
margin: 10px 5px 0px -100px;
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
For colors and their HEX CODES I use COLORLOVERS.com
CHANGING THE BACKGROUND COLOR:
The beginnig of most of my layouts look something like this
body {
background-color: #34BEDA;
text-align: center;
color: #555555;
font-family: Helvetica, sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
Look for the section thats in red and change the hex code to whatever colour you want.
For example; White is #ffffff and Black is #000000.
Do not get rid of the # sign in front of the code
ADDING A BACKGROUND IMAGE
to add a background image, Add the section in red to the code. Put in you image url, you can upload your image to an image hosting site like TINYPIC.COM.
body {
background-color: #ffffff;
background: url ("IMAGE URL GOES HERE") repeat #ffffff
text-align: center;
color: #555555;
font-family: Helvetica, sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
If you don't want the background to repeat change the word "repeat" to "no-repeat"
There are alot options you can also add:
background: url ("IMAGE URL GOES HERE") no-repeat fixed top right #ffffff;
fixed: so that the background doesnt scroll
repeat-y: will make the background repeat only vertically
repeat-x: will make the background repeat only horizontally
top right: the position, can be: left, right, top or bottom
CHANGING THE LINKS COLOR:
The links usually look something like this
a, a:link, a:visited {
color: #BA597E;
font-weight:bold;
text-decoration: none;
font-style:italic;
}
Same thing as above.
Look for the section thats in red and change the hex code to whatever colour you want.
For example; White is #ffffff and Black is #000000.
Do not get rid of the # sign in front of the code
Here a:link, a:visited are together. Sometimes they are separate so you'll have to change each one. Each one can have it's own color, font-weight, text-decoration and font-style.
a, a:link {
color: #BA597E;
font-weight:bold;
}
a:visited {
color: #adadad;
font-weight:bold;
}
a:hover {
color: #f8f8f8;
font-weight:bold;
}
a:link - just any regular link
a:visited - a link that you've already clicked on
a:hover - when you hover your mouse over a link.
CHANGING OTHER COLORS
So this is pretty straight forward if you want to change the color of the links which just happens to be the same color of the entry title. Use the FIND TOOL in your internet browser or press CTRL + F. Type in the hex code for the color that you want to get rid of and just replace what you found. (hope that made sense)
CHANGING THE WIDTH OF A LAYOUT
This part of the code varies with the style of layout. The first is for Flexible Squares the second is for Smooth Sailing. they are pretty much the same, just the SELECTOR NAMES are different.
#content{
width: 850px;
margin-left: 20px; margin-right: auto;
background-color: #000000;
border-width: 0px;
padding: 15px;
}
.bodyblock {
width: 75%;
margin-left: auto; margin-right: auto;
background-color: #000000;
border-width: 0px;
padding: 15px;
}
Change the section of the code in RED for the width of the layout. The width can either be in pixels or a percentage.
The first one is 850px, putting a smaller number will make it narrower and putting a larger number will make is wider.
The second is 75%. So it is 75% of the size of the browser. Making the size of your browser smaller will make the layout smaller, maximizing you browser will make the layout larger.
NOTE: Some layouts are made to stay at one size and will mess everything up if you change the width or put in a percentage.
CHANGING THE POSITION OF A LAYOUT
#content{
width: 850px;
margin-left: 20px; margin-right: auto;
background-color: #000000;
border-width: 0px;
padding: 15px;
}
.bodyblock {
width: 75%;
margin-left: auto; margin-right: auto;
background-color: #000000;
border-width: 0px;
padding: 15px;
}
Change the section of the code in BLUE to change the positioning of the layout. Leaving both "AUTO" will make your layout in the center
margin-left: auto; margin-right: auto;
Or you can make it closer to left or right. Again this can be in Pixels or a Percentage. Putting in 0px will make it right up against the edge. This one has 20px, so it is 20px away from the left side.
margin-left: 20px; margin-right: auto;
CHANGING THE SIZE OF ICONS
There are three separate icon selectors;
.userpic img - This is for the icons on your RECENT ENTRIES page
.userpicfriends img - this is for the icons on your FRIENDS page
.userpiccomment - This is for the icons for COMMENTS on any page
NOTE: some layouts use the word "usericon" instead of "userpic"
.userpic img{
border-width: 0px;
background: #444444;
padding: 1px;
width:70px;
height:70px;
}
.userpicfriends img{
border-width: 0px;
background: #444444;
padding: 1px;
width:70px;
height:70px;
}
.userpiccomment {
position: relative;
border-width: 1px;
border-style: solid;
border-color: #555555;
background-color: #ffffff;
top: -30px;
left: 0px;
padding: 0px;
margin: 27px 10px -20px 0px;
z-index: 15;
float: left;
width:60px;
height:60px;
}
Change the section of the code in RED.The smaller the number the smaller the icons. personally i wouldn't go smaller than 50px. 100px is the default setting, don't go any more that 100px. If you want default sized icons you can just delete the height and width part altogether and it will reset to the default size on it's own.
The width and height must be the same number or it'll end up being a rectangle instead of a square.
FIXING THE POSITION OF ICONS
If you change the size of the userpic chances are you'll have to change the position of the icons too. It's usually pretty easy to find this becuse the format goes something like this
.userpic
.userpic img
.userpicfriends
.userpicfriends img
so look for the section that DOESN'T say "img" at the end and change the section in RED. The margin is the space around whatever it is your trying to position, in this case the icons.
.userpic {
position: relative;
float: left;
padding: 0px;
margin: 10px 5px 0px 10px;
z-index: 15;
border-width: 0px;
background: transparent!important
}
margin: 10px 5px 0px 10px;
margin: top right bottom left
each side can have it's own number, from 0 to Infinity! not that you would want to.
If you get to 0 and the postion just doesnt look right you can try negative numbers too.
Or for example; In the code above the icon has a 10px space/margin on the left, from the edge of the entry section. If you want it to be off the page you can make the right value a negative number instead.
margin: 10px 5px 0px -100px;
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
For colors and their HEX CODES I use COLORLOVERS.com