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

Jan 24, 2012 8:52 AM

Offline

Feb 2010

12687

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

12687

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

12687

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	7924	by Shishio-kun »» Yesterday, 1:50 AM
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page ) Valerio_Lyndon - Apr 19, 2018	1262	by Shishio-kun »» Sep 22, 4:35 AM
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page ) Shishio-kun - Jul 21, 2017	382	by Shishio-kun »» Sep 22, 4:29 AM
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 ) Shishio-kun - Feb 16, 2023	57	by Shishio-kun »» Sep 22, 4:27 AM
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templates Shishio-kun - Feb 16, 2023	31	by Shishio-kun »» Sep 22, 4:14 AM

[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] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )

» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )

Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )

Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templates

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters