MyAnimeList.net

Categories

November 8th, 2014

A cute and simple layout for lazy girls! ;p

I did a bit of fiddling around today with MAL's Advanced Style CSS Editor and came up with a simple and easily customisable layout (in two flavours) for my lists. For first attempts, I'm pretty pleased!

As a complete novice with CSS, I borrowed a template from Shishio-kun's forum post here and tweaked it to fit some oh-so-pretty colour schemes from here, et voilà!

Here's an example of some gorgeous repeating patterns.

Here's what my themes look like:

Here's the modified CSS to copy+paste in the Advanced CSS Style Editor.

/*
// Self-explanatory
*/

BODY {
color: #E6988C;
font-size: 11px;
font-family: verdana;
background: url('http://colourlovers.com.s3.amazonaws.com/images/patterns/3450/3450871.png') fixed;
}

/*
// Determines the positioning of your list
*/

#list_surround {
margin: auto;
width: 650px;
}

/*
// All links on your list
*/

a {
color: #3FB5A9;
text-decoration: none;
}
a:visited {
color: #3FB5A9;
text-decoration: none;
}

a:hover {
color: #FA7298;
text-decoration: none;
}

/*
// Alternating row color 1 
*/

.td1 {
color: #4B3A42;
border-width: 0px;
border-style: solid;
border-color: #fbfbfb;
padding: 8px;
background-color: #fbfbfb; 
font-weight: normal;
}
   
/*
// Alternating row color 2 
*/

.td2 {
color: #4B3A42;
border-width: 0px;
border-style: solid;
border-color: #f3f3f3;
padding: 8px;
background-color: #f3f3f3; 
}
   
/*
// This represents the "Anime Title", "Score", "# Eps" columns 
*/
   
.table_header {
color: #fff;
border-width: 0px;
background-color: #E6988C;
padding: 8px;
border-radius: 25px 25px 0px 0px;
}
    
/*
// headerLink represents the color of the links inside the_header 
*/
	
.table_headerLink {
color: #fff;
}
    
.table_headerLink:Visited {
color: #fff;
}
    
.table_headerLink:Hover {
color: #fff;
}		

/* Which 'status' up top is selected? */

.status_selected {
font-size: 11px;
color: #fbfbfb;
padding: 10px;
background-color: #F9C879;
text-transform: lowercase;
letter-spacing: 1px;
border-radius: 25px 25px 0px 0px;
}

.status_selected a {
color: #fbfbfb;
font-weight: bold;
}

.status_not_selected {
font-size: 11px;
color: #fbfbfb;
padding: 10px;
background-color: #4B3A42;
text-transform: lowercase;
letter-spacing: 1px;
border-radius: 25px 25px 0px 0px;
}

.status_not_selected a {
color: #fbfbfb;
}

/*
Header classes for Currently Watching, Completed, Dropped, etc...
*/

.header_title {
font-family: georgia;
font-size: 22px;
color: #FBFBFB;
text-align: center;
font-weight: normal;
text-transform: lowercase;
font-style: italic;
letter-spacing: 2px;
margin-bottom: 5px;
margin-left: 200px;
margin-right: 200px;
background-color: #76BDAB;
border-radius: 35px 35px 0px 0px;
}

#grand_totals {
text-align: center;
}

/* header_al is thesurrounding "User's Anime List" at the top */

.header_al {
font-weight: bold;
font-size: 16px;
}

/* controls what styles you can give to all the anime titles in your list */
.animetitle {
font-weight: normal;
}

/*
copyright contains the "Producted by Garrett Gyssler" text
DO NOT REMOVE OR HIDE THIS DIV
IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO
*/

#copyright {
padding-top: 15px;
text-align: center;
margin: 0 auto;
width: px;
}

How to tweak:

Do not copy and paste these bits in over the CSS! Simply find the bits mentioned and replace either the image URL or HEX colour (e.g. #FBFBFB where it says #YOURCOLOURHERE).

If you're feeling fancy, this is a great resource for more advanced CSS tips to develop your style sheet.

Change the background image.

BODY {
background: url('YOURIMAGEURLHERE') fixed;

Change the link colours.

a {
color: #YOURCOLOURHERE;

a:visited {
color: #YOURCOLOURHERE;

a:hover {
color: #YOURCOLOURHERE;

Change the Anime Title/Score/Progress etc. header colours.
```
.table_header {
background-color: #YOURCOLOURHERE;
```
Change the Watching/Completed/On-hold etc. header colours.
```
.header_title {
background-color: #YOURCOLOURHERE;
```
Change the Currently Watching/Completed/Dropped etc. bubble colours.
For the selected bubble:
```
.status_selected {
background-color: #YOURCOLOURHERE;
```
For the unselected bubble:
```
.status_not_selected {
background-color: #YOURCOLOURHERE;
```

Also, have some love for Akatsuki no Yona!
Recently, I've had a reboot of interest for this series spurred on by the airing of its anime version this season. It's an adventure-based romance completely driven by character development and the undercurrent of tension as Yona, previously a sheltered princess, overcomes tragic circumstances with the help of her comrade's supernatural powers. Of course, it's a love story too, and there are plenty of moments that get your heart beating! Akatsuki no Yona is one of my ultimate favourite series, and I highly recommend you read it. :)

Image credit to のん汰 of Pixiv.

Posted by littlepanda | Nov 8, 2014 2:01 PM | 0 comments

littlepanda's Blog

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters