See the full details in pics below!
Upper-right: Icon style menu bar (black bar and category links)
Upper-left: Custom banner with customizable text (in purple)
Lower-right: Weather widget
Not seen: Custom cursor, titles become DVD covers on cursor point (see below)
Anime titles convert into their DVD cover pics when you put your cursor on the rows!
If you want a beginner's layout with an easy to change background and fonts plus other add-ons this is for you. All these add-ons are easy to remove or change. Just look through the CSS notes and find the part you wan to change. For example if you want to remove the weather widget the bottom, or change it to your own city, scroll down a little to WIDGET. It tells you how to remove the weather widget and gives a link to where to go to change it to your city!
Got a question? Just post below.
Get the CSS from these spoilers! Copy and paste everything from the spoiler from the first @ to the last } To use this layout on a manga list, change the "anime" in animetitle in the top lines to "manga".
Anime code for layout as seen in the pics above. Has the Icon style toolbar and menu button which lets you sift through your categories.
/*
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!
*/
To remove the weather widget altogether, just delete "#inlineContent". Also to lower or raise the widget, change 130% (after background-position) to a new %, preferably 100 to 130%.
*/
#inlineContent {
background-attachment: scroll;
background-image: url(http://tinyurl.com/bo2n6ko);
background-position: 99% 130%;
background-repeat: no-repeat;
bottom: 0;
display: inline !important;
height: 200px;
margin-bottom: 0;
pointer-events: none;
position: fixed;
right: 0;
width: 100%;
z-index: -2;
}
/*
CUSTOM BANNER
"Background image" controls the image seen, change out the link to change the banner pic.
To Remove the banner, remove #list_surround from this part
*/
#list_surround {
background-image: url(http://i.imgur.com/WkWirCx.png);
background-position: right top;
background-repeat: no-repeat;
}
/*
CUSTOM BANNER MESSAGE
Put you message in the quotations after content. Change the font size here too.
Increase or decrease padding-left and top to move the message.
By default it says "Welcome to my list!"
To remove the message, delete whats between the quotations after content.
*/
#list_surround:before{
color: purple;
content: " Welcome to my list!";
font-size: 45px;
padding-left: 475px;
position: absolute;
top: 2px;
}
/*
COPYRIGHT MESSAGE
This is if you want a message before the copyright part of your list. Put you message in the quotations after content. This is empty by default.
*/
#copyright:before {
content: " ";
}
/*
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).
*/
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color:black;
}
/*
ANIME/MANGA TITLE FONTS
This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc.
*/
.animetitle, .animetitle:visited {
color: cyan;
font-family: Verdana;
font-size: 16px;
}
/*
LIST FONTS
This is the type and color for more of the numbers, links, and words on the list itself!
*/
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:white;
font-family:Lucida Grande;
}
/*
LIST WIDTH AND TOP SPACE
Change width to increase the width of your list! Increase or lower the padding-top to lower or raise how far the list starts from the page!
*/
#list_surround {
padding-top: 162px;
}
#list_surround {
width: 850px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
left: 5px;
position: absolute;
}
/*
COLOR OF LIST
Change the color of your list table.
*/
Below are the codes to control these parts when you keep them!
*/
/*
ROWS TRANSITION
This controls the part where pics appear on your rows.
It controls the timing. You can change the numbers.
The first number in each row by default is .5s, this is a half second.
It controls how fast the pic window "opens".
The second number is the time it takes the window to begin opening.
By default its set to .1s, a tenth of a second.
If you changed it to 2s, it would take two seconds for the window to open.
You'll need to change all the rows timings!
They change different browser's timings.
*/
.td1, .td2 {
line-height: 30px;
transition: line-height .5s ease .1s;
-o-transition: line-height .5s ease .1s;
-moz-transition: line-height .5s ease .1s;
-webkit-transition: line-height .5s ease .1s;
}
/*
LIST ROWS ON CURSOR HOVER
This is the height and color of the rows when you put your cursor on them.
*/
tr:hover .td1, tr:hover .td2 {
background-color: rgba(30, 30, 30, 0.5);
line-height: 340px;
}
/*CURSORS
Remove * and *:hover to remove the custom Miku cursors.
*/
/*
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 'left' and 'top' with other 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 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: left top;}
/*OTHER CODES
Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, use the link at the top of this CSS or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: black;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:red;
text-decoration:underline;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
border-width:0;
padding:2px;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. You can Google 'Shishio's Custom Lists' for more designs or info. Contributions by Hahaido and u531355. ";
}
.status_selected {
background-color:black;
padding:2px;
color:white;
text-decoration: blink;
}
.status_not_selected {
background-color:black;
padding:2px;
color:white;
}
.status_selected a{
color:blue;
}
.status_not_selected a{
color:white;
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}
.animetitle + small {
line-height: 20px;
position: relative;
}
An alternate code for anime lists with an icon toolbar but doesn't use the Menu icon toolbar as in the pics, and can use any other toolbar:
/*
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!
*/
To remove the weather widget altogether, just delete "#inlineContent". Also to lower or raise the widget, change 130% (after background-position) to a new %, preferably 100 to 130%.
*/
#inlineContent {
background-attachment: scroll;
background-image: url(http://tinyurl.com/bo2n6ko);
background-position: 99% 130%;
background-repeat: no-repeat;
bottom: 0;
display: inline !important;
height: 200px;
margin-bottom: 0;
pointer-events: none;
position: fixed;
right: 0;
width: 100%;
z-index: -2;
}
/*
CUSTOM BANNER
"Background image" controls the image seen, change out the link to change the banner pic.
To Remove the banner, remove #list_surround from this part
*/
#list_surround {
background-image: url(http://i.imgur.com/WkWirCx.png);
background-position: right top;
background-repeat: no-repeat;
}
/*
CUSTOM BANNER MESSAGE
Put you message in the quotations after content. Change the font size here too.
Increase or decrease padding-left and top to move the message.
By default it says "Welcome to my list!"
To remove the message, delete whats between the quotations after content.
*/
#list_surround:before{
color: purple;
content: " Welcome to my list!";
font-size: 45px;
padding-left: 475px;
position: absolute;
top: 2px;
}
/*
COPYRIGHT MESSAGE
This is if you want a message before the copyright part of your list. Put you message in the quotations after content. This is empty by default.
*/
#copyright:before {
content: " ";
}
/*
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).
*/
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color:black;
}
/*
ANIME/MANGA TITLE FONTS
This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc.
*/
.animetitle, .animetitle:visited {
color: cyan;
font-family: Verdana;
font-size: 16px;
}
/*
LIST FONTS
This is the type and color for more of the numbers, links, and words on the list itself!
*/
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:white;
font-family:Lucida Grande;
}
/*
LIST WIDTH AND TOP SPACE
Change width to increase the width of your list! Increase or lower the padding-top to lower or raise how far the list starts from the page!
*/
#list_surround {
padding-top: 189px;
}
#list_surround {
width: 850px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
left: 5px;
position: absolute;
}
/*
COLOR OF LIST
Change the color of your list table.
*/
Below are the codes to control these parts when you keep them!
*/
/*
ROWS TRANSITION
This controls the part where pics appear on your rows.
It controls the timing. You can change the numbers.
The first number in each row by default is .5s, this is a half second.
It controls how fast the pic window "opens".
The second number is the time it takes the window to begin opening.
By default its set to .1s, a tenth of a second.
If you changed it to 2s, it would take two seconds for the window to open.
You'll need to change all the rows timings!
They change different browser's timings.
*/
.td1, .td2 {
line-height: 30px;
transition: line-height .5s ease .1s;
-o-transition: line-height .5s ease .1s;
-moz-transition: line-height .5s ease .1s;
-webkit-transition: line-height .5s ease .1s;
}
/*
LIST ROWS ON CURSOR HOVER
This is the height and color of the rows when you put your cursor on them.
*/
tr:hover .td1, tr:hover .td2 {
background-color: rgba(30, 30, 30, 0.5);
line-height: 340px;
}
/*CURSORS
Remove * and *:hover to remove the custom Miku cursors.
*/
/*
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 'left' and 'top' with other 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 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: left top;}
/*OTHER CODES
Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, use the link at the top of this CSS or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: black;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:red;
text-decoration:underline;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
border-width:0;
padding:2px;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. You can Google 'Shishio's Custom Lists' for more designs or info. Contributions by Hahaido and u531355. ";
}
.status_selected {
background-color:black;
padding:2px;
color:white;
text-decoration: blink;
}
.status_not_selected {
background-color:black;
padding:2px;
color:white;
}
.status_selected a{
color:blue;
}
.status_not_selected a{
color:white;
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}
.animetitle + small {
line-height: 20px;
position: relative;
}
I want to change the black bars to transparent white and also the text inside it to another color,
and change the color or if possible remove the dropped,on hold,watching etc, thing below the buttons.
Here's a pic of the things I want to change.
How do I do it?
Here's the image
Also how do I change the pink thing to sky blue.
/*
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!
*/
To remove the weather widget altogether, just delete "#inlineContent". Also to lower or raise the widget, change 130% (after background-position) to a new %, preferably 100 to 130%.
*/
{
background-attachment: scroll;
background-image: url(http://tinyurl.com/bo2n6ko);
background-position: 99% 130%;
background-repeat: no-repeat;
bottom: 0;
display: inline !important;
height: 200px;
margin-bottom: 0;
pointer-events: none;
position: fixed;
right: 0;
width: 100%;
z-index: -2;
}
/*
CUSTOM BANNER
"Background image" controls the image seen, change out the link to change the banner pic.
To Remove the banner, remove #list_surround from this part
*/
#list_surround {
background-image: url(http://i.imgur.com/lGhMvwK.png);
background-position: right top;
background-repeat: no-repeat;
}
/*
CUSTOM BANNER MESSAGE
Put you message in the quotations after content. Change the font size here too.
Increase or decrease padding-left and top to move the message.
By default it says "Welcome to my list!"
To remove the message, delete whats between the quotations after content.
*/
/*
COPYRIGHT MESSAGE
This is if you want a message before the copyright part of your list. Put you message in the quotations after content. This is empty by default.
*/
#copyright:before {
content: " ";
}
/*
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).
*/
/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/
.table_header {
background-color:black;
}
/*
ANIME/MANGA TITLE FONTS
This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc.
*/
.animetitle, .animetitle:visited {
color: cyan;
font-family: Verdana;
font-size: 16px;
}
/*
LIST FONTS
This is the type and color for more of the numbers, links, and words on the list itself!
*/
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:white;
font-family:Lucida Grande;
}
/*
LIST WIDTH AND TOP SPACE
Change width to increase the width of your list! Increase or lower the padding-top to lower or raise how far the list starts from the page!
*/
#list_surround {
padding-top: 162px;
}
#list_surround {
width: 850px;
}
/*
LIST POSITION
Change "left" to "right" to switch the list side, or vice versa.
*/
#list_surround {
left: 5px;
position: absolute;
}
/*
COLOR OF LIST
Change the color of your list.
*/
Below are the codes to control these parts when you keep them!
*/
/*
ROWS TRANSITION
This controls the part where pics appear on your rows.
It controls the timing. You can change the numbers.
The first number in each row by default is .5s, this is a half second.
It controls how fast the pic window "opens".
The second number is the time it takes the window to begin opening.
By default its set to .1s, a tenth of a second.
If you changed it to 2s, it would take two seconds for the window to open.
You'll need to change all the rows timings!
They change different browser's timings.
*/
.td1, .td2 {
line-height: 30px;
transition: line-height .5s ease .1s;
-o-transition: line-height .5s ease .1s;
-moz-transition: line-height .5s ease .1s;
-webkit-transition: line-height .5s ease .1s;
}
/*
LIST ROWS ON CURSOR HOVER
This is the height and color of the rows when you put your cursor on them.
*/
tr:hover .td1, tr:hover .td2 {
background-color: rgba(30, 30, 30, 0.5);
line-height: 340px;
}
/*CURSORS
Remove * and *:hover to remove the custom Miku cursors.
*/
/*
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 'left' and 'top' with other 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 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: left top;}
/*OTHER CODES
Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, use the link at the top of this CSS or ask in my club!
*/
body {
font-weight: light;
background-repeat: no-repeat;
background-color: black;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:red;
text-decoration:underline;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
border-width:0;
padding:2px;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. You can Google 'Shishio's Custom Lists' for more designs or info. Contributions by Hahaido and u531355. ";
}
.status_selected {
background-color:black;
padding:2px;
color:white;
text-decoration: blink;
}
.status_not_selected {
background-color:black;
padding:2px;
color:white;
}
.status_selected a{
color:blue;
}
.status_not_selected a{
color:white;
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}
/*
HEIGHT/WIDTH/POSITION OF TITLES ON HOVER
Background size is the height/width of titles.
Margin-right lets you move the cover's position on hover.
*/
#list_surround table:nth-of-type(n+4) tbody:hover .animetitle {
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 225px 320px !important;
display: block !important;
margin-right: 0px !important;
}
#list_surround table:nth-of-type(n+4) tbody .animetitle{
background-position: center center !important;
}
/*
OTHER CODES
*/
.td1, .td2 {
line-height: 35px;
}
