Here is a nice shojo style layout, with a convenient narrow list thats moved to the left side.
There are notes in the code to customize it! To move it to the right, find Background-position in the code and change left to right.
The code, make sure you copy the entire thing in the spoiler tag from the first /* to the last } at the end.
/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!
If you're not seeing a background, make sure you are copied the
entire CSS code or added any new background image codes correctly.
Also your image link may be broken, try uploading a new background then!
*/
/*
HEADER COLOR AND FONT
These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc).
*/
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width: 600px;
}
/*
LIST COLOR
The numbers in parenthesis below control the color of your list background itself. The first number is the amount of red, the second amount of green, third blue, and each can be set to a maximum of 255 and minimum of 0. The 4th number in parenthesis is the opacity amount, which can be set from .0 (invisible) to 1 (completely opaque).
/*
ROW HOVER COLOR
Change the color you see on a row only when you put your cursor over it with this code, you use the same color change style as in the above code.
*/
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
left: 5px;
position: absolute;
}
/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.
For example, the default code starts it from the left and top corner of the screen. You change 'right' and 'top' with two properties, they can be any of the following: left, top, bottom, right, or center.
So if you want your background to start from the center of the screen, use "center center".
If you want it to start from the top and left, use "top left".
If you want it to start from the top and center, use "top center".
If you want it to start from the right and top, use "right top"
If you want it to start from the right and bottom, use "right bottom"
and so forth...
Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom.
*/
body {
background-position: top right;}
/*OTHER CODES
Important codes for the layout's setup. Please don't mess with these unless you know what you're doing! To learn more, use the link at the top of this CSS.
*/
Here is another version of the same layout, but with different colors a ecchi image and moved to the right side! To move it to the left, find background position in the code and change right to left.
The code, make sure you copy the entire thing in the spoiler tag from the first /* to the last } at the end.
/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!
If you're not seeing a background, make sure you are copied the
entire CSS code or added any new background image codes correctly.
Also your image link may be broken, try uploading a new background then!
*/
/*
HEADER COLOR AND FONT
These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc).
*/
/*
LIST WIDTH
Use this to increase the width of your list!
*/
#list_surround {
width: 600px;
}
/*
LIST COLOR
The numbers in parenthesis below control the color of your list background itself. The first number is the amount of red, the second amount of green, third blue, and each can be set to a maximum of 255 and minimum of 0. The 4th number in parenthesis is the opacity amount, which can be set from .0 (invisible) to 1 (completely opaque).
/*
ROW HOVER COLOR
Change the color you see on a row only when you put your cursor over it with this code, you use the same color change style as in the above code.
*/
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
right: 5px;
position: absolute;
}
/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.
For example, the default code starts it from the left and top corner of the screen. You change 'right' and 'top' with two properties, they can be any of the following: left, top, bottom, right, or center.
So if you want your background to start from the center of the screen, use "center center".
If you want it to start from the top and left, use "top left".
If you want it to start from the top and center, use "top center".
If you want it to start from the right and top, use "right top"
If you want it to start from the right and bottom, use "right bottom"
and so forth...
Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom.
*/
body {
background-position: center left;}
/*OTHER CODES
Important codes for the layout's setup. Please don't mess with these unless you know what you're doing! To learn more, use the link at the top of this CSS.
*/
Could you upload it at another hoster if you still have it anywhere?
And it doesn't show the whole image for me http://puu.sh/1l6J9
Can you tell me where I have wrong settings? The only thing that scrolls is the list, but I can't see the legs etc..
Could you upload it at another hoster if you still have it anywhere?
And it doesn't show the whole image for me http://puu.sh/1l6J9
Can you tell me where I have wrong settings? The only thing that scrolls is the list, but I can't see the legs etc..
as for not seeing the legs, your resolution is too small, therefore it cuts it off so the picture doesn't get distorted.
you can add the code: "Background-size: cover;" below the background image link
which will allow you to see the whole image, just scaled down to your resolution.
Hope this helps.
Could you upload it at another hoster if you still have it anywhere?
And it doesn't show the whole image for me http://puu.sh/1l6J9
Can you tell me where I have wrong settings? The only thing that scrolls is the list, but I can't see the legs etc..
as for not seeing the legs, your resolution is too small, therefore it cuts it off so the picture doesn't get distorted.
you can add the code: "Background-size: cover;" below the background image link
which will allow you to see the whole image, just scaled down to your resolution.
Hope this helps.
Thanks LordSilen, that is the same size as the original!
Thank you :) For any reason the ecchi picture doesn't fit for me, it already has the coee for the scaled down version so it should work, but it doesn't show the whole image.
Now I just used the first image with the second layout, fits better in the down scaled version, so it's ok. :P
