[CSS - CLASSIC] Display covers and mini-reviews on hover

Offline

Jan 2012

1578

Double check your code before ask help

@import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Yuno/TopMenu.css);
@import url(http://dl.dropboxusercontent.com/u/78340470/anime.css);
@import url(http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css);

/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/

/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!

If you're not seeing a background, make sure you are copied the
entire CSS code or added any new background image codes correctly.
Also your image link may be broken, try uploading a new background then!
*/

body {
background-image:
url(http://i44.tinypic.com/23vdxm8.jpg);
background-attachment: fixed;
}

/*
HEADER COLOR AND FONT
These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations).
*/

.header_title {
background-color:blue;
color:yellow;
font-family:english111 vivace bt;
font-size:48px;
}

/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/

.table_header { background-color:navy; }

/*
ANIME/MANGA TITLE FONTS
This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc.
*/

.animetitle, .animetitle:visited {
color:cyan;
font-family:comic Sans MS;
font-size:20px;
}

/*
LIST FONTS
This is the type and color for more of the numbers, links, and words on the list itself!
*/

.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:white;
font-family:Lucida Grande;
}

/*
LIST WIDTH
Use this to increase the width of your list!
*/

#list_surround {
width:800px;
}

/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.

You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center.

So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%".
If you want it to start from the top and left, use "top left"
If you want it to start from the top and center, use "top center".
If you want it to start from the right and top, use "right top"
If you want it to start from the right and bottom, use "right bottom"
and so forth...

Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom.
*/

body{
background-position: center 43%;}

/*OTHER CODES
Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club!
*/

body {
font-weight: light;
background-repeat: no-repeat;
background-color: black;
}
#list_surround {
margin:auto;
background-image:url();
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:red;
text-decoration:underline;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-image:url(http://img15.imageshack.us/img15/228/frame6518.png);
border-width:0;
padding:2px;
}

.category_totals:HOVER,
.td1:HOVER,
.td2:HOVER,
#grand_totals:HOVER,
#copyright:HOVER {background-color:black;
border-width:0;
padding:2px;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info.";
}
.status_selected {
background-color:black;
padding:2px;
color:white;
text-decoration: blink;
}
.status_not_selected {
background-color:black;
padding:2px;
color:white;
}
.status_selected a{
color:cyan;
}
.status_not_selected a{
color:white;
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
height:52px;
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}

/*
Anime List only

.header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw {
height: 350px;
margin-bottom: 0;
background-color: transparent;
background-repeat: no-repeat;
}

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://i41.tinypic.com/30ii9hv.jpg); }

/*
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://i40.tinypic.com/2vd5s35.png); }

/*
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://i41.tinypic.com/2nly3op.png); }

/*
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://i42.tinypic.com/r9e41v.jpg); }

/*
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://i41.tinypic.com/s4ncsi.png); }

/*
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;
}

/*
REMOVE HEADER TEXT
These codes remove the original text like "Completed" and "Currently Watching" from
each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way.
*/
.header_title {
color: gray !important;
color: transparent !important;
font-size: 1px !important;
font-size: 0px !important;
font-size: 0 !important;
font-size: 0pt !important;
}

/* COVER AREA
The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover).

Move the actual section by changing the numbers after the top and left codes.
Resize the pic with the px amount after background-size:. It will resize the actual cover pic!
Adjust the surrounding colored area with the px amounts after padding. Height and width can do this too.
Change the position of the cover pic with the % amounts after background-position. Its by default set to be 50% to the left (centered horizontally) and 50% from the top (centered vertically).
Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away.
Increase height and width to make the pics bigger.
Delete border-style: solid; to remove the border.

For changing the original background color see the bottom of the original post:
http://myanimelist.net/forum/?topicid=563993
*/

:hover + .hide {
background-color: rgba(200, 5, 200, 0.75);
background-position: 50% 18% !important;
background-repeat: no-repeat !important;
background-size: 250px auto !important;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 1px;
display: block !important;
height: 498px;
left: 677px;
padding: 79px 40px 10px 10px;
position: fixed;
top: 60px;
width: 234px;
}

/* PREVIEW MSG ABOVE COVERS
Remove content: "preview"; to remove the PREVIEW text.
Change the text in quotations after content to what you want it to say above your cover pic.
Top and width controls the position of the text.
*/

.hide:before {
background: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
content: "PREVIEW";
padding-bottom: 5px;
position: absolute;
text-align: center;
top: 10px;
width: 262px;
}

/* TAGS AREA
Move the area around with the left and top codes.
Adjust the surrounding area of the tags by adjusting the padding.
Control the height and width of the section with the height and width codes.

If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993&show=0#post1
*/

.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-color: transparent !important;
display: none;
height: 145px;
left: 686px;
padding: 10px 10px 0 24px;
position: fixed;
top: 459px;
width: 235px;
z-index: 1;
background-image: url(none) !important;
}

/* HEADER
Deletes the header Tags which isn't necessary.
*/
.table_header:nth-of-type(6) {
display: none;
}

/* TAG EDIT BUTTON
Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags.
*/
td:nth-of-type(6)a {
display: none;
}

Nov 20, 2013 5:53 PM

#67

Exstatic

Offline

Jul 2013

9

Forgive my stupidness/carelessness :X

Thank you so very much!

ExstaticNov 20, 2013 5:59 PM

Dec 23, 2013 3:20 PM

#68

Offline

Mar 2013

14

I'm having an issue in Google chrome where the row gets slightly shortened during the hover. It's not a problem in Firefox.

I also had an issue where the Tags section would appear in the table_header area when hovering in all but the first section when All Anime was displayed (i.e. it wouldn't happen for Watching, but would for Completed). I fixed that by adding a little bit of code to the CSSforFoxgirls.css file.

Based on this other problem I fixed, I suspect it's like Chrome is somehow giving the Tag section some width for some reason where Firefox doesn't (though really I have no idea). It's actually kind of cool in a way, but does anyone know what's going on?

Dec 23, 2013 9:04 PM

#69

Offline

Jan 2012

1578

Use this:

@import url(http://fonts.googleapis.com/css?family=Belleza|Bilbo+Swash+Caps);
@import "https://dl.dropboxusercontent.com/u/78340470/anime.css";
@import "https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/IconStyleCSS_darker.css";

#list_surround small a:last-of-type {
display: none !important;
}

#list_surround small {
visibility: hidden;
}
.animetitle + small {
visibility: visible !important;
}

#list_surround a[href*="http://myanimelist.net/panel.php?go=edit"],
#list_surround a[href*="http://myanimelist.net/editlist.php?type="],
#list_surround a[href*="http://myanimelist.net/panel.php?go=add"] {
visibility: visible !important;
margin-right: 10px
}

BODY
{
color: #DEDEFA;
font-size: 16px;
font-family: Belleza, "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
font-weight: 300;
background-color: rgb(0, 0, 0);
background-image: url(http://i980.photobucket.com/albums/ae283/xuyguo/kurumi_zps34fa0258.png~original);
/*background image from OolimekilnoO http://oolimekilnoo.deviantart.com/art/Date-A-Live-Kurumi-Tokisaki-Wallpaper-418197189*/
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
/*
// Determines the positioning of your list
*/

#list_surround
{
width: 900px !important;
margin-left: 60px;
}

/*
// All links on your list
*/

a
{
color: #DEDEFA;
text-decoration: none;
}

a:visited
{
color: #DEDEFA;
}

a:hover
{
color: #fff76d;
}

/*
// Alternating row color 1
*/

.td1
{
/*background: rgba(147,35,0,.7);*/
background: rgba(30,30,30,.7);
}

/*
// Alternating row color 2
*/

.td2
{
background: rgba(30,30,30,.7);
}

/*
// This represents the "Anime Title", "Score", "# Eps" columns
*/

.table_header
{
background: rgba(147, 35, 0, 0.7);
font-weight: 600;
}

/*Borders*/
.td1, .td2, .table_header {
border-color: #828282;
border-style: solid;
border-width: 0 0 1px !important;
}
td.table_header:nth-of-type(1) {
border-right-width: 0 !important;
}

tr:hover [class^=td] {
background-color: rgba(147, 35, 0, 0.7) !important;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}
tr:hover [class^=td]:last-of-type{
background-color: rgba(30, 30, 30, 0.7) !important;
}

/*
// headerLink represents the color of the links inside the_header
*/

.table_headerLink
{
color: ;
}

.table_headerLink:Visited
{
color: ;
}

.table_headerLink:Hover
{
color: ;
}

/*
// Controls the select form decoration (the drop down select box)
*/

.form
{
border-width: 8px;
border-color: #A60000;
border-style: double;
color: #333333;
padding: 10px;
font-size: 12px;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;;
}

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

.header_cw
{

}

.header_completed
{

}

.header_onhold
{

}

.header_dropped
{

}

.header_ptw
{

}

.header_title {
color: #e3c41e;
font-size: 36px;
font-weight: 700;
font-family: 'Bilbo Swash Caps', fantasy, Arial, sans-serif;
padding-bottom: 5px;
margin-bottom: 5px;
padding-left: 20px;

}

.category_totals
{

}

#grand_totals
{
text-align: center;
}

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

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

/* header_al_links is thewith 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: 600;
}

td[class^='td']:nth-child(1) { width: 30px; }

td[class^='td']:nth-child(2) { display: inline-block; width: 665px; }

td[class^='td']:nth-child(3) { width: 45px; }

td[class^='td']:nth-child(4) { width: 50px; }

td[class^='td']:nth-child(5) { width: 70px; }

/* COVER AREA
The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover).

Move the actual section by changing the numbers after the top and left codes.
Resize the pic with the px amount after background-size:. It will resize the actual cover pic!
Adjust the surrounding colored area with the px amounts after padding. Height and width can do this too.
Change the position of the cover pic with the % amounts after background-position. Its by default set to be 50% to the left (centered horizontally) and 50% from the top (centered vertically).
Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away.
Increase height and width to make the pics bigger.
Delete border-style: solid; to remove the border.

For changing the original background color see the bottom of the original post:
http://myanimelist.net/forum/?topicid=563993
*/

:hover + .hide {
background-color: rgba(30, 30, 30, 0.7);
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
background-size: 250px auto !important;
border-color: #828282;
border-radius: 8px 8px 8px 8px;
border-style: solid;
border-width: 2px;
display: block !important;
height: 350px;
left: 1050px;
padding: 79px 40px 10px 10px;
position: fixed;
top: 112px;
width: 234px;
}

/* PREVIEW MSG ABOVE COVERS
Remove content: "preview"; to remove the PREVIEW text.
Change the text in quotations after content to what you want it to say above your cover pic.
Top and width controls the position of the text.
*/
/*
.hide:before {
background: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
padding-bottom: 5px;
position: absolute;
text-align: center;
top: 10px;
width: 262px;
}*/

/* TAGS AREA
Move the area around with the left and top codes.
Adjust the surrounding area of the tags by adjusting the padding.
Control the height and width of the section with the height and width codes.

If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993&show=0#post1
*/

td[class^='td']:nth-of-type(6) {
background-color: rgba(30, 30, 30, .7) !important;
border-color: #828282;
border-radius: 8px;
border-style: solid;
border-width: 2px !important;
display: none;
height: 160px;
width: 250px;
padding: 10px 10px 0 24px;
position: fixed;
top: 570px;
left: 1050px;
}

/* TABLE HEADER
Deletes the table header Tags which isn't necessary.
*/
.table_header[width="125"] { display: none; }

/* TAG EDIT BUTTON
Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags.
*/
td:nth-of-type(6) div a {
display: none;
}

/*Global Padding*/
.header_title:hover, #grand_totals:hover, .table_header:hover, .category_totals:hover, #copyright:hover, .header_title, .td1, #grand_totals, .table_header, .category_totals, .td2, #copyright{
padding: 4px;
}

.table_header:nth-of-type(1) {
border-radius: 8px 0 0 0;
}

.table_header:nth-of-type(5) {
border-radius: 0 8px 0 0;
}

/*Move the damn links*/
/*
CURRENTLY WATCHING/READING LINK AREA
*/
.status_selected, .status_not_selected {
position: fixed;
margin-top: 0;
right:60px;
top: 112px;
min-width: 201px;
padding: 18px 0 18px 0;
border-radius: 10px 10px 10px 10px;
font-size: 19px;

}

.status_not_selected{
background: url(https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/clockwork_selector_black.png) rgba(30,30,30,.7);
border: 1px solid #828282 !important;
}

.status_not_selected:hover, .status_selected{
background: url(https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/clockwork_selector_red.png) rgba(147,35,0,.7);
border: 1px solid #828282 !important;
}
/*
COMPLETED LINK AREA
*/

.status_not_selected:nth-of-type(2), .status_selected:nth-of-type(2) {
top: 172px;
}

/*
ON HOLD LINK AREA
*/

.status_not_selected:nth-of-type(3), .status_selected:nth-of-type(3) {
top: 232px;
}

/*
DROPPED LINK AREA
*/

.status_not_selected:nth-of-type(4), .status_selected:nth-of-type(4){
top: 292px;
}

/*
PLANNED LINK AREA
*/

.status_not_selected:nth-of-type(5), .status_selected:nth-of-type(5) {
top:352px;
}

/*
ALL ANIME/MANGA LINK AREA
*/

.status_not_selected:nth-of-type(6), .status_selected:nth-of-type(6) {
top: 412px;
}

.status_selected {
margin-right: 3px;
}

.status_not_selected:hover{
margin-right: 6px;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}

/*
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: 6px;
text-align: center;
margin: 0 auto;
width: px;
}

Dec 23, 2013 10:34 PM

#70

Offline

Mar 2013

14

Thanks, but with that the tag box actually doesn't appear - I think it's because it doesn't have the hover styles from the top of the CSSforFoxgirls.css file.

I tried just adding that back in and the shift is still there, but very much lessened to about just 1 pixel.

Actually, I tried it on IE too and it's fine, so looks like it's just Chrome.

xjointDec 23, 2013 10:41 PM

Dec 23, 2013 10:42 PM

#71

Offline

Jan 2012

1578

Leave the code I gave without changes just add:

#list_surround table:nth-of-type(n+4):hover td[class^='td']:nth-of-type(6) { display: block; }

Dec 23, 2013 11:20 PM

#72

Offline

Mar 2013

14

Thanks that has the same effect but is much cleaner.

Still shifts 1px in Chrome - I'm guessing it's some type of Chrome glitch since the other browsers seem fine?

Dec 23, 2013 11:32 PM

#73

Offline

Jan 2012

1578

In my Chrome all is OK. Do you have the latest version?

Dec 23, 2013 11:39 PM

#74

Offline

Mar 2013

14

Yeah it says up to date. If it's fine on yours though, then that's pretty odd. I suppose it could just be something specific to mine. At least it's not that much of a problem.

Thanks for all the help!

Dec 24, 2013 12:02 AM

#75

Offline

Feb 2010

12625

Hahaido: Should I add something from what you posted to CSSforfoxgirls (targetting only Chrome) to fix this on any layout using this, or was the problem only specific to his list

@joint: wow, nice list!

Dec 24, 2013 2:23 AM

#76

Offline

Jan 2012

1578

2xjoint: try this now:

@import url(http://fonts.googleapis.com/css?family=Belleza|Bilbo+Swash+Caps);
@import "https://dl.dropboxusercontent.com/u/78340470/anime.css";
@import "https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/IconStyleCSS_darker.css";

#list_surround small a:last-of-type {
display: none !important;
}

#list_surround small {
visibility: hidden;
}
.animetitle + small {
visibility: visible !important;
}

#list_surround a[href*="http://myanimelist.net/panel.php?go=edit"],
#list_surround a[href*="http://myanimelist.net/editlist.php?type="],
#list_surround a[href*="http://myanimelist.net/panel.php?go=add"] {
visibility: visible !important;
margin-right: 10px
}

BODY
{
color: #DEDEFA;
font-size: 16px;
font-family: Belleza, "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
font-weight: 300;
background-color: rgb(0, 0, 0);
background-image: url(http://i980.photobucket.com/albums/ae283/xuyguo/kurumi_zps34fa0258.png~original);
/*background image from OolimekilnoO http://oolimekilnoo.deviantart.com/art/Date-A-Live-Kurumi-Tokisaki-Wallpaper-418197189*/
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

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

#list_surround
{
width: 900px !important;
margin-left: 60px;
}

/*
// All links on your list
*/

a
{
color: #DEDEFA;
text-decoration: none;
}

a:visited
{
color: #DEDEFA;
}

a:hover
{
color: #fff76d;
}

/*
// Alternating row color 1
*/

.td1
{
/*background: rgba(147,35,0,.7);*/
background: rgba(30,30,30,.7);
}

/*
// Alternating row color 2
*/

.td2
{
background: rgba(30,30,30,.7);
}

/*
// This represents the "Anime Title", "Score", "# Eps" columns
*/

.table_header
{
background: rgba(147, 35, 0, 0.7);
font-weight: 600;
}

/*Borders*/
.td1, .td2, .table_header {
border-color: #828282;
border-style: solid;
border-width: 0 0 1px !important;
}
td.table_header:nth-of-type(1) {
border-right-width: 0 !important;
}

tr:hover [class^=td] {
background-color: rgba(147, 35, 0, 0.7) !important;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}
tr:hover [class^=td]:last-of-type{
background-color: rgba(30, 30, 30, 0.7) !important;
}

/*
// headerLink represents the color of the links inside the_header
*/

.table_headerLink
{
color: ;
}

.table_headerLink:Visited
{
color: ;
}

.table_headerLink:Hover
{
color: ;
}

/*
// Controls the select form decoration (the drop down select box)
*/

.form
{
border-width: 8px;
border-color: #A60000;
border-style: double;
color: #333333;
padding: 10px;
font-size: 12px;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;;
}

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

.header_cw
{

}

.header_completed
{

}

.header_onhold
{

}

.header_dropped
{

}

.header_ptw
{

}

.header_title {
color: #e3c41e;
font-size: 36px;
font-weight: 700;
font-family: 'Bilbo Swash Caps', fantasy, Arial, sans-serif;
padding-bottom: 5px;
margin-bottom: 5px;
padding-left: 20px;

}

.category_totals
{

}

#grand_totals
{
text-align: center;
}

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

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

/* header_al_links is thewith 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: 600;
}

/*Reduces row shift effect in chrome, but messes up appearence when you zoom in.*/
td[class^='td']:nth-child(2) { display: inline-block; width: 705px; }

/* COVER AREA
The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover).

Move the actual section by changing the numbers after the top and left codes.
Resize the pic with the px amount after background-size:. It will resize the actual cover pic!
Adjust the surrounding colored area with the px amounts after padding. Height and width can do this too.
Change the position of the cover pic with the % amounts after background-position. Its by default set to be 50% to the left (centered horizontally) and 50% from the top (centered vertically).
Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away.
Increase height and width to make the pics bigger.
Delete border-style: solid; to remove the border.

For changing the original background color see the bottom of the original post:
http://myanimelist.net/forum/?topicid=563993
*/

:hover + .hide {
background-color: rgba(30, 30, 30, 0.7);
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
background-size: 250px auto !important;
border-color: #828282;
border-radius: 8px 8px 8px 8px;
border-style: solid;
border-width: 2px;
display: block !important;
height: 350px;
left: 1110px;
padding: 79px 40px 10px 10px;
position: fixed;
top: 112px;
width: 234px;
}

/* PREVIEW MSG ABOVE COVERS
Remove content: "preview"; to remove the PREVIEW text.
Change the text in quotations after content to what you want it to say above your cover pic.
Top and width controls the position of the text.
*/
/*
.hide:before {
background: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
padding-bottom: 5px;
position: absolute;
text-align: center;
top: 10px;
width: 262px;
}*/

/* TAGS AREA
Move the area around with the left and top codes.
Adjust the surrounding area of the tags by adjusting the padding.
Control the height and width of the section with the height and width codes.

If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993&show=0#post1
*/

td[class^='td']:nth-of-type(6) {
visibility: hidden;
background-color: rgba(30, 30, 30, .7) !important;
border-color: #828282;
border-radius: 8px;
border-style: solid;
border-width: 2px !important;
display: block;
height: 160px;
width: 250px;
padding: 10px 10px 0 24px;
position: fixed;
top: 570px;
left: 1110px;
}

tr:hover td[class^='td']:nth-of-type(6) { visibility: visible; }

/* TABLE HEADER
Deletes the table header Tags which isn't necessary.
*/
.table_header[width="125"] { display: none; }

/* TAG EDIT BUTTON
Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags.
*/
td:nth-of-type(6) div a {
display: none;
}

/*Global Padding*/
.header_title:hover, #grand_totals:hover, .table_header:hover, .category_totals:hover, #copyright:hover, .header_title, .td1, #grand_totals, .table_header, .category_totals, .td2, #copyright{
padding: 4px;
}

.table_header:nth-of-type(1) {
border-radius: 8px 0 0 0;
}

.table_header:nth-of-type(5) {
border-radius: 0 8px 0 0;
}

/*Move the damn links*/
/*
CURRENTLY WATCHING/READING LINK AREA
*/
.status_selected, .status_not_selected {
position: fixed;
margin-top: 0;
right:60px;
top: 112px;
min-width: 201px;
padding: 18px 0 18px 0;
border-radius: 10px 10px 10px 10px;
font-size: 19px;

}

.status_not_selected{
background: url(https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/clockwork_selector_black.png) rgba(30,30,30,.7);
border: 1px solid #828282 !important;
}

.status_not_selected:hover, .status_selected{
background: url(https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/clockwork_selector_red.png) rgba(147,35,0,.7);
border: 1px solid #828282 !important;
}
/*
COMPLETED LINK AREA
*/

.status_not_selected:nth-of-type(2), .status_selected:nth-of-type(2) {
top: 172px;
}

/*
ON HOLD LINK AREA
*/

.status_not_selected:nth-of-type(3), .status_selected:nth-of-type(3) {
top: 232px;
}

/*
DROPPED LINK AREA
*/

.status_not_selected:nth-of-type(4), .status_selected:nth-of-type(4){
top: 292px;
}

/*
PLANNED LINK AREA
*/

.status_not_selected:nth-of-type(5), .status_selected:nth-of-type(5) {
top:352px;
}

/*
ALL ANIME/MANGA LINK AREA
*/

.status_not_selected:nth-of-type(6), .status_selected:nth-of-type(6) {
top: 412px;
}

.status_selected {
margin-right: 3px;
}

.status_not_selected:hover{
margin-right: 6px;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}

/*
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: 6px;
text-align: center;
margin: 0 auto;
}

Shishio-kun said:
Hahaido: Should I add something from what you posted to CSSforfoxgirls (targetting only Chrome) to fix this on any layout using this, or was the problem only specific to his list

That trouble occurs when you're using popup tags effect. Do not use following code when hiding tags:

display: none;

use this instead:

visibility: hidden;

and this on hover:

visibility: visible;

Dec 24, 2013 4:14 PM

#77

Offline

Mar 2013

14

@Shishio: Thanks ^^

Hahaido: That prevents any shifting during the hover but actually causes misalignment of the table columns. Because of the different lengths of shows for progress it's causing type and score sections to be shifted out of alignment. Also, something that's only noticeable to me is that the width of 705px on the inline-block element is too long. Anything over 700px causes this problem:
https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/problem1.jpg because of the added '+' in the progress section when I view my own list.

Dec 24, 2013 8:21 PM

#78

Offline

Jan 2012

1578

Another edit:

@import url(http://fonts.googleapis.com/css?family=Belleza|Bilbo+Swash+Caps);
@import "https://dl.dropboxusercontent.com/u/78340470/anime.css";
@import "https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/IconStyleCSS_darker.css";

#list_surround small a:last-of-type {
display: none !important;
}

#list_surround small {
visibility: hidden;
}
.animetitle + small {
visibility: visible !important;
}

#list_surround a[href*="http://myanimelist.net/panel.php?go=edit"],
#list_surround a[href*="http://myanimelist.net/editlist.php?type="],
#list_surround a[href*="http://myanimelist.net/panel.php?go=add"] {
visibility: visible !important;
margin-right: 10px
}

BODY
{
color: #DEDEFA;
font-size: 16px;
font-family: Belleza, "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
font-weight: 300;
background-color: rgb(0, 0, 0);
background-image: url(http://i980.photobucket.com/albums/ae283/xuyguo/kurumi_zps34fa0258.png~original);
/*background image from OolimekilnoO http://oolimekilnoo.deviantart.com/art/Date-A-Live-Kurumi-Tokisaki-Wallpaper-418197189*/
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

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

#list_surround
{
width: 900px !important;
margin-left: 60px;
}

/*
// All links on your list
*/

a
{
color: #DEDEFA;
text-decoration: none;
}

a:visited
{
color: #DEDEFA;
}

a:hover
{
color: #fff76d;
}

/*
// Alternating row color 1
*/

.td1
{
/*background: rgba(147,35,0,.7);*/
background: rgba(30,30,30,.7);
}

/*
// Alternating row color 2
*/

.td2
{
background: rgba(30,30,30,.7);
}

/*
// This represents the "Anime Title", "Score", "# Eps" columns
*/

.table_header
{
background: rgba(147, 35, 0, 0.7);
font-weight: 600;
}

/*Borders*/
.td1, .td2, .table_header {
border-color: #828282;
border-style: solid;
border-width: 0 0 1px !important;
}
td.table_header:nth-of-type(1) {
border-right-width: 0 !important;
}

tr:hover [class^=td] {
background-color: rgba(147, 35, 0, 0.7) !important;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}
tr:hover [class^=td]:last-of-type{
background-color: rgba(30, 30, 30, 0.7) !important;
}

/*
// headerLink represents the color of the links inside the_header
*/

.table_headerLink
{
color: ;
}

.table_headerLink:Visited
{
color: ;
}

.table_headerLink:Hover
{
color: ;
}

/*
// Controls the select form decoration (the drop down select box)
*/

.form
{
border-width: 8px;
border-color: #A60000;
border-style: double;
color: #333333;
padding: 10px;
font-size: 12px;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;;
}

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

.header_cw
{

}

.header_completed
{

}

.header_onhold
{

}

.header_dropped
{

}

.header_ptw
{

}

.header_title {
color: #e3c41e;
font-size: 32px;
font-weight: 700;
font-family: 'Bilbo Swash Caps', fantasy, Arial, sans-serif;
padding-bottom: 5px;
margin-bottom: 5px;
padding-left: 20px;

}

.category_totals
{

}

#grand_totals
{
text-align: center;
}

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

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

/* header_al_links is thewith 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: 600;
}

/*Reduces row shift effect in chrome, but messes up appearence when you zoom in.*/
td[class^='td']:nth-child(2) { display: inline-block; width: 705px; }

/* COVER AREA
The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS to see a DVD or manga cover).

Move the actual section by changing the numbers after the top and left codes.
Resize the pic with the px amount after background-size:. It will resize the actual cover pic!
Adjust the surrounding colored area with the px amounts after padding. Height and width can do this too.
Change the position of the cover pic with the % amounts after background-position. Its by default set to be 50% to the left (centered horizontally) and 50% from the top (centered vertically).
Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away.
Increase height and width to make the pics bigger.
Delete border-style: solid; to remove the border.

For changing the original background color see the bottom of the original post:
http://myanimelist.net/forum/?topicid=563993
*/

:hover + .hide {
background-color: rgba(30, 30, 30, 0.7);
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
background-size: 250px auto !important;
border-color: #828282;
border-radius: 8px 8px 8px 8px;
border-style: solid;
border-width: 2px;
display: block !important;
height: 350px;
left: 1110px;
padding: 79px 40px 10px 10px;
position: fixed;
top: 112px;
width: 234px;
}

/* PREVIEW MSG ABOVE COVERS
Remove content: "preview"; to remove the PREVIEW text.
Change the text in quotations after content to what you want it to say above your cover pic.
Top and width controls the position of the text.
*/
/*
.hide:before {
background: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
padding-bottom: 5px;
position: absolute;
text-align: center;
top: 10px;
width: 262px;
}*/

/* TAGS AREA
Move the area around with the left and top codes.
Adjust the surrounding area of the tags by adjusting the padding.
Control the height and width of the section with the height and width codes.

If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993&show=0#post1
*/

td[class^='td']:nth-of-type(6) {
visibility: hidden;
background-color: rgba(30, 30, 30, .7) !important;
border-color: #828282;
border-radius: 8px;
border-style: solid;
border-width: 2px !important;
display: block;
height: 160px;
width: 250px;
padding: 10px 10px 0 24px;
position: fixed;
top: 570px;
left: 1110px;
}

tr:hover td[class^='td']:nth-of-type(6) { visibility: visible; }

/* TABLE HEADER
Deletes the table header Tags which isn't necessary.
*/
.table_header[width="125"] { display: none; }

/* TAG EDIT BUTTON
Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags.
*/
td:nth-of-type(6) div a {
display: none;
}

/*Global Padding*/
.header_title:hover, #grand_totals:hover, .table_header:hover, .category_totals:hover, #copyright:hover, .header_title, .td1, #grand_totals, .table_header, .category_totals, .td2, #copyright{
padding: 4px 0;
}

.table_header:nth-of-type(1) {
border-radius: 8px 0 0 0;
}

.table_header:nth-of-type(5) {
border-radius: 0 8px 0 0;
}

/*Move the damn links*/
/*
CURRENTLY WATCHING/READING LINK AREA
*/
.status_selected, .status_not_selected {
position: fixed;
margin-top: 0;
right:60px;
top: 112px;
min-width: 201px;
padding: 18px 0 18px 0;
border-radius: 10px 10px 10px 10px;
font-size: 19px;

}

.status_not_selected{
background: url(https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/clockwork_selector_black.png) rgba(30,30,30,.7);
border: 1px solid #828282 !important;
}

.status_not_selected:hover, .status_selected{
background: url(https://dl.dropboxusercontent.com/u/96837145/Anime%20Lists/clockwork_selector_red.png) rgba(147,35,0,.7);
border: 1px solid #828282 !important;
}
/*
COMPLETED LINK AREA
*/

.status_not_selected:nth-of-type(2), .status_selected:nth-of-type(2) {
top: 172px;
}

/*
ON HOLD LINK AREA
*/

.status_not_selected:nth-of-type(3), .status_selected:nth-of-type(3) {
top: 232px;
}

/*
DROPPED LINK AREA
*/

.status_not_selected:nth-of-type(4), .status_selected:nth-of-type(4){
top: 292px;
}

/*
PLANNED LINK AREA
*/

.status_not_selected:nth-of-type(5), .status_selected:nth-of-type(5) {
top:352px;
}

/*
ALL ANIME/MANGA LINK AREA
*/

.status_not_selected:nth-of-type(6), .status_selected:nth-of-type(6) {
top: 412px;
}

.status_selected {
margin-right: 3px;
}

.status_not_selected:hover{
margin-right: 6px;
-moz-transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}

/*
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: 6px;
text-align: center;
margin: 0 auto;
}

Dec 24, 2013 8:36 PM

#79

Offline

Mar 2013

14

Okay I believe that's fixed everything. You sir are awesome - thanks a lot!

Dec 25, 2013 2:12 PM

#80

marcosmk

Offline

Jun 2012

4025

Hello to everyone, I have been tinkering with your tutorials, thanks by the way and I wanted to ask you a question.
I'm not sure what I am doing wrong, but I can't seem to make the manga covers to show up at all. I did paste both lines at the beginning as you told us to do, but only the colored background appears without the cover.
If you could help me out, I would really appreciate it.
Thanks in advance, merry Christmas to you all.

One last thing (I promise), is there a way to split ones anime and manga lists up in watching, completed and the rest? My problem is that it takes a long while to load all together and I wondered, if there was a way to only make it load the sections I choose. If you already covered this in a previous tutorial, please refer me to it. Once again thanks and good bye.

Dec 25, 2013 3:13 PM

#81

Offline

Feb 2010

12625

marcosmk said:
Hello to everyone, I have been tinkering with your tutorials, thanks by the way and I wanted to ask you a question.
I'm not sure what I am doing wrong, but I can't seem to make the manga covers to show up at all. I did paste both lines at the beginning as you told us to do, but only the colored background appears without the cover.
If you could help me out, I would really appreciate it.
Thanks in advance, merry Christmas to you all.

One last thing (I promise), is there a way to split ones anime and manga lists up in watching, completed and the rest? My problem is that it takes a long while to load all together and I wondered, if there was a way to only make it load the sections I choose. If you already covered this in a previous tutorial, please refer me to it. Once again thanks and good bye.

I fixed the file, check list again

On the second thing: go to Anime List Settings, Default status selected, choose a category other than Show All
http://myanimelist.net/editprofile.php?go=listpreferences

Dec 25, 2013 3:24 PM

#82

marcosmk

Offline

Jun 2012

4025

Thanks!

Jan 8, 2014 10:00 AM

#83

Rignak

Offline

Jun 2013

240

Hi.

I would to show the tag near the cover (which appear on hover of the line, under the anime title). I manage to position the tags with this tuto and Shishio-kun's list but I don't know how to make them disappear when the mouse isn't hovering the line.

This is the code I add to position the tag.

And this is my list.

Can you help me to make the tags disparear without the hovering of the line please ?
Thanks in advance.
PS : Take your time, I'm not in hurry.

Jan 8, 2014 3:09 PM

#84

al_exs

Offline

Apr 2012

181

*-*

for that part change:

.td1:nth-of-type(5), .td2:nth-of-type(5) {
font-size: 0 !important;
width: 1px !important;
}

for:

.td1:nth-of-type(5), .td2:nth-of-type(5) {
display: none;
width: 1px !important;
}

and add:

tbody: hover .td1:nth-of-type(5), tbody:hover .td2:nth-of-type(5) {
display: block;
}

and the only thing is that the position need to be modified, but the main part is that.

Jan 9, 2014 9:39 AM

#85

Rignak

Offline

Jun 2013

240

It works, thanks a lot.

Jan 12, 2014 1:15 AM

#86

Vladz0r

Offline

Sep 2012

1820

Awesome, I'm glad that the code can be applied separately to a pre-existing theme.
Thanks for the thread ;)

Jan 29, 2014 5:16 PM

#87

Offline

Apr 2011

700

This doesn't work with the manga list :( The background turns all white and it just doesn't seem like it's working correctly? :/

Jan 29, 2014 7:30 PM

#88

Offline

Feb 2010

12625

DarkAngelz said:
This doesn't work with the manga list :( The background turns all white and it just doesn't seem like it's working correctly? :/

edit: I think I know what might have gone wrong. Did you try putting this on the square layout, and did you put the Step 1/2 imports on the top and the Step 3 codes on the top too? Cuz if you did, it will make the background all white. Step 3 codes are instructed to go on the bottom

Shishio-kunJan 29, 2014 7:44 PM

Jan 30, 2014 9:27 AM

#89

Offline

Apr 2011

700

Shishio-kun said:

DarkAngelz said:
This doesn't work with the manga list :( The background turns all white and it just doesn't seem like it's working correctly? :/

edit: I think I know what might have gone wrong. Did you try putting this on the square layout, and did you put the Step 1/2 imports on the top and the Step 3 codes on the top too? Cuz if you did, it will make the background all white. Step 3 codes are instructed to go on the bottom

I erased everything in the box then I put the codes as instructed. I put the first two codes on the top, and then the big code below that. But again, it was a clear box when I did it.

Jan 30, 2014 12:41 PM

#90

Offline

Feb 2010

12625

DarkAngelz said:

Shishio-kun said:

DarkAngelz said:
This doesn't work with the manga list :( The background turns all white and it just doesn't seem like it's working correctly? :/

edit: I think I know what might have gone wrong. Did you try putting this on the square layout, and did you put the Step 1/2 imports on the top and the Step 3 codes on the top too? Cuz if you did, it will make the background all white. Step 3 codes are instructed to go on the bottom

I erased everything in the box then I put the codes as instructed. I put the first two codes on the top, and then the big code below that. But again, it was a clear box when I did it.

You don't erase everything in the box then add the codes from this topic. You have to leave the CSS for the layout you're putting this on in the box.

You put the imports from step one and two on the top of the CSS. Then you scroll to the bottom of the box. Put the big code from step 3 on the bottom, below all the other codes.

What list layout exactly are you trying to put this on- the square layout on your manga list?

Jan 30, 2014 12:52 PM

#91

Offline

Apr 2011

700

Oh! I thought it was just a layout by itself. I didn't try to add it to anything. I thought it was premade... my bad...

So wait, if I want to add this to my current layout (which is what's supposed to happen?) I need to change the cover configs?

I pretty much want a basic list with this cover style. Actually, I want to make it look similar to my anime list layout, but for manga... with manga pics...

The layout I have now is temporary until I can figure out how to do that

Jan 30, 2014 4:19 PM

#92

Offline

Feb 2010

12625

DarkAngelz said:
Oh! I thought it was just a layout by itself. I didn't try to add it to anything. I thought it was premade... my bad...

So wait, if I want to add this to my current layout (which is what's supposed to happen?) I need to change the cover configs?

I pretty much want a basic list with this cover style. Actually, I want to make it look similar to my anime list layout, but for manga... with manga pics...

The layout I have now is temporary until I can figure out how to do that

Its best used on a layout without covers already. But you can try adding this to a layout with covers on it already and see what happens- its not guaranteed to look right if you have two conflicting cover styles. If it looks weird after doing that, you can post here just leave it on your layout or post a link to the layout you're trying to put it on. Then we can tell you what codes to remove exactly so it works right

If you put your anime list's CSS layout on your manga list, and change the word "anime" in
@import "https://dl.dropboxusercontent.com/u/78340470/anime.css";
to "manga" it should work on your manga list

Jan 30, 2014 5:59 PM

#93

Offline

Apr 2011

700

I did what you said. I used the anime layout I have, but changed "anime" into "manga" for the import. It's a bit messed up though. http://myanimelist.net/mangalist/DarkAngelz&show=0&order=4

Code:

Jan 30, 2014 6:31 PM

#94

Offline

Feb 2010

12625

DarkAngelz said:
I did what you said. I used the anime layout I have, but changed "anime" into "manga" for the import. It's a bit messed up though. http://myanimelist.net/mangalist/DarkAngelz&show=0&order=4

Code:

By messed up do you mean how the columns are not aligned? It needs to have the same settings as the anime list, like, less columns. Otherwise if you wanna keep the columns you can just find or add this code

td[class^="td"]:nth-child(2) {
display: inline-block;
width: 705px;
}

and lower/raise the number after width until your columns are aligned right. I think it should be lowered to about 600px. If you add the code to your CSS you must add it to the very bottom

Feb 2, 2014 12:54 AM

#95

AviJii

Offline

Dec 2013

735

Hello, I've already followed the instructions. But I am still confused on how to add the cover images for each anime? Especially for those anime that are included on my completed list? Thank you this one is very helpful

私はあなたを愛して。 29915250
It takes one step backward, and two steps forward. *Avi

Feb 2, 2014 1:24 PM

#96

Offline

Feb 2010

12625

AviJii said:
Hello, I've already followed the instructions. But I am still confused on how to add the cover images for each anime? Especially for those anime that are included on my completed list? Thank you this one is very helpful

you're not seeing the thumbnail cover style due to an error in your code. see the second site problem in this post and find and delete that line its blocking one of your codes
http://myanimelist.net/forum/?topicid=731665

btw this is not the same topic for thumbnail cover style but its not important in this case

Feb 3, 2014 7:29 AM

#97

AviJii

Offline

Dec 2013

735

It's now working. Thank you very much :) .. You're so generous.

私はあなたを愛して。 29915250
It takes one step backward, and two steps forward. *Avi

Feb 3, 2014 3:16 PM

#98

Offline

Apr 2011

700

Thanks! I had no clue how to fix my list, but thanks to your advice, it now fits properly! :D

Feb 12, 2014 3:42 AM

#99

BartInfinity

Offline

May 2012

243

The way dzikibambus of xmenu doesn't work for manga list?

I downloaded file with anime covers and replace #more to #xmenu and works correctly. But when I downloaded file with manga covers and replace #more to #xmenu doesn't work correctly.

Why?

My MAL: http://mal.isvn.pl/

Imouto ga hoshii • [Tumblr] • [ISVN.pl] • [TeamSpeak 3]

Feb 23, 2014 3:44 PM

#100

bibble

Offline

Sep 2012

3

First of all thank you soooo much ^ ^ you really helped me a lot :D :D
but i have a question that even though i read it, i didn't get that much i guess ..
How can i do the same for manga list ??
i created a new layout and in that blank space first i tried using all the codes from the animelist and just change it to manga , which didn't work and then i used only the codes for this particularly which didn't work either :/
btw i did the changes and use that layout for mangalist

Feb 23, 2014 6:40 PM

#101

Offline

Feb 2010

12625

bibble said:
First of all thank you soooo much ^ ^ you really helped me a lot :D :D
but i have a question that even though i read it, i didn't get that much i guess ..
How can i do the same for manga list ??
i created a new layout and in that blank space first i tried using all the codes from the animelist and just change it to manga , which didn't work and then i used only the codes for this particularly which didn't work either :/
btw i did the changes and use that layout for mangalist

you have the codes for the manga covers preview on your list but no premade layout. the codes given here arent' a layout. its just the effect, to add to any layout. so just install whatever premade layout u want to the manga CSS box

Mar 13, 2014 7:30 AM

#102

ToG25thBaam

Offline

Jun 2011

14432

Shishio-kun said:

SylakentH_ said:
Nice tut, btw how can i make the animetitle pop up instead of the "Preview" text?
Dont seem to get it with firebug :/

Quick fix. You simply move that section over there with
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(2)

or just the anime title
#list_surround table:nth-of-type(n+4):hover td:nth-of-type(2) .animetitle

Move either selector to the cover pic with position fixed and left/right codes.

but it will have to be imported which you know how to do. I'm already planning to add that as an easy feature that won't have to be imported and I found a way to take the text from a section and move that while keeping the original text intact, so the codes used here will be outdated later when I can budget the time for this subject more which has been extremely difficult to make easy. Also I want to alter the DVD display code being used to more button works.

Can you please explain this again? Is it possible to have the anime title itself appear on top of the cover picture, instead of the "preview"?

Here is my CSS.

Honobono Log - best slice of life short
--------------------------------------------
most kawaii loli overlord
----------------------------
Donquixote Doflamingo AMV - Control

Mar 13, 2014 9:32 PM

#103

Offline

Jan 2012

1578

That's possible:

@import "https://dl.dropboxusercontent.com/u/78340470/anime.css";
@import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";

/*
Got a question or want to learn more? Try this link:
http://myanimelist.net/forum/?topicid=419405&show=0#post1
*/

/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!

If you're not seeing a background, make sure you are copied the
entire CSS code or added any new background image codes correctly.
Also your image link may be broken, try uploading a new background then!
*/

body {
background-image: url(http://i59.tinypic.com/iw52z9.jpg);
background-attachment: fixed;
}

/*
HEADER COLOR AND FONT
These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). if you don't want a solid color there, go to the line that starts with background-color and replace it the color type (blue for example) with the word "transparent" (no quotations).
*/

.header_title {
background-color:transparent;
color:gold;
font-family:gabriola;
font-size:36px;
}

/*
SUB-HEADERS BACKGROUND COLOR COLOR
Below each main header is the sub-header which says Score, Episodes, Tags, etc.
*/

.table_header { background-color:lightslategray; }

/*
ANIME/MANGA TITLE FONTS
This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc.
*/

.animetitle, .animetitle:visited {
color:black;
font-family:gabriola;
font-size:20px;
}

.td1, .td2 { line-height: 16px; padding: 4px 0; }

tr:hover td[class^="td"] { background-color: blue; }

tr:hover .animetitle span {
position: fixed;
display: block;
left: 3px;
top: 130px;
}

/*
LIST FONTS
This is the type and color for more of the numbers, links, and words on the list itself!
*/

.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color:white;
font-family:mv boli;
}

/*
LIST WIDTH
Use this to increase the width of your list!
*/

#list_surround {
width:550px;
}

/*
REPOSITION MAIN BACKGROUND
Change the position your background starts on your screen from with the two properties after "background-position" below.

You replace 'center' and '43%' with two other properties, they can be any of the following: left, top, bottom, right, or center.

So if you want your background to start from the center of the screen, use "center center" after background-position in the code below, replacing "center 43%".
If you want it to start from the top and left, use "top left"
If you want it to start from the top and center, use "top center".
If you want it to start from the right and top, use "right top"
If you want it to start from the right and bottom, use "right bottom"
and so forth...

Additionally, you can change "left" to a % to determine how far left or right the background starts from. For example "30% top" will start the background from the top but 30% of the pic's width from the left of the layout. You can also change top to a % to change the amount you want to start it from the top or bottom.
*/

body{
background-position: center 43%;}

/*OTHER CODES
Important codes for the layout's setup. Don't mess with these unless you know exactly what you're doing. If you want to customize more on the page, use the link at the top of this CSS, or ask in my club!
*/

body {
font-weight: light;
background-repeat: no-repeat;
background-color: black;
}
#list_surround {
margin:auto;
background-image:url();
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover, a:visited:hover {
color:red;
text-decoration:underline;
}
.category_totals,
.td1,
.td2,
#grand_totals,
#copyright {
background-image:url(http://img15.imageshack.us/img15/228/frame6518.png);
}

#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs or info.";
}
.status_selected {
background-color:black;
padding:2px;
color:white;
text-decoration: blink;
}
.status_not_selected {
background-color:black;
padding:2px;
color:white;
}
.status_selected a{
color:cyan;
}
.status_not_selected a{
color:white;
}
.thickbox {
color:cyan;
font-family:fantasy;
font-size:12px;
}
.header_title {
height:52px;
padding:2px;
}
.table_header {
border-width:0;
font-weight:bold;
padding:2px;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}

#list_surround {
position: absolute !important;
left: 267px !important;}

/* COVER AREA
The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS).
Left and top adjust the position it appears on screen.
Control the height and width of the pic with height and width.
Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away.
Increase height and width to make the pics bigger.
Delete border-style: solid; to remove the border.
*/
:hover + .hide {
background-size: cover;
left: 3px;
top: 160px;
height: 350px;
width: 226px;
border-style: solid;
border-color: transparent;
border-top: 1px solid transparent;;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
border-radius: 25px;
background-color: rgba(200, 5, 200, 0);
background-position: center 50% !important;
background-repeat: no-repeat !Important;
display: block !important;
position: fixed;
}

/* PREVIEW MSG ABOVE COVERS
Remove content: "preview"; to remove the PREVIEW text.
Change the text in quotations after content to what you want it to say above your cover pic.
Top and width controls the position of the text.
*/
.hide:before {
background: transparent;
color: white;
content: ;
padding-bottom: 5px;
position: absolute;
text-align: center;
width: 225px;
top: -25px;
border-radius: 25px 25px 0 0;
}

/* TAGS AREA
Move the area around with the left and top codes.
Adjust the surrounding area of the tags by adjusting the padding.
Control the height and width of the section with the height and width codes.

If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993&show=0#post1
*/

.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-color: rgba(20, 30, 255, 0) !important;
border-color: transparent;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 1px;
display: none;
height: 145px;
width: 312px;
padding: 10px 10px 0px 24px;
position: fixed;
top: 150px;
left: 875px;
z-index: 1;
}

/* HEADER
Deletes the header Tags which isn't necessary.
*/
.table_header:nth-of-type(6) {
display: none;
}

/* TAG EDIT BUTTON
Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags.
*/
td:nth-of-type(6)a {
display: none;
}

Mar 15, 2014 4:52 PM

#104

Offline

Dec 2013

7

Hey! Thanks so much for the tutorial. I just have one quick question.

Is it possible to make the cover corners straight rather than round, if you know what I mean? Sorry if this has been asked before, I just can't seem to be able to find it.

EDIT: If it's appropriate, while I'm at it, I also wanted to ask if you can insert some sort of music player into your list. Thanks in advance.

suddenlytanukiMar 15, 2014 11:01 PM

Mar 16, 2014 10:01 AM

#105

nymphiae

Offline

Jul 2013

381

Kenny_was_afk said:
Hey! Thanks so much for the tutorial. I just have one quick question.

Is it possible to make the cover corners straight rather than round, if you know what I mean? Sorry if this has been asked before, I just can't seem to be able to find it.

EDIT: If it's appropriate, while I'm at it, I also wanted to ask if you can insert some sort of music player into your list. Thanks in advance.

it's in the instructions... remove border-radius: 25px 25px 25px 25px; line.
as for music player, I don't think it's possible.

✦ anime list | manga list | css list layouts ✦

Mar 16, 2014 7:48 PM

#106

Offline

Dec 2013

7

kuronekodesu said:

it's in the instructions... remove border-radius: 25px 25px 25px 25px; line.
as for music player, I don't think it's possible.

Sorry, didn't find it there right away. Thanks for the help.

Mar 18, 2014 3:19 PM

#107

Offline

Feb 2010

12625

Kenny_was_afk said:

EDIT: If it's appropriate, while I'm at it, I also wanted to ask if you can insert some sort of music player into your list. Thanks in advance.

Not a player I know of but when they restore YT tags we will be able to link Youtube videos to our lists again

Mar 24, 2014 2:28 PM

#108

DeathNyx

Offline

Jan 2011

1598

I don't know if someone asked about this but i've a question:
The Cover Area is blocked always in the same position, is there a way to make it appear near the anime title everytime you hover on it? I hope to have explained it well.

I imagine that you've to work on these lines:

Ps: i already know how to adjust the position/dimension by using "top", "left", "height", "width.

Mar 26, 2014 9:59 PM

#109

Offline

Dec 2013

7

Sorry for being a pain, but I have a problem where every time I hover over the raw it moves to the left and if i hover over the title raw the "Tag" column title appears as well. How do I fix this? Sorry if this has been asked before, I read through the thread and didn't seem to find anything. Thanks in advance.

Here's my list for reference.

http://myanimelist.net/animelist/Kenny_was_afk

Apr 5, 2014 8:01 AM

#110