Skip to content

Instantly share code, notes, and snippets.

@B-Con
Last active June 3, 2023 14:43
Show Gist options
  • Save B-Con/4569053 to your computer and use it in GitHub Desktop.
Save B-Con/4569053 to your computer and use it in GitHub Desktop.
The CSS styling for one of my custom themes on MyAnimeList.net. It is style #ID101241.
/* Copyright (c) 2013 Brad Conte (brad@bradconte.com, http://myanimelist.net/profile/B-Con)
* License: http://opensource.org/licenses/MIT
* Summary: You may use, edit, and redistribute this all you want. Just keep the top two lines of this file that credit me and mention the license.
*
* This is the CSS theme for my MAL list at http://myanimelist.net/animelist/B-Con .
* They generate the HTML, I just style it. Their HTML is sometimes bizarre,
* sometimes horrible, so there are definitely some hacks.
*/
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic');
/* There are rules for mal_control_strip in the site's stylesheets included after this.
*/
#mal_control_strip {
background: #333333 !important;
}
body {
background-color: #FBFBFB;
color: #000000;
font-family: 'Open Sans',Verdana,Arial;
font-size: 12px;
}
/* Determines the positioning of your list
*/
#list_surround {
margin: 0 auto;
width: 950px;
}
/* All links on your list
*/
a {
color: #333333;
text-decoration: none;
}
a:visited {
color: #333333;
text-decoration: inherit;
}
a:hover {
color: #333333;
text-decoration: underline;
}
/* Alternating row color 1
*/
.td1 {
background-color: #FBFBFB;
border-color: #BBBBBB;
border-style: solid;
border-width: 0;
/* For column seperation: border-width: 0 1px 0 0; */
color: #000000;
padding: 4px 6px;
}
/* Alternating row color 2
*/
.td2 {
background-color: #E6E6E6;
border-color: #BBBBBB;
border-style: solid;
border-width: 0;
/* For column seperation: border-width: 0 1px 0 0; */
color: #000000;
padding: 4px 6px;
}
/* Border for the "#" column.
*/
.td1:first-child,
.td2:first-child {
color: #888888;
}
/* Border around the entire table.
* Just do the sides, the top and bottom are implicit.
*/
.td1:first-child,
.td2:first-child,
.table_header:first-child {
border-left: 1px solid #333333;
}
.td1:last-child,
.td2:last-child,
.table_header:first-child {
border-right: 1px solid #333333;
}
/* This represents the "Anime Title", "Score", "# Eps" columns
*/
.table_header {
background-color: #333333;
border-color: #BBBBBB;
border-style: solid;
border-width: 0;
/* For column separation border-width: 0 1px 0 0; */
color: #FFFFFF;
padding: 8px 6px;
}
.td1 div[style^='float'],
.td2 div[style^='float'] {
margin-left: 7px;
/*padding-left: 1px;
border-left: 1px solid #BBBBBB;*/
}
/* headerLink represents the color of the links inside the_header
*/
.table_headerLink {
color: inherit;
}
.table_headerLink:visited {
color: inherit;
}
.table_headerLink:hover {
color: inherit;
}
/* Hack for the idiot borders on the "#" column header that are hard-coded in the HTML. Borders are on all sides, but I don't want it like that, so make the unwanted borders match the background.
*/
td.table_header:first-child {
border-color: #333333;
}
/* To keep the table's right border from including the header. */
td.table_header:last-child {
border-right-color: #333333;
}
/* Controls the select form decoration (the drop down select box)
*/
.form {
border-color: #000000;
border-style: solid;
border-width: 1px;
color: #000000;
font-family: Verdana,Arial;
font-size: 12px;
padding: 2px;
}
/* Which 'status' up top is selected?
*/
.status_selected {
background-color: #333333;
border-color: #333333;
border-style: solid;
color: #ffffff;
padding: 7px;
font-weight: bold;
}
.status_selected a {
color: inherit;
}
.status_not_selected {
background-color: #e6e6e6;
border-color: #333333;
border-style: solid;
color: #000000;
padding: 7px;
}
/* Header classes for Currently Watching, Completed, Dropped, etc...
*/
.header_cw {
}
.header_completed {
}
.header_onhold {
}
.header_dropped {
}
.header_ptw {
}
.header_title {
font-size: 22px;
font-weight: bold;
margin: 10px 0 2px 0;
color: #333333;
}
.category_totals {
background-color: #333333;
color: #ffffff;
padding: 8px;
}
#grand_totals {
margin: 15px 0;
font-size: 15px;
text-align: center;
}
/*
* header_al doesn't seem to actually be used on the page.
/* header_al is the surrounding "User's Anime List" at the top
.header_al {
font-size: 16px;
font-weight: bold;
}
/* header_al_links is the your "Profile" and "MyAnimeList home" links
.header_al_links {
}
* */
/* controls what styles you can give to all the anime titles in your list
*/
.animetitle {
font-weight: bold;
color: #333333;
}
/*
This part is mandated by MyAnimeList.com, and is unrelated to the copyright by the author of this file.
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 {
margin: 0 auto;
padding-top: 10px;
text-align: center;
width: 960px;
}
@crse
Copy link

crse commented Dec 2, 2014

thanks for CSS!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment