[CSS - CLASSIC] Classic MAL style Beginner's Layout!

Jan 24, 2012 8:52 AM

Offline

Feb 2010

11294

This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial in this section:
http://myanimelist.net/forum/?topicid=419405

The design works for both anime and manga lists. For more layouts check the full list of Premade Layouts:
http://myanimelist.net/forum/?topicid=318587[/b]

A premade CSS you can edit with the add-ons and codes in our group, but with the default MAL list style!

Some people have requested to have their list layout with the classic style MAL list look, in particular thats the multicolored rows seen in the example above! There are directions in the code to change the width of the list, or to change the colors and opacity.

The code, make sure you copy the entire thing in the spoiler tag from the first /* to the last } at the end.

/*
MAIN BACKGROUND
This is the main background, at the very back of the layout.
To change it change the image link in the parenthesis after "background: url"
To change the position change right/top with other positions, like bottom or left.
To make the background scroll instead of staying in place change the background-attachment from "fixed" to "scroll".

If you need more help, check here: http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/
body {
background-image: url(http://i.imgur.com/wpHKl5f.png);
background-position: left top;
background-attachment: fixed;
background-size: cover;}

/*LIST SETTINGS
You can change the list width here.
To change the position of the list see my tutorial here:
http://myanimelist.net/forum/?topicid=393437&show=0#post1
*/
#list_surround {
position: absolute !important;
right: 10px !important;}

#list_surround {
width: 800px;
}

/*ALTERNATING ROWS, LIST COLORS
You can alter the list colors here, see where it says blue, purple, etc.
The colors here correspond to what colors you see on the list.
Change them here. For example changing black to green here and saving will change the
black colors on the list to green.
Opacity is the degree of how transparent (see-through) the list is. .01 is almost completely clear. .99 is barely see-through.
*/
.status_selected, .header_title, .td1, #grand_totals{
background-color: black;
background-image: url("none") !important;
color: white;
opacity: 0.8;
}
.status_not_selected, .table_header, .category_totals, .td2, #copyright {
background-color: grey;
background-image: url("none") !important;
color: white;
opacity: 0.8;}

/*ALTERNATING ROWS, LIST COLORS ON CURSOR HOVER
This is the same as above, except its the colors you see on the list when you point your cursor on them.
*/
.status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover {
background-color: darkblue;
background-image: url("none") !important;
opacity: 0.8;
}
.status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover {
background-color: darkblue;
background-image: url("none") !important;
opacity: 0.8;
-moz-transition: .2s linear;
-webkit-transition: .2s linear;
-o-transition: .2s linear;}

/*PADDING
The space around the words in your list.
*/
.status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover,
.status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover, .status_selected, .header_title, .td1, #grand_totals,
.status_not_selected, .table_header, .category_totals, .td2, #copyright{
padding: 2px;
}

/*ANIME/MANGA TITLE FONT SETTINGS
*/
.animetitle, .animetitle:visited {
color: white;
font-family: Tahoma;
font-size: 14px;
}

/*OTHER FONT SETTINGS
*/
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color: white;
font-family: Lucida Grande;}

/*BORDERS
*/
.status_selected, #grand_totals,
.status_not_selected, .header_title, #copyright {
border-color: white;
border-style: solid;
border-width: 1px;
}

.td1, .td2, .table_header {
border-color: white;
border-style: solid;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0;
border-top-width: 0 !important;
}

.category_totals{
border-color: white;
border-style: solid;
border-width: 0 1px 1px;
}

/*OTHER CODES
*/

body {
background-color: black;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover, a:visited:hover {
color: cyan;
text-decoration: underline;
}

.category_totals, .td1, .td2, #grand_totals, #copyright {
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info.";
}
.thickbox {
color: cyan;
font-family: fantasy;
font-size: 12px;
}
.header_title {
height: 52px;
}
.table_header {
font-weight: bold;
}
.category_totals {
height: 30px;
}
#copyright, #grand_totals {
margin: 0 auto;
text-align: center;
}

Shishio-kunFeb 18, 2018 11:57 AM

Jun 27, 2014 10:55 PM

Shishio-kun

Offline

Feb 2010

11294

Fixed (background back up) and updated a little (better and easier to change colors)

Oct 14, 2016 8:54 PM

FoxyRubyRouge

Offline

Jun 2011

This background no longer works is there a way to fix this?

Oct 14, 2016 11:48 PM

Shishio-kun

Offline

Feb 2010

11294

MikuMusicMan said:
This background no longer works is there a way to fix this?

The background is still there. I just tried it on my mangalist and it shows up; the link also still works if you click it in the first post.

Without seeing the layout on your list, I don't know why it isn't showing for you - maybe you blocked Imgur or you didn't install the entire CSS

Oct 15, 2016 12:42 AM

FoxyRubyRouge

Offline

Jun 2011

Weird I just tried it and it works except the image of miku doesn't go through at all huh but you got it to work I'll try it again.

See All Discussions

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page ) Shishio-kun - Apr 15, 2010	7812	by mtsRhea »» Apr 21, 5:25 AM
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 ) Shishio-kun - Sep 4, 2020	121	by Pokitaru »» Apr 21, 3:25 AM
» [CSS-MODERN] Change list text/font colors on any list layout Shishio-kun - May 4, 2021	3	by hideso »» Apr 20, 4:33 PM
» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layout Shishio-kun - Jul 15, 2019	17	by hideso »» Apr 20, 4:03 PM
» [CSS][Modern] ☀️ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page ) Cateinya - Aug 18, 2016	309	by hideso »» Apr 20, 3:56 PM

[CSS - CLASSIC] Classic MAL style Beginner's Layout!

More topics from this board

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )

» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )

» [CSS-MODERN] Change list text/font colors on any list layout

» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layout

» [CSS][Modern] ☀️ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page )

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters