Xhomas wrote:

http://myanimelist.net/profile/Xhomas

satriobp wrote:

Xhomas wrote:

http://myanimelist.net/profile/Xhomas

Your List is SOO AWEESOME, Man!

Xhomas wrote:

Thanks! In MAL, just go to profile -> edit -> My List Style -> Advanced Style CSS Editor
and then just copy and paste a CSS style from the MAL forum to get the style (there are guides). This one is mine, for the people interested:

SPOILER

/* Math part of the layout, don't change unless you know what you're doing */
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css";
/* Top bar */
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css";

body{
/* Set up a background image: */
background-image: url("http://puu.sh/3Oszt.jpg");

/* Set up a point of transformation. This is the point
* of image that should always be at the top and
* preserve it's location at these offsets.
* If you don't understand how it works, 50% 50% should
* be ok in most cases. Default: point to Okabe's face.
*/
background-position: 60% 18%;

/* Set up fonts you want to use and preferred basic size.
* It will look for the first font at the list, then for
* the second, etc. The last parameter describes a generic
* font family, which will be used if none of the fonts are
* on the user PC. The size can be also set using keywords
* like xx-small, google for font-size if you want more info
*/
font-family: 'Segoe UI', 'Century Gothic', sans-serif;
font-size: 11px;
}

/*LIST HOVER COLOR
This configures the look of the part with sort links:
* the border and the background.
* Colors are in rgba format which means first three values
* define a color in Red-Green-Blue mode and the last one
* sets up an opacity of the color: rgba(R,G,B,a)
* Use color picker in Photoshop (or other image editor),
* Opera Dragonfly or Rainbow Firefox extension to get desired
* RGB values and then play with opacity until you get what you
* wanted.
*/

tr:hover [class^=td] {
background-color: rgba(4, 150, 100, 0.9) !important;
}

.table_header{
background-color: rgba(0,0,0,0.4);
border-color: rgba(255,255,255,0.25);
}


.table_header, .table_headerLink{
/* Color of the sort links. I used short hex notation here but
* you may use whatever you want, rgb, rgba or full-hex. This
* won't be mentioned below, the way to change colors is the same
*/
color: #FFF;

/* Remove the following line if you want links to be underlined */
text-decoration: none;
}

.table_headerLink:hover{
/* This configures a light white glow on hovered links
* Changing colors should be enough here so I'll leave it for you.
* It's the same rgba we've encountered.
*/
text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px;
}

/* The look of the rest of the
* Configures background, border and text color for non-links
* I made it a bit more opaque than sorting headers
*/
.td1, .td2{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
color: #FFF;
}

/* This is for the links in the rest of the */
.td1 a, .td2 a{
text-decoration: none; /* Removes underline for these */
color: #ffc700; /* Paints links orange */
}

/* Glow effect on link hover. The same text-shadow property */
.td1 a:hover, .td2 a:hover{
text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px;
}


/* This makes all text ins bold except for Edit - More */
#list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold}

/* CSS sprite for Currently Watching, Completed, Dropped, etc...
* Note there is only one image used for all headers. I've made an
* inverted version for bright layouts:
* [url=http://i.imgur.com/VImNB.png]http://i.imgur.com/VImNB.png
* or you can make one yourself. It's not that difficult.
*/
.header_title{
background-image: url(http://i.imgur.com/VImNB.png);
}

/* Block displaying category totals
* It's redesigned to be the part of the layout
* and you've already encountered all the properties here
* so it won't be hard for you to customise this.
* Note that a different shadow colors used for glow effect
*/
.category_totals{
background-color: rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.25);
color: #fff;
font-weight: bold;
text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px;
}

/* Text displaying global totals */
#grand_totals{
color: #fff;
font-size: larger;
font-weight: bold;
text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px;
/* The following line makes it ALL-CAPS */
text-transform: uppercase;
}

/* Modifying copyright section. It's designed to look similar
* to the whole layout, ok?
*/
#copyright{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
}

#copyright:after {
content: " Custom CSS by Veriti. Background edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info.";
}

/* Modifying the text color in copyright section */
#copyright, #copyright a{
color: #FFF;
}

/* Configures a CSS sprite for the bar at the bottom */
.status_not_selected a, .status_selected a{
background-image: url('http://i.imgur.com/rSgqF.png');
}

/* upd 1th March 2012*/

/* upd 20th December 2012 import links rehosted, images rehosted*/

Xhomas wrote:

Thanks! In MAL, just go to profile -> edit -> My List Style -> Advanced Style CSS Editor
and then just copy and paste a CSS style from the MAL forum to get the style (there are guides). This one is mine, for the people interested:

SPOILER

/* Math part of the layout, don't change unless you know what you're doing */
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css";
/* Top bar */
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css";

body{
/* Set up a background image: */
background-image: url("http://puu.sh/3Oszt.jpg");

/* Set up a point of transformation. This is the point
* of image that should always be at the top and
* preserve it's location at these offsets.
* If you don't understand how it works, 50% 50% should
* be ok in most cases. Default: point to Okabe's face.
*/
background-position: 60% 18%;

/* Set up fonts you want to use and preferred basic size.
* It will look for the first font at the list, then for
* the second, etc. The last parameter describes a generic
* font family, which will be used if none of the fonts are
* on the user PC. The size can be also set using keywords
* like xx-small, google for font-size if you want more info
*/
font-family: 'Segoe UI', 'Century Gothic', sans-serif;
font-size: 11px;
}

/*LIST HOVER COLOR
This configures the look of the part with sort links:
* the border and the background.
* Colors are in rgba format which means first three values
* define a color in Red-Green-Blue mode and the last one
* sets up an opacity of the color: rgba(R,G,B,a)
* Use color picker in Photoshop (or other image editor),
* Opera Dragonfly or Rainbow Firefox extension to get desired
* RGB values and then play with opacity until you get what you
* wanted.
*/

tr:hover [class^=td] {
background-color: rgba(4, 150, 100, 0.9) !important;
}

.table_header{
background-color: rgba(0,0,0,0.4);
border-color: rgba(255,255,255,0.25);
}


.table_header, .table_headerLink{
/* Color of the sort links. I used short hex notation here but
* you may use whatever you want, rgb, rgba or full-hex. This
* won't be mentioned below, the way to change colors is the same
*/
color: #FFF;

/* Remove the following line if you want links to be underlined */
text-decoration: none;
}

.table_headerLink:hover{
/* This configures a light white glow on hovered links
* Changing colors should be enough here so I'll leave it for you.
* It's the same rgba we've encountered.
*/
text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px;
}

/* The look of the rest of the
* Configures background, border and text color for non-links
* I made it a bit more opaque than sorting headers
*/
.td1, .td2{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
color: #FFF;
}

/* This is for the links in the rest of the */
.td1 a, .td2 a{
text-decoration: none; /* Removes underline for these */
color: #ffc700; /* Paints links orange */
}

/* Glow effect on link hover. The same text-shadow property */
.td1 a:hover, .td2 a:hover{
text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px;
}


/* This makes all text ins bold except for Edit - More */
#list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold}

/* CSS sprite for Currently Watching, Completed, Dropped, etc...
* Note there is only one image used for all headers. I've made an
* inverted version for bright layouts:
* [url=http://i.imgur.com/VImNB.png]http://i.imgur.com/VImNB.png
* or you can make one yourself. It's not that difficult.
*/
.header_title{
background-image: url(http://i.imgur.com/VImNB.png);
}

/* Block displaying category totals
* It's redesigned to be the part of the layout
* and you've already encountered all the properties here
* so it won't be hard for you to customise this.
* Note that a different shadow colors used for glow effect
*/
.category_totals{
background-color: rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.25);
color: #fff;
font-weight: bold;
text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px;
}

/* Text displaying global totals */
#grand_totals{
color: #fff;
font-size: larger;
font-weight: bold;
text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px;
/* The following line makes it ALL-CAPS */
text-transform: uppercase;
}

/* Modifying copyright section. It's designed to look similar
* to the whole layout, ok?
*/
#copyright{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
}

#copyright:after {
content: " Custom CSS by Veriti. Background edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info.";
}

/* Modifying the text color in copyright section */
#copyright, #copyright a{
color: #FFF;
}

/* Configures a CSS sprite for the bar at the bottom */
.status_not_selected a, .status_selected a{
background-image: url('http://i.imgur.com/rSgqF.png');
}

/* upd 1th March 2012*/

/* upd 20th December 2012 import links rehosted, images rehosted*/

Xhomas wrote:

Thanks! In MAL, just go to profile -> edit -> My List Style -> Advanced Style CSS Editor
and then just copy and paste a CSS style from the MAL forum to get the style (there are guides). This one is mine, for the people interested:

SPOILER

/* Math part of the layout, don't change unless you know what you're doing */
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css";
/* Top bar */
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css";

body{
/* Set up a background image: */
background-image: url("http://puu.sh/3Oszt.jpg");

/* Set up a point of transformation. This is the point
* of image that should always be at the top and
* preserve it's location at these offsets.
* If you don't understand how it works, 50% 50% should
* be ok in most cases. Default: point to Okabe's face.
*/
background-position: 60% 18%;

/* Set up fonts you want to use and preferred basic size.
* It will look for the first font at the list, then for
* the second, etc. The last parameter describes a generic
* font family, which will be used if none of the fonts are
* on the user PC. The size can be also set using keywords
* like xx-small, google for font-size if you want more info
*/
font-family: 'Segoe UI', 'Century Gothic', sans-serif;
font-size: 11px;
}

/*LIST HOVER COLOR
This configures the look of the part with sort links:
* the border and the background.
* Colors are in rgba format which means first three values
* define a color in Red-Green-Blue mode and the last one
* sets up an opacity of the color: rgba(R,G,B,a)
* Use color picker in Photoshop (or other image editor),
* Opera Dragonfly or Rainbow Firefox extension to get desired
* RGB values and then play with opacity until you get what you
* wanted.
*/

tr:hover [class^=td] {
background-color: rgba(4, 150, 100, 0.9) !important;
}

.table_header{
background-color: rgba(0,0,0,0.4);
border-color: rgba(255,255,255,0.25);
}


.table_header, .table_headerLink{
/* Color of the sort links. I used short hex notation here but
* you may use whatever you want, rgb, rgba or full-hex. This
* won't be mentioned below, the way to change colors is the same
*/
color: #FFF;

/* Remove the following line if you want links to be underlined */
text-decoration: none;
}

.table_headerLink:hover{
/* This configures a light white glow on hovered links
* Changing colors should be enough here so I'll leave it for you.
* It's the same rgba we've encountered.
*/
text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px;
}

/* The look of the rest of the
* Configures background, border and text color for non-links
* I made it a bit more opaque than sorting headers
*/
.td1, .td2{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
color: #FFF;
}

/* This is for the links in the rest of the */
.td1 a, .td2 a{
text-decoration: none; /* Removes underline for these */
color: #ffc700; /* Paints links orange */
}

/* Glow effect on link hover. The same text-shadow property */
.td1 a:hover, .td2 a:hover{
text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px;
}


/* This makes all text ins bold except for Edit - More */
#list_surround td[class^=td]:first-child, #list_surround td[class^=td]:nth-child(n+3), .animetitle{font-weight:bold}

/* CSS sprite for Currently Watching, Completed, Dropped, etc...
* Note there is only one image used for all headers. I've made an
* inverted version for bright layouts:
* [url=http://i.imgur.com/VImNB.png]http://i.imgur.com/VImNB.png
* or you can make one yourself. It's not that difficult.
*/
.header_title{
background-image: url(http://i.imgur.com/VImNB.png);
}

/* Block displaying category totals
* It's redesigned to be the part of the layout
* and you've already encountered all the properties here
* so it won't be hard for you to customise this.
* Note that a different shadow colors used for glow effect
*/
.category_totals{
background-color: rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.25);
color: #fff;
font-weight: bold;
text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px;
}

/* Text displaying global totals */
#grand_totals{
color: #fff;
font-size: larger;
font-weight: bold;
text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px;
/* The following line makes it ALL-CAPS */
text-transform: uppercase;
}

/* Modifying copyright section. It's designed to look similar
* to the whole layout, ok?
*/
#copyright{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
}

#copyright:after {
content: " Custom CSS by Veriti. Background edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info.";
}

/* Modifying the text color in copyright section */
#copyright, #copyright a{
color: #FFF;
}

/* Configures a CSS sprite for the bar at the bottom */
.status_not_selected a, .status_selected a{
background-image: url('http://i.imgur.com/rSgqF.png');
}

/* upd 1th March 2012*/

/* upd 20th December 2012 import links rehosted, images rehosted*/

Karote wrote:

http://myanimelist.net/profile/Karote

SPOILER