Alpha Alt
@import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css";
/*
HOW TO USE
Use and COMPLETE this simple tutorial if you never installed CSS, it only takes a few minutes:
http://myanimelist.net/forum/?topicid=200320
When you're done with the tutorial and can see the starter layout on your list, copy and paste this entire page of codes (including this part and the codes above and below)
to your CSS edit box (the box titled Edit Advanced CSS File) replacing any other codes in the box.
Save with the blue button at the bottom. It will put this premade layout on your list instead of the starter one from the tutorial!
If the layout looks weird on your list after installing, you can try to alter your settings here.
Common solutions are to set Default Status Settings to Watching or All Anime, check or uncheck tags (make sure you save afterwards):
http://myanimelist.net/editprofile.php?go=listpreferences
If your list still has problems you can ask us about it here, or other questions:
http://myanimelist.net/forum/?topicid=200323
And you'll find further ways to customize your list here:
http://myanimelist.net/forum/?topicid=419405
*/
/*
MAIN BACKGROUND
*/
body {
background: url("http://img832.imageshack.us/img832/92/konachancom103172akemih.jpg");
background-size: cover;
background-attachment: fixed !important;
}
#inlineContent {
display: inline-block !important;
height: 1200px !important;
left: 0px !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
width: 1200px !important;
z-index: -1 !important;
}
#list_surround {
font-size: 81.25%;
line-height: 1;
margin: 0 auto;
padding-bottom: 10px;
padding-top: 50px;
width: 900px;
}
/* CATEGORY LINKS */
.status_not_selected, .status_selected {
border: 0 none !important;
height: auto !important;
padding: 0 8px;
text-align: center !important;
width: 16.667% !important;
}
.status_not_selected a, .status_selected a {
background-color: rgba(98, 4, 149, 0.8);
border-color: rgba(255, 255, 255, 0.5);
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
display: block !important;
font-weight: bold;
padding: 8px;
text-shadow: 0 1px rgba(0, 0, 0, 0.1);
}
.status_selected a {
background-color: rgba(175, 4, 149, 0.6);
border-color: rgba(255, 255, 255, 0.5);
}
.status_not_selected a:hover {
background-color: #9405E1;
border-color: #201C3A;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
}
.status_selected a:hover {
background-color: #E105C0;
border-color: rgba(148, 0, 24, 0.5);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
}
/* ---------- LAYOUT ---------- */
/* header & sort links */
.table_header{
background-color: rgba(0,0,0,0.4);
border-bottom: 0px !important;
border-color: rgba(255,255,255,0.25);
border-style: solid;
border-width: 1px 1px 0px 0px;
color: #FFF;
padding: 2px;
}
.table_headerLink{
color: #FFF;
text-decoration: none;
}
.table_headerLink:visited{
color: #FFF;
}
.table_headerLink:hover{
text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px;
}
/* content (anime titles) */
.td1, .td2{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
border-style: solid;
border-width: 1px 1px 0 0;
color: #FFF;
padding: 2px;
}
/* Links in titles */
.td1 a, .td2 a{
color: #ffc700;
text-decoration: none;
}
/* Glow effect on link hover */
.td1 a:hover, .td2 a:hover{
text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px;
}
/* Highlighting hovered row */
-o-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
}
tr:hover > .td1, tr:hover > .td2{
background-color: rgba(45,45,45,0.9) !important;
}
/* Brackets for small text like 'rewatching' or 'airing' */
.td1 > small:before, .td2 > small:before{
content:'(';
}
.td1 > small:after, .td2 > small:after{
content:')';
}
/* 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}
.borderRBL{
border-width: 1px 1px 0 36px !important;
}
.header_cw
background-position: 0px 0px;
}
.header_completed
background-position: 0px -60px;
}
.header_onhold
background-position: 0px -120px;
}
.header_dropped
background-position: 0px -240px;
}
.header_ptw
background-position: 0px -180px;
}
/* Block displaying category totals */
.category_totals{
background-color: rgba(0,0,0,0.5);
border: solid 1px rgba(255,255,255,0.25);
color: #fff;
font-weight: bold;
padding-left: 37px !important;
padding: 2px;
text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px;
}
/* Text displaying global totals */
#grand_totals{
color: #fff;
display: block;
font-size: larger;
font-weight: bold;
padding: 5px;
text-align: center;
text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px;
text-transform: uppercase;
}
/* Modifying copyright section */
#copyright{
background-color: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.25);
color: white;
margin-bottom: 40px;
padding: 2px;
}
#copyright a{color: #FFF}
#copyright br{display:none}
/* Highlighting hovered row */
-o-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
}
tr:hover > .td1, tr:hover > .td2{
background-color: rgba(45,45,45,0.9) !important;
tr:hover [class^="td"] {
background-color: rgba(4, 150, 100, 0.9) !important;
/*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;
}
/* Header image for Currently Watching, Completed, Dropped, etc... */
.header_title{
color: transparent;
content: none;
height: 60px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
width: 520px;
}
.header_cw
background-position: 0px 0px;
}
.header_completed
background-position: 0px -60px;
}
.header_onhold
background-position: 0px -120px;
}
.header_dropped
background-position: 0px -240px;
}
.header_ptw
background-position: 0px -180px;
}
/*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;
}
/*
CURRENTLY WATCHING/READING HEADER
This is the header above currently watching/reading. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list.
*/
.header_cw {
background-image:url(http://i.imgur.com/VImNB.png);
background-position: 190px 0px;
height: 75px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}
/*
COMPLETED HEADER
This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list.
*/
.header_completed {
background-image:url(http://i.imgur.com/VImNB.png);
background-position: 190px -50px;
height: 75px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}
/*
ON-HOLD HEADER
This is the header above your animes/mangas on-hold. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list.
*/
.header_onhold {
background-image:url(http://i.imgur.com/VImNB.png);
background-position: 175px -110px;
height: 75px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}
/*
DROPPED HEADER
This is the header above your dropped animes/mangas. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list.
*/
.header_dropped {
background-image:url(http://i.imgur.com/VImNB.png);
background-position: 190px -230px;
height: 75px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}
/*
PLAN TO WATCH/READ HEADER
This is the header above the anime/manga you plan to see or read on your list. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind
the list.
*/
.header_ptw {
background-image:url(http://i.imgur.com/VImNB.png);
background-position: 190px -175px;
height: 75px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:;
font-size:;
}
/*
REMOVE HEADER COLOR
You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this
color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section.
*/
.header_title {
background-color: transparent !important;
}
/*
OTHER CODES
Stuff I had to add after site changes. You need this otherwise the headers won't be visible.
*/
tbody
{background-color: transparent;
background-image: none;}
.header_title {
color: gray !important;
color: transparent !important;
font-size: 1px !important;
font-size: 0px !important;
font-size: 0 !important;
font-size: 0pt !important;
}
tr:hover [class^=td] {
background-color: rgba(4, 150, 100, 0.9) !important;
} Pasted: Jan 2, 2016, 6:28:37 am
Views: 104