New
Jun 12, 2015 8:53 PM
#2852
how can i hide "Edit-More" and display it when i hover over that row? Thank you! My code: @import url(http://fonts.googleapis.com/css?family=Oswald); @import url(http://fonts.googleapis.com/css?family=Indie+Flower); @import url(http://fonts.googleapis.com/css?family=Chewy); @import url(http://fonts.googleapis.com/css?family=Josefin+Sans); @import url(http://fonts.googleapis.com/css?family=Salsa); @import url(http://fonts.googleapis.com/css?family=Pacifico); @import url(http://pastebin.com/raw.php?i=QKaKmNrn); @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /* body */ body { background-color: #000000; background-image: url(http://i.imgur.com/nxBZ6wu.jpg); background-attachment: fixed; background-position: right top; background-repeat: no-repeat; font-family: Salsa; font-size: 13px; letter-spacing: 1px; color: #ffffff; } /* list positioning */ #list_surround { position: left !important; padding-left: 15px !important; width: 630px; opacity: .9; } /* // all links on your list */ a { color: #ffffff; text-decoration: none; transition: color 1s linear; } a:visited { color: #ffffff; text-decoration: none; } a:hover { color: #00ffff; text-decoration: none; text-shadow: 0 0 3px #00ffff; } /* // row color */ .td1 { background-color: rgba(6, 72, 230, 0.2); padding: 6px; } .td2 { background-color: rgba(4, 3, 122, 0.2); padding: 6px; } /* // header */ .table_header { background-color: rgba(4, 3, 122, 0.2); padding: 6px; } /* // header links */ .table_headerLink { color: #00ffff; text-decoration: none; font-family: Josefin Sans; font-size: 17px; } .table_headerLink:Visited { color: #00ffff; text-decoration: none; font-family: Josefin Sans; font-size: 17px; } .table_headerLink:Hover { color: #00ffff; text-decoration: none; font-family: Josefin Sans; font-size: 17px; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { font-size: 30px; color: #FAAFBE; font-family: Chewy; letter-spacing: 2px; padding-bottom:10px; } /* do not remove this */ #copyright:before { content: "List style by blingbling@mal |"; } #copyright { padding-top: 6px; padding-bottom: 6px; text-align: center; } /****************************/ /* Blue Highlight on Hover */ /****************************/ tr:hover [class^=td] { background-color: rgba(80, 50, 225, 0.9) !important; -moz-transition: .1s ease; -webkit-transition: .1s ease; -o-transition: .1s ease; } .category_totals { display: none !important;} #grand_totals { display: none !important;} /************************************************* * FONT * ----------------------------------------------- * This bar was designed to use Cuprum font * (imported from Google here). You can remove the * import link and set it to some other font here *************************************************/ #list_surround table:first-of-type[align] td:not(fucked) a:before { font-family : Oswald; text-shadow: none; } td[class^="status_"] a {text-shadow: none;} /************************************************* * AFTER-LIST MARGIN * ----------------------------------------------- * Due to fixed positioning of this it may happen * that your copyright is covered by the menu. * I therefore added this little offset to add * some empty space after your list. It may not * work even this way or might be unnecessary for * your layout. Contact me if any issues arise *************************************************/ #list_surround { margin-bottom : 57px; } /************************************************* * HANDLE COLOR * ----------------------------------------------- * Background and border of the handle *************************************************/ #inlineContent { background : hsla(260, 50%, 10%, 0.75); border : white solid; } /************************************************* * HANDLE WIDTH * ----------------------------------------------- * I'm using 1000px. And it has to be replaced in * both of these to also affect positioning. *************************************************/ #inlineContent { left : calc(50% - 1000px / 2); width : 1000px; } /************************************************* * HEADINGS TEXT * ----------------------------------------------- * This changes text that appears in bubbles on * hovering the button. There wasn't a way I * could re-use existing code so I had to dup it * in my CSS. More flexibility, anyways *************************************************/ /* OPTION: ANIME LIST */ #list_surround table:first-of-type[align] td:nth-of-type(1) a:before { content : "Watching" } #list_surround table:first-of-type[align] td:nth-of-type(2) a:before { content : "Completed" } #list_surround table:first-of-type[align] td:nth-of-type(3) a:before { content : "On-Hold" } #list_surround table:first-of-type[align] td:nth-of-type(4) a:before { content : "Dropped" } #list_surround table:first-of-type[align] td:nth-of-type(5) a:before { content : "Plan To Watch" } #list_surround table:first-of-type[align] td:nth-of-type(6) a:before { content : "All Anime" } /* END OPTIONS */ /************************************************* * HEADINGS THEME * ----------------------------------------------- * Colors to use for bubbles. I suggest trying out * black, and if it blends too much, use white. * The border code just *has* to be here to work. * It doesn't need to be changed. It's for small * triangles under the rounded box. *************************************************/ /* OPTION: BLACK */ #list_surround table:first-of-type[align] td:not(fucked) a:before { background-color : hsla(0, 0%, 10%, 0.8); color : hsla(0, 100%, 100%, 0.8); } #list_surround table:first-of-type[align] td:not(fucked) a:after { border : 7px solid; border-top-color : hsla(0, 0%, 10%, .8); } /* END OPTIONS */ /************************************************* * ORB ICONS, COLORS, TRANSITIONS * ----------------------------------------------- * Orbs use images as masks, the color transition * is actually the background-color switching, not * the image swapping, cuz due to standards it can * not be animated. *************************************************/ /* Icons */ #list_surround table:first-of-type[align] td:not(fucked) a { background-image : url("http://i.imgur.com/uJRss3C.png"); } /* Normal color*/ #list_surround table:first-of-type[align] td:not(fucked) a { background-color : hsl(220, 30%, 50%); } /* Hover color */ #list_surround table:first-of-type[align] td:not(fucked) a:hover { background-color : #FAAFBE; } /* Clicked and current color */ #list_surround table:first-of-type[align] td:not(fucked) a:active, .status_selected a { background-color : #00ffff !important; } /* Color transition */ #list_surround table:first-of-type[align] td:not(fucked) a { transition : background-color .3s linear; } /* Bubble transition */ #list_surround table:first-of-type[align] td:not(fucked) a:before, #list_surround table:first-of-type[align] td:not(fucked) a:after { transition : bottom .3s ease-out, opacity .3s ease-out; } /************************************************* * ORBS POSITION * ----------------------------------------------- * This needs to be changed if your list has * all anime category disabled *************************************************/ /* OPTION: SIX CATEGORY BUTTONS */ #list_surround table:first-of-type[align] { margin-left : -158px; } /* END OPTIONS */ /************************************************* * BASIC CODE * ----------------------------------------------- * This is the rest codes that I didn't categorize * Feel free to tweak it to your liking. *************************************************/ /* Handle */ #inlineContent { border-radius : 800px/100px; border-width : 3px 2px 2px; bottom : -35px; display : block !important; height : 57px; position : fixed; z-index : 100; } /* Nav panel */ #list_surround table:first-of-type[align] { bottom : 5px; display : block; left : 50%; position : fixed; width : 360px !important; z-index : 120; } /* Nav panel items */ #list_surround table:first-of-type[align] td:not(fucked) { display : inline-block; height : 42px; padding : 5px; width : 42px; } /* Nav panel links */ #list_surround table:first-of-type[align] td:not(fucked) a { display : block; border-radius : 50%; border : 2px solid white; box-shadow : inset 0 0 2px black, 0 3px 3px black; color : transparent; overflow : hidden; height : 100%; width : 100%; } /* Bubbles */ #list_surround table:first-of-type[align] td:not(fucked) a:before { -moz-box-sizing : border-box; box-sizing : border-box; pointer-events : none; border-radius : 25px; bottom : 45px; content : "error!"; display : block; font-size : small; height : 30px; margin-left : -30px; opacity : 0; overflow : hidden; padding-left : 1px; padding-top : 3px; position : fixed; width : 100px; } /* Small triangle below the bubble */ #list_surround table:first-of-type[align] td:not(fucked) a:after { bottom : 45px; content : ""; display : block; margin-bottom : -14px; margin-left : 13px; opacity : 0; position : fixed; } #list_surround table:first-of-type[align] td:not(fucked) a:hover:before, #list_surround table:first-of-type td:not(fucked) a:hover:after { bottom : 60px; opacity : 1; } /* Forcing overlay behaviour to prevent flicker */ #list_surround table:first-of-type[align] td:nth-of-type(1) a:before { z-index : 121 } #list_surround table:first-of-type[align] td:nth-of-type(2) a:before { z-index : 122 } #list_surround table:first-of-type[align] td:nth-of-type(3) a:before { z-index : 123 } #list_surround table:first-of-type[align] td:nth-of-type(4) a:before { z-index : 124 } #list_surround table:first-of-type[align] td:nth-of-type(5) a:before { z-index : 125 } #list_surround table:first-of-type[align] td:nth-of-type(6) a:before { z-index : 126 } /* Moving the background offset to draw different icons for different categories */ #list_surround table:first-of-type[align] td:nth-of-type(1) a { background-position : 0 0; } #list_surround table:first-of-type[align] td:nth-of-type(2) a { background-position : -42px 0; } #list_surround table:first-of-type[align] td:nth-of-type(3) a { background-position : -84px 0; } #list_surround table:first-of-type[align] td:nth-of-type(4) a { background-position : -126px 0; } #list_surround table:first-of-type[align] td:nth-of-type(5) a { background-position : -168px 0; } #list_surround table:first-of-type[align] td:nth-of-type(6) a { background-position : -210px 0; } body { cursor:url(http://i.imgur.com/fAB3SUY.png) 1 2, auto; } a:hover { cursor: url(http://i.imgur.com/fAB3SUY.png) 1 2, auto; } #mal_control_strip { display: none !important;} |
Jun 13, 2015 7:52 AM
#2853
Kaiwan said: how can i hide "Edit-More" and display it when i hover over that row? Thank you! My code: @import url(http://fonts.googleapis.com/css?family=Oswald); @import url(http://fonts.googleapis.com/css?family=Indie+Flower); @import url(http://fonts.googleapis.com/css?family=Chewy); @import url(http://fonts.googleapis.com/css?family=Josefin+Sans); @import url(http://fonts.googleapis.com/css?family=Salsa); @import url(http://fonts.googleapis.com/css?family=Pacifico); @import url(http://pastebin.com/raw.php?i=QKaKmNrn); @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); /* body */ body { background-color: #000000; background-image: url(http://i.imgur.com/nxBZ6wu.jpg); background-attachment: fixed; background-position: right top; background-repeat: no-repeat; font-family: Salsa; font-size: 13px; letter-spacing: 1px; color: #ffffff; } /* list positioning */ #list_surround { position: left !important; padding-left: 15px !important; width: 630px; opacity: .9; } /* // all links on your list */ a { color: #ffffff; text-decoration: none; transition: color 1s linear; } a:visited { color: #ffffff; text-decoration: none; } a:hover { color: #00ffff; text-decoration: none; text-shadow: 0 0 3px #00ffff; } /* // row color */ .td1 { background-color: rgba(6, 72, 230, 0.2); padding: 6px; } .td2 { background-color: rgba(4, 3, 122, 0.2); padding: 6px; } /* // header */ .table_header { background-color: rgba(4, 3, 122, 0.2); padding: 6px; } /* // header links */ .table_headerLink { color: #00ffff; text-decoration: none; font-family: Josefin Sans; font-size: 17px; } .table_headerLink:Visited { color: #00ffff; text-decoration: none; font-family: Josefin Sans; font-size: 17px; } .table_headerLink:Hover { color: #00ffff; text-decoration: none; font-family: Josefin Sans; font-size: 17px; } /* headers: watching, completed, on-hold, dropped, plan to watch */ .header_title { font-size: 30px; color: #FAAFBE; font-family: Chewy; letter-spacing: 2px; padding-bottom:10px; } /* do not remove this */ #copyright:before { content: "List style by blingbling@mal |"; } #copyright { padding-top: 6px; padding-bottom: 6px; text-align: center; } /****************************/ /* Blue Highlight on Hover */ /****************************/ tr:hover [class^=td] { background-color: rgba(80, 50, 225, 0.9) !important; -moz-transition: .1s ease; -webkit-transition: .1s ease; -o-transition: .1s ease; } .category_totals { display: none !important;} #grand_totals { display: none !important;} /************************************************* * FONT * ----------------------------------------------- * This bar was designed to use Cuprum font * (imported from Google here). You can remove the * import link and set it to some other font here *************************************************/ #list_surround table:first-of-type[align] td:not(fucked) a:before { font-family : Oswald; text-shadow: none; } td[class^="status_"] a {text-shadow: none;} /************************************************* * AFTER-LIST MARGIN * ----------------------------------------------- * Due to fixed positioning of this it may happen * that your copyright is covered by the menu. * I therefore added this little offset to add * some empty space after your list. It may not * work even this way or might be unnecessary for * your layout. Contact me if any issues arise *************************************************/ #list_surround { margin-bottom : 57px; } /************************************************* * HANDLE COLOR * ----------------------------------------------- * Background and border of the handle *************************************************/ #inlineContent { background : hsla(260, 50%, 10%, 0.75); border : white solid; } /************************************************* * HANDLE WIDTH * ----------------------------------------------- * I'm using 1000px. And it has to be replaced in * both of these to also affect positioning. *************************************************/ #inlineContent { left : calc(50% - 1000px / 2); width : 1000px; } /************************************************* * HEADINGS TEXT * ----------------------------------------------- * This changes text that appears in bubbles on * hovering the button. There wasn't a way I * could re-use existing code so I had to dup it * in my CSS. More flexibility, anyways *************************************************/ /* OPTION: ANIME LIST */ #list_surround table:first-of-type[align] td:nth-of-type(1) a:before { content : "Watching" } #list_surround table:first-of-type[align] td:nth-of-type(2) a:before { content : "Completed" } #list_surround table:first-of-type[align] td:nth-of-type(3) a:before { content : "On-Hold" } #list_surround table:first-of-type[align] td:nth-of-type(4) a:before { content : "Dropped" } #list_surround table:first-of-type[align] td:nth-of-type(5) a:before { content : "Plan To Watch" } #list_surround table:first-of-type[align] td:nth-of-type(6) a:before { content : "All Anime" } /* END OPTIONS */ /************************************************* * HEADINGS THEME * ----------------------------------------------- * Colors to use for bubbles. I suggest trying out * black, and if it blends too much, use white. * The border code just *has* to be here to work. * It doesn't need to be changed. It's for small * triangles under the rounded box. *************************************************/ /* OPTION: BLACK */ #list_surround table:first-of-type[align] td:not(fucked) a:before { background-color : hsla(0, 0%, 10%, 0.8); color : hsla(0, 100%, 100%, 0.8); } #list_surround table:first-of-type[align] td:not(fucked) a:after { border : 7px solid; border-top-color : hsla(0, 0%, 10%, .8); } /* END OPTIONS */ /************************************************* * ORB ICONS, COLORS, TRANSITIONS * ----------------------------------------------- * Orbs use images as masks, the color transition * is actually the background-color switching, not * the image swapping, cuz due to standards it can * not be animated. *************************************************/ /* Icons */ #list_surround table:first-of-type[align] td:not(fucked) a { background-image : url("http://i.imgur.com/uJRss3C.png"); } /* Normal color*/ #list_surround table:first-of-type[align] td:not(fucked) a { background-color : hsl(220, 30%, 50%); } /* Hover color */ #list_surround table:first-of-type[align] td:not(fucked) a:hover { background-color : #FAAFBE; } /* Clicked and current color */ #list_surround table:first-of-type[align] td:not(fucked) a:active, .status_selected a { background-color : #00ffff !important; } /* Color transition */ #list_surround table:first-of-type[align] td:not(fucked) a { transition : background-color .3s linear; } /* Bubble transition */ #list_surround table:first-of-type[align] td:not(fucked) a:before, #list_surround table:first-of-type[align] td:not(fucked) a:after { transition : bottom .3s ease-out, opacity .3s ease-out; } /************************************************* * ORBS POSITION * ----------------------------------------------- * This needs to be changed if your list has * all anime category disabled *************************************************/ /* OPTION: SIX CATEGORY BUTTONS */ #list_surround table:first-of-type[align] { margin-left : -158px; } /* END OPTIONS */ /************************************************* * BASIC CODE * ----------------------------------------------- * This is the rest codes that I didn't categorize * Feel free to tweak it to your liking. *************************************************/ /* Handle */ #inlineContent { border-radius : 800px/100px; border-width : 3px 2px 2px; bottom : -35px; display : block !important; height : 57px; position : fixed; z-index : 100; } /* Nav panel */ #list_surround table:first-of-type[align] { bottom : 5px; display : block; left : 50%; position : fixed; width : 360px !important; z-index : 120; } /* Nav panel items */ #list_surround table:first-of-type[align] td:not(fucked) { display : inline-block; height : 42px; padding : 5px; width : 42px; } /* Nav panel links */ #list_surround table:first-of-type[align] td:not(fucked) a { display : block; border-radius : 50%; border : 2px solid white; box-shadow : inset 0 0 2px black, 0 3px 3px black; color : transparent; overflow : hidden; height : 100%; width : 100%; } /* Bubbles */ #list_surround table:first-of-type[align] td:not(fucked) a:before { -moz-box-sizing : border-box; box-sizing : border-box; pointer-events : none; border-radius : 25px; bottom : 45px; content : "error!"; display : block; font-size : small; height : 30px; margin-left : -30px; opacity : 0; overflow : hidden; padding-left : 1px; padding-top : 3px; position : fixed; width : 100px; } /* Small triangle below the bubble */ #list_surround table:first-of-type[align] td:not(fucked) a:after { bottom : 45px; content : ""; display : block; margin-bottom : -14px; margin-left : 13px; opacity : 0; position : fixed; } #list_surround table:first-of-type[align] td:not(fucked) a:hover:before, #list_surround table:first-of-type td:not(fucked) a:hover:after { bottom : 60px; opacity : 1; } /* Forcing overlay behaviour to prevent flicker */ #list_surround table:first-of-type[align] td:nth-of-type(1) a:before { z-index : 121 } #list_surround table:first-of-type[align] td:nth-of-type(2) a:before { z-index : 122 } #list_surround table:first-of-type[align] td:nth-of-type(3) a:before { z-index : 123 } #list_surround table:first-of-type[align] td:nth-of-type(4) a:before { z-index : 124 } #list_surround table:first-of-type[align] td:nth-of-type(5) a:before { z-index : 125 } #list_surround table:first-of-type[align] td:nth-of-type(6) a:before { z-index : 126 } /* Moving the background offset to draw different icons for different categories */ #list_surround table:first-of-type[align] td:nth-of-type(1) a { background-position : 0 0; } #list_surround table:first-of-type[align] td:nth-of-type(2) a { background-position : -42px 0; } #list_surround table:first-of-type[align] td:nth-of-type(3) a { background-position : -84px 0; } #list_surround table:first-of-type[align] td:nth-of-type(4) a { background-position : -126px 0; } #list_surround table:first-of-type[align] td:nth-of-type(5) a { background-position : -168px 0; } #list_surround table:first-of-type[align] td:nth-of-type(6) a { background-position : -210px 0; } body { cursor:url(http://i.imgur.com/fAB3SUY.png) 1 2, auto; } a:hover { cursor: url(http://i.imgur.com/fAB3SUY.png) 1 2, auto; } #mal_control_strip { display: none !important;} add div[style="float: right;"] {opacity: 0;} tr:hover div[style="float: right;"] {opacity: 1;} |
Jun 13, 2015 8:51 PM
#2855
Hi everyone! I've got a question that I can't seem to find answered on here, so I thought I'd ask. I would like to manually change some of the default anime titles on my list (titles as in the names of each anime), and replace them with my own custom text. Here's my current code if it's needed: @import url(https://googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM); @import url(http://fonts.googleapis.com/css?family=Nunito); @import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500); @import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:800); /*Links*/ [href] { text-decoration: none; color: #c7c7c7; } [href]:hover { color: #c7c7c7; } body { background-color: #000; } /*Main container*/ #list_surround { position: relative; background-image: url('http://i.imgur.com/1TPhmk0.png'); background-repeat: no-repeat; background-position: 50px 0px; background-size: 30% auto; background-attachment: fixed; font-family: 'Nunito', sans-serif; font-size: 17px; } /*Hide navigation (menu for Watching, Completed, etc.)*/ [class^=status_] { display: none; } /*Hide stats*/ #grand_totals, .category_totals { display: none; } /*Position list*/ #list_surround [cellpadding="0"] { width: 640px; left: 33%; position: relative; } /*Categories (Watching, Completed, etc.)*/ [class^=header_] { margin-right: 100%; margin-top: 10px; white-space: nowrap; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(http://i.imgur.com/dJ2osYN.png); height: 100px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(http://i.imgur.com/PPhzDlI.png); height: 100px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(http://i.imgur.com/oRvK9DC.png); height: 100px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(http://i.imgur.com/T5llTJL.png); height: 100px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } .header_title { color: #FFF; font-family: "Alegreya Sans SC", "Arial"; font-size: 32px; font-weight: 800; padding: 10px 0 0; } /*Column headers*/ .table_header { padding: 8px 8px 0px 8px; } .table_headerLink { color: #FFF; font-size: 12px; font-weight: 300; } /*Rows*/ .td1 { background-color: #272727; border-top: 3px solid #000; border-bottom: 3px solid #000; } .td2 { background-color: #5e5e5e; border-top: 3px solid #000; border-bottom: 3px solid #000; } .td2:first-child { border-left: 1px solid #; } .td2:last-child { border-right: 1px solid #; } .td1, .td2 { padding: 8px; } .td1, .td2, .animetitle { color: #FFF; font-size: 13px; } [id^="scor"] { color: #FFF; text-shadow: 1px 1px 1px #000, 0px 0px 8px white; } /*Add/Edit - More*/ [style^="float: right"] { display: none; } /*Copyright*/ #copyright { font-size: 9px; font-weight: 300; color: #FFF; padding-top: 20px; margin-bottom: 30px; margin-left: 150px; } /* THUMBNAIL SETTINGS Settings for the thumbnails of covers seen on your list. Height and width control the size, while margin-left and top can be added or taken away to change the position. Change the border size, type, or color, with the first border code.*/ .hide { height:70px; width:50px; margin-left:534px; margin-top:-82px; border:2px solid #000000; background-color:rgba(248, 162, 200, 0.7); background-position:50% 50%; background-repeat:no-repeat no-repeat; background-size:cover; border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:7px; display:inline-block !important; position: absolute; } /*ROW WIDTH AND SPACING This will increase the height of your rows and move the anime title to the left. It might look funny on some layouts so you'll have to adjust it or ask for help! Height is the height, padding left is the space the anime title moves from the left. */ .td1:nth-of-type(2), .td2:nth-of-type(2) { height: 72px; padding-left: 42px; } /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */ #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } /****************************/ /* Silver highlight and font resize on Hover */ /****************************/ tr:hover [class^="td"] { background-color:#a3a3a3; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease; } /* REMOVE HEADER TEXT These codes remove the original text like "Completed" and "Currently Watching" from each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't affect the images in any way. */ .header_title { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } #mal_control_strip { display: none !important;} #list_surround { position: absolute !important; top: -60px;} } Any help for this would be greatly appreciated, if possible! EDIT: Thank you, it's working perfectly. |
DarkMorelloJun 14, 2015 10:08 AM
Jun 13, 2015 9:48 PM
#2856
Morellopocalypse said: I would like to manually change some of the default anime titles on my list (titles as in the names of each anime), and replace them with my own custom text. Example replacing "Akira" with "my custom Akira title". (the custom text is not selectable, but is clickable) [href*="/47/"]:after { content: "my custom Akira title"; } [href*="/47/"] span { display: none; } |
Jun 14, 2015 7:44 AM
#2857
Hello again, sorry for being annoying.. So I wanted to add a background to my cover, something like a border or so, and I tried to check other layouts with those codes, I found it the thing is, they didn´t worked. I use blinck to upgrade my covers, maybe it's because of it? The system used in both layouts was different so the codes for the background have to be different has well? This are the codes used for my covers.. in last instance i tried to put the background in the ".hide:before" I don´t know if it makes any sense but they didn´t worked out as well .. @import"https://dl.dropboxusercontent.com/s/7re8iafoomkwh8b/asaslas.css?dl=0"; /* CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT) */ #list_surround table:nth-of-type(n+4):hover td:nth-of-type(3), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(4), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(5), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(6), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(7), #list_surround table:nth-of-type(n+4):hover td:nth-of-type(8) { display: table-cell; } #list_surround small a:last-of-type { display: none !important; } .animetitle + small { visibility: visible !important; } #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"], #list_surround a[href*="http://myanimelist.net/editlist.php?type="], #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] { visibility: visible !important; margin-right: 10px } .td1:nth-of-type(6) small, .td2:nth-of-type(6) small, .td1:nth-of-type(5) small, .td2:nth-of-type(5) small, .td1:nth-of-type(4) small, .td2:nth-of-type(4) small { visibility: visible !important; } .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover, .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover, .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{ text-decoration: underline; } /* COVER AREA */ .hide { background-size: cover; left: 30px; top: 70px; height: 330px; width: 220px; padding-bottom: 0px; border-style: solid; border-color: white; border-top: 1px solid white;; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-radius: 15px 15px 15px 15px; background-color: rgba(200, 5, 200, 0.75); background-position: center 50% !important; background-repeat: no-repeat !Important; display: block !important; position: fixed; visibility: hidden; opacity: 0; } .hide:before { color: trasnparent; padding-bottom: 5px; width: 50px; top: 30px; left: 70px; border-radius: 25px 25px 0 0; } |
Jun 15, 2015 5:43 PM
#2858
Hi there. One of the pre-made layouts that you have in this topic: http://myanimelist.net/forum/?topicid=318587 the square space layout: http://www.imagebam.com/image/7399eb415792523 The /* Code */ @import url(https://dl.dropbox.com/s/net49efyjsm56nf/Space.css); has stooped working yesterday it was fine today it vanished, I'm very bad at programming, has anyone the code that's missing in this layout? Tks from advance. |
Jun 16, 2015 2:01 AM
#2859
keimador said: It would seem the dropbox folder is locked, probably because of to mauch trafic. My best guess is that you should just wait it out.Hi there. One of the pre-made layouts that you have in this topic: http://myanimelist.net/forum/?topicid=318587 the square space layout: http://www.imagebam.com/image/7399eb415792523 The /* Code */ @import url(https://dl.dropbox.com/s/net49efyjsm56nf/Space.css); has stooped working yesterday it was fine today it vanished, I'm very bad at programming, has anyone the code that's missing in this layout? Tks from advance. |
Jun 16, 2015 10:08 AM
#2860
Oiomi-chan said: keimador said: It would seem the dropbox folder is locked, probably because of to mauch trafic. My best guess is that you should just wait it out.Hi there. One of the pre-made layouts that you have in this topic: http://myanimelist.net/forum/?topicid=318587 the square space layout: http://www.imagebam.com/image/7399eb415792523 The /* Code */ @import url(https://dl.dropbox.com/s/net49efyjsm56nf/Space.css); has stooped working yesterday it was fine today it vanished, I'm very bad at programming, has anyone the code that's missing in this layout? Tks from advance. I don't think the dropbox folder is locked because of too much trafic, the author of the layout seems to have erased is myanimelist profile. I think he quit the myanimelist, so he erased all his posts and layout. |
Jun 16, 2015 12:08 PM
#2861
http://m.imgur.com/D3m2NEc Just curious, but what happened to this layout? It was/is my favorite anime list layout off all time and now it has been removed. Also, the code url to Dropbox is no longer working properly. I will really miss this layout if I'm not able to use it anymore. :( |
Jun 16, 2015 12:58 PM
#2862
hello, i got a little probliem a bit the table of the list looks abit ugly and i want to make it look better and put everything on the center of the web(List) so here is the deal: if someone can tell me how to fix it i will be happy :D the source of the codes is here> http://myanimelist.net/forum/?topicid=1198609 |
Jun 16, 2015 5:31 PM
#2863
My background has white space in it, I looked at my code and there didn't seem to be wrong with it. Help? body {background-image: url(http://i62.tinypic.com/2s0ej9x.jpg); background-position: center; background-size: cover ; background-attachement: scroll; background-repeat: no-repeat; } .header_cw { height: 400px; margin-bottom: 100px; } .header_title { background-color: rgba(59, 108, 200, 0.7); border-radius: 25px 25px 0px 0px; text-align: center; font-size: 200%; } #list_surround { position:relative ; width: 600px; left: 50px; } .table_header { border-style: solid; border-color: rgba(59, 108, 200, 0.7); border-radius: 0px 0px 0px 0px; font-size: 100%; border-width: 1px; } .td1, .td2 { background: rgba(59, 108, 200, 0.7); } .category_totals { background: rgba(207, 11, 32, 0.9); border-radius: 0px 0px 25px 25px; font-size: 100%; text-align: center; } #grand_totals { background: rgba(51, 207, 142, 0.7); } #copyright { background: rgba(255, 255, 255, 0); } |
Jun 16, 2015 5:43 PM
#2864
You can try #list_surround {left: 350px; } Change the px number to move the list around from to right. If it doesnt work go to the official FAQ forums and ask for help. Cheers! |
Jun 16, 2015 6:09 PM
#2865
Codetester said: My background has white space in it, I looked at my code and there didn't seem to be wrong with it. Help? body {background-image: url(http://i62.tinypic.com/2s0ej9x.jpg); background-position: center; background-size: cover ; background-attachement: scroll; background-repeat: no-repeat; } .header_cw { height: 400px; margin-bottom: 100px; } .header_title { background-color: rgba(59, 108, 200, 0.7); border-radius: 25px 25px 0px 0px; text-align: center; font-size: 200%; } #list_surround { position:relative ; width: 600px; left: 50px; } .table_header { border-style: solid; border-color: rgba(59, 108, 200, 0.7); border-radius: 0px 0px 0px 0px; font-size: 100%; border-width: 1px; } .td1, .td2 { background: rgba(59, 108, 200, 0.7); } .category_totals { background: rgba(207, 11, 32, 0.9); border-radius: 0px 0px 25px 25px; font-size: 100%; text-align: center; } #grand_totals { background: rgba(51, 207, 142, 0.7); } #copyright { background: rgba(255, 255, 255, 0); } I believe it's because you have your background set to scroll. |
Jun 16, 2015 8:05 PM
#2866
RogueKnight777 said: Codetester said: My background has white space in it, I looked at my code and there didn't seem to be wrong with it. Help? body {background-image: url(http://i62.tinypic.com/2s0ej9x.jpg); background-position: center; background-size: cover ; background-attachement: scroll; background-repeat: no-repeat; } .header_cw { height: 400px; margin-bottom: 100px; } .header_title { background-color: rgba(59, 108, 200, 0.7); border-radius: 25px 25px 0px 0px; text-align: center; font-size: 200%; } #list_surround { position:relative ; width: 600px; left: 50px; } .table_header { border-style: solid; border-color: rgba(59, 108, 200, 0.7); border-radius: 0px 0px 0px 0px; font-size: 100%; border-width: 1px; } .td1, .td2 { background: rgba(59, 108, 200, 0.7); } .category_totals { background: rgba(207, 11, 32, 0.9); border-radius: 0px 0px 25px 25px; font-size: 100%; text-align: center; } #grand_totals { background: rgba(51, 207, 142, 0.7); } #copyright { background: rgba(255, 255, 255, 0); } I believe it's because you have your background set to scroll. Correct; the solution is to set background-attachment to fixed. |
Jun 16, 2015 8:11 PM
#2867
RogueKnight777 said: http://m.imgur.com/D3m2NEc Just curious, but what happened to this layout? It was/is my favorite anime list layout off all time and now it has been removed. Also, the code url to Dropbox is no longer working properly. I will really miss this layout if I'm not able to use it anymore. :( keimador said: Hi there. One of the pre-made layouts that you have in this topic: http://myanimelist.net/forum/?topicid=318587 the square space layout: http://www.imagebam.com/image/7399eb415792523 The /* Code */ @import url(https://dl.dropbox.com/s/net49efyjsm56nf/Space.css); has stooped working yesterday it was fine today it vanished, I'm very bad at programming, has anyone the code that's missing in this layout? Tks from advance. As its been said the person who was hosting that dropbox moved it from that source, probably cuz his/her dropbox crashed with all the ppl using it and they moved it to a more secret location to prevent further crashing. Luckily I remember the name of a user who had this layout and was able to search for him and he has the layout hosted on his dropbox. I can't give out his dropbox info since he prob doesn't want ppl using his too but I'm trying to recreate the layout for ppl to use without dropbox. For now you can use this version until I work the kinks out of it: http://pasted.co/9314062b |
Jun 16, 2015 9:23 PM
#2868
Thank you Shishio-Kun! I really, really appreciate it. :) |
Jun 17, 2015 11:48 AM
#2870
RogueKnight777 said: Codetester said: My background has white space in it, I looked at my code and there didn't seem to be wrong with it. Help? body {background-image: url(http://i62.tinypic.com/2s0ej9x.jpg); background-position: center; background-size: cover ; background-attachement: scroll; background-repeat: no-repeat; } .header_cw { height: 400px; margin-bottom: 100px; } .header_title { background-color: rgba(59, 108, 200, 0.7); border-radius: 25px 25px 0px 0px; text-align: center; font-size: 200%; } #list_surround { position:relative ; width: 600px; left: 50px; } .table_header { border-style: solid; border-color: rgba(59, 108, 200, 0.7); border-radius: 0px 0px 0px 0px; font-size: 100%; border-width: 1px; } .td1, .td2 { background: rgba(59, 108, 200, 0.7); } .category_totals { background: rgba(207, 11, 32, 0.9); border-radius: 0px 0px 25px 25px; font-size: 100%; text-align: center; } #grand_totals { background: rgba(51, 207, 142, 0.7); } #copyright { background: rgba(255, 255, 255, 0); } I believe it's because you have your background set to scroll. Shishio-kun said: RogueKnight777 said: Codetester said: My background has white space in it, I looked at my code and there didn't seem to be wrong with it. Help? body {background-image: url(http://i62.tinypic.com/2s0ej9x.jpg); background-position: center; background-size: cover ; background-attachement: scroll; background-repeat: no-repeat; } .header_cw { height: 400px; margin-bottom: 100px; } .header_title { background-color: rgba(59, 108, 200, 0.7); border-radius: 25px 25px 0px 0px; text-align: center; font-size: 200%; } #list_surround { position:relative ; width: 600px; left: 50px; } .table_header { border-style: solid; border-color: rgba(59, 108, 200, 0.7); border-radius: 0px 0px 0px 0px; font-size: 100%; border-width: 1px; } .td1, .td2 { background: rgba(59, 108, 200, 0.7); } .category_totals { background: rgba(207, 11, 32, 0.9); border-radius: 0px 0px 25px 25px; font-size: 100%; text-align: center; } #grand_totals { background: rgba(51, 207, 142, 0.7); } #copyright { background: rgba(255, 255, 255, 0); } I believe it's because you have your background set to scroll. Correct; the solution is to set background-attachment to fixed. Help! It's still not working, I noticed whenever I zoom out my screen the background fits but when I zoom in the white space appears, is it something to do with the size of the wallpaper? http://i57.tinypic.com/2i9m8sp.png http://i62.tinypic.com/t7d1ee.png body { background-image: url(http://i62.tinypic.com/2s0ej9x.jpg); background-size: cover ; background-attachement: fixed; background-repeat: no-repeat; } .header_cw { height: 400px; margin-bottom: 100px; } .header_title { background-color: rgba(59, 108, 200, 0.7); border-radius: 25px 25px 0px 0px; text-align: center; font-size: 200%; } #list_surround { position:relative ; width: 600px; left: 300px; } .table_header { border-style: solid; border-color: rgba(59, 108, 200, 0.7); border-radius: 0px 0px 0px 0px; font-size: 100%; border-width: 1px; } .td1, .td2 { background: rgba(59, 108, 200, 0.7); } .category_totals { background: rgba(207, 11, 32, 0.9); border-radius: 0px 0px 25px 25px; font-size: 100%; text-align: center; } #grand_totals { background: rgba(51, 207, 142, 0.7); } #copyright { background: rgba(255, 255, 255, 0); } |
Jun 17, 2015 12:33 PM
#2871
Codetester said: RogueKnight777 said: Codetester said: My background has white space in it, I looked at my code and there didn't seem to be wrong with it. Help? body {background-image: url(http://i62.tinypic.com/2s0ej9x.jpg); background-position: center; background-size: cover ; background-attachement: scroll; background-repeat: no-repeat; } .header_cw { height: 400px; margin-bottom: 100px; } .header_title { background-color: rgba(59, 108, 200, 0.7); border-radius: 25px 25px 0px 0px; text-align: center; font-size: 200%; } #list_surround { position:relative ; width: 600px; left: 50px; } .table_header { border-style: solid; border-color: rgba(59, 108, 200, 0.7); border-radius: 0px 0px 0px 0px; font-size: 100%; border-width: 1px; } .td1, .td2 { background: rgba(59, 108, 200, 0.7); } .category_totals { background: rgba(207, 11, 32, 0.9); border-radius: 0px 0px 25px 25px; font-size: 100%; text-align: center; } #grand_totals { background: rgba(51, 207, 142, 0.7); } #copyright { background: rgba(255, 255, 255, 0); } I believe it's because you have your background set to scroll. Shishio-kun said: RogueKnight777 said: Codetester said: My background has white space in it, I looked at my code and there didn't seem to be wrong with it. Help? body {background-image: url(http://i62.tinypic.com/2s0ej9x.jpg); background-position: center; background-size: cover ; background-attachement: scroll; background-repeat: no-repeat; } .header_cw { height: 400px; margin-bottom: 100px; } .header_title { background-color: rgba(59, 108, 200, 0.7); border-radius: 25px 25px 0px 0px; text-align: center; font-size: 200%; } #list_surround { position:relative ; width: 600px; left: 50px; } .table_header { border-style: solid; border-color: rgba(59, 108, 200, 0.7); border-radius: 0px 0px 0px 0px; font-size: 100%; border-width: 1px; } .td1, .td2 { background: rgba(59, 108, 200, 0.7); } .category_totals { background: rgba(207, 11, 32, 0.9); border-radius: 0px 0px 25px 25px; font-size: 100%; text-align: center; } #grand_totals { background: rgba(51, 207, 142, 0.7); } #copyright { background: rgba(255, 255, 255, 0); } I believe it's because you have your background set to scroll. Correct; the solution is to set background-attachment to fixed. Help! It's still not working, I noticed whenever I zoom out my screen the background fits but when I zoom in the white space appears, is it something to do with the size of the wallpaper? http://i57.tinypic.com/2i9m8sp.png http://i62.tinypic.com/t7d1ee.png body { background-image: url(http://i62.tinypic.com/2s0ej9x.jpg); background-size: cover ; background-attachement: fixed; background-repeat: no-repeat; } .header_cw { height: 400px; margin-bottom: 100px; } .header_title { background-color: rgba(59, 108, 200, 0.7); border-radius: 25px 25px 0px 0px; text-align: center; font-size: 200%; } #list_surround { position:relative ; width: 600px; left: 300px; } .table_header { border-style: solid; border-color: rgba(59, 108, 200, 0.7); border-radius: 0px 0px 0px 0px; font-size: 100%; border-width: 1px; } .td1, .td2 { background: rgba(59, 108, 200, 0.7); } .category_totals { background: rgba(207, 11, 32, 0.9); border-radius: 0px 0px 25px 25px; font-size: 100%; text-align: center; } #grand_totals { background: rgba(51, 207, 142, 0.7); } #copyright { background: rgba(255, 255, 255, 0); } I don't really follow what you're talking about with the zooming since I don't see the same problem, and you haven't posted a screencap so there's no easy way for me to guess or recreate it. But you didn't spell attachment correctly, that might be the problem. Add this in bold to the bottom of your CSS and see if it fixes it: body { background-size: cover !important; background-attachment: fixed !important;} I added the !important codes to better override any changes or future errors |
Jun 17, 2015 3:10 PM
#2872
Shishio-kun said: Codetester said: RogueKnight777 said: Codetester said: My background has white space in it, I looked at my code and there didn't seem to be wrong with it. Help? body {background-image: url(http://i62.tinypic.com/2s0ej9x.jpg); background-position: center; background-size: cover ; background-attachement: scroll; background-repeat: no-repeat; } .header_cw { height: 400px; margin-bottom: 100px; } .header_title { background-color: rgba(59, 108, 200, 0.7); border-radius: 25px 25px 0px 0px; text-align: center; font-size: 200%; } #list_surround { position:relative ; width: 600px; left: 50px; } .table_header { border-style: solid; border-color: rgba(59, 108, 200, 0.7); border-radius: 0px 0px 0px 0px; font-size: 100%; border-width: 1px; } .td1, .td2 { background: rgba(59, 108, 200, 0.7); } .category_totals { background: rgba(207, 11, 32, 0.9); border-radius: 0px 0px 25px 25px; font-size: 100%; text-align: center; } #grand_totals { background: rgba(51, 207, 142, 0.7); } #copyright { background: rgba(255, 255, 255, 0); } I believe it's because you have your background set to scroll. Shishio-kun said: RogueKnight777 said: Codetester said: My background has white space in it, I looked at my code and there didn't seem to be wrong with it. Help? body {background-image: url(http://i62.tinypic.com/2s0ej9x.jpg); background-position: center; background-size: cover ; background-attachement: scroll; background-repeat: no-repeat; } .header_cw { height: 400px; margin-bottom: 100px; } .header_title { background-color: rgba(59, 108, 200, 0.7); border-radius: 25px 25px 0px 0px; text-align: center; font-size: 200%; } #list_surround { position:relative ; width: 600px; left: 50px; } .table_header { border-style: solid; border-color: rgba(59, 108, 200, 0.7); border-radius: 0px 0px 0px 0px; font-size: 100%; border-width: 1px; } .td1, .td2 { background: rgba(59, 108, 200, 0.7); } .category_totals { background: rgba(207, 11, 32, 0.9); border-radius: 0px 0px 25px 25px; font-size: 100%; text-align: center; } #grand_totals { background: rgba(51, 207, 142, 0.7); } #copyright { background: rgba(255, 255, 255, 0); } I believe it's because you have your background set to scroll. Correct; the solution is to set background-attachment to fixed. Help! It's still not working, I noticed whenever I zoom out my screen the background fits but when I zoom in the white space appears, is it something to do with the size of the wallpaper? http://i57.tinypic.com/2i9m8sp.png http://i62.tinypic.com/t7d1ee.png body { background-image: url(http://i62.tinypic.com/2s0ej9x.jpg); background-size: cover ; background-attachement: fixed; background-repeat: no-repeat; } .header_cw { height: 400px; margin-bottom: 100px; } .header_title { background-color: rgba(59, 108, 200, 0.7); border-radius: 25px 25px 0px 0px; text-align: center; font-size: 200%; } #list_surround { position:relative ; width: 600px; left: 300px; } .table_header { border-style: solid; border-color: rgba(59, 108, 200, 0.7); border-radius: 0px 0px 0px 0px; font-size: 100%; border-width: 1px; } .td1, .td2 { background: rgba(59, 108, 200, 0.7); } .category_totals { background: rgba(207, 11, 32, 0.9); border-radius: 0px 0px 25px 25px; font-size: 100%; text-align: center; } #grand_totals { background: rgba(51, 207, 142, 0.7); } #copyright { background: rgba(255, 255, 255, 0); } I don't really follow what you're talking about with the zooming since I don't see the same problem, and you haven't posted a screencap so there's no easy way for me to guess or recreate it. But you didn't spell attachment correctly, that might be the problem. Add this in bold to the bottom of your CSS and see if it fixes it: body { background-size: cover !important; background-attachment: fixed !important;} I added the !important codes to better override any changes or future errors I feel stupid, I can't spell ;_; . Anyways thanks alot Shishio! Have a nice day! |
Jun 17, 2015 3:34 PM
#2873
Is there a way to collapse this empty space? It was previously used as a title for the current entry in the manga list i.e. current, completed, etc. I'd like to get rid of the empty space since the tabs already do that. How can I adjust the manga title, score, chapters, and volumes more accurately with the manga list? It is leaning towards the right. |
"Be the change you wish to see in the world." |
Jun 17, 2015 3:52 PM
#2874
@Toarujisuru That's a nice layout. What anime character is that? |
Jun 18, 2015 3:37 PM
#2875
Toarujisuru said: Is there a way to collapse this empty space? It was previously used as a title for the current entry in the manga list i.e. current, completed, etc. I'd like to get rid of the empty space since the tabs already do that. How can I adjust the manga title, score, chapters, and volumes more accurately with the manga list? It is leaning towards the right. .header_title { display: none; } |
Jun 18, 2015 7:09 PM
#2876
To all you CSS experts, I was wondering how you guys learned it, and if there were any online guides or videos you'd recommend? |
Jun 18, 2015 7:54 PM
#2877
I was building a new anime list and, suddenly, the headers of my list disapeared. I have no idea why that happen since I didn't even had modify that section of the list lately. Here is my code: @import url(http://fonts.googleapis.com/css?family=Orbitron:400,700); /*BODY AND LIST*/ body { background-image: ; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: top left; font-size: 12.00px; font-family: Verdana, Arial; } #list_surround { color: white; background: ; width: 830px; position: absolute !important; top: 10px; position: absolute !important; right: 2px !important;; } /*LINKS*/ a, a:visited, #mal_control_strip a { color: white ; text-decoration: none !important; } a:hover, a:hover, #mal_control_strip a:hover { color: red; text-decoration: underline !important; } .animetitle, .animetitle:visited { font-weight: bold !important; } /*ROWS*/ .td1, .td2 { background-color: rgba(14, 11, 186, 0.77); padding: 1px; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2{ background-color: rgba(9, 6, 196, 1) !Important; font-size: 13px !Important; font-family: Verdana, Arial !Important; font-weight: normal; color: red; } tr:hover td.td1, tr:hover td.td2 { border-bottom: ; border-top: ; } /*TOP BAR*/ #mal_control_strip { position: fixed !important; display: block; left: 1px !important; margin-left: 1px !important; top: 20px !important; margin-top: 15px !important; width:170px !important; height: 620px !important; background: rgba(14, 11, 186, 0.77) !important; /* Vertically centered */ top: 50% !important; margin-top: -310px !important; /* Must be 1/2 of the menu height */ border-radius: 15px 15px 15px 15px; } #mal_cs_otherlinks strong, #mal_cs_otherlinks strong a { font-family: Orbitron, cursive !important; font-size: 18px !important; font-weight: bold; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_pic img a { border-right: none !important; } #mal_cs_listinfo { position: fixed !important; left: 5px !important; top: 80px !important; } #searchListButton { position: fixed !important; left: 150px !important; top: 40px !important; } #searchBox { position: fixed !important; left: 5px !important; top: 40px !important; display: block !important; border-radius: 10px 10px 10px 10px; width: 135px !important; } #mal_cs_links div:first-of-type a:first-of-type { top: 300px !important; position: fixed !important; left: 15px !important; } #mal_cs_links div:first-of-type a:last-of-type { top: 320px !important; position: fixed !important; left: 15px !important; } #mal_cs_links div:last-of-type a:first-of-type { position: fixed !important; left: 15px !important; top: 340px !important; } #mal_cs_links div:last-of-type a:last-of-type { top: 360px !important; position: fixed !important; left: 15px !important; } #mal_cs_otherlinks strong { position: fixed !important; left: 15px !important; top: 135px !important; width: 150px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(1) { position: fixed !important; left: 15px !important; top: 220px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(2) { position: fixed !important; left: 15px !important; top: 240px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(3) { position: fixed !important; left: 15px !important; top: 260px !important; } /*THIS CONTROL THE VISIBILITY OF THE EDIT AND MORE BUTTONS*/ #list_surround small { visibility:hidden; } #list_surround small a:last-of-type { visibility: hidden; } #list_surround tbody:hover small a{ visibility: visible; } #list_surround tbody:hover small{ visibility: visible; } /*AIRING, REWATCHING AND NOT YET AIRED TEXT*/ .animetitle+small { visibility: visible!important; background: !important; color: !important; } / HEADERS*/ .header_title { background-color: rgba(14, 17, 175, 0.83); font-family: Orbitron, sans-serif; font-weight: bold !important; font-size: 44px; border-radius: 14px 14px 0px 0px; border: 1 px solid black !important; padding-left: 20px; padding-top: 5px; padding-bottomt: 5px; } .table_header { background: rgba(14, 17, 175, 0.83) !important; color: !important; font-weight: bold !important; font-size: 16px; } /*TOTALS AND COPYRIGHT*/ #grand_totals, .category_totals, #copyright { background: rgba(14, 17, 175, 0.83); font-weight: bold !important; padding-bottom: 5px; padding-top: 5px; text-align: center; } .category_totals { border-radius: 0px 0px 14px 14px; border: 1 px solid black !important;} #grand_totals, #copyright { border-radius: 10px 10px 10px 10px; border: 1 px solid black !important; } #copyright { margin-bottom: 15px; } a.thickbox { color: ; } /*CATEGORY LINKS*/ .status_not_selected, .status_selected { background-color: rgba(14, 17, 175, 0.83); font-size: 16px; font-weight: bold !important; font-family: Orbitron, sans-serif; } .status_not_selected:hover, .status_selected:hover { background-color: rgba(14, 17, 175, 0.96); text-decoration: none !important; } .status_not_selected a, .status_selected a { display: block; padding-bottom: 5px; padding-top: 5px; width: 133px; } .status_not_selected a:hover, .status_selected a:hover { text-decoration: none !important; } .status_selected:nth-of-type(1), .status_not_selected:nth-of-type(1) { border-radius: 10px 0px 0px 10px; } .status_selected:nth-of-type(6), .status_not_selected:nth-of-type(6) { border-radius: 0px 10px 10px 0px; } .status_selected:nth-of-type(1) a, .status_not_selected:nth-of-type(1) a { font-size: 0px !important; } .status_selected:nth-of-type(1) a::before, .status_not_selected:nth-of-type(1) a::before { content: "Watching A"; white-space: pre; text-align: center; color: white !important; font-size: 16px !important; } .status_selected:nth-of-type(1) a:hover::before, .status_not_selected:nth-of-type(1) a:hover::before { color: red !important; } |
Jun 18, 2015 8:19 PM
#2878
RogueKnight777 said: To all you CSS experts, I was wondering how you guys learned it, and if there were any online guides or videos you'd recommend? There are three ways: 1. school 2. W3schools website (has examples to play with and is one long guide) 3. play with premade layouts and codes and learn about CSS coding thru the inspectors (they have hundreds of code options to cycle thru and experiment with live) I wouldn't consider myself an expert but a hobbyist, tho I do know a lot of course. I learned thru method #3 but I occasionally go to W3schools. To use #3 you must be willing to explore and try new things and make attempts to bring designs you dream up into reality. I have a tutorial on using the Inspector as well. Everyone has the ability to do this; if you are working toward a cool design in mind its much easier to do since it'll be rewarding. All the videos and other online guides I've seen seem pretty slow and stagnant in comparison to using those three methods. You learn a lot more through hands-on for this kinda thing imo. its more rewarding too which is vital for a hobby. |
Jun 18, 2015 10:03 PM
#2879
Hopefully this is the last question for a while so I can stop pestering you. How/Where do you get text like this to add as a header? Do you make it in Word and then upload to a site like Imgur or what? |
Jun 19, 2015 9:46 AM
#2880
RogueKnight777 said: Hopefully this is the last question for a while so I can stop pestering you. How/Where do you get text like this to add as a header? Do you make it in Word and then upload to a site like Imgur or what? in Photoshop. (or GIMP or any other image editor.) You can't do it in word cause you wouldn't have transparent background. akai_ryu said: I was building a new anime list and, suddenly, the headers of my list disapeared. I have no idea why that happen since I didn't even had modify that section of the list lately. Here is my code: @import url(http://fonts.googleapis.com/css?family=Orbitron:400,700); /*BODY AND LIST*/ body { background-image: ; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: top left; font-size: 12.00px; font-family: Verdana, Arial; } #list_surround { color: white; background: ; width: 830px; position: absolute !important; top: 10px; position: absolute !important; right: 2px !important;; } /*LINKS*/ a, a:visited, #mal_control_strip a { color: white ; text-decoration: none !important; } a:hover, a:hover, #mal_control_strip a:hover { color: red; text-decoration: underline !important; } .animetitle, .animetitle:visited { font-weight: bold !important; } /*ROWS*/ .td1, .td2 { background-color: rgba(14, 11, 186, 0.77); padding: 1px; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2{ background-color: rgba(9, 6, 196, 1) !Important; font-size: 13px !Important; font-family: Verdana, Arial !Important; font-weight: normal; color: red; } tr:hover td.td1, tr:hover td.td2 { border-bottom: ; border-top: ; } /*TOP BAR*/ #mal_control_strip { position: fixed !important; display: block; left: 1px !important; margin-left: 1px !important; top: 20px !important; margin-top: 15px !important; width:170px !important; height: 620px !important; background: rgba(14, 11, 186, 0.77) !important; /* Vertically centered */ top: 50% !important; margin-top: -310px !important; /* Must be 1/2 of the menu height */ border-radius: 15px 15px 15px 15px; } #mal_cs_otherlinks strong, #mal_cs_otherlinks strong a { font-family: Orbitron, cursive !important; font-size: 18px !important; font-weight: bold; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_pic img a { border-right: none !important; } #mal_cs_listinfo { position: fixed !important; left: 5px !important; top: 80px !important; } #searchListButton { position: fixed !important; left: 150px !important; top: 40px !important; } #searchBox { position: fixed !important; left: 5px !important; top: 40px !important; display: block !important; border-radius: 10px 10px 10px 10px; width: 135px !important; } #mal_cs_links div:first-of-type a:first-of-type { top: 300px !important; position: fixed !important; left: 15px !important; } #mal_cs_links div:first-of-type a:last-of-type { top: 320px !important; position: fixed !important; left: 15px !important; } #mal_cs_links div:last-of-type a:first-of-type { position: fixed !important; left: 15px !important; top: 340px !important; } #mal_cs_links div:last-of-type a:last-of-type { top: 360px !important; position: fixed !important; left: 15px !important; } #mal_cs_otherlinks strong { position: fixed !important; left: 15px !important; top: 135px !important; width: 150px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(1) { position: fixed !important; left: 15px !important; top: 220px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(2) { position: fixed !important; left: 15px !important; top: 240px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(3) { position: fixed !important; left: 15px !important; top: 260px !important; } /*THIS CONTROL THE VISIBILITY OF THE EDIT AND MORE BUTTONS*/ #list_surround small { visibility:hidden; } #list_surround small a:last-of-type { visibility: hidden; } #list_surround tbody:hover small a{ visibility: visible; } #list_surround tbody:hover small{ visibility: visible; } /*AIRING, REWATCHING AND NOT YET AIRED TEXT*/ .animetitle+small { visibility: visible!important; background: !important; color: !important; } / HEADERS*/ .header_title { background-color: rgba(14, 17, 175, 0.83); font-family: Orbitron, sans-serif; font-weight: bold !important; font-size: 44px; border-radius: 14px 14px 0px 0px; border: 1 px solid black !important; padding-left: 20px; padding-top: 5px; padding-bottomt: 5px; } .table_header { background: rgba(14, 17, 175, 0.83) !important; color: !important; font-weight: bold !important; font-size: 16px; } /*TOTALS AND COPYRIGHT*/ #grand_totals, .category_totals, #copyright { background: rgba(14, 17, 175, 0.83); font-weight: bold !important; padding-bottom: 5px; padding-top: 5px; text-align: center; } .category_totals { border-radius: 0px 0px 14px 14px; border: 1 px solid black !important;} #grand_totals, #copyright { border-radius: 10px 10px 10px 10px; border: 1 px solid black !important; } #copyright { margin-bottom: 15px; } a.thickbox { color: ; } /*CATEGORY LINKS*/ .status_not_selected, .status_selected { background-color: rgba(14, 17, 175, 0.83); font-size: 16px; font-weight: bold !important; font-family: Orbitron, sans-serif; } .status_not_selected:hover, .status_selected:hover { background-color: rgba(14, 17, 175, 0.96); text-decoration: none !important; } .status_not_selected a, .status_selected a { display: block; padding-bottom: 5px; padding-top: 5px; width: 133px; } .status_not_selected a:hover, .status_selected a:hover { text-decoration: none !important; } .status_selected:nth-of-type(1), .status_not_selected:nth-of-type(1) { border-radius: 10px 0px 0px 10px; } .status_selected:nth-of-type(6), .status_not_selected:nth-of-type(6) { border-radius: 0px 10px 10px 0px; } .status_selected:nth-of-type(1) a, .status_not_selected:nth-of-type(1) a { font-size: 0px !important; } .status_selected:nth-of-type(1) a::before, .status_not_selected:nth-of-type(1) a::before { content: "Watching A"; white-space: pre; text-align: center; color: white !important; font-size: 16px !important; } .status_selected:nth-of-type(1) a:hover::before, .status_not_selected:nth-of-type(1) a:hover::before { color: red !important; } they didn't disappear, they are still there, but the color #fff under #list_surround affects .header_title as well. so try adding something like .header_title { color: #0E11AF; } and they will "reappear". |
Jun 19, 2015 11:35 AM
#2881
filauria said: akai_ryu said: I was building a new anime list and, suddenly, the headers of my list disapeared. I have no idea why that happen since I didn't even had modify that section of the list lately. Here is my code: @import url(http://fonts.googleapis.com/css?family=Orbitron:400,700); /*BODY AND LIST*/ body { background-image: ; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: top left; font-size: 12.00px; font-family: Verdana, Arial; } #list_surround { color: white; background: ; width: 830px; position: absolute !important; top: 10px; position: absolute !important; right: 2px !important;; } /*LINKS*/ a, a:visited, #mal_control_strip a { color: white ; text-decoration: none !important; } a:hover, a:hover, #mal_control_strip a:hover { color: red; text-decoration: underline !important; } .animetitle, .animetitle:visited { font-weight: bold !important; } /*ROWS*/ .td1, .td2 { background-color: rgba(14, 11, 186, 0.77); padding: 1px; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2{ background-color: rgba(9, 6, 196, 1) !Important; font-size: 13px !Important; font-family: Verdana, Arial !Important; font-weight: normal; color: red; } tr:hover td.td1, tr:hover td.td2 { border-bottom: ; border-top: ; } /*TOP BAR*/ #mal_control_strip { position: fixed !important; display: block; left: 1px !important; margin-left: 1px !important; top: 20px !important; margin-top: 15px !important; width:170px !important; height: 620px !important; background: rgba(14, 11, 186, 0.77) !important; /* Vertically centered */ top: 50% !important; margin-top: -310px !important; /* Must be 1/2 of the menu height */ border-radius: 15px 15px 15px 15px; } #mal_cs_otherlinks strong, #mal_cs_otherlinks strong a { font-family: Orbitron, cursive !important; font-size: 18px !important; font-weight: bold; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_pic img a { border-right: none !important; } #mal_cs_listinfo { position: fixed !important; left: 5px !important; top: 80px !important; } #searchListButton { position: fixed !important; left: 150px !important; top: 40px !important; } #searchBox { position: fixed !important; left: 5px !important; top: 40px !important; display: block !important; border-radius: 10px 10px 10px 10px; width: 135px !important; } #mal_cs_links div:first-of-type a:first-of-type { top: 300px !important; position: fixed !important; left: 15px !important; } #mal_cs_links div:first-of-type a:last-of-type { top: 320px !important; position: fixed !important; left: 15px !important; } #mal_cs_links div:last-of-type a:first-of-type { position: fixed !important; left: 15px !important; top: 340px !important; } #mal_cs_links div:last-of-type a:last-of-type { top: 360px !important; position: fixed !important; left: 15px !important; } #mal_cs_otherlinks strong { position: fixed !important; left: 15px !important; top: 135px !important; width: 150px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(1) { position: fixed !important; left: 15px !important; top: 220px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(2) { position: fixed !important; left: 15px !important; top: 240px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(3) { position: fixed !important; left: 15px !important; top: 260px !important; } /*THIS CONTROL THE VISIBILITY OF THE EDIT AND MORE BUTTONS*/ #list_surround small { visibility:hidden; } #list_surround small a:last-of-type { visibility: hidden; } #list_surround tbody:hover small a{ visibility: visible; } #list_surround tbody:hover small{ visibility: visible; } /*AIRING, REWATCHING AND NOT YET AIRED TEXT*/ .animetitle+small { visibility: visible!important; background: !important; color: !important; } / HEADERS*/ .header_title { background-color: rgba(14, 17, 175, 0.83); font-family: Orbitron, sans-serif; font-weight: bold !important; font-size: 44px; border-radius: 14px 14px 0px 0px; border: 1 px solid black !important; padding-left: 20px; padding-top: 5px; padding-bottomt: 5px; } .table_header { background: rgba(14, 17, 175, 0.83) !important; color: !important; font-weight: bold !important; font-size: 16px; } /*TOTALS AND COPYRIGHT*/ #grand_totals, .category_totals, #copyright { background: rgba(14, 17, 175, 0.83); font-weight: bold !important; padding-bottom: 5px; padding-top: 5px; text-align: center; } .category_totals { border-radius: 0px 0px 14px 14px; border: 1 px solid black !important;} #grand_totals, #copyright { border-radius: 10px 10px 10px 10px; border: 1 px solid black !important; } #copyright { margin-bottom: 15px; } a.thickbox { color: ; } /*CATEGORY LINKS*/ .status_not_selected, .status_selected { background-color: rgba(14, 17, 175, 0.83); font-size: 16px; font-weight: bold !important; font-family: Orbitron, sans-serif; } .status_not_selected:hover, .status_selected:hover { background-color: rgba(14, 17, 175, 0.96); text-decoration: none !important; } .status_not_selected a, .status_selected a { display: block; padding-bottom: 5px; padding-top: 5px; width: 133px; } .status_not_selected a:hover, .status_selected a:hover { text-decoration: none !important; } .status_selected:nth-of-type(1), .status_not_selected:nth-of-type(1) { border-radius: 10px 0px 0px 10px; } .status_selected:nth-of-type(6), .status_not_selected:nth-of-type(6) { border-radius: 0px 10px 10px 0px; } .status_selected:nth-of-type(1) a, .status_not_selected:nth-of-type(1) a { font-size: 0px !important; } .status_selected:nth-of-type(1) a::before, .status_not_selected:nth-of-type(1) a::before { content: "Watching A"; white-space: pre; text-align: center; color: white !important; font-size: 16px !important; } .status_selected:nth-of-type(1) a:hover::before, .status_not_selected:nth-of-type(1) a:hover::before { color: red !important; } they didn't disappear, they are still there, but the color #fff under #list_surround affects .header_title as well. so try adding something like .header_title { color: #0E11AF; } and they will "reappear". But I had seted the background headers color as blue and it looked blue until last night. I changend the background color and the font color now as you said, but it still don't appear. It's like if the headers disapered because the space between the tables had decresed; the font size of the headers are seted as 44, so it's really notorious the difference. |
Jun 19, 2015 12:21 PM
#2882
akai_ryu said: filauria said: akai_ryu said: I was building a new anime list and, suddenly, the headers of my list disapeared. I have no idea why that happen since I didn't even had modify that section of the list lately. Here is my code: @import url(http://fonts.googleapis.com/css?family=Orbitron:400,700); /*BODY AND LIST*/ body { background-image: ; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: top left; font-size: 12.00px; font-family: Verdana, Arial; } #list_surround { color: white; background: ; width: 830px; position: absolute !important; top: 10px; position: absolute !important; right: 2px !important;; } /*LINKS*/ a, a:visited, #mal_control_strip a { color: white ; text-decoration: none !important; } a:hover, a:hover, #mal_control_strip a:hover { color: red; text-decoration: underline !important; } .animetitle, .animetitle:visited { font-weight: bold !important; } /*ROWS*/ .td1, .td2 { background-color: rgba(14, 11, 186, 0.77); padding: 1px; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2{ background-color: rgba(9, 6, 196, 1) !Important; font-size: 13px !Important; font-family: Verdana, Arial !Important; font-weight: normal; color: red; } tr:hover td.td1, tr:hover td.td2 { border-bottom: ; border-top: ; } /*TOP BAR*/ #mal_control_strip { position: fixed !important; display: block; left: 1px !important; margin-left: 1px !important; top: 20px !important; margin-top: 15px !important; width:170px !important; height: 620px !important; background: rgba(14, 11, 186, 0.77) !important; /* Vertically centered */ top: 50% !important; margin-top: -310px !important; /* Must be 1/2 of the menu height */ border-radius: 15px 15px 15px 15px; } #mal_cs_otherlinks strong, #mal_cs_otherlinks strong a { font-family: Orbitron, cursive !important; font-size: 18px !important; font-weight: bold; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_pic img a { border-right: none !important; } #mal_cs_listinfo { position: fixed !important; left: 5px !important; top: 80px !important; } #searchListButton { position: fixed !important; left: 150px !important; top: 40px !important; } #searchBox { position: fixed !important; left: 5px !important; top: 40px !important; display: block !important; border-radius: 10px 10px 10px 10px; width: 135px !important; } #mal_cs_links div:first-of-type a:first-of-type { top: 300px !important; position: fixed !important; left: 15px !important; } #mal_cs_links div:first-of-type a:last-of-type { top: 320px !important; position: fixed !important; left: 15px !important; } #mal_cs_links div:last-of-type a:first-of-type { position: fixed !important; left: 15px !important; top: 340px !important; } #mal_cs_links div:last-of-type a:last-of-type { top: 360px !important; position: fixed !important; left: 15px !important; } #mal_cs_otherlinks strong { position: fixed !important; left: 15px !important; top: 135px !important; width: 150px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(1) { position: fixed !important; left: 15px !important; top: 220px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(2) { position: fixed !important; left: 15px !important; top: 240px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(3) { position: fixed !important; left: 15px !important; top: 260px !important; } /*THIS CONTROL THE VISIBILITY OF THE EDIT AND MORE BUTTONS*/ #list_surround small { visibility:hidden; } #list_surround small a:last-of-type { visibility: hidden; } #list_surround tbody:hover small a{ visibility: visible; } #list_surround tbody:hover small{ visibility: visible; } /*AIRING, REWATCHING AND NOT YET AIRED TEXT*/ .animetitle+small { visibility: visible!important; background: !important; color: !important; } / HEADERS*/ .header_title { background-color: rgba(14, 17, 175, 0.83); font-family: Orbitron, sans-serif; font-weight: bold !important; font-size: 44px; border-radius: 14px 14px 0px 0px; border: 1 px solid black !important; padding-left: 20px; padding-top: 5px; padding-bottomt: 5px; } .table_header { background: rgba(14, 17, 175, 0.83) !important; color: !important; font-weight: bold !important; font-size: 16px; } /*TOTALS AND COPYRIGHT*/ #grand_totals, .category_totals, #copyright { background: rgba(14, 17, 175, 0.83); font-weight: bold !important; padding-bottom: 5px; padding-top: 5px; text-align: center; } .category_totals { border-radius: 0px 0px 14px 14px; border: 1 px solid black !important;} #grand_totals, #copyright { border-radius: 10px 10px 10px 10px; border: 1 px solid black !important; } #copyright { margin-bottom: 15px; } a.thickbox { color: ; } /*CATEGORY LINKS*/ .status_not_selected, .status_selected { background-color: rgba(14, 17, 175, 0.83); font-size: 16px; font-weight: bold !important; font-family: Orbitron, sans-serif; } .status_not_selected:hover, .status_selected:hover { background-color: rgba(14, 17, 175, 0.96); text-decoration: none !important; } .status_not_selected a, .status_selected a { display: block; padding-bottom: 5px; padding-top: 5px; width: 133px; } .status_not_selected a:hover, .status_selected a:hover { text-decoration: none !important; } .status_selected:nth-of-type(1), .status_not_selected:nth-of-type(1) { border-radius: 10px 0px 0px 10px; } .status_selected:nth-of-type(6), .status_not_selected:nth-of-type(6) { border-radius: 0px 10px 10px 0px; } .status_selected:nth-of-type(1) a, .status_not_selected:nth-of-type(1) a { font-size: 0px !important; } .status_selected:nth-of-type(1) a::before, .status_not_selected:nth-of-type(1) a::before { content: "Watching A"; white-space: pre; text-align: center; color: white !important; font-size: 16px !important; } .status_selected:nth-of-type(1) a:hover::before, .status_not_selected:nth-of-type(1) a:hover::before { color: red !important; } they didn't disappear, they are still there, but the color #fff under #list_surround affects .header_title as well. so try adding something like .header_title { color: #0E11AF; } and they will "reappear". But I had seted the background headers color as blue and it looked blue until last night. I changend the background color and the font color now as you said, but it still don't appear. It's like if the headers disapered because the space between the tables had decresed; the font size of the headers are seted as 44, so it's really notorious the difference. ok took a look at your code - basically one of your "comments" is missing an asterisk, thus it's being treated as a part of the code. instead of / HEADERS*/ it should be /* HEADERS*/. |
Jun 19, 2015 12:44 PM
#2883
filauria said: akai_ryu said: filauria said: akai_ryu said: I was building a new anime list and, suddenly, the headers of my list disapeared. I have no idea why that happen since I didn't even had modify that section of the list lately. Here is my code: @import url(http://fonts.googleapis.com/css?family=Orbitron:400,700); /*BODY AND LIST*/ body { background-image: ; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: top left; font-size: 12.00px; font-family: Verdana, Arial; } #list_surround { color: white; background: ; width: 830px; position: absolute !important; top: 10px; position: absolute !important; right: 2px !important;; } /*LINKS*/ a, a:visited, #mal_control_strip a { color: white ; text-decoration: none !important; } a:hover, a:hover, #mal_control_strip a:hover { color: red; text-decoration: underline !important; } .animetitle, .animetitle:visited { font-weight: bold !important; } /*ROWS*/ .td1, .td2 { background-color: rgba(14, 11, 186, 0.77); padding: 1px; } tr:hover td.td1 a, tr:hover td.td1, tr:hover td.td2 a, tr:hover td.td2{ background-color: rgba(9, 6, 196, 1) !Important; font-size: 13px !Important; font-family: Verdana, Arial !Important; font-weight: normal; color: red; } tr:hover td.td1, tr:hover td.td2 { border-bottom: ; border-top: ; } /*TOP BAR*/ #mal_control_strip { position: fixed !important; display: block; left: 1px !important; margin-left: 1px !important; top: 20px !important; margin-top: 15px !important; width:170px !important; height: 620px !important; background: rgba(14, 11, 186, 0.77) !important; /* Vertically centered */ top: 50% !important; margin-top: -310px !important; /* Must be 1/2 of the menu height */ border-radius: 15px 15px 15px 15px; } #mal_cs_otherlinks strong, #mal_cs_otherlinks strong a { font-family: Orbitron, cursive !important; font-size: 18px !important; font-weight: bold; } #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_pic img a { border-right: none !important; } #mal_cs_listinfo { position: fixed !important; left: 5px !important; top: 80px !important; } #searchListButton { position: fixed !important; left: 150px !important; top: 40px !important; } #searchBox { position: fixed !important; left: 5px !important; top: 40px !important; display: block !important; border-radius: 10px 10px 10px 10px; width: 135px !important; } #mal_cs_links div:first-of-type a:first-of-type { top: 300px !important; position: fixed !important; left: 15px !important; } #mal_cs_links div:first-of-type a:last-of-type { top: 320px !important; position: fixed !important; left: 15px !important; } #mal_cs_links div:last-of-type a:first-of-type { position: fixed !important; left: 15px !important; top: 340px !important; } #mal_cs_links div:last-of-type a:last-of-type { top: 360px !important; position: fixed !important; left: 15px !important; } #mal_cs_otherlinks strong { position: fixed !important; left: 15px !important; top: 135px !important; width: 150px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(1) { position: fixed !important; left: 15px !important; top: 220px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(2) { position: fixed !important; left: 15px !important; top: 240px !important; } #mal_cs_otherlinks div:last-of-type a:nth-of-type(3) { position: fixed !important; left: 15px !important; top: 260px !important; } /*THIS CONTROL THE VISIBILITY OF THE EDIT AND MORE BUTTONS*/ #list_surround small { visibility:hidden; } #list_surround small a:last-of-type { visibility: hidden; } #list_surround tbody:hover small a{ visibility: visible; } #list_surround tbody:hover small{ visibility: visible; } /*AIRING, REWATCHING AND NOT YET AIRED TEXT*/ .animetitle+small { visibility: visible!important; background: !important; color: !important; } / HEADERS*/ .header_title { background-color: rgba(14, 17, 175, 0.83); font-family: Orbitron, sans-serif; font-weight: bold !important; font-size: 44px; border-radius: 14px 14px 0px 0px; border: 1 px solid black !important; padding-left: 20px; padding-top: 5px; padding-bottomt: 5px; } .table_header { background: rgba(14, 17, 175, 0.83) !important; color: !important; font-weight: bold !important; font-size: 16px; } /*TOTALS AND COPYRIGHT*/ #grand_totals, .category_totals, #copyright { background: rgba(14, 17, 175, 0.83); font-weight: bold !important; padding-bottom: 5px; padding-top: 5px; text-align: center; } .category_totals { border-radius: 0px 0px 14px 14px; border: 1 px solid black !important;} #grand_totals, #copyright { border-radius: 10px 10px 10px 10px; border: 1 px solid black !important; } #copyright { margin-bottom: 15px; } a.thickbox { color: ; } /*CATEGORY LINKS*/ .status_not_selected, .status_selected { background-color: rgba(14, 17, 175, 0.83); font-size: 16px; font-weight: bold !important; font-family: Orbitron, sans-serif; } .status_not_selected:hover, .status_selected:hover { background-color: rgba(14, 17, 175, 0.96); text-decoration: none !important; } .status_not_selected a, .status_selected a { display: block; padding-bottom: 5px; padding-top: 5px; width: 133px; } .status_not_selected a:hover, .status_selected a:hover { text-decoration: none !important; } .status_selected:nth-of-type(1), .status_not_selected:nth-of-type(1) { border-radius: 10px 0px 0px 10px; } .status_selected:nth-of-type(6), .status_not_selected:nth-of-type(6) { border-radius: 0px 10px 10px 0px; } .status_selected:nth-of-type(1) a, .status_not_selected:nth-of-type(1) a { font-size: 0px !important; } .status_selected:nth-of-type(1) a::before, .status_not_selected:nth-of-type(1) a::before { content: "Watching A"; white-space: pre; text-align: center; color: white !important; font-size: 16px !important; } .status_selected:nth-of-type(1) a:hover::before, .status_not_selected:nth-of-type(1) a:hover::before { color: red !important; } they didn't disappear, they are still there, but the color #fff under #list_surround affects .header_title as well. so try adding something like .header_title { color: #0E11AF; } and they will "reappear". But I had seted the background headers color as blue and it looked blue until last night. I changend the background color and the font color now as you said, but it still don't appear. It's like if the headers disapered because the space between the tables had decresed; the font size of the headers are seted as 44, so it's really notorious the difference. ok took a look at your code - basically one of your "comments" is missing an asterisk, thus it's being treated as a part of the code. instead of / HEADERS*/ it should be /* HEADERS*/. It worked. Thank you very much! |
Jun 19, 2015 1:21 PM
#2884
RogueKnight777 said: Hopefully this is the last question for a while so I can stop pestering you. How/Where do you get text like this to add as a header? Do you make it in Word and then upload to a site like Imgur or what? Two possible ways 1. Make in Photoshop using text tool and blending options for that layer 2. Make custom logos with logo/button generators online (IE cooltext.com, etc) Upload either to imgur then link to the header selectors. There's already tutorial on headers for the list, it goes over this stuff. |
Jun 19, 2015 1:36 PM
#2885
Hello Shishio, I need some help ._. If you take a look at my list, and for example click on "Dropped" there will be an empty space between the grand totals and the copyright.. how can I fill it up? Also, I'd like the background of the list (the black-ish one) after the copyright to extend further, so it covers the whole right site... right now it looks so cut off :( |
Jun 19, 2015 2:26 PM
#2886
Alice said: Hello Shishio, I need some help ._. If you take a look at my list, and for example click on "Dropped" there will be an empty space between the grand totals and the copyright.. how can I fill it up? Also, I'd like the background of the list (the black-ish one) after the copyright to extend further, so it covers the whole right site... right now it looks so cut off :( find this #copyright, #grand_totals { margin: 0 auto; padding: 0 0 64px; text-align: center; background: rgba(0, 0, 0, 0.6); } and change it to this #copyright, #grand_totals { margin: 0 auto [color=red]!important[/color]; padding: 0 0 64px; text-align: center; background: rgba(0, 0, 0, 0.6); } as for the background extension - I'm not really sure if I understood right, but you want it to go all the way to the bottom? |
Jun 19, 2015 2:35 PM
#2887
^thank you so much! :D I will change it now. filauria said: as for the background extension - I'm not really sure if I understood right, but you want it to go all the way to the bottom? exactly.. I just don't know how to do it xD |
Jun 20, 2015 11:28 AM
#2888
Hey everyone, quick question. Is there a way to remove the category buttons completely? |
Jun 20, 2015 3:33 PM
#2889
Jun 20, 2015 4:07 PM
#2890
Oiomi-chan said: Well, I never use them and like to keep things as simple as possible.DeeMusu said: yes, but why would you want to do that?Hey everyone, quick question. Is there a way to remove the category buttons completely? .status_not_selected,.status_selected { display: none !important; } Where would I put this in the CSS? |
duuuncaaanJun 20, 2015 4:10 PM
Jun 20, 2015 4:39 PM
#2891
DeeMusu said: Oiomi-chan said: Well, I never use them and like to keep things as simple as possible.DeeMusu said: Hey everyone, quick question. Is there a way to remove the category buttons completely? .status_not_selected,.status_selected { display: none !important; } Where would I put this in the CSS? At the bottom. It looks like you previously put it in the middle somewhere and interrupted part of your code, you should take that one out including the brackets. |
Jun 20, 2015 4:46 PM
#2892
Shishio-kun said: DeeMusu said: Oiomi-chan said: DeeMusu said: yes, but why would you want to do that?Hey everyone, quick question. Is there a way to remove the category buttons completely? .status_not_selected,.status_selected { display: none !important; } Where would I put this in the CSS? At the bottom. It looks like you previously put it in the middle somewhere and interrupted part of your code, you should take that one out including the brackets. Alright, that worked, thanks! |
Jun 21, 2015 1:17 PM
#2893
Hello. I would like to ask for some help. I made a new layout. I used a few gifs for buttons. For example gif A was sliced in half for 2 buttons etc. That layout turned out to be a massive one. So now when I load it (currently I am testing it in my blog) separate pieces timing does not match. Any ideas how to fix that? I was thinking about remaking it by reducing colors from 256 to 128 when rendering/saving in photoshop, but I doubt that will be enough. |
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines. |
Jun 21, 2015 4:33 PM
#2894
Um I well hmm, OK got it. I have a few questions about the members cards system 1. I was wondering if someone could go into a bit more detail on the points system for Hahaido's Member Cards it says you need ten points to get a card. But how many do you start off with. Also possible follow up if you only start with ten and you get one for a standard card (which would presumably be the first) then how do you get your next card. 2. Next I'm wondering given that I requested a Namine's Cafe card (During week three) do I have to wait a month to get one from Hahaido or are the wait times independent between different card makers. 3. I'm kinda confused with this it says that you Hahaido said: So are aforementioned cards available every month or every other month or can you just not request the same kind back to back.3. You can't request special, rare and unique cards every month, only after a month (no special after special, rare after special and special after rare) Those are all my questions for now. Thanks in advance. |
[center]Me: [center]Clubs I'm In: |
Jun 21, 2015 5:37 PM
#2895
AyumeLove said: Um I well hmm, OK got it. I have a few questions about the members cards system 2. Next I'm wondering given that I requested a Namine's Cafe card (During week three) do I have to wait a month to get one from Hahaido or are the wait times independent between different card makers. Can't speak for the other questions since its not mine but the Shishio's/Namine's Affiliate card topic is a different topic altogether, so I'm pretty sure they're treated separately among all card makers. I'm the one producing and delivering the Namine's cards to the delivery album, not Hahaido- tho he did work extensively on the cards (as did Genbrian and me). So you can treat Hahaido's topic as separate from Namine's with independent wait times. Hope that answers that in time for any Sunday cards you were planning to request. Its different rules in each card topics as they're all individually member-owned, and I just let them do their own thing as long as its not affecting others or dishonest |
Jun 21, 2015 5:40 PM
#2896
Shishio-kun said: AyumeLove said: Um I well hmm, OK got it. I have a few questions about the members cards system 2. Next I'm wondering given that I requested a Namine's Cafe card (During week three) do I have to wait a month to get one from Hahaido or are the wait times independent between different card makers. Can't speak for the other questions since its not mine but the Shishio's/Namine's Affiliate card topic is a different topic altogether, so I'm pretty sure they're treated separately among all card makers. I'm the one producing and delivering the Namine's cards to the delivery album, not Hahaido- tho he did work extensively on the cards (as did Genbrian and me). So you can treat Hahaido's topic as separate from Namine's with independent wait times. Hope that answers that in time for any Sunday cards you were planning to request. Its different rules in each card topics as they're all individually member-owned, and I just let them do their own thing as long as its not affecting others or dishonest Thanks for the reply I was just about to get off my computer. |
[center]Me: [center]Clubs I'm In: |
Jun 22, 2015 6:15 AM
#2897
Hello everyone! I have a problem with my manga list. Some covers are missing. How can i fix it? |
Jun 22, 2015 6:31 AM
#2898
Jun 22, 2015 10:07 PM
#2899
Hi again, so recently I went on a vacation for about 2 weeks and my MAL anime layout was working fine, than I come back and see it completely messed up, do you know how to fix this? Anime List: http://myanimelist.net/animelist/BoyScouts1 My CSS Theme, its easiest to post it in this google drive: https://docs.google.com/document/d/1dVozb0vuPIzve0_YndvNxqQAo6k9kcsIBvptmtdvK6o/edit?usp=sharing My Layout used to look something like this: http://i.imgur.com/A6boI66.jpg Now it looks like this: http://i.imgur.com/YZk5a2Q.jpg Can you please show me a fix because i absolutely loved that Layout, and i would hat to let go of it. |
MagnitudeReviewsJun 23, 2015 8:06 AM
Jun 23, 2015 12:24 AM
#2900
Hello i have a question about override option, how can i include the dvd anime covers and manga covers in my style list but each one to work on anime respectivly manga page list, or at least to exclude the manga page list and to work only on anime page. I would very much appreciate if you can help me . |
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |