Forum Settings
Forums
New
Jun 2, 2014 2:54 PM
#1

Offline
Jun 2013
568
I've started to customize my anime/manga list to a Rosario+Vampire type theme, and I've decided to share some of my customizations I've made so far.

Current Anime (Picture): http://i.imgur.com/DcFNPNQ.png
Current Manga (Picture): http://i.imgur.com/JLBnuur.png
Complete (Picture): http://i.imgur.com/RcMLkW8.png
On-Hold (Picture): http://i.imgur.com/XIHh4eu.png
Dropped (Picture): -Not yet finished- (Planning to make it Ruby)
Plan to Watch (Picture): -Not yet finished- (Planning to make it Yukari or Kokoa)
Plan to Read (Picture): -Not yet finished- (Planning to make it Yukari)

Here is the code to insert for Anime List:


/*
Anime List only

CURRENTLY WATCHING HEADER
This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_cw {
background-image:url(http://i.imgur.com/DcFNPNQ.png);
height:217px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
COMPLETED HEADER
This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_completed {
background-image:url(http://i.imgur.com/RcMLkW8.png);
height: 227px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
ON-HOLD HEADER
This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_onhold {
background-image:url(http://i.imgur.com/XIHh4eu.png);
height: 236px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
DROPPED HEADER
This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_dropped {
background-image:url(-NOT YET FINISHED-);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
PLAN TO WATCH HEADER
This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_ptw {
background-image:url(-NOT YET FINISHED-);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}

/*
REMOVE HEADER COLOR
You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section.
*/
.header_title {
background-color: transparent !important;
}

/*
OTHER CODES
You need this otherwise the headers won't be visible.
*/
tbody
{background-color: transparent;
background-image: none;}


/*
REMOVE HEADER TEXT
These codes remove the original text like "Completed" and "Currently Watching" from
each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way.
*/
.header_title {
color: gray !important;
color: transparent !important;
font-size: 1px !important;
font-size: 0px !important;
font-size: 0 !important;
font-size: 0pt !important;
}


Here is the code to insert for Manga List:


/*
Manga List only

CURRENTLY READING HEADER
This is the header above currently reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_cw {
background-image:url(http://i.imgur.com/JLBnuur.png);
height: 206px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
COMPLETED HEADER
This is the header above completed manga. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_completed {
background-image:url(http://i.imgur.com/RcMLkW8.png);
height: 227px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
ON-HOLD HEADER
This is the header above your manga on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_onhold {
background-image:url(http://i.imgur.com/XIHh4eu.png);
height: 236px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
DROPPED HEADER
This is the header above your dropped manga. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_dropped {
background-image:url(-NOT YET FINISHED-);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}



/*
PLAN TO READ HEADER
This is the header above the manga you plan to read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list.

If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:".
*/
.header_ptw {
background-image:url(-NOT YET FINISHED-);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}

/*
REMOVE HEADER COLOR
You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section.
*/
.header_title {
background-color: transparent !important;
}


/*
OTHER CODES
You need this otherwise the headers won't be visible.
*/
tbody
{background-color: transparent;
background-image: none;}


/*
REMOVE HEADER TEXT
These codes remove the original text like "Completed" and "Currently Reading" from
each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way.
*/
.header_title {
color: gray !important;
color: transparent !important;
font-size: 1px !important;
font-size: 0px !important;
font-size: 0 !important;
font-size: 0pt !important;
}


As it says in the text, to change the position of the image to line up (vertically) with your list you need to change the height value. It's pretty much a hit n' guess until you have the right position.

I might make some other customizations later as well, but only when I have some time. Enjoy!
RedDogSlayJun 2, 2014 3:08 PM
Reply Disabled for Non-Club Members
Reply Disabled for Non-Club Members

More topics from this board

» Rosario + Vampire Capu 3 EXPLANATION

removed-user - May 3, 2016

6 by milanogates »»
Sep 10, 2018 6:22 AM

Sticky: » Member cards [OPEN] ( 1 2 3 4 5 ... Last Page )

audacious1 - Mar 15, 2009

843 by removed-user »»
May 3, 2016 3:50 AM

» Do we need a R+V, capu 3??

Dodecahedron-O24 - Dec 5, 2011

32 by Nightmare21st »»
Oct 22, 2015 8:58 PM

» Will there be a manga season 3?

Bewb_Lord - May 13, 2014

2 by arnoldc64 »»
Aug 18, 2014 11:35 PM

» what monster would you be on rosario to vampire ( 1 2 )

Yukino21 - Feb 16, 2008

88 by TerrorH3ctor »»
Jun 28, 2014 11:55 PM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login