New
Jan 10, 2015 9:39 AM
#2501
Hey there :) I tried using Shishio-kun's version of the square layout. I changed the background to my liking and I wanted to know how to fix a couple of things: 1) I know where the colors of the categories are(the currently watching etc) but I can't figure out what two colors work best for this background. 2) That same bar of the completed, dropped etc is not in the middle in my computer and I want it to be. Where is the code for this bar located? 3) the box that tells you how much animes from TV, OVA, Movies you've seen, I wanted to be in the center if it's the only box in the line(I don't know if it's possible in CSS though) If you can assist me in those that'll be great. This is the code to my list: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /* LIST WIDTH (NUMBER OF COVERS PER ROW) Adjust the width of the list with the percentage amount in the first code. Afterwards, you may want to adjust the header behind the category links with the other code (lower it if you increase list width). */ #list_surround { width: 90% !important; } /* MAIN BACKGROUND (BEHIND EVERYTHING) */ body { background-image: url(http://i.imgur.com/ikMHY4M.jpg); background-size: cover; background-attachment: fixed; } /* BANNER (TOP IMAGE) Removed for this version. */ #inlineContent { background-image: none; background-color: transparent !important; background-position: right 11% !important; background-size: cover; z-index: -3 !important; } /* TOP BAR ICONS Replace the icons for the top bar here. Remember you see different icons depending on if you're on your own list or not, or when you're logged out. */ /* USER ICON */ #mal_cs_listinfo div:first-of-type a:before { background-image: url("http://i.imgur.com/L3NPnIc.png"); } /* LOGOUT ICON */ #mal_cs_listinfo div:last-of-type a:before { background-image: url("http://i.imgur.com/8SeJ2Xv.png"); } /* ADD TO LIST ICON */ #mal_cs_links div:first-of-type a:first-of-type:before { background-image: url("http://i.imgur.com/xQVAKzz.png"); } /* VISITOR'S ANIME LIST ICON*/ #mal_cs_links div:last-of-type a:first-of-type:before { background-image: url("http://i.imgur.com/vIs2F3V.png"); } /* VISITOR'S MANGA LIST ICON*/ #mal_cs_links div:last-of-type a:last-of-type:before { background-image: url("http://i.imgur.com/es1SALB.png"); } /* HOME ICON, VISITOR'S ICON FOR YOUR PROFILE LINK*/ #mal_cs_links div:first-of-type a:last-of-type:before, #mal_cs_otherlinks div:first-of-type a:before { background-image: url("http://i.imgur.com/wizrHEb.png"); } /* LIST OWNER'S MANGA LIST ICON*/ #mal_cs_otherlinks div a[href*="/mangalist/"]:before { background-image: url("http://i.imgur.com/0HdfMQ7.png"); } /* LIST OWNER'S ANIME LIST ICON*/ #mal_cs_otherlinks div a[href*="/animelist/"]:before { background-image: url("http://i.imgur.com/zuq7ViZ.png"); } /* FORUM ICON*/ #mal_cs_otherlinks a[href*="/forum/"]:before { background-image: url("http://i.imgur.com/cFhhBvt.png"); } /* HISTORY ICONS*/ #mal_cs_otherlinks a[href*="/history/"]:before, #mal_cs_otherlinks div a[href*="/history/"]:before { background-image: url("http://i.imgur.com/R2p6EbR.png"); } /* EXPORT ICON*/ #mal_cs_otherlinks a[href*="/panel.php?go=export"]:before { background-image: url("http://i.imgur.com/tRXCo2i.png"); } /* SHARED ICON*/ #mal_cs_otherlinks div a[href*="/shared"]:before { background-image: url("http://i.imgur.com/1BHMiAh.png"); } /* LOGIN ICON*/ #mal_cs_otherlinks div a[href*="/login.php"]:before { background-image: url("http://i.imgur.com/Rd7leqb.png"); } /* REGISTER ICON*/ #mal_cs_otherlinks div a[href*="/register.php"]:before { background-image: url("http://i.imgur.com/fRQHVKI.png"); } /* LEARN MORE ICON*/ #mal_cs_otherlinks div a[href*="/modules.php?go=faq"]:before { background-image: url("http://i.imgur.com/oqrJXHB.png"); } /* COLORS*/ /* CATEGORY BUTTON GLOW*/ .status_selected { background-color: ; box-shadow: 0px 0px 20px cyan; } /* COLOR OF LIST*/ #list_surround{ background-color: rgba(1,1,1,.5) !important; } /* BACKGROUND COLOR BEHIND TOP BAR AND BANNER BORDER */ #list_surround:before, #inlineContent:after, #inlineContent:before { background-color: rgba(1,1,1,.5) !important; } /* COLOR OF BUTTONS, HEADERS, UNSELECTED BUTTONS, ANIMETITLE, AND BEHIND ICONS The first rgb color is the top of the header, second is bottom of the header (Firefox). The third rgb color is the top of the header, fourth is bottom of the header (Chrome). */ #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, .table_headerLink, .status_not_selected a, .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw, .td1, .td2, .td1 a + small, .td2 a + small, .animetitle, #grand_totals, .category_totals, #copyright { background-image: -moz-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; background-image: -webkit-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; } /* COLOR OF CATEGORY MENU BUTTONS/TOP BAR BUTTONS/ANIMETITLE ON HOVER The first rgb color is the top of the header, second is bottom of the header (Firefox). The third rgb color is the top of the header, fourth is bottom of the header (Chrome). */ #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover, .table_headerLink:hover, .status_not_selected a:hover, .animetitle:hover { background-image: -moz-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; background-image: -webkit-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; } /* SELECTED CATEGORY LINK BUTTON COLOR */ .status_selected{ background-color: rgb(26, 26, 126) !important; background-image: none; } /* TOPBAR SEARCHBOX COLOR */ #searchBox{ background-color: black !important; background-image: ; color: white !important; } /* HEADER COLORS */ .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw{ color: white; } /* TOPBAR BUTTON TEXT COLOR */ .table_header a{ color: silver; } /* SELECTED CATEGORY LINK TEXT COLOR*/ .status_selected a{ color: silver; } /* UNSELECTED CATEGORY LINK TEXT COLOR */ .status_not_selected a { color: silver; } /* ANIME INFO BUBBLE COLOR */ .td1:first-of-type, .td2:first-of-type, .td1, .td2, .td1 a, .td2 a { color: silver; } /* ANIMETITLE COLOR */ .animetitle{ color: silver; } /* LINK TEXT AND TAGS TEXT ON HOVER */ a:hover, #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { color: white !Important; } /* CATEGORY TOTALS COLOR, GRAND TOTALS COLOR, COPYRIGHT COLOR */ .category_totals, #grand_totals, #copyright { color: silver ; } #copyright a{ color: white; } /* HOVER EFFECT ON TITLES */ #list_surround table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw):hover { background-color: rgba(245, 132, 0, 0.2); } /* MAX HEIGHT OF ANIME TITLES Adjust this to make more or less height for the longer titles on your list. */ .animetitle { max-height: 34px !important; } /* HEIGHT OF TAGS BOX If you've turned Tags on for your list, you can adjust the height of the box your tags appear in here. Keep in mind you won't see tags for this list style unless you hover your cursor over the anime. */ .td1[width="125"], .td2[width="125"] { height: 120px !important; } /******************************* OTHER CODES, DON'T TOUCH UNLESS YOU KNOW WHAT YOU'RE DOING *******************************/ #inlineContent { border-bottom-color: rgb(52, 52, 52); } #mal_control_strip tbody { background-color: rgb(52, 52, 52); } #inlineContent, #searchBox, .status_selected, body, .hide { background-color: rgb(26, 26, 26); } #searchBox, body, input[type=text] { color: rgb(255, 255, 255); } #list_surround table:first-of-type, #list_surround, input[type=text] { background-color: rgb(52, 52, 52); } a { color: rgb(182, 182, 182); } a:hover, #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { color: rgb(255, 255, 255); } #list_surround table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw):hover { background-color: rgba(245, 132, 0, 0.2); } .hide { box-shadow: 0px 0px 11px 2px rgb(13, 13, 13) inset; } ::selection { color: rgb(245, 132, 0); background-color: rgb(255, 255, 255); } ::-moz-selection { color: rgb(245, 132, 0); background-color: rgb(255, 255, 255); } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, .table_headerLink, .status_not_selected, .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw, .category_totals, #grand_totals, #copyright { background-color: rgb(26, 26, 26) !important; background-image: linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; background-image: -o-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; background-image: -ms-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover, .table_headerLink:hover, .status_not_selected:hover { background-image: linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%); background-image: -o-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%); background-image: -ms-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%); } .td1, .td2, .td1 a + small, .td2 a + small, .animetitle { background-color: rgba(13, 13, 13, 0.9); background: transparent linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%); background: transparent -o-linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%); background: transparent -ms-linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%); } .animetitle:hover { background-image: linear-gradient(bottom, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%); background-image: -o-linear-gradient(bottom, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%); background-image: -ms-linear-gradient(bottom, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%); } #fancybox-wrap { position: fixed !important; top: 0px !important; bottom: 0px; left: 0px !important; right: 0px !important; max-height: 90%; margin: auto !important; } #fancybox-inner { bottom: 10px; height: auto !important; } body { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; } a { text-decoration: none; } #mal_control_strip { width: 77% !important; height: 120px; margin: auto !important; background: none !important; } #inlineContent { background-color: transparent !important; display: block !important; position: absolute; top: 0px; left: 0px; height: 420px; width: 100%; background-position: right; border-bottom-width: 42px; border-bottom-style: solid; z-index: -1; } #mal_control_strip tbody { position: absolute; top: 0px; width: 686px; height: 120px; border-radius: 0px 0px 13px 13px; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks { padding: 0px !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right-style: none !important; } #mal_cs_pic { position: absolute; top: 11px; left: 11px; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a { display: block; position: absolute; top: 11px; width: 64px; height: 64px; line-height: 64px; overflow-x: hidden !important; overflow-y: hidden; white-space: nowrap; letter-spacing: -1px; font-size: 0px !important; font-weight: bold !important; text-align: center; text-decoration: none !important; border-radius: 7px; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { font-size: 11px !important; } #mal_cs_listinfo div:first-of-type a {left: 11px;} #mal_cs_listinfo div:last-of-type a {left: 86px;} #mal_cs_links div:first-of-type a:first-of-type {left: 161px;} #mal_cs_links div:last-of-type a:first-of-type {left: 236px;} #mal_cs_links div:last-of-type a:last-of-type {left: 311px;} #mal_cs_links div:first-of-type a:last-of-type, #mal_cs_otherlinks div:first-of-type a {left: 386px;} #mal_cs_otherlinks a[href*="/forum/"], #mal_cs_otherlinks a[href*="/mangalist/"], #mal_cs_otherlinks a[href*="/animelist/"], #mal_cs_otherlinks a[href*="/login.php"] {left: 461px;} #mal_cs_otherlinks a[href*="/history/"], #mal_cs_otherlinks a[href*="/register.php"] {left: 536px;} #mal_cs_otherlinks a[href*="/panel.php?go=export"], #mal_cs_otherlinks a[href*="/shared"], #mal_cs_otherlinks a[href*="/modules.php?go=faq"] {left: 611px;} #mal_cs_listinfo a:before, #mal_cs_links a:before, #mal_cs_otherlinks a:before { position: absolute; top: 0px; left: 0px; width: 64px; height: 64px; content: ""; background-position: center; background-repeat: no-repeat; background-size: 56px; } #mal_cs_listinfo a:hover:before, #mal_cs_links a:hover:before, #mal_cs_otherlinks a:hover:before { content: none; } #mal_cs_powered { top: 86px !important; left: 461px; right: auto !important; } #mal_cs_powered img { display: none; } #searchBox { position: absolute; top: 0px; left: 0px; padding: 4px 7px; width: 200px !important; height: 15px; font-size: 11px !important; text-align: center; border: none; border-radius: 4px; } .header_cw + table , .header_completed + table , .header_onhold + table , .header_dropped + table , .header_ptw + table { position: absolute; top: 86px; width: 461px; -layout: fixed; border-spacing: 11px 0px; } #list_surround table:nth-of-type(n+4) ~ .header_cw + table , #list_surround table:nth-of-type(n+4) ~ .header_completed + table , #list_surround table:nth-of-type(n+4) ~ .header_onhold + table , #list_surround table:nth-of-type(n+4) ~ .header_dropped + table , #list_surround table:nth-of-type(n+4) ~ .header_ptw + table { display: none; } .table_header { width: auto; } .table_header:first-of-type, .table_header:nth-of-type(n+6) { display: none; } .table_headerLink { display: block; padding: 4px 7px; height: 15px; text-align: center; border-radius: 4px; } #list_surround table:first-of-type { position: absolute; top: 398px; width: auto; font-size: 13px; font-weight: bold; border-spacing: 11px; border-radius: 13px 13px 0px 0px; } .status_selected, .status_not_selected { width: auto; white-space: nowrap; border-radius: 7px; } .status_selected a, .status_not_selected a { display: block; padding: 0px 22px; line-height: 42px; } #list_surround { width: 77%; min-width: 726px; margin: 406px auto 64px; padding: 11px 31px 42px 31px; border-radius: 42px; } .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { clear: both; position: relative; top: 31px; margin: 0px 0px 42px 0px; padding: 11px 0px; border-radius: 13px; } .header_title { padding-left: 242px; font-size: 22px; font-weight: bold; text-align: center; } #list_surround table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide { float: left; position: relative; width: 220px; height: 220px; margin: 11px; border-radius: 13px; } #list_surround table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw) { z-index: 1; } .hide { display: block !important; margin-left: -231px; background-position: center -20px; } .td1, .td2 { position: absolute; padding: 4px 7px; border-radius: 4px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { visibility: hidden; padding: 0px; width: 100%; height: 100%; } .td1:first-of-type:before, .td2:first-of-type:before { content: "#"; } .td1:first-of-type, .td2:first-of-type { top: 11px; left: 11px; width: 42px; z-index: 1; } .td1 a[title="Anime Information"] + small, .td2 a[title="Anime Information"] + small { display: block; visibility: visible; position: absolute; top: 11px; left: 82px; width: 43px; padding: 4px 7px; font-size: 11px; text-align: center; word-wrap: break-word; border-radius: 4px; } .td1:nth-of-type(4)[width="50"], .td2:nth-of-type(4)[width="50"] { top: 11px; right: 11px; width: 42px; } td[width="70"] + .td1:nth-of-type(5):before, [width="70"] + .td2:nth-of-type(5):before { content: "Volumes: "; } td[width="70"] + .td1:nth-of-type(5), td[width="70"] + .td2:nth-of-type(5) { top: 11px; right: 11px; width: auto; text-align: right; } .td1 a:not([title="Anime Information"]) + small, .td2 a:not([title="Anime Information"]) + small { display: block; visibility: visible; position: absolute; top: 41px; right: 11px; width: auto; padding: 4px 7px; font-size: 11px; text-align: right; border-radius: 4px; } .animetitle { display: block; visibility: visible; position: absolute; left: 11px; bottom: 41px; padding: 7px; width: 184px; max-height: 34px; overflow: hidden; text-align: center; font-size: 13px; font-weight: bold; border-radius: 7px; } .td1:nth-of-type(3):before, .td2:nth-of-type(3):before { content: "Score: "; } .td1:nth-of-type(3), .td2:nth-of-type(3) { left: 11px; bottom: 11px; width: auto; text-align: left; } td[width="50"] + .td1:nth-of-type(5):before, [width="50"] + .td2:nth-of-type(5):before { content: "Episodes: "; } td[width="50"] + .td1:nth-of-type(5), td[width="50"] + .td2:nth-of-type(5) { right: 11px; bottom: 11px; width: auto; text-align: right; } .td1:nth-of-type(4)[width="70"]:before, .td2:nth-of-type(4)[width="70"]:before { content: "Chapters: "; } .td1:nth-of-type(4)[width="70"], .td2:nth-of-type(4)[width="70"] { bottom: 11px; right: 11px; width: auto; text-align: right; } .td1:nth-of-type(n+6), .td2:nth-of-type(n+6) { display: none; } .td1[width="125"], .td2[width="125"] { left: 11px; top: 71px; width: 184px; height: 45px; overflow: auto; } #list_surround table:hover .td1[width="125"], #list_surround table:hover .td2[width="125"] { display: block; } input[type=text] { width: 100%; text-align: right; border: none; border-radius: 4px; } input[value=Go] { display: none; } #list_surround .List_LightBox { display: block; visibility: visible; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 0px; } .category_totals { padding: 0px 31px; text-align: center; white-space: pre-line; border-radius: 13px; } .category_totals:before { display: block; content: "Totals:"; text-align: center; font-weight: bold; } #grand_totals, #copyright { clear: both; position: relative; top: 31px; padding: 11px 0px; text-align: center; } #grand_totals { margin-bottom: 22px; border-radius: 7px; } #copyright { margin-top: 0px !important; margin-bottom: 31px; border-radius: 13px; } #list_surround br { display: none; } #mal_control_strip #mal_cs_otherlinks strong{ margin: 0px !important; font-size: 0px !important; } #list_surround:before { border-radius: 0 0 13px 13px; height: 120px; top: 0; width: 700px; content: ""; z-index: -2 !important; display: block; position: absolute !important; left: 11% !important; } .status_not_selected a { border-radius: 6px; color: ; } .status_not_selected a { border-radius: 6px; } #mal_cs_otherlinks :nth-of-type(2) { margin-top: -40px; } #mal_cs_otherlinks a[href*="/forum/"], #mal_cs_otherlinks a[href*="/mangalist/"], #mal_cs_otherlinks a[href*="/animelist/"], #mal_cs_otherlinks a[href*="/login.php"], #mal_cs_otherlinks div a[href*="/register.php"]{ margin-top: 0; } .header_cw + table, .header_completed + table, .header_onhold + table, .header_dropped + table, .header_ptw + table { background: none repeat scroll 0 0 transparent; border-spacing: 11px 0; left: 12%; margin-left: -7px; position: absolute; top: 86px; width: 461px; } #inlineContent { display: none !important; } #list_surround table:first-of-type, #list_surround, input[type="text"] { background-color: transparent; } #list_surround table:first-of-type { top: 458px; } .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { margin-top: -20px; visibility: hidden; } .header_cw:before, .header_completed:before, .header_onhold:before, .header_dropped:before, .header_ptw:before, .header_cw:after, .header_completed:after, .header_onhold:after, .header_dropped:after, .header_ptw:after { visibility: visible !important; } #list_surround { margin: 325px auto 64px; } #list_surround table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide { height: 300px !important; } .hide { background-position: center !important; } #mal_control_strip tbody { background-color: transparent !important; } Read more at http://myanimelist.net/forum/?topicid=1198609&show=40#ed7yHK7mFDjtIq6k.99 and this is the link Thanks in advance. |
Jan 10, 2015 11:32 AM
#2502
Shishio-kun said: AyumeLove said: When will the reconstruction be done? I'm sorry if someone asked already but I really don't have the time to search through over 100 pages of posts. Are you talking about this page? http://myanimelist.net/forum/?topicid=318587 Before yesterday, it still had all the thumbnails (images) which you could click and then go to a layout, but a third or so of the codes were missing after Dropbox crashed after the September hacking here on MAL. By "reconstruction" earlier this week I meant I was rearranging the order of the thumbnails and restoring those missing source codes earlier this week. But yesterday, MAL was broken or hacked again, and now nearly all the thumbnail images are gone on the entire site (except for lists and avatars). You can read more about it on the front page: http://myanimelist.net/clubs.php?cid=19736 So images won't be seen in that topic until they fix the image problem, and then you can view and take about 2/3 of the layouts again, and I can start working on it again, and restore it back to 100%. Just trying to explain the missing images have nothing to do with me and what I was doing before, I'll have to update the topic to make it clear why pics are gone Thanks for explaining and don't worry I wasn't blaming you. I just have trouble interpreting things that aren't very clear. |
[center]Me: [center]Clubs I'm In: |
Jan 10, 2015 11:39 AM
#2503
OK I know this is a stupid question and I'm probably overlooking something obvious but when I choose a list layout from the donated lists section and uploaded it this happened (in spoiler) Everything is overlapping. The only computer I have readily available is my netbook and it's resolution is so rarely used anything that isn't formatted for any resolution will get either cut off or squished. My resolution is 1024 x 600 px So anyways is there anyway to rearrange everything so that they don't overlap. Edit: If I can move the category links down a bit and the list itself a bit to the left then I should be able to fix it |
AyumeLoveJan 10, 2015 11:54 AM
[center]Me: [center]Clubs I'm In: |
Jan 10, 2015 12:29 PM
#2504
AyumeLove said: OK I know this is a stupid question and I'm probably overlooking something obvious but when I choose a list layout from the donated lists section and uploaded it this happened (in spoiler) Everything is overlapping. The only computer I have readily available is my netbook and it's resolution is so rarely used anything that isn't formatted for any resolution will get either cut off or squished. My resolution is 1024 x 600 px So anyways is there anyway to rearrange everything so that they don't overlap. Edit: If I can move the category links down a bit and the list itself a bit to the left then I should be able to fix it In #list_surround replace the code you have by this: width: 650px; position: absolute !important; margin: auto !important; right: 50px !important; margin-top: 10% !important; You could do that, or reduce the width of the list and/or reduce the size of the category links with with any picture editing software. I suppose that will do though. |
SatiriquesJan 10, 2015 1:05 PM
Jan 10, 2015 1:01 PM
#2505
AyumeLove said: OK I know this is a stupid question and I'm probably overlooking something obvious but when I choose a list layout from the donated lists section and uploaded it this happened (in spoiler) Everything is overlapping. The only computer I have readily available is my netbook and it's resolution is so rarely used anything that isn't formatted for any resolution will get either cut off or squished. My resolution is 1024 x 600 px So anyways is there anyway to rearrange everything so that they don't overlap. Edit: If I can move the category links down a bit and the list itself a bit to the left then I should be able to fix it You can move the list to the left or right with the left/right codes under #list_surround { width: 650px; position: absolute !important; margin: auto !important; right: 0px !important; left: 0px !important; margin-top: 10% !important; } near the top of the code, just add to the left amount to move the list away from the category menu (like make it left: 200px !important;). You have to save the changes when done of course Similarly, you can move all the category links down or up with the top codes under .status_selected:first-of-type, .status_not_selected:first-of-type and the following sets of codes with top too that also say "status selected" in them. Btw that layout is supposed to have a icon style top bar which is compact and won't get overlapped by the category links. But the import codes used for them are some of the dead dropbox links I mentioned earlier. You can change use the codes on this page to get one of those top bars, no previews tho while MAL is broken: http://myanimelist.net/forum/?topicid=449097 And if you don't want to use All Anime on your list you can remove it with .status_selected:nth-of-type(6), .status_not_selected:nth-of-type(6) { display: none !important; } That would free up some space |
Jan 10, 2015 1:03 PM
#2506
Satiriques said: AyumeLove said: OK I know this is a stupid question and I'm probably overlooking something obvious but when I choose a list layout from the donated lists section and uploaded it this happened (in spoiler) Everything is overlapping. The only computer I have readily available is my netbook and it's resolution is so rarely used anything that isn't formatted for any resolution will get either cut off or squished. My resolution is 1024 x 600 px So anyways is there anyway to rearrange everything so that they don't overlap. Edit: If I can move the category links down a bit and the list itself a bit to the left then I should be able to fix it In #list_surround replace the code you have by this: width: 650px; position: absolute !important; margin: auto !important; right: 50px !important; margin-top: 10% !important; OK tried what you said, exactly the same as before. Not trying to be rude but it still overlaps I've been trying to use the inspect element but no such luck I have no idea what I'm doing but I can't properly edit my list without this fixed. |
[center]Me: [center]Clubs I'm In: |
Jan 10, 2015 1:14 PM
#2507
AyumeLove said: Satiriques said: AyumeLove said: OK I know this is a stupid question and I'm probably overlooking something obvious but when I choose a list layout from the donated lists section and uploaded it this happened (in spoiler) Everything is overlapping. The only computer I have readily available is my netbook and it's resolution is so rarely used anything that isn't formatted for any resolution will get either cut off or squished. My resolution is 1024 x 600 px So anyways is there anyway to rearrange everything so that they don't overlap. Edit: If I can move the category links down a bit and the list itself a bit to the left then I should be able to fix it In #list_surround replace the code you have by this: width: 650px; position: absolute !important; margin: auto !important; right: 50px !important; margin-top: 10% !important; OK tried what you said, exactly the same as before. Not trying to be rude but it still overlaps I've been trying to use the inspect element but no such luck I have no idea what I'm doing but I can't properly edit my list without this fixed. You talking about the category links? Yeah I didn't notice it when I did my post. Just read what shishio posted. I only fixed the part where to list was overlapping with the category links. |
Jan 10, 2015 1:45 PM
#2508
Shishio-kun said: AyumeLove said: OK I know this is a stupid question and I'm probably overlooking something obvious but when I choose a list layout from the donated lists section and uploaded it this happened (in spoiler) Everything is overlapping. The only computer I have readily available is my netbook and it's resolution is so rarely used anything that isn't formatted for any resolution will get either cut off or squished. My resolution is 1024 x 600 px So anyways is there anyway to rearrange everything so that they don't overlap. Edit: If I can move the category links down a bit and the list itself a bit to the left then I should be able to fix it You can move the list to the left or right with the left/right codes under #list_surround { width: 650px; position: absolute !important; margin: auto !important; right: 0px !important; left: 0px !important; margin-top: 10% !important; } near the top of the code, just add to the left amount to move the list away from the category menu (like make it left: 200px !important;). You have to save the changes when done of course Similarly, you can move all the category links down or up with the top codes under .status_selected:first-of-type, .status_not_selected:first-of-type and the following sets of codes with top too that also say "status selected" in them. Btw that layout is supposed to have a icon style top bar which is compact and won't get overlapped by the category links. But the import codes used for them are some of the dead dropbox links I mentioned earlier. You can change use the codes on this page to get one of those top bars, no previews tho while MAL is broken: http://myanimelist.net/forum/?topicid=449097 And if you don't want to use All Anime on your list you can remove it with .status_selected:nth-of-type(6), .status_not_selected:nth-of-type(6) { display: none !important; } That would free up some space Thanks for all your help. The positioning is working perfectly now. But the broken covers look awkward. (Why do hackers have to ruin all my fun) What part of the code is the covers in? my computer can't render covers anyways and it's a pain having to fix them. heres the code (in spoilers) @import url(http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixed.css); @import url(http://fonts.googleapis.com/css?family=Lily++One); @import url(https://dl.dropboxusercontent.com/u/78340470/anime.css); body { background-image: url(http://i.imgur.com/SBf4GGo.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: top left; background-size: cover; color: #ffffff; font-size: 12px; font-family: Verdana; } #list_surround br { display: none; } #list_surround { width: 650px; position: absolute !important; margin: auto !important; right: 50px !important; margin-top: 10% !important; left: 300px !important; } .header_title { padding-top: 0px; font-family: Lily One; text-align: center; font-size: 30px; text-shadow: 5px 0px 7px rgba(46, 21, 113, 1); } .td1, .td2, .table_header, .category_totals { background-color: rgba(0, 0, 0, 0.5); height: 20px; } a, a:visited, a:hover { color: #ffffff; text-decoration: none; } .animetitle { color: #fae8ff; text-transform: uppercase; font-size: 9px; font-weight: bold; } tr:hover [class^=td] { color: #000000; background-color: rgba(255, 255, 255, 0.5) !important; transition: all 0.3s ease-in-out; } tr:hover [class^=td] a { color: #2e1571; } tr:hover [class^=td] .animetitle { font-weight: bold; text-transform: uppercase; font-size: 9px; } .table_header:first-child { border-top-left-radius: 10px 10px; } .table_header:last-child { border-top-right-radius: 10px 10px; } .category_totals { text-align: center; border-bottom-left-radius: 10px 10px; border-bottom-right-radius: 10px 10px; text-transform: uppercase; font-size: 10px; } .status_selected a, .status_not_selected a {color:transparent; display:block; font-size:0; height: 74px; width: 250px; } .status_selected a, .status_not_selected a { top: 50%; } .status_selected, .status_not_selected { display: block !important; position: fixed; left: 20px; height: 74px; width: 250px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .status_selected:first-of-type, .status_not_selected:first-of-type down: 50px !important; { background-image: url(http://i.imgur.com/dp2kzM4.png); top: 20px; border-radius: 10px; } .status_selected:first-of-type:hover, .status_not_selected:first-of-type:hover { background-image: url(http://i.imgur.com/8wBJjRX.png); } .status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) { top: 95px; border-radius: 10px; background-image: url(http://i.imgur.com/mgOSKnj.png); } .status_selected:nth-of-type(2):hover, .status_not_selected:nth-of-type(2):hover { background-image: url(http://i.imgur.com/OmiWgsz.png); } .status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) { top: 170px; border-radius: 10px; background-image: url(http://i.imgur.com/ijunomO.png); } .status_selected:nth-of-type(3):hover, .status_not_selected:nth-of-type(3):hover { background-image: url(http://i.imgur.com/gVQ6N9X.png); } .status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) { top:245px; border-radius: 10px; background-image: url(http://i.imgur.com/UpjkgyE.png); } .status_selected:nth-of-type(4):hover, .status_not_selected:nth-of-type(4):hover { background-image: url(http://i.imgur.com/XHmVXwX.png); } .status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) { top: 320px; border-radius: 10px; background-image: url(http://i.imgur.com/aRzkaMS.png); } .status_selected:nth-of-type(5):hover, .status_not_selected:nth-of-type(5):hover { background-image: url(http://i.imgur.com/f2jUnjO.png); } .status_selected:nth-of-type(6), .status_not_selected:nth-of-type(6) { top: 395px; border-radius: 10px; background-image: url(http://i.imgur.com/aVNi93B.png); } .status_selected:nth-of-type(6):hover, .status_not_selected:nth-of-type(6):hover { background-image: url(http://i.imgur.com/9WHTaCD.png); } #grand_totals, #copyright { display: block; height: 20px; line-height: 20px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.5); margin-top: 20px; text-align: center; text-transform: uppercase; font-size: 8px; font-weight: bold; } :hover + .hide { background-size: 200px 300px; right: 150px; bottom: 150px; width: 200px; height: 300px; padding-bottom: 0px; background-position: center 50% !important; background-repeat: no-repeat !important; display: block !important; position: fixed; background-color: rgba(0, 0, 0, 0.5); border-radius: 10px; } Read more at http://myanimelist.net/forum/?topicid=393503&show=100#diXGlAQZDeVQLuWx.99 Also the hacker comes back every couple hours so I wouldn't recommend fixing your links until the MAL admins solve the hacker problem. Otherwise you will just waste several hours of work. Just a bit of friendly advice. I noticed that right after getting the invalid message id thing stuff gets screw up. I'm backing up all my posts until this is fixed. |
AyumeLoveJan 10, 2015 1:54 PM
[center]Me: [center]Clubs I'm In: |
Jan 10, 2015 4:33 PM
#2509
AyumeLove said: Thanks for all your help. The positioning is working perfectly now. But the broken covers look awkward. (Why do hackers have to ruin all my fun) What part of the code is the covers in? my computer can't render covers anyways and it's a pain having to fix them. If you dont want covers remove the "hover hide" code and its parts from the bottom, also that line at the bottom "read more...". You can also completely remove the two lines with dropbox in them at the top, those links are dead I wouldn't recommend fixing your links until the MAL admins solve the hacker problem. Otherwise you will just waste several hours of work. Just a bit of friendly advice. I noticed that right after getting the invalid message id thing stuff gets screw up. I'm backing up all my posts until this is fixed. Yeah thanks, I already edit my big posts in a separate place which makes it easier for me then save them to word docs, just in case it doesn't post |
Jan 11, 2015 3:52 AM
#2510
Hi guys, still mucking around with my css - I have no idea what I'm doing really but I've come up with something I don't mind too much. 1) How can I remove the red line running down the left of my tables? 2) How can I add some extra space underneath each line of text? (Note how there's a little more space above compared to below on each line) Thanks guys |
Jan 11, 2015 4:23 AM
#2511
Shishio-kun said: AyumeLove said: Thanks for all your help. The positioning is working perfectly now. But the broken covers look awkward. (Why do hackers have to ruin all my fun) What part of the code is the covers in? my computer can't render covers anyways and it's a pain having to fix them. If you dont want covers remove the "hover hide" code and its parts from the bottom, also that line at the bottom "read more...". You can also completely remove the two lines with dropbox in them at the top, those links are dead I wouldn't recommend fixing your links until the MAL admins solve the hacker problem. Otherwise you will just waste several hours of work. Just a bit of friendly advice. I noticed that right after getting the invalid message id thing stuff gets screw up. I'm backing up all my posts until this is fixed. Yeah thanks, I already edit my big posts in a separate place which makes it easier for me then save them to word docs, just in case it doesn't post Thanks so much for everything. My code is completely fixed. Also usually with my small posts I copy them like ctrl+c then if it doesn't work I paste it back in. Also I have all of my css and the pre-made ones I've found backed up for easy access. Goodbye and good luck fixing everything. |
[center]Me: [center]Clubs I'm In: |
Jan 11, 2015 9:05 AM
#2512
Tozzy said: Hi guys, still mucking around with my css - I have no idea what I'm doing really but I've come up with something I don't mind too much. 1) How can I remove the red line running down the left of my tables? 2) How can I add some extra space underneath each line of text? (Note how there's a little more space above compared to below on each line) Thanks guys Both changes are made in .td1 and .td2 1) border-width:0 0px 0px 0!important; 2) padding-bottom:10px!important; [i] change it to what you want |
Jan 11, 2015 1:08 PM
#2513
Both changes are made in .td1 and .td2 1) border-width:0 0px 0px 0!important; 2) padding-bottom:10px!important; [i] change it to what you want Thanks very much, Satiriques |
Jan 12, 2015 1:06 PM
#2514
Hello Shishio-kun The question that I have and the answer maybe no, but I'll ask to be sure. I found this great anime song and I would like for it to automatically play when people visit my page. Also it will go great when I set my page up completely. Is there away to do that or will I just have to settle for using a Youtube video? |
Jan 12, 2015 1:48 PM
#2515
Worldrush said: This is not possible since CSS only supports visual effects (with the exception of the sounds in browsers for blind people), it would have been possible if we had access to the HTML-code.Hello Shishio-kun The question that I have and the answer maybe no, but I'll ask to be sure. I found this great anime song and I would like for it to automatically play when people visit my page. Also it will go great when I set my page up completely. Is there away to do that or will I just have to settle for using a Youtube video? |
Jan 13, 2015 11:30 PM
#2517
http://myanimelist.net/animelist/Twin_Moons I copied this from the forums here somewhere in the forums here because it was to my liking, but a lot of code doesn't seem to be working and I also want to change the banner without the list messing up. Could some genius help me take out the unnecessary code while keeping it looking the exact same? I also want to fix the bar at the top above the banner. I would be very appreciative. @import url(http://fonts.googleapis.com/css?family=Share); @import url('https://dl.dropbox.com/u/91214890/mal_add.css') all; body { background:url(http://i49.tinypic.com/246thj5.jpg) repeat-y scroll center bottom #181818; } /* LIST FONT These codes control the font on the list itself (anime titles, etc). */ * { border:0 none; color:#DBDBDB; font-family: 'Share', cursive; text-decoration:none; } /* BANNER This controls the image at the top that by default says "Anime List". You can replace the background image link in parenthesis with your own banner image you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .header_title { background:url(http://i1232.photobucket.com/albums/ff367/coolspot21/shapka-2-1.png) repeat scroll 0 0 transparent; height:169px; left:-10px; padding:25px; position:absolute; top:-229px; width:819px; } /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/watching2.png) repeat scroll 0 0 transparent; display:block; height:130px; left:-284px; padding:0; position:absolute; top:0; width:273px; display: none; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i21.photobucket.com/albums/b298/LudvigP/completed1.png) repeat scroll 0 0 white; top:140px; display: none; } #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:url(http://i21.photobucket.com/albums/b298/LudvigP/on-hold1.png) repeat scroll 0 0 transparent; top:280px; display: none; } #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:url(http://i21.photobucket.com/albums/b298/LudvigP/dropped1.png) repeat scroll 0 0 transparent; top:420px; display: none; } #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:url(http://i21.photobucket.com/albums/b298/LudvigP/plantowatch1.png) repeat scroll 0 0 transparent; display:inline; top:560px; display: none; } #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:url(http://i21.photobucket.com/albums/b298/LudvigP/allanime1.png) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:700px; display: none; } /* HEADERS */ #list_surround .header_cw { background:url(http://i1232.photobucket.com/albums/ff367/coolspot21/cw.png) no-repeat scroll 0 0 transparent; } #list_surround .header_completed { background:url(http://i1232.photobucket.com/albums/ff367/coolspot21/comp-1.png) no-repeat scroll 0 0 transparent; } #list_surround .header_onhold { background:url(http://i1232.photobucket.com/albums/ff367/coolspot21/onh-1.png) no-repeat scroll 0 0 transparent; } #list_surround .header_ptw { background:url(http://i1232.photobucket.com/albums/ff367/coolspot21/plant.png) no-repeat scroll 0 0 transparent; } #list_surround .header_dropped { background:url(http://i1232.photobucket.com/albums/ff367/coolspot21/drop-1.png) no-repeat scroll 0 0 transparent; } /* OTHER CODES */ a:hover { text-decoration:underline; } #list_surround { background:none repeat scroll 0 0 #181818; border-bottom:1px solid #292929; border-left:1px solid #292929; border-right:1px solid #292929; height:100%; left:0px; margin:239px auto 30px; position:relative; width:850px; } #list_surround .status_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround .status_not_selected a { color:#184900; display:block; font-size:1px; height:2px; padding:128px 0 0 243px; width:30px; } #list_surround br { display:none; } #list_surround .header_title span { color:#000000; font-size:1px; } #list_surround .header_title .thickbox { display:none; } #list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround .header_dropped { margin-left:-1px; padding:28px 5px 5px; width:852px; } #list_surround .animetitle + small { color:#48D1CC; } #list_surround .category_totals { padding:5px; text-align:center; } #list_surround #grand_totals { display:none; } #mal_cs_listinfo a strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal; font-weight: normal; text-decoration: underline; text-transform: none;} #mal_cs_otherlinks strong{ color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-variant: normal;} .borderRBL { color: cyan !important; } #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } #copyright { background:url(http://i1232.photobucket.com/albums/ff367/coolspot21/copyr-1.png) no-repeat 0 0; color:#181818; height:15px; margin-left:-76px; padding-top:5px; position:fixed; bottom:0; width:1000px; font-family: sans-serif; font-size: 10px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #copyright { margin-left:-75px; } } #{background-size:100% 100%!important} #height:24px!important} #display:inline} #mal_cs_pic img{height:24px!important;width:auto!important} #mal_cs_listinfo{width:auto!important} #mal_cs_listinfo div:first-of-type:before{content:'Logged in as '} #mal_cs_listinfo div:last-of-type a{text-decoration:none} #mal_cs_listinfo div:last-of-type a:hover{text-decoration:underline} #mal_cs_listinfo div:last-of-type:before{font-weight:400;content:'('} #mal_cs_listinfo div:last-of-type:after{font-weight:400;content:')'} #mal_cs_links{padding-top:2px!important;width:90px!important} #mal_cs_links a{background-image:url(http://i39.tinypic.com/ekg6t5.png)!important;width:16px;height:16px;content:none;color:transparent!important;letter-spacing:-5px;display:inline-block!important} #mal_cs_links div:first-of-type a:first-of-type{background-position:0 0!important} #mal_cs_links div:first-of-type a:last-of-type{background-position:-16px 0!important} #mal_cs_links div:last-of-type a:first-of-type{background-position:-32px 0!important} #mal_cs_links div:last-of-type a:last-of-type{background-position:-48px 0!important} #mal_cs_links div:first-of-type:after{content:'a0'} #mal_cs_otherlinks strong:before{content:'['} #mal_cs_otherlinks strong:after{content:']'} #mal_cs_otherlinks div:last-of-type{float:right;padding-right:150px} #mal_cs_otherlinks div:first-of-type{float:left} #mal_cs_powered img{display:none} #searchBox{margin-top:-2px!important;width:135px!important} .td1:hover, .td2:hover { background: url("http://s2.hostingkartinok.com/uploads/images/2012/07/9eb7788c3edf8544201ed47b5040d094.png") repeat scroll 0 0 transparent; } |
Jan 14, 2015 6:22 AM
#2518
@Twin_Moons Your code is broken. Look at these lines: #height:24px!important} #display:inline} This has to do with MAL CSS edit box being totally screwed up. They are invalid CSS and prevent everything after them (related to top bar) from being applied as well. I suppose there should be some #mal_control_strip but I'm no telepathist to guess what is it. You have to find the original code again. I suggest then importing the whole style, saves you from most problems related to edit box. |
Jan 14, 2015 11:56 PM
#2519
http://myanimelist.net/animelist/Twin_Moons I decided to try a much simpler layout instead. How can I stop the banner from going into the top bar? It's supposed to be lower, but changed when I added a premade top bar... |
Jan 15, 2015 4:56 AM
#2520
Twin_Moons said: http://myanimelist.net/animelist/Twin_Moons I decided to try a much simpler layout instead. How can I stop the banner from going into the top bar? It's supposed to be lower, but changed when I added a premade top bar... #list_surround { background-image: url(http://i39.tinypic.com/2w4jo1h.jpg); background-position: right top 50px; background-repeat: no-repeat; padding-top: 282px; } |
SatiriquesJan 15, 2015 5:03 AM
Jan 16, 2015 10:30 AM
#2521
SuperSmashBros said: Hey there :) I tried using Shishio-kun's version of the square layout. I changed the background to my liking and I wanted to know how to fix a couple of things: 1) I know where the colors of the categories are(the currently watching etc) but I can't figure out what two colors work best for this background. 2) That same bar of the completed, dropped etc is not in the middle in my computer and I want it to be. Where is the code for this bar located? 3) the box that tells you how much animes from TV, OVA, Movies you've seen, I wanted to be in the center if it's the only box in the line(I don't know if it's possible in CSS though) If you can assist me in those that'll be great. This is the code to my list: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /* LIST WIDTH (NUMBER OF COVERS PER ROW) Adjust the width of the list with the percentage amount in the first code. Afterwards, you may want to adjust the header behind the category links with the other code (lower it if you increase list width). */ #list_surround { width: 90% !important; } /* MAIN BACKGROUND (BEHIND EVERYTHING) */ body { background-image: url(http://i.imgur.com/ikMHY4M.jpg); background-size: cover; background-attachment: fixed; } /* BANNER (TOP IMAGE) Removed for this version. */ #inlineContent { background-image: none; background-color: transparent !important; background-position: right 11% !important; background-size: cover; z-index: -3 !important; } /* TOP BAR ICONS Replace the icons for the top bar here. Remember you see different icons depending on if you're on your own list or not, or when you're logged out. */ /* USER ICON */ #mal_cs_listinfo div:first-of-type a:before { background-image: url("http://i.imgur.com/L3NPnIc.png"); } /* LOGOUT ICON */ #mal_cs_listinfo div:last-of-type a:before { background-image: url("http://i.imgur.com/8SeJ2Xv.png"); } /* ADD TO LIST ICON */ #mal_cs_links div:first-of-type a:first-of-type:before { background-image: url("http://i.imgur.com/xQVAKzz.png"); } /* VISITOR'S ANIME LIST ICON*/ #mal_cs_links div:last-of-type a:first-of-type:before { background-image: url("http://i.imgur.com/vIs2F3V.png"); } /* VISITOR'S MANGA LIST ICON*/ #mal_cs_links div:last-of-type a:last-of-type:before { background-image: url("http://i.imgur.com/es1SALB.png"); } /* HOME ICON, VISITOR'S ICON FOR YOUR PROFILE LINK*/ #mal_cs_links div:first-of-type a:last-of-type:before, #mal_cs_otherlinks div:first-of-type a:before { background-image: url("http://i.imgur.com/wizrHEb.png"); } /* LIST OWNER'S MANGA LIST ICON*/ #mal_cs_otherlinks div a[href*="/mangalist/"]:before { background-image: url("http://i.imgur.com/0HdfMQ7.png"); } /* LIST OWNER'S ANIME LIST ICON*/ #mal_cs_otherlinks div a[href*="/animelist/"]:before { background-image: url("http://i.imgur.com/zuq7ViZ.png"); } /* FORUM ICON*/ #mal_cs_otherlinks a[href*="/forum/"]:before { background-image: url("http://i.imgur.com/cFhhBvt.png"); } /* HISTORY ICONS*/ #mal_cs_otherlinks a[href*="/history/"]:before, #mal_cs_otherlinks div a[href*="/history/"]:before { background-image: url("http://i.imgur.com/R2p6EbR.png"); } /* EXPORT ICON*/ #mal_cs_otherlinks a[href*="/panel.php?go=export"]:before { background-image: url("http://i.imgur.com/tRXCo2i.png"); } /* SHARED ICON*/ #mal_cs_otherlinks div a[href*="/shared"]:before { background-image: url("http://i.imgur.com/1BHMiAh.png"); } /* LOGIN ICON*/ #mal_cs_otherlinks div a[href*="/login.php"]:before { background-image: url("http://i.imgur.com/Rd7leqb.png"); } /* REGISTER ICON*/ #mal_cs_otherlinks div a[href*="/register.php"]:before { background-image: url("http://i.imgur.com/fRQHVKI.png"); } /* LEARN MORE ICON*/ #mal_cs_otherlinks div a[href*="/modules.php?go=faq"]:before { background-image: url("http://i.imgur.com/oqrJXHB.png"); } /* COLORS*/ /* CATEGORY BUTTON GLOW*/ .status_selected { background-color: ; box-shadow: 0px 0px 20px cyan; } /* COLOR OF LIST*/ #list_surround{ background-color: rgba(1,1,1,.5) !important; } /* BACKGROUND COLOR BEHIND TOP BAR AND BANNER BORDER */ #list_surround:before, #inlineContent:after, #inlineContent:before { background-color: rgba(1,1,1,.5) !important; } /* COLOR OF BUTTONS, HEADERS, UNSELECTED BUTTONS, ANIMETITLE, AND BEHIND ICONS The first rgb color is the top of the header, second is bottom of the header (Firefox). The third rgb color is the top of the header, fourth is bottom of the header (Chrome). */ #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, .table_headerLink, .status_not_selected a, .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw, .td1, .td2, .td1 a + small, .td2 a + small, .animetitle, #grand_totals, .category_totals, #copyright { background-image: -moz-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; background-image: -webkit-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; } /* COLOR OF CATEGORY MENU BUTTONS/TOP BAR BUTTONS/ANIMETITLE ON HOVER The first rgb color is the top of the header, second is bottom of the header (Firefox). The third rgb color is the top of the header, fourth is bottom of the header (Chrome). */ #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover, .table_headerLink:hover, .status_not_selected a:hover, .animetitle:hover { background-image: -moz-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; background-image: -webkit-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; } /* SELECTED CATEGORY LINK BUTTON COLOR */ .status_selected{ background-color: rgb(26, 26, 126) !important; background-image: none; } /* TOPBAR SEARCHBOX COLOR */ #searchBox{ background-color: black !important; background-image: ; color: white !important; } /* HEADER COLORS */ .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw{ color: white; } /* TOPBAR BUTTON TEXT COLOR */ .table_header a{ color: silver; } /* SELECTED CATEGORY LINK TEXT COLOR*/ .status_selected a{ color: silver; } /* UNSELECTED CATEGORY LINK TEXT COLOR */ .status_not_selected a { color: silver; } /* ANIME INFO BUBBLE COLOR */ .td1:first-of-type, .td2:first-of-type, .td1, .td2, .td1 a, .td2 a { color: silver; } /* ANIMETITLE COLOR */ .animetitle{ color: silver; } /* LINK TEXT AND TAGS TEXT ON HOVER */ a:hover, #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { color: white !Important; } /* CATEGORY TOTALS COLOR, GRAND TOTALS COLOR, COPYRIGHT COLOR */ .category_totals, #grand_totals, #copyright { color: silver ; } #copyright a{ color: white; } /* HOVER EFFECT ON TITLES */ #list_surround table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw):hover { background-color: rgba(245, 132, 0, 0.2); } /* MAX HEIGHT OF ANIME TITLES Adjust this to make more or less height for the longer titles on your list. */ .animetitle { max-height: 34px !important; } /* HEIGHT OF TAGS BOX If you've turned Tags on for your list, you can adjust the height of the box your tags appear in here. Keep in mind you won't see tags for this list style unless you hover your cursor over the anime. */ .td1[width="125"], .td2[width="125"] { height: 120px !important; } /******************************* OTHER CODES, DON'T TOUCH UNLESS YOU KNOW WHAT YOU'RE DOING *******************************/ #inlineContent { border-bottom-color: rgb(52, 52, 52); } #mal_control_strip tbody { background-color: rgb(52, 52, 52); } #inlineContent, #searchBox, .status_selected, body, .hide { background-color: rgb(26, 26, 26); } #searchBox, body, input[type=text] { color: rgb(255, 255, 255); } #list_surround table:first-of-type, #list_surround, input[type=text] { background-color: rgb(52, 52, 52); } a { color: rgb(182, 182, 182); } a:hover, #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { color: rgb(255, 255, 255); } #list_surround table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw):hover { background-color: rgba(245, 132, 0, 0.2); } .hide { box-shadow: 0px 0px 11px 2px rgb(13, 13, 13) inset; } ::selection { color: rgb(245, 132, 0); background-color: rgb(255, 255, 255); } ::-moz-selection { color: rgb(245, 132, 0); background-color: rgb(255, 255, 255); } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, .table_headerLink, .status_not_selected, .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw, .category_totals, #grand_totals, #copyright { background-color: rgb(26, 26, 26) !important; background-image: linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; background-image: -o-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; background-image: -ms-linear-gradient(top, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%) !important; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover, .table_headerLink:hover, .status_not_selected:hover { background-image: linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%); background-image: -o-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%); background-image: -ms-linear-gradient(bottom, rgb(26, 26, 26) 40%, rgb(13, 13, 13) 60%); } .td1, .td2, .td1 a + small, .td2 a + small, .animetitle { background-color: rgba(13, 13, 13, 0.9); background: transparent linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%); background: transparent -o-linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%); background: transparent -ms-linear-gradient(top, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%); } .animetitle:hover { background-image: linear-gradient(bottom, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%); background-image: -o-linear-gradient(bottom, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%); background-image: -ms-linear-gradient(bottom, rgba(26, 26, 26, 0.9) 40%, rgba(13, 13, 13, 0.9) 60%); } #fancybox-wrap { position: fixed !important; top: 0px !important; bottom: 0px; left: 0px !important; right: 0px !important; max-height: 90%; margin: auto !important; } #fancybox-inner { bottom: 10px; height: auto !important; } body { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; } a { text-decoration: none; } #mal_control_strip { width: 77% !important; height: 120px; margin: auto !important; background: none !important; } #inlineContent { background-color: transparent !important; display: block !important; position: absolute; top: 0px; left: 0px; height: 420px; width: 100%; background-position: right; border-bottom-width: 42px; border-bottom-style: solid; z-index: -1; } #mal_control_strip tbody { position: absolute; top: 0px; width: 686px; height: 120px; border-radius: 0px 0px 13px 13px; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks { padding: 0px !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right-style: none !important; } #mal_cs_pic { position: absolute; top: 11px; left: 11px; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a { display: block; position: absolute; top: 11px; width: 64px; height: 64px; line-height: 64px; overflow-x: hidden !important; overflow-y: hidden; white-space: nowrap; letter-spacing: -1px; font-size: 0px !important; font-weight: bold !important; text-align: center; text-decoration: none !important; border-radius: 7px; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { font-size: 11px !important; } #mal_cs_listinfo div:first-of-type a {left: 11px;} #mal_cs_listinfo div:last-of-type a {left: 86px;} #mal_cs_links div:first-of-type a:first-of-type {left: 161px;} #mal_cs_links div:last-of-type a:first-of-type {left: 236px;} #mal_cs_links div:last-of-type a:last-of-type {left: 311px;} #mal_cs_links div:first-of-type a:last-of-type, #mal_cs_otherlinks div:first-of-type a {left: 386px;} #mal_cs_otherlinks a[href*="/forum/"], #mal_cs_otherlinks a[href*="/mangalist/"], #mal_cs_otherlinks a[href*="/animelist/"], #mal_cs_otherlinks a[href*="/login.php"] {left: 461px;} #mal_cs_otherlinks a[href*="/history/"], #mal_cs_otherlinks a[href*="/register.php"] {left: 536px;} #mal_cs_otherlinks a[href*="/panel.php?go=export"], #mal_cs_otherlinks a[href*="/shared"], #mal_cs_otherlinks a[href*="/modules.php?go=faq"] {left: 611px;} #mal_cs_listinfo a:before, #mal_cs_links a:before, #mal_cs_otherlinks a:before { position: absolute; top: 0px; left: 0px; width: 64px; height: 64px; content: ""; background-position: center; background-repeat: no-repeat; background-size: 56px; } #mal_cs_listinfo a:hover:before, #mal_cs_links a:hover:before, #mal_cs_otherlinks a:hover:before { content: none; } #mal_cs_powered { top: 86px !important; left: 461px; right: auto !important; } #mal_cs_powered img { display: none; } #searchBox { position: absolute; top: 0px; left: 0px; padding: 4px 7px; width: 200px !important; height: 15px; font-size: 11px !important; text-align: center; border: none; border-radius: 4px; } .header_cw + table , .header_completed + table , .header_onhold + table , .header_dropped + table , .header_ptw + table { position: absolute; top: 86px; width: 461px; -layout: fixed; border-spacing: 11px 0px; } #list_surround table:nth-of-type(n+4) ~ .header_cw + table , #list_surround table:nth-of-type(n+4) ~ .header_completed + table , #list_surround table:nth-of-type(n+4) ~ .header_onhold + table , #list_surround table:nth-of-type(n+4) ~ .header_dropped + table , #list_surround table:nth-of-type(n+4) ~ .header_ptw + table { display: none; } .table_header { width: auto; } .table_header:first-of-type, .table_header:nth-of-type(n+6) { display: none; } .table_headerLink { display: block; padding: 4px 7px; height: 15px; text-align: center; border-radius: 4px; } #list_surround table:first-of-type { position: absolute; top: 398px; width: auto; font-size: 13px; font-weight: bold; border-spacing: 11px; border-radius: 13px 13px 0px 0px; } .status_selected, .status_not_selected { width: auto; white-space: nowrap; border-radius: 7px; } .status_selected a, .status_not_selected a { display: block; padding: 0px 22px; line-height: 42px; } #list_surround { width: 77%; min-width: 726px; margin: 406px auto 64px; padding: 11px 31px 42px 31px; border-radius: 42px; } .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { clear: both; position: relative; top: 31px; margin: 0px 0px 42px 0px; padding: 11px 0px; border-radius: 13px; } .header_title { padding-left: 242px; font-size: 22px; font-weight: bold; text-align: center; } #list_surround table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide { float: left; position: relative; width: 220px; height: 220px; margin: 11px; border-radius: 13px; } #list_surround table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw) { z-index: 1; } .hide { display: block !important; margin-left: -231px; background-position: center -20px; } .td1, .td2 { position: absolute; padding: 4px 7px; border-radius: 4px; } .td1:nth-of-type(2), .td2:nth-of-type(2) { visibility: hidden; padding: 0px; width: 100%; height: 100%; } .td1:first-of-type:before, .td2:first-of-type:before { content: "#"; } .td1:first-of-type, .td2:first-of-type { top: 11px; left: 11px; width: 42px; z-index: 1; } .td1 a[title="Anime Information"] + small, .td2 a[title="Anime Information"] + small { display: block; visibility: visible; position: absolute; top: 11px; left: 82px; width: 43px; padding: 4px 7px; font-size: 11px; text-align: center; word-wrap: break-word; border-radius: 4px; } .td1:nth-of-type(4)[width="50"], .td2:nth-of-type(4)[width="50"] { top: 11px; right: 11px; width: 42px; } td[width="70"] + .td1:nth-of-type(5):before, [width="70"] + .td2:nth-of-type(5):before { content: "Volumes: "; } td[width="70"] + .td1:nth-of-type(5), td[width="70"] + .td2:nth-of-type(5) { top: 11px; right: 11px; width: auto; text-align: right; } .td1 a:not([title="Anime Information"]) + small, .td2 a:not([title="Anime Information"]) + small { display: block; visibility: visible; position: absolute; top: 41px; right: 11px; width: auto; padding: 4px 7px; font-size: 11px; text-align: right; border-radius: 4px; } .animetitle { display: block; visibility: visible; position: absolute; left: 11px; bottom: 41px; padding: 7px; width: 184px; max-height: 34px; overflow: hidden; text-align: center; font-size: 13px; font-weight: bold; border-radius: 7px; } .td1:nth-of-type(3):before, .td2:nth-of-type(3):before { content: "Score: "; } .td1:nth-of-type(3), .td2:nth-of-type(3) { left: 11px; bottom: 11px; width: auto; text-align: left; } td[width="50"] + .td1:nth-of-type(5):before, [width="50"] + .td2:nth-of-type(5):before { content: "Episodes: "; } td[width="50"] + .td1:nth-of-type(5), td[width="50"] + .td2:nth-of-type(5) { right: 11px; bottom: 11px; width: auto; text-align: right; } .td1:nth-of-type(4)[width="70"]:before, .td2:nth-of-type(4)[width="70"]:before { content: "Chapters: "; } .td1:nth-of-type(4)[width="70"], .td2:nth-of-type(4)[width="70"] { bottom: 11px; right: 11px; width: auto; text-align: right; } .td1:nth-of-type(n+6), .td2:nth-of-type(n+6) { display: none; } .td1[width="125"], .td2[width="125"] { left: 11px; top: 71px; width: 184px; height: 45px; overflow: auto; } #list_surround table:hover .td1[width="125"], #list_surround table:hover .td2[width="125"] { display: block; } input[type=text] { width: 100%; text-align: right; border: none; border-radius: 4px; } input[value=Go] { display: none; } #list_surround .List_LightBox { display: block; visibility: visible; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 0px; } .category_totals { padding: 0px 31px; text-align: center; white-space: pre-line; border-radius: 13px; } .category_totals:before { display: block; content: "Totals:"; text-align: center; font-weight: bold; } #grand_totals, #copyright { clear: both; position: relative; top: 31px; padding: 11px 0px; text-align: center; } #grand_totals { margin-bottom: 22px; border-radius: 7px; } #copyright { margin-top: 0px !important; margin-bottom: 31px; border-radius: 13px; } #list_surround br { display: none; } #mal_control_strip #mal_cs_otherlinks strong{ margin: 0px !important; font-size: 0px !important; } #list_surround:before { border-radius: 0 0 13px 13px; height: 120px; top: 0; width: 700px; content: ""; z-index: -2 !important; display: block; position: absolute !important; left: 11% !important; } .status_not_selected a { border-radius: 6px; color: ; } .status_not_selected a { border-radius: 6px; } #mal_cs_otherlinks :nth-of-type(2) { margin-top: -40px; } #mal_cs_otherlinks a[href*="/forum/"], #mal_cs_otherlinks a[href*="/mangalist/"], #mal_cs_otherlinks a[href*="/animelist/"], #mal_cs_otherlinks a[href*="/login.php"], #mal_cs_otherlinks div a[href*="/register.php"]{ margin-top: 0; } .header_cw + table, .header_completed + table, .header_onhold + table, .header_dropped + table, .header_ptw + table { background: none repeat scroll 0 0 transparent; border-spacing: 11px 0; left: 12%; margin-left: -7px; position: absolute; top: 86px; width: 461px; } #inlineContent { display: none !important; } #list_surround table:first-of-type, #list_surround, input[type="text"] { background-color: transparent; } #list_surround table:first-of-type { top: 458px; } .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { margin-top: -20px; visibility: hidden; } .header_cw:before, .header_completed:before, .header_onhold:before, .header_dropped:before, .header_ptw:before, .header_cw:after, .header_completed:after, .header_onhold:after, .header_dropped:after, .header_ptw:after { visibility: visible !important; } #list_surround { margin: 325px auto 64px; } #list_surround table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide { height: 300px !important; } .hide { background-position: center !important; } #mal_control_strip tbody { background-color: transparent !important; } Read more at http://myanimelist.net/forum/?topicid=1198609&show=40#ed7yHK7mFDjtIq6k.99 and this is the link Thanks in advance. 1) Try a color coordinator. Pick a color on the wheel and make sure "with compliment" is on and then you'll see the color that compliments the one you're using http://paletton.com/#uid=24e0u0kllllaFw0g0qFqFg0w0aF 2) Find .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { remove the visibility codes to see it again 3) Its possible cuz the poster style layout does it and has a similar look but it seems like it'd be a pain to code it into the square layout. Maybe someone else will take the time to code it tho |
Jan 16, 2015 5:01 PM
#2522
Hi, I was wondering if it was allowed / possible to change what is written in the header. For instance, in both my lists, I want to change the Plan to Read header (the one you can click on). I checked around and got lost, and I didn't find any information (but it's most likely my fault). I'm waiting for your directions! Thanks. |
_____________________________________________________________ Come visit the Rec club! Everyone gets confused as to what they want to watch or read next. :T Here is the Official Rec Club list of Recommendations! |
Jan 16, 2015 5:12 PM
#2523
Read Shishio's easy tutorial for category links and here for more . edit. didn't read the brackets . |
GuriguraJan 16, 2015 5:22 PM
Jan 16, 2015 5:41 PM
#2524
blob said: Hi, I was wondering if it was allowed / possible to change what is written in the header. For instance, in both my lists, I want to change the Plan to Read header (the one you can click on). I checked around and got lost, and I didn't find any information (but it's most likely my fault). I'm waiting for your directions! Thanks. @Oddway Were you answering my question? If so, I could still not find where I can change the text. If you check my lists, you would notice that, for my anime list, I have already changed it to Plan to Wreck and, in the manga list, to Plan to Rape. However, at the top of my list, the buttons that filter the list are indicated as Plan to Watch and Plan to Read respectfully. I want to change those into what I want, how do I do this? Maybe calling it a header was my bad. It's not the header, the one right on top of the titles, it's the main one usually found on top. I want to keep the same style, but with different wordings... Thanks |
_____________________________________________________________ Come visit the Rec club! Everyone gets confused as to what they want to watch or read next. :T Here is the Official Rec Club list of Recommendations! |
Jan 16, 2015 6:11 PM
#2525
blob said: blob said: Hi, I was wondering if it was allowed / possible to change what is written in the header. For instance, in both my lists, I want to change the Plan to Read header (the one you can click on). I checked around and got lost, and I didn't find any information (but it's most likely my fault). I'm waiting for your directions! Thanks. @Oddway Were you answering my question? If so, I could still not find where I can change the text. If you check my lists, you would notice that, for my anime list, I have already changed it to Plan to Wreck and, in the manga list, to Plan to Rape. However, at the top of my list, the buttons that filter the list are indicated as Plan to Watch and Plan to Read respectfully. I want to change those into what I want, how do I do this? Maybe calling it a header was my bad. It's not the header, the one right on top of the titles, it's the main one usually found on top. I want to keep the same style, but with different wordings... Thanks Make sure you put {} after your code so it doesn't double or triple it in your CSS. I'm telling you this because currently your list code looks like this: http://i.imgur.com/ZmnYzK0.png To change the category images, you need to change the image link here: #list_surround .header_ptw { background: url("http://i.imgur.com/TytUO5d.gif") no-repeat scroll center center rgba(255, 255, 255, 0); opacity: 0.87; box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 1); } It's an image, so unless you know how to reproduce it exactly, your best bet would be to find who made the list, pm him and ask him if he could change the text of it. You could also just remake all the headers to your desire. |
Jan 16, 2015 6:18 PM
#2526
Satiriques said: blob said: blob said: Hi, I was wondering if it was allowed / possible to change what is written in the header. For instance, in both my lists, I want to change the Plan to Read header (the one you can click on). I checked around and got lost, and I didn't find any information (but it's most likely my fault). I'm waiting for your directions! Thanks. @Oddway Were you answering my question? If so, I could still not find where I can change the text. If you check my lists, you would notice that, for my anime list, I have already changed it to Plan to Wreck and, in the manga list, to Plan to Rape. However, at the top of my list, the buttons that filter the list are indicated as Plan to Watch and Plan to Read respectfully. I want to change those into what I want, how do I do this? Maybe calling it a header was my bad. It's not the header, the one right on top of the titles, it's the main one usually found on top. I want to keep the same style, but with different wordings... Thanks Make sure you put {} after your code so it doesn't double or triple it in your CSS. I'm telling you this because currently your list code looks like this: http://i.imgur.com/ZmnYzK0.png To change the category images, you need to change the image link here: #list_surround .header_ptw { background: url("http://i.imgur.com/TytUO5d.gif") no-repeat scroll center center rgba(255, 255, 255, 0); opacity: 0.87; box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 1); } It's an image, so unless you know how to reproduce it exactly, your best bet would be to find who made the list, pm him and ask him if he could change the text of it. You could also just remake all the headers to your desire. That's what I've been trying to say, I don't want to change those images. I want to change the one in form of text. I am the one that made those images, so yeah. xD THANK YOU FOR THE TIP THOUGH. I have asked before how to avoid the list coding from being duplicated, and I guess nobody knew back then, haha. What I want changed is at the top of the list, over the Reading/Watching IMAGE. The one that you could CLICK on and changes color. If you want more indications for where it is, it's on a horizontal line, it lists : Currently Reading Completed On Hold Dropped Plan to Read All Manga TLDR; I want it to turn into (for manga, for example) : Currently Reading Completed On Hold Dropped Plan to Rape All Manga Thanks! |
blobJan 16, 2015 6:22 PM
_____________________________________________________________ Come visit the Rec club! Everyone gets confused as to what they want to watch or read next. :T Here is the Official Rec Club list of Recommendations! |
Jan 16, 2015 6:33 PM
#2527
blob said: Satiriques said: blob said: blob said: Hi, I was wondering if it was allowed / possible to change what is written in the header. For instance, in both my lists, I want to change the Plan to Read header (the one you can click on). I checked around and got lost, and I didn't find any information (but it's most likely my fault). I'm waiting for your directions! Thanks. @Oddway Were you answering my question? If so, I could still not find where I can change the text. If you check my lists, you would notice that, for my anime list, I have already changed it to Plan to Wreck and, in the manga list, to Plan to Rape. However, at the top of my list, the buttons that filter the list are indicated as Plan to Watch and Plan to Read respectfully. I want to change those into what I want, how do I do this? Maybe calling it a header was my bad. It's not the header, the one right on top of the titles, it's the main one usually found on top. I want to keep the same style, but with different wordings... Thanks Make sure you put {} after your code so it doesn't double or triple it in your CSS. I'm telling you this because currently your list code looks like this: http://i.imgur.com/ZmnYzK0.png To change the category images, you need to change the image link here: #list_surround .header_ptw { background: url("http://i.imgur.com/TytUO5d.gif") no-repeat scroll center center rgba(255, 255, 255, 0); opacity: 0.87; box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 1); } It's an image, so unless you know how to reproduce it exactly, your best bet would be to find who made the list, pm him and ask him if he could change the text of it. You could also just remake all the headers to your desire. That's what I've been trying to say, I don't want to change those images. I want to change the one in form of text. I am the one that made those images, so yeah. xD THANK YOU FOR THE TIP THOUGH. I have asked before how to avoid the list coding from being duplicated, and I guess nobody knew back then, haha. What I want changed is at the top of the list, over the Reading/Watching IMAGE. The one that you could CLICK on and changes color. If you want more indications for where it is, it's on a horizontal line, it lists : Currently Reading Completed On Hold Dropped Plan to Read All Manga TLDR; I want it to turn into (for manga, for example) : Currently Reading Completed On Hold Dropped Plan to Rape All Manga Thanks! .status_not_selected a[href*="status=6"],.status_selected a[href*="status=6"] { visibility: hidden; font-size:0px!important; line-height: 0; } .status_not_selected a[href*="status=6"]:after ,.status_selected a[href*="status=6"]:after { content:'Plan to Wreck'!important; visibility: visible; font-size:13px!important; vertical-align: center; line-height: initial; } Should give you this: http://i.imgur.com/igNu3cO.jpg |
SatiriquesJan 16, 2015 7:26 PM
Jan 16, 2015 8:58 PM
#2528
Hello all I am currently using the template style "Snapshots, by http://myanimelist.net/profile/Drize http://myanimelist.net/forum/?topicid=392627&show=0#post1 It says in the forum link that for best results i should turn all of my settings off aside from Numbers... Well, I REALLY like this style, because i can change out the pictures every so often. I would like to know, if there is a way, to have space for the columns Name, Score, and Watched. Problem is, when i select the 3 options, the style completely breaks. It'd also be nice(but not important) to add a transparency to the "paper" which i swapped out for a lineless sheet. Thanks in advance! Link to my current CSS. http://pastebin.com/rgAPFaaw |
Baka baka baka! |
Jan 16, 2015 10:06 PM
#2529
@Satiriques Thanks! That's exactly what I wanted. :P For some reason, in my anime list, some covers disappeared, is that normal? |
_____________________________________________________________ Come visit the Rec club! Everyone gets confused as to what they want to watch or read next. :T Here is the Official Rec Club list of Recommendations! |
Jan 16, 2015 10:08 PM
#2530
TheJanitor13 said: Hello all I am currently using the template style "Snapshots, by http://myanimelist.net/profile/Drize http://myanimelist.net/forum/?topicid=392627&show=0#post1 It says in the forum link that for best results i should turn all of my settings off aside from Numbers... Well, I REALLY like this style, because i can change out the pictures every so often. I would like to know, if there is a way, to have space for the columns Name, Score, and Watched. Problem is, when i select the 3 options, the style completely breaks. It'd also be nice(but not important) to add a transparency to the "paper" which i swapped out for a lineless sheet. Thanks in advance! Link to my current CSS. http://pastebin.com/rgAPFaaw Opacity is the command for transparency. Enter a number from 0 to 1. |
_____________________________________________________________ Come visit the Rec club! Everyone gets confused as to what they want to watch or read next. :T Here is the Official Rec Club list of Recommendations! |
Jan 16, 2015 10:18 PM
#2531
blob said: @Satiriques Thanks! That's exactly what I wanted. :P For some reason, in my anime list, some covers disappeared, is that normal? You can use blink to manually add your missing covers. Just write your username, check anime and save it as [whatevername].css with the "more" selector. Just ctrl-f for the anime number you are looking for and add it to your list. I.E. http://myanimelist.net/anime/889/Black_Lagoon would be 889. |
Jan 16, 2015 11:06 PM
#2532
@Satiriques Thanks~ again. |
_____________________________________________________________ Come visit the Rec club! Everyone gets confused as to what they want to watch or read next. :T Here is the Official Rec Club list of Recommendations! |
Jan 22, 2015 4:43 AM
#2533
Hi everyone ! I'd like to ask you for a help. I was trying to make function in css, where in each category I chose (Currently Watching, Completed etc..) the table row hover will be different. Now I'm using this to changing wallpapers on each of those sites: /* ALL ANIME/MANGA BACKGROUND */ .status_selected a[href*="status=7"]:before { background-image: url(http://fc05.deviantart.net/fs70/f/2014/035/9/8/killua___hunter_x_hunter_by_doubleu42-d755p2b.jpg) !important; position: fixed !important; top: 0 !important; left: 0 !important; background-position: bottom left; height: 100% !important; width: 100% !important; background-size: cover !important; display: block !important; content: "" !important; z-index: -1 !important; } and this, to changing color in whole row in my tables: tr:hover .td1, tr:hover .td2 { background-color: rgba(215, 75, 75, 0.40); } I was trying in many ways combating those two code like for example: .status_selected a[href*="status=7"]:before tr:hover .td1 { background-color: black; } and other transformation of this, but without any result. I'm also trying to make the same with a header's, but i'm stuck on this: .table_header a[href*="status=7"] { background-color: #d74b4b; padding: 8px 6px; } .table_header a[href*="status=6"] { background-color: #ff6a00; padding: 8px 6px; } .table_header { color: #FFFFFF; padding: 8px 6px; } With this code something started to happen, but there is no color on whole header, but only in places where are sort titles (Anime Title, Score, Type, Progress). http://s14.postimg.org/9iv5e569d/Header_background.png Of course still working on it, but I'll be very grateful if you will be able to help me. Thanks in advance! |
Ludzik1893Jan 23, 2015 8:35 AM
Jan 24, 2015 1:28 PM
#2534
Hello everyone, Is it possible to change the vertical align for the buttons text (watching, completed etc) ? i've them at the side and vertical-align is not working (works on the anime list stuff..) tried everything but the text is at the top and it looks a bit weird because the button height is 30px as far as i see i've nothing that would block it. |
Jan 24, 2015 3:35 PM
#2535
Help, my Samurai Champloo custom theme seems to be missing covers for a few anime, how can I add them? |
Jan 24, 2015 3:57 PM
#2536
SuperRed said: Help, my Samurai Champloo custom theme seems to be missing covers for a few anime, how can I add them? There are multiple ways to fix this problem, here's what I usually do: get blink and use these settings. Make sure you save it as .css After that, you can either manually add the missing covers or import this css at the beggining of your list. |
Jan 24, 2015 10:32 PM
#2537
Hello people! The problem I need help with is a bottom scroll bar, it seems that it have some connection with the width on the list as it arrive when less than 830px and disappear when 830px or higher. I have absolutely no idea why this have happened and I'm grateful for all the help I can get. My list: http://myanimelist.net/animelist/Deisicarius Code: http://pastebin.com/8eQkG0uL |
Jan 24, 2015 11:17 PM
#2538
@Deisicarius Look around line #237 (your #copyright style) Your copyright section has width of 750px and 100px of right padding. By default these things add resulting in 850px wide copyright which pops through your #list_surround and available screen space, resulting in scrollbar. You could remove/reduce the right padding and/or adjust the width. You could also add box-sizing: border-box; to your #copyright code. By default "width" means "width of content", but border-box makes it so that it is "width of the container", so that paddings and borders would reduce the space available to box content. |
Jan 25, 2015 3:37 AM
#2539
VeriTi said: I see, thank you for your quick response.@Deisicarius Look around line #237 (your #copyright style) Your copyright section has width of 750px and 100px of right padding. By default these things add resulting in 850px wide copyright which pops through your #list_surround and available screen space, resulting in scrollbar. You could remove/reduce the right padding and/or adjust the width. You could also add box-sizing: border-box; to your #copyright code. By default "width" means "width of content", but border-box makes it so that it is "width of the container", so that paddings and borders would reduce the space available to box content. |
Jan 26, 2015 9:19 AM
#2540
Hi again, I'm wondering how to make the "Edit - More" in the list hidden by default and appear when hovering on the table section. |
Jan 26, 2015 12:02 PM
#2541
Deisicarius said: Hi again, I'm wondering how to make the "Edit - More" in the list hidden by default and appear when hovering on the table section. #list_surround small { visibility: hidden; } #list_surround small a:last-of-type { visibility: hidden; } #list_surround table tbody:hover small a{ visibility: visible; } #list_surround table tbody:hover small{ visibility: visible; } edit: removed some useless code. Nice list by the way. |
SatiriquesJan 26, 2015 12:09 PM
Jan 26, 2015 3:10 PM
#2542
Satiriques said: Thank you kind sir. Is there a way for "airing, not yet aired" to remain visible though?Deisicarius said: Hi again, I'm wondering how to make the "Edit - More" in the list hidden by default and appear when hovering on the table section. #list_surround small { visibility: hidden; } #list_surround small a:last-of-type { visibility: hidden; } #list_surround table tbody:hover small a{ visibility: visible; } #list_surround table tbody:hover small{ visibility: visible; } edit: removed some useless code. Nice list by the way. |
BalphagoreJan 26, 2015 3:16 PM
Jan 26, 2015 3:26 PM
#2543
Deisicarius said: Satiriques said: Thank you kind sir. Is there a way for "airing, not yet aired" to remain visible though?Deisicarius said: Hi again, I'm wondering how to make the "Edit - More" in the list hidden by default and appear when hovering on the table section. #list_surround small { visibility: hidden; } #list_surround small a:last-of-type { visibility: hidden; } #list_surround table tbody:hover small a{ visibility: visible; } #list_surround table tbody:hover small{ visibility: visible; } edit: removed some useless code. Nice list by the way. Woops, totally my mistake. .animetitle+small{ visibility: visible!important; } #list_surround small{ visibility:hidden; } #list_surround small a:last-of-type { visibility: hidden; } #list_surround table tbody:hover small a{ visibility: visible; } #list_surround table tbody:hover small{ visibility: visible; } |
Jan 26, 2015 3:50 PM
#2544
Satiriques said: Works perfectly, thanks once again!Deisicarius said: Satiriques said: Deisicarius said: Hi again, I'm wondering how to make the "Edit - More" in the list hidden by default and appear when hovering on the table section. #list_surround small { visibility: hidden; } #list_surround small a:last-of-type { visibility: hidden; } #list_surround table tbody:hover small a{ visibility: visible; } #list_surround table tbody:hover small{ visibility: visible; } edit: removed some useless code. Nice list by the way. Woops, totally my mistake. .animetitle+small{ visibility: visible!important; } #list_surround small{ visibility:hidden; } #list_surround small a:last-of-type { visibility: hidden; } #list_surround table tbody:hover small a{ visibility: visible; } #list_surround table tbody:hover small{ visibility: visible; } |
Jan 29, 2015 5:19 AM
#2545
I have a problem with anime that have longer names that are in my list. How do I make it so that longer names don't go to the 2nd line and instead, end with a "..." if they exceed the first? Also, how do I lower the position of the anime titles? Here are some examples of anime with longer names: http://i.imgur.com/9G890qw.png |
Jan 29, 2015 6:04 AM
#2546
Jan 29, 2015 6:17 AM
#2547
@Anonymoose-N This may require a bit of modification: .animetitle { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 470px; padding-bottom: .2ex; margin-top: 1ex } display: block is necessary to disable overflowing by setting it to hidden, which means "space is limited, and don't add scrollbars". White-space forbids line wrapping so you will always have one line. text-overflow: ellipsis makes so the text ends in "..." instead of abruptly being clipped. Width limiting prevents long titles from screwing parts of the layout. Bottom padding is because it would also cut the bottom parts of some letters like "y" or "g" which isn't good. Top margin is for lowering the position, adjust to your liking. |
VeriTiJan 29, 2015 8:02 AM
Jan 31, 2015 2:45 AM
#2548
Hello, guys. Do you know how to remove that white stripes on completed, dropped, etc. http://myanimelist.net/animelist/S-Z |
Jan 31, 2015 11:25 AM
#2549
S-Z said: Hello, guys. Do you know how to remove that white stripes on completed, dropped, etc. http://myanimelist.net/animelist/S-Z You can change the color here: .header_title { background-color:white; color:black; opacity: 0.7 !important; font-size:20px; font-family:Papyrus ; text-align: center; } or completely remove it with this: .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; border-radius: 0px 0px 25px 25px; } |
SatiriquesJan 31, 2015 11:29 AM
Jan 31, 2015 6:09 PM
#2550
Satiriques said: sorry i meant lines over there http://screenshot.ru/90d75f1297c62d79896cf73067cbb7b9.pngS-Z said: Hello, guys. Do you know how to remove that white stripes on completed, dropped, etc. http://myanimelist.net/animelist/S-Z You can change the color here: .header_title { background-color:white; color:black; opacity: 0.7 !important; font-size:20px; font-family:Papyrus ; text-align: center; } or completely remove it with this: .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; border-radius: 0px 0px 25px 25px; } |
More topics from this board
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
51 |
by Shishio-kun
»»
Yesterday, 12:37 PM |
|
» ✳️ Amazing new colorful layout for your list: Guchuko!Shishio-kun - Oct 14 |
3 |
by Mocha
»»
Oct 16, 6:27 PM |
|
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
131 |
by Shishio-kun
»»
Oct 14, 11:55 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1232 |
by sunnysummerday
»»
Oct 14, 9:37 AM |
|
» [CSS - Modern] ⭐️ Brink by V.L -- Cover-style theme! ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Mar 16, 2019 |
435 |
by slayra
»»
Oct 12, 4:04 AM |