Custom CSS List issues

Aug 28, 2016 12:00 AM

Offline

Oct 2014

So I'm pretty much stealing and editing the list style here (the SAO one) https://myanimelist.net/forum/?topicid=393393&show=100#msg26772051 cause it looks amazing, but I'm trying to get it to be Jojo themed. So far the only thing I have done is changed the background, removed the sword at the top and made this (http://imgur.com/a/kKE5D) as the watching button. Problem is, although I replaced the old button, the new one doesn't show up. Being a CS major who has done nothing with CSS, I find this kind of coding to be somewhat difficult. Any help would be greatly appreciated. Heres the code I have stolen and edited so far:

@import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css";
@import "http://fonts.googleapis.com/css?family=Raleway";
body {
background-attachment:fixed !important;
background-image:url(https://i.ytimg.com/vi/Qz-vsXjaNmo/maxresdefault.jpg);
background-position:0 0;
background-size:cover;
}
#list_surround {
left:5% !important;
position:absolute !important;
}
#inlineContent {
display:inline-block !important;
height:1200px !important;
left:0 !important;
margin:auto !important;
position:fixed !important;
right:0 !important;
top:0 !important;
width:500px !important;
z-index:-1 !important;
}
#list_surround {
background-attachment:scroll;
background-color:transparent;
background-image:url();
background-position:-18px -134px;
background-repeat:no-repeat no-repeat;
font-size:12px;
line-height:1;
margin:0 auto;
padding-bottom:10px;
padding-top:100px;
width:600px;
}
body {
color:#FFFFFF;
font-family:Raleway;
}
a {
-webkit-transition:all 0.25s ease-in-out 0s;
color:#FFFFFF;
text-decoration:none;
text-shadow:none;
transition:all 0.25s ease-in-out 0s;
}
a:hover {
}
.table_header {
background-color:rgba(0, 0, 0, 0.8);
height:20px;
}
.table_header:first-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:10px;
border-top-right-radius:0;
}
.table_header:nth-of-type(2) {
text-align:left;
}
.table_header:last-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:0;
border-top-right-radius:10px;
}
.td1 {
-webkit-transition:all 0.25s ease-in-out 0s;
background-color:rgba(0, 0, 0, 0.498039);
height:20px;
transition:all 0.25s ease-in-out 0s;
}
.td2 {
-webkit-transition:all 0.25s ease-in-out 0s;
background-color:rgba(0, 0, 0, 0.498039);
height:20px;
transition:all 0.25s ease-in-out 0s;
}
tr:hover [class^="td"] {
background-color:rgba(0, 150, 250, 0.8);
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align:left;
}
.table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
border:0;
padding:4px;
text-align:center;
vertical-align:middle;
}
.table_header, .td1, .td2, .category_totals {
line-height:20px;
}
.borderRBL {
line-height:normal !important;
}
[cellspacing="0"] {
line-height:20px;
}
.category_totals {
background-color:rgba(0, 0, 0, 0.8);
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:0;
border-top-right-radius:0;
color:#FFFFFF;
line-height:15px;
text-align:center;
}
[class^="header_"] * {
font-size:30px;
height:60px;
line-height:20px;
padding-bottom:10px;
padding-left:6px;
text-align:center;
text-shadow:black 2px 1px;
vertical-align:bottom;
}
.header_title {
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
border-top-left-radius:4px;
border-top-right-radius:4px;
color:#FFFFFF;
display:inline-block;
font-style:italic;
height:auto;
padding:0 8px 0 0;
text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px;
}
#grand_totals {
background-color:rgba(0, 0, 0, 0);
border:0 none;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#FFFFFF;
line-height:20px;
min-height:20px;
padding:8px;
text-align:center;
vertical-align:middle;
}
#copyright {
background-color:rgba(0, 0, 0, 0.8);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#EEEEEE;
line-height:17px;
margin-top:10px;
padding:8px;
text-align:center;
}
.animetitle + small {
color:#F5B800 !important;
text-shadow:black 1px 1px;
}
#copyright::after {
}
#list_surround .status_selected, #list_surround .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://imgur.com/a/kKE5D);
background-position:0 100%;
background-repeat:no-repeat no-repeat;
border:2px solid white !important;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:15px;
border-top-right-radius:0;
display:block;
height:90px;
padding:0;
position:fixed;
right:-178px;
top:103px;
width:320px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/J6lX64E.jpg);
background-repeat:no-repeat no-repeat;
border-bottom-right-radius:0;
border-top-left-radius:0;
border-top-right-radius:0;
top:195px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/oMNIdtn.jpg);
top:287px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/xhzvNZH.jpg);
background-repeat:repeat repeat;
top:379px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/C7gX6iR.jpg);
top:471px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/ti8Q58A.jpg);
background-position:0 0;
background-repeat:no-repeat no-repeat;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
top:563px;
width:320px;
}
.status_not_selected {
-webkit-transition:all 0.4s ease 0s;
opacity:0.7;
right:-178px !important;
transition:all 0.4s ease 0s;
}
.status_not_selected:hover {
-webkit-transition:all 0.25s ease 0s;
color:transparent;
opacity:1;
right:-20px !important;
transition:all 0.25s ease 0s;
}
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
height:100px;
opacity:0;
width:320px;
}
.status_selected {
display:block;
}
.status_selected:hover {
-webkit-transition:all 0.25s ease-in-out;
color:transparent;
opacity:1;
right:-20px !important;
transition:all 0.25s ease-in-out;
}
.status_selected {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
}

Aug 28, 2016 12:02 AM

BossGeese

Offline

Oct 2014

i feel like an idiot, i used the full link, not just the specific image link, well I'm gonna try and finish this up, and if anyone wants it after just ask

Aug 28, 2016 12:59 AM

BossGeese

Offline

Oct 2014

I finished and here is my finished code, if you want to see how it looks just look at my list

@import "http://dl.dropboxusercontent.com/u/78192465/MyAnimeList/CSS/TopMenu/TopMenu.css";
@import "http://fonts.googleapis.com/css?family=Raleway";
body {
background-attachment:fixed !important;
background-image:url(http://i.imgur.com/4ympvtc.jpg);
background-position:0 0;
background-size:cover;
}
#list_surround {
left:5% !important;
position:absolute !important;
}
#inlineContent {
display:inline-block !important;
height:1200px !important;
left:0 !important;
margin:auto !important;
position:fixed !important;
right:0 !important;
top:0 !important;
width:500px !important;
z-index:-1 !important;
}
#list_surround {
background-attachment:scroll;
background-color:transparent;
background-image:url();
background-position:-18px -134px;
background-repeat:no-repeat no-repeat;
font-size:20px;
line-height:1;
margin:0 auto;
padding-bottom:10px;
padding-top:100px;
width:600px;
}
body {
color:#FFFFFF;
font-family:Raleway;
}
a {
-webkit-transition:all 0.25s ease-in-out 0s;
color:#FFFFFF;
text-decoration:none;
text-shadow:none;
transition:all 0.25s ease-in-out 0s;
}
a:hover {
}
.table_header {
background-color:rgba(0, 0, 0, 0.8);
height:20px;
}
.table_header:first-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:10px;
border-top-right-radius:0;
}
.table_header:nth-of-type(2) {
text-align:left;
}
.table_header:last-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:0;
border-top-right-radius:10px;
}
.td1 {
-webkit-transition:all 0.25s ease-in-out 0s;
background-color:rgba(0, 0, 0, 0.498039);
height:20px;
transition:all 0.25s ease-in-out 0s;
}
.td2 {
-webkit-transition:all 0.25s ease-in-out 0s;
background-color:rgba(0, 0, 0, 0.498039);
height:20px;
transition:all 0.25s ease-in-out 0s;
}
tr:hover [class^="td"] {
background-color:rgba(0, 150, 250, 0.8);
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align:left;
}
.table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
border:0;
padding:4px;
text-align:center;
vertical-align:middle;
}
.table_header, .td1, .td2, .category_totals {
line-height:20px;
}
.borderRBL {
line-height:normal !important;
}
[cellspacing="0"] {
line-height:20px;
}
.category_totals {
background-color:rgba(0, 0, 0, 0.8);
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:0;
border-top-right-radius:0;
color:#FFFFFF;
line-height:15px;
text-align:center;
}
[class^="header_"] * {
font-size:60px;
height:60px;
line-height:60px;
padding-bottom:30px;
padding-left:6px;
text-align:center;
text-shadow:black 2px 1px;
vertical-align:bottom;
}
.header_title {
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
border-top-left-radius:4px;
border-top-right-radius:4px;
color:#FFFFFF;
display:inline-block;
font-style:italic;
height:auto;
padding:0 8px 0 0;
text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px;
}
#grand_totals {
background-color:rgba(0, 0, 0, 0);
border:0 none;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#FFFFFF;
line-height:20px;
min-height:20px;
padding:8px;
text-align:center;
vertical-align:middle;
}
#copyright {
background-color:rgba(0, 0, 0, 0.8);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#EEEEEE;
line-height:17px;
margin-top:10px;
padding:8px;
text-align:center;
}
.animetitle + small {
color:#F5B800 !important;
text-shadow:black 1px 1px;
}
#copyright::after {
}
#list_surround .status_selected, #list_surround .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/7EUyK5M.jpg);
background-position:0 100%;
background-repeat:no-repeat no-repeat;
border:2px solid white !important;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:15px;
border-top-right-radius:0;
display:block;
height:90px;
padding:0;
position:fixed;
right:-178px;
top:103px;
width:320px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/0gVf9tR.jpg);
background-repeat:no-repeat no-repeat;
border-bottom-right-radius:0;
border-top-left-radius:0;
border-top-right-radius:0;
top:195px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/W5Gf292.jpg);
top:287px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/1lmvs5r.jpg);
background-repeat:repeat repeat;
top:379px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/MOBAKPE.jpg);
top:471px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-attachment:scroll;
background-color:transparent;
background-image:url(http://i.imgur.com/0nHcHnP.jpg);
background-position:0 0;
background-repeat:no-repeat no-repeat;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
top:563px;
width:320px;
}
.status_not_selected {
-webkit-transition:all 0.4s ease 0s;
opacity:0.7;
right:-178px !important;
transition:all 0.4s ease 0s;
}
.status_not_selected:hover {
-webkit-transition:all 0.25s ease 0s;
color:transparent;
opacity:1;
right:-20px !important;
transition:all 0.25s ease 0s;
}
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
height:100px;
opacity:0;
width:320px;
}
.status_selected {
display:block;
}
.status_selected:hover {
-webkit-transition:all 0.25s ease-in-out;
color:transparent;
opacity:1;
right:-20px !important;
transition:all 0.25s ease-in-out;
}
.status_selected {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
}

See All Discussions

» Share Your YouTube Channel/Videos! ( 1 2 3 4 5 ... Last Page ) nin-tendo - Dec 16, 2022	361	by panque »» 2 hours ago
» Made An Anime Youtube Video thoughts? panque - 3 hours ago	0	by panque »» 3 hours ago
» Anime hoodies - New brand abambata - Apr 13	3	by abambata »» 3 hours ago
» Anime hoodies - Would you wear it ? abambata - Apr 17	3	by abambata »» 3 hours ago
» People who don't believe that there is anything wrong with western entertainment and influence. kratos960203 - Apr 19	25	by hypergoob »» 6 hours ago

Custom CSS List issues

More topics from this board

» Share Your YouTube Channel/Videos! ( 1 2 3 4 5 ... Last Page )

» Made An Anime Youtube Video thoughts?

» Anime hoodies - New brand

» Anime hoodies - Would you wear it ?

» People who don't believe that there is anything wrong with western entertainment and influence.

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters