New
May 10, 2016 2:15 PM
#3801
@keimador Add this line to fix the totals:.category_totals { line-height: normal; } [class^="td"][width="70"] { font-size: 16px; } @Daido You can fix the positioning by adding this code: #status-menu.fixed { position: static; } #status-menu.fixed + .list-block { margin-top: 0; } oh and btw, I love your list design! :o If we get forced over to the modern layout soon, do you mind if I rip it? |
May 10, 2016 9:54 PM
#3802
Doomcat55 said: @Daido You can fix the positioning by adding this code: #status-menu.fixed { position: static; } #status-menu.fixed + .list-block { margin-top: 0; } oh and btw, I love your list design! :o If we get forced over to the modern layout soon, do you mind if I rip it? That's a bit a shame. I guess I'll have to get used to that then. As for design, sure, I don't mind (since I based it off LukeLC's premade layout, credits to him first). I'm not done changing it though. |
DaidoMay 11, 2016 9:00 AM
May 13, 2016 5:47 AM
#3803
I have some questions about skinning, I was told to ask here by someone. I'm using a classic skin but I want the menu that's on the left side of modern skins, is that possible? The menu: http://i.imgur.com/iCDa4lS.png Is it possible to edit the black bar at the top of my list? The bar: http://i.imgur.com/xTAudPW.png |
May 14, 2016 5:49 AM
#3804
Dionysaw said: I have some questions about skinning, I was told to ask here by someone. I'm using a classic skin but I want the menu that's on the left side of modern skins, is that possible? The menu: http://i.imgur.com/iCDa4lS.png Is it possible to edit the black bar at the top of my list? The bar: http://i.imgur.com/xTAudPW.png the black bar is the equivalent to the left menu in the modern style. you could code the black bar to be similar to the modern menu, but not quite the same (i don't think there's a way to display a pic for user). the codes and other black bar (we call it topbar) mods can be found here, under the section customizing the top bar http://myanimelist.net/forum/?topicid=419405 |
May 14, 2016 6:21 AM
#3805
nymphiae said: Dionysaw said: I have some questions about skinning, I was told to ask here by someone. I'm using a classic skin but I want the menu that's on the left side of modern skins, is that possible? The menu: http://i.imgur.com/iCDa4lS.png Is it possible to edit the black bar at the top of my list? The bar: http://i.imgur.com/xTAudPW.png the black bar is the equivalent to the left menu in the modern style. you could code the black bar to be similar to the modern menu, but not quite the same (i don't think there's a way to display a pic for user). the codes and other black bar (we call it topbar) mods can be found here, under the section customizing the top bar http://myanimelist.net/forum/?topicid=419405 Thanks, I looked through that and found a mod I like and I've added the raw code but I'm missing a button? I've tried to narrow down the problem, I'm pretty sure this isn't due to an error by me. It's still live on my page. problem: http://i.imgur.com/6PvpttF.png copy of my css: http://pastebin.com/tsLsqcpH The bar I tried to add was the Sword Art Online bar from: http://myanimelist.net/forum/?topicid=449097 |
May 14, 2016 6:38 AM
#3806
Dionysaw said: nymphiae said: Dionysaw said: I have some questions about skinning, I was told to ask here by someone. I'm using a classic skin but I want the menu that's on the left side of modern skins, is that possible? The menu: http://i.imgur.com/iCDa4lS.png Is it possible to edit the black bar at the top of my list? The bar: http://i.imgur.com/xTAudPW.png the black bar is the equivalent to the left menu in the modern style. you could code the black bar to be similar to the modern menu, but not quite the same (i don't think there's a way to display a pic for user). the codes and other black bar (we call it topbar) mods can be found here, under the section customizing the top bar http://myanimelist.net/forum/?topicid=419405 Thanks, I looked through that and found a mod I like and I've added the raw code but I'm missing a button? I've tried to narrow down the problem, I'm pretty sure this isn't due to an error by me. It's still live on my page. problem: http://i.imgur.com/6PvpttF.png copy of my css: http://pastebin.com/tsLsqcpH The bar I tried to add was the Sword Art Online bar from: http://myanimelist.net/forum/?topicid=449097 some codes are interfering, delete this from your code #searchBox { display: none; } #searchListButton { display: none; } #mal\_control\_strip { background-color: #8f8f8f !important; background-image: url("http://i.imgur.com/fv1Pc.png") !important; } #mal_cs_powered a { display: none; } #mal_cs_links { display: none !important; } #mal_cs_listinfo { position: absolute; right: 0; text-align: right; } |
May 14, 2016 6:42 AM
#3807
nymphiae said: Dionysaw said: nymphiae said: Dionysaw said: I have some questions about skinning, I was told to ask here by someone. I'm using a classic skin but I want the menu that's on the left side of modern skins, is that possible? The menu: http://i.imgur.com/iCDa4lS.png Is it possible to edit the black bar at the top of my list? The bar: http://i.imgur.com/xTAudPW.png the black bar is the equivalent to the left menu in the modern style. you could code the black bar to be similar to the modern menu, but not quite the same (i don't think there's a way to display a pic for user). the codes and other black bar (we call it topbar) mods can be found here, under the section customizing the top bar http://myanimelist.net/forum/?topicid=419405 Thanks, I looked through that and found a mod I like and I've added the raw code but I'm missing a button? I've tried to narrow down the problem, I'm pretty sure this isn't due to an error by me. It's still live on my page. problem: http://i.imgur.com/6PvpttF.png copy of my css: http://pastebin.com/tsLsqcpH The bar I tried to add was the Sword Art Online bar from: http://myanimelist.net/forum/?topicid=449097 some codes are interfering, delete this from your code #searchBox { display: none; } #searchListButton { display: none; } #mal\_control\_strip { background-color: #8f8f8f !important; background-image: url("http://i.imgur.com/fv1Pc.png") !important; } #mal_cs_powered a { display: none; } #mal_cs_links { display: none !important; } #mal_cs_listinfo { position: absolute; right: 0; text-align: right; } Thanks for the help! Works great now. |
May 15, 2016 11:40 PM
#3808
Hello. I've been looking through posts and tutorials. I'm trying to find a way to make it so when I hover over something in my anime or manga list, it gives a larger picture of it. As it is now, the thumbnails of the anime/manga is small. I'm currently using the modern list style. I found this tutorial, but its for the classic list. http://myanimelist.net/forum/?topicid=563993 Edit: Also, how can I add in the category titles for each section? For what I have right now, it just has a colored bar on the left side that designates whether its Watching, Completed, and so on. I want to have it listed right above each section. |
biggskMay 16, 2016 12:51 AM
May 16, 2016 1:13 AM
#3809
@biggsk Add the appropriate code to the top of your list:@import "http://malcat-gen.appspot.com/code?username=biggsk&listType=anime&cssTemplate=.image+%5Bhref%5E%3D%22%2Fanime%2F%5BID%5D%2F%22%5D+img+%7B+background-image%3A+url%28%5BIMG%5D%29%3B+%7D"; @import "http://malcat-gen.appspot.com/code?username=biggsk&listType=manga&cssTemplate=.image+%5Bhref%5E%3D%22%2Fmanga%2F%5BID%5D%2F%22%5D+img+%7B+background-image%3A+url%28%5BIMG%5D%29%3B+%7D"; .image .link.sort { position: relative; } .list-item:hover .image .link.sort:before { content: ""; display: block; width: 50px; height: 70px; } img.image { background-size: 48px 68px; box-sizing: border-box; padding-left: 48px; top: 0; left: 0; z-index: 1; transition: transform .3s; } .list-item:hover img.image { position: absolute; transform: scale(2.5) translateX(-10px); } |
May 16, 2016 1:32 AM
#3810
Doomcat55 said: @biggsk Add the appropriate code to the top of your list: @import "http://malcat-gen.appspot.com/code?username=biggsk&listType=anime&cssTemplate=.image+%5Bhref%5E%3D%22%2Fanime%2F%5BID%5D%2F%22%5D+img+%7B+background-image%3A+url%28%5BIMG%5D%29%3B+%7D"; @import "http://malcat-gen.appspot.com/code?username=biggsk&listType=manga&cssTemplate=.image+%5Bhref%5E%3D%22%2Fmanga%2F%5BID%5D%2F%22%5D+img+%7B+background-image%3A+url%28%5BIMG%5D%29%3B+%7D"; .image .link.sort { position: relative; } .list-item:hover .image .link.sort:before { content: ""; display: block; width: 50px; height: 70px; } img.image { background-size: 48px 68px; box-sizing: border-box; padding-left: 48px; top: 0; left: 0; z-index: 1; transition: transform .3s; } .list-item:hover img.image { position: absolute; transform: scale(2.5) translateX(-10px); } It worked! Thank you very much! Is it possible to add the category headings in? Or would that take too much work? I don't have to have them, I just thought it would make it easier for me to find stuff. The classic style used to list the category headings when a new category began, but the modern one doesn't :c |
May 16, 2016 6:01 AM
#3811
I can't figure out how to change the colour on hover for each status (ex. curr watching green on hover, completed blue, etc.). Can anyone help? [quote=biggsk message=46046659] Doomcat55 said: Is it possible to add the category headings in? Or would that take too much work? I don't have to have them, I just thought it would make it easier for me to find stuff. The classic style used to list the category headings when a new category began, but the modern one doesn't :c I don't think this is available for modern unfortunately, I'd like it too. |
May 16, 2016 7:04 AM
#3812
May 16, 2016 7:09 AM
#3813
Doomcat55 said: @patch517 Do you mean to change the color of the entire row, or just the bit on the left? I am working on the category headers thing, but can't say for sure if it's possible or not yet. I got as far as changing the left thing, just can't figure out how to do the whole row. |
May 16, 2016 7:29 AM
#3814
@patch517 This should do it, add:.list-item:hover .watching ~ .data { background-color: #2db039; } .list-item:hover .completed ~ .data { background-color: #26448f; } .list-item:hover .onhold ~ .data { background-color: #f1c83e; } .list-item:hover .dropped ~ .data { background-color: #a12f31; } .list-item:hover .plantowatch ~ .data { background-color: #c3c3c3; } |
May 16, 2016 7:46 AM
#3815
Doomcat55 said: @patch517 This should do it, add: .list-item:hover .watching ~ .data { background-color: #2db039; } .list-item:hover .completed ~ .data { background-color: #26448f; } .list-item:hover .onhold ~ .data { background-color: #f1c83e; } .list-item:hover .dropped ~ .data { background-color: #a12f31; } .list-item:hover .plantowatch ~ .data { background-color: #c3c3c3; } Thanks. TIL the general sibling combinator |
May 16, 2016 2:14 PM
#3816
Ah ok :| Doomcat55 said: I am working on the category headers thing, but can't say for sure if it's possible or not yet. Oh ok, thank you :) Edit: Also, a friend of mine told me that for the first time loading my list, it takes like 12 seconds to load due to all the thumbnails. Do you think this is much of a problem? |
biggskMay 16, 2016 2:59 PM
May 16, 2016 7:05 PM
#3817
@biggsk He's right - as it is, your list has to load both its default images and the ones I gave you, which can be pretty bad if you don't have a good connection. I'm not sure of a workaround right now, but I'll let you know if I find one. You might be interested in my next post, though - |
May 16, 2016 7:14 PM
#3818
@biggsk @patch517 Category headers are now possible on the modern list! Just add the following import and code:@import "http://malcat-gen.appspot.com/headers"; body[data-query='{"status":7}'] .status { position: relative; } body[data-query='{"status":7}'] .list-item:before { display: table-row; height: 50px; } body[data-query='{"status":7}'] .data.status:before { display: block; position: absolute; top: -50px; left: 0; width: 1023px; height: 50px; line-height: 50px; font-size: 24px; text-align: left; border: solid black; border-width: 1px 0; box-sizing: border-box; padding-left: 10px; }
|
Doomcat55May 17, 2016 2:00 PM
May 16, 2016 7:30 PM
#3819
Doomcat55 said: @biggsk He's right - as it is, your list has to load both its default images and the ones I gave you, which can be pretty bad if you don't have a good connection. I'm not sure of a workaround right now, but I'll let you know if I find one. Ahh ok, oh well haha. I don't think many people look at my list anyways, and my browser caches the images so it doesn't take long for me. I mainly just wanted the images because its easier for me to see what the anime/manga is without having to click on it. If you ever do run across a work around, that would be nice though :) Doomcat55 said: @biggsk @patch517 Category headers are now possible on the modern list! Just add the following import and code: FYI - Headers won't show up if you sort your list or on the preview page. Oh, thank you very much! This is exactly what I was looking for :D |
May 17, 2016 12:37 AM
#3820
Hi! I used your guide in relation to adding the background to the list, but... Either I misunderstood something or I'm not knowing how to use CSS so well. I not have a clue, how in the code to change the transparency of the list. I don't wish the full transparency, only partial. What I have at present is really illegible. Sorry for English, I'm not from English-speaking country. PS If the post is in the bad place, please for moving him. |
May 17, 2016 7:11 AM
#3821
Mroczna95 said: Hi! I used your guide in relation to adding the background to the list, but... Either I misunderstood something or I'm not knowing how to use CSS so well. I not have a clue, how in the code to change the transparency of the list. I don't wish the full transparency, only partial. What I have at present is really illegible. Sorry for English, I'm not from English-speaking country. PS If the post is in the bad place, please for moving him. Think you just need to add this .list-block { background-color: rgba(255,255,255,0.7); } and change as you wish @doomcat55 Love it. Do you know if there's a way to remove the coloured status bar things on the side? Under .list-table .list-table-data .data.status, opacity: 0 leaves a transparent bar on hover and display: none just screws up the whole thing. That's all my brain thought to try :/ |
patch517May 17, 2016 10:52 AM
May 17, 2016 1:57 PM
#3822
@patch517 Yeah, I probably should've mentioned this in the post - the headers are coded as part of the colored status bars, so display: none; will bork them. To get rid of the bars, try.list-table .list-table-header .header-title.status, .list-table .list-table-data .data.status { width: 0; padding: 0; visibility: hidden; } body[data-query='{"status":7}'] .data.status:before { visibility: visible; display: block; position: absolute; top: -50px; left: 0; width: 700px; height: 50px; line-height: 50px; font-size: 24px; font-family:raleway; text-align: middle; border: solid white; border-width: 0px 0; box-sizing: border-box; padding-left: 10px; } |
May 17, 2016 2:12 PM
#3823
Doomcat55 said: @patch517 Yeah, I probably should've mentioned this in the post - the headers are coded as part of the colored status bars, so display: none; will bork them. To get rid of the bars, try .list-table .list-table-header .header-title.status, .list-table .list-table-data .data.status { width: 0; padding: 0; visibility: hidden; } body[data-query='{"status":7}'] .data.status:before { visibility: visible; display: block; position: absolute; top: -50px; left: 0; width: 700px; height: 50px; line-height: 50px; font-size: 24px; font-family:raleway; text-align: middle; border: solid white; border-width: 0px 0; box-sizing: border-box; padding-left: 10px; } Yep that did it, thanks again. |
May 17, 2016 2:35 PM
#3824
patch517 said: Mroczna95 said: Hi! I used your guide in relation to adding the background to the list, but... Either I misunderstood something or I'm not knowing how to use CSS so well. I not have a clue, how in the code to change the transparency of the list. I don't wish the full transparency, only partial. What I have at present is really illegible. Sorry for English, I'm not from English-speaking country. PS If the post is in the bad place, please for moving him. Think you just need to add this .list-block { background-color: rgba(255,255,255,0.7); } and change as you wish Thank You so much, it works! |
May 18, 2016 7:12 AM
#3825
@doomcat55 Found this problem related to the header categories (at least I think it is), the headers sometimes don't actually show up before the first item in a category. Checked out @biggsk 's list to see if it was just something I did but he has the same thing. |
patch517May 18, 2016 7:19 AM
May 18, 2016 7:36 AM
#3826
@patch517 It looks like an error on MAL's end - there's apparently some lag between when you change a series status and when MAL picks it up. Biggsk's list shows him as having 193 watching entries, but his profile says there are 194. I'll see what I can do, but the best solution might be to just wait a bit. |
May 18, 2016 7:41 AM
#3827
Doomcat55 said: @patch517 It looks like an error on MAL's end - there's apparently some lag between when you change a series status and when MAL picks it up. Biggsk's list shows him as having 193 watching entries, but his profile says there are 194. I'll see what I can do, but the best solution might be to just wait a bit. Oh welp, ignore me then. Mine's fixed itself already |
May 18, 2016 12:40 PM
#3828
Doomcat55 said: @patch517 It looks like an error on MAL's end - there's apparently some lag between when you change a series status and when MAL picks it up. Biggsk's list shows him as having 193 watching entries, but his profile says there are 194. I'll see what I can do, but the best solution might be to just wait a bit. Yeah, I kinda use my "Watching" Category as more of a priority plan to watch list haha. All the stuff I want to watch sooner goes there. It makes it easier to find, rather than sort through the 700 or so Plan to Watch entries. I know I could just sort by priority, but this seems easier for me haha. Edit: I didn't even notice that the image showed one of my Completed entries in the Watching list. You say theres lag between when you change a series status and when it shows the change, but I finished Absolute Duo MONTHS ago and changed its status. I'm not sure why it's there... Haha why does that say Introvert by my name? Is that due to my lack of posts? I couldn't tell what looked wrong with yours to begin with haha. It looked fine to me. @Doomcat55 For my list, some of the titles are long and kind of spill into the next category. Is there a way to make an invisible column border so that the text wraps before it reaches the column with "Edit - More"? In other words, the text would create a second line below the first line of text, that way it doesn't clutter as much. Edit: Linked wrong user by accident :P |
biggskMay 18, 2016 12:55 PM
May 18, 2016 3:31 PM
#3829
@biggsk Absolute Duo probably isn't the problem - if there are any anime that you've changed from watching status which MAL didn't register, it'll throw off the entire watching section. That said, your list looks fine now (and I haven't done anything) so it looks like we just need to wait for MAL to update. lol I forgot about that XD It's an extension that I picked up from the forums for fun. Don't worry about it, I'm actually a hardcore introvert myself Yeah, add this code: .data.title .link.sort { display: inline-block; max-width: 400px; } |
May 18, 2016 3:43 PM
#3830
Doomcat55 said: @biggsk Absolute Duo probably isn't the problem - if there are any anime that you've changed from watching status which MAL didn't register, it'll throw off the entire watching section. That said, your list looks fine now (and I haven't done anything) so it looks like we just need to wait for MAL to update. lol I forgot about that XD It's an extension that I picked up from the forums for fun. Don't worry about it, I'm actually a hardcore introvert myself Yeah, add this code: .data.title .link.sort { display: inline-block; max-width: 400px; } Ahh ok I see. So any change at all can push the list in one direction or another temporarily until MAL registers it properly. Oh XD Is that how it works though? Basing it off amount of posting? Or is there more to it than that, just curious haha. Ahh thanks! I'm assuming I just change the max-width to make any minor changes that I feel like. Edit: Yup, that worked, thanks! |
May 18, 2016 3:51 PM
#3831
@biggsk Forum posts over time since you joined MAL - here's where I got it from: http://myanimelist.net/forum/?topicid=1471246 And yeah, you can change it however you want. |
May 18, 2016 4:55 PM
#3832
Doomcat55 said: @biggsk Forum posts over time since you joined MAL - here's where I got it from: http://myanimelist.net/forum/?topicid=1471246 And yeah, you can change it however you want. Alrighty, cool :P Edit: lol magical girl... |
May 21, 2016 9:50 AM
#3833
Hello I rehosted this list But I can't seem to find the source of the covers. I want to enlarge and move them to match the size of the category menu. Edit: i just noticed that the back menu isn't showing. As far as i can tell there's nothing wrong with the import code. - My List - The rehosted code |
Aoi_YuiMay 21, 2016 10:27 AM
May 21, 2016 8:08 PM
#3834
@Aoi_Yui The codes for modifying your covers are in the section of your code titled "COVER PIC POSITION." Just change the width/height and margin-left/margin-top properties. As for the topbar: Change this section: #mal\_cs\_listinfo, #mal\_cs\_links, #mal\_cs\_otherlinks, #mal\_cs\_powered { -moz-box-sizing: border-box; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } #mal\_cs\_listinfo, #mal\_cs\_links, #mal\_cs\_otherlinks, #mal\_cs\_powered { -moz-box-sizing: border-box; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: none !important; height: 32px !important; overflow: hidden; position: absolute; right: 4px; text-align: center; top: 4px; width: 150px; z-index: 10; } #mal\_cs\_listinfo { background-image: url("https://dl.dropboxusercontent.com/u/15020329/MAL/CSS/Charolette/Images/Baclist%20Images/XqsilHp.png"); right: 106px; } |
May 22, 2016 5:57 AM
#3835
@Doomcat55 What do i change the height and border to? I tried a few values and it seems to be the right size but I'm getting a pair of lines that don't seem to belong. |
May 22, 2016 7:33 AM
#3836
May 22, 2016 3:09 PM
#3837
hi cover pic for black lagoon roberta's trail is not coming up when i hover over it.. why is that.. can someone please help me http://myanimelist.net/animelist/theweaboopenguin |
SEND ME DA FRIEND REQUEST AND COMMENT ON MY PROFILE <33 I LOVE YUKINO YUKINOSHITA, CHITOGE AND YUNO GASAI.. they changed my life.. every night b4 sleeping i think about them and pray that i meet a yukino/chitoge/yuno irl <33 i will stay virgin for them <33 i know they are out there and i will meet them <33 i love u yukino bbb |
May 22, 2016 3:41 PM
#3838
Doomcat55 said: @Aoi_Yui Change them to the values shown in the second spoiler (or just copy/paste the whole thing) Thanks its working now for the most part. I know this is nitpicking but I'm a perfectionist and the animation for the drop down menu is choppy it drops down a bit then the rest just pops in. |
May 22, 2016 4:17 PM
#3839
@theweaboopenguin Check again, it's showing up for me now. Probably a caching issue. Aoi_Yui said: Not really sure what you mean... but I'm not seeing any choppiness. Details?the animation for the drop down menu is choppy it drops down a bit then the rest just pops in. |
May 23, 2016 4:38 AM
#3840
Doomcat55 said: @theweaboopenguin Check again, it's showing up for me now. Probably a caching issue. Aoi_Yui said: Not really sure what you mean... but I'm not seeing any choppiness. Details?the animation for the drop down menu is choppy it drops down a bit then the rest just pops in. My computer is really old it might just be lag. For reference modern day netbooks have more ram than my desktop. Parts of lists, especially high res images, tend to pop in little by little. Can someone else with an old build test this for me. |
May 23, 2016 5:07 AM
#3841
Aoi_Yui said: It's probably lag because of your computer, as images with high quality did the same thing with my old desktop.Doomcat55 said: @theweaboopenguin Check again, it's showing up for me now. Probably a caching issue. Aoi_Yui said: the animation for the drop down menu is choppy it drops down a bit then the rest just pops in. My computer is really old it might just be lag. For reference modern day netbooks have more ram than my desktop. Parts of lists, especially high res images, tend to pop in little by little. Can someone else with an old build test this for me. |
May 24, 2016 1:12 PM
#3842
Doomcat55 said: @theweaboopenguin Check again, it's showing up for me now. Probably a caching issue. Aoi_Yui said: Not really sure what you mean... but I'm not seeing any choppiness. Details?the animation for the drop down menu is choppy it drops down a bit then the rest just pops in. yes its showing up now thanks |
SEND ME DA FRIEND REQUEST AND COMMENT ON MY PROFILE <33 I LOVE YUKINO YUKINOSHITA, CHITOGE AND YUNO GASAI.. they changed my life.. every night b4 sleeping i think about them and pray that i meet a yukino/chitoge/yuno irl <33 i will stay virgin for them <33 i know they are out there and i will meet them <33 i love u yukino bbb |
May 25, 2016 4:23 AM
#3843
Milk_is_Special said: Aoi_Yui said: It's probably lag because of your computer, as images with high quality did the same thing with my old desktop.Doomcat55 said: @theweaboopenguin Check again, it's showing up for me now. Probably a caching issue. Aoi_Yui said: Not really sure what you mean... but I'm not seeing any choppiness. Details?the animation for the drop down menu is choppy it drops down a bit then the rest just pops in. My computer is really old it might just be lag. For reference modern day netbooks have more ram than my desktop. Parts of lists, especially high res images, tend to pop in little by little. Can someone else with an old build test this for me. Thanks for confirming my theory. I checked a few different times and the lag was spotty, which supports my theory about lag. |
May 29, 2016 3:20 PM
#3844
Hi, sorry if someone ask this before, but how I can change the position of the list, putting the list further down, to not stand in front of the image? I wanna know how add toolbar above the list. Sorry for my bad english, google translate help me write this. Thanks for the attention. |
May 30, 2016 7:08 PM
#3845
Hi! I've been working on my anime list style wit the new design these last weeks, but there are few things I couldn't figure out how to do. So, I would appreciate a bit of help. 1- How could I move the category buttons to the left? 2- How could I put round corners on the table? #advanced-options { position: fixed; top: 24px; left: 0; right: 0; background-color: rgb(230, 233, 253); display: none; width: 860px; margin: 0 auto; padding: 25px 0px 30px; border: #2E51A2 4px solid; border-radius: 20px; -moz-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); -o-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); -ms-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); color: rgb(15, 29, 143); text-align: left; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; z-index: 1101; } #advanced-options .advanced-options-header { width: 750px; margin: 0px auto; padding-bottom: 4px; border-bottom: 1px solid #2E51A2; font-size: 20px; color: rgb(15, 29, 140); } #advanced-options .advanced-options-header .description { font-size: 12px; font-weight: normal; margin-left: 8px; } #advanced-options select { -ms-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(/img/pc/ownlist/icon_pulldown_triangle.png); background-repeat: no-repeat; background-position: center right; background-size: 18px 8px; background-color: #FFFFFF; display: inline-block; height: 25px; padding: 4px 20px 4px 4px; padding-right: 4px\0; border: #BEBEBE 1px solid; border-radius: 6px; font-size: 12px; } #advanced-options select::-ms-expand { display: none; } #advanced-options select:disabled { background-image: url(/img/pc/ownlist/icon_pulldown_triangle_disable.png); color: #9B9B9B; } #advanced-options input[type=text] { padding: 4px; border: #BEBEBE 1px solid; border-radius: 6px; } #advanced-options input:focus { outline: none; } /* sort */ #advanced-options .sort-widget { margin: 0px auto; padding: 12px 0px 0px; width: 750px; } #advanced-options .sort-widget:last-of-type { padding-bottom: 45px; } #advanced-options .sort-widget select { width: 172px; margin-right: 8px; } #advanced-options .sort-widget input[type=radio] { display: none; } #advanced-options .sort-widget input[type=radio] + label { background-color: #FFFFFF; display: inline-block; width: 56px; padding: 5px 0px; border: #BEBEBE 1px solid; border-radius: 4px; color: #323232; font-size: 12px; text-align: center; cursor: pointer; } #advanced-options .sort-widget input[type=radio]:checked + label { background-color: #4065BA; border: #4065BA 1px solid; color: #FFFFFF; } #advanced-options .sort-widget input[type=radio]:disabled + label { border: #BEBEBE 1px solid; color: #9B9B9B; } #advanced-options .sort-widget input[type=radio]:checked:disabled + label { background-color: #FFFFFF; border: #BEBEBE 1px solid; color: #9B9B9B; } /* filter */ #advanced-options .filter-widget { margin: 0px auto; padding: 12px 0px 0; width: 750px; } #advanced-options .filter-widget select { margin-right: 8px; font-size: 12px; } #advanced-options .filter-widget.title input[type=text] { width: 360px; } #advanced-options .filter-widget.airing-status select, #advanced-options .filter-widget.publishing-status select { width: 152px; } #advanced-options .filter-widget.producer select, #advanced-options .filter-widget.magazine select { width: 360px; } #advanced-options .filter-widget.aired-date select.year, #advanced-options .filter-widget.published-date select.year { width: 80px; } #advanced-options .filter-widget.aired-date select.month, #advanced-options .filter-widget.published-date select.month, #advanced-options .filter-widget.aired-date select.day, #advanced-options .filter-widget.published-date select.day { width: 60px; } #advanced-options .filter-widget.aired-date .text, #advanced-options .filter-widget.published-date .text { display: inline-block; margin-right: 4px; font-size: 12px; } #advanced-options .filter-widget.aired-season select.year { width: 80px; } #advanced-options .filter-widget.aired-season select.season { width: 110px; } #advanced-options .sort-widget .widget-header, #advanced-options .filter-widget .widget-header { display: inline-block; width: 110px; font-size: 12px; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; } #advanced-options .sort-widget:last-of-type, #advanced-options .filter-widget:last-of-type { padding-bottom: 40px; } /* buttons */ #advanced-options .advanced-options-button { width: 750px; margin: 0px auto; padding: 12px 0px 0px; border-top: 1px solid #2E51A2; text-align: center; } #advanced-options .btn-apply, #advanced-options .btn-clear { background-color: rgba(64, 101, 186, 1); display: inline-block; width: 135px; margin: 0 4px; padding: 6px 0px; border-radius: 4px; font-size: 13px; font-weight: bold; color: #FFFFFF; text-align: center; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } #advanced-options .btn-apply:hover, #advanced-options .btn-clear:hover { background-color: rgba(64, 101, 186, 0.8); } /** * General Styles */ body { margin: 0 0 0 0; background-color: #2E51A2 !important; text-align: center; font-family: Verdana, Arial; font-size: 11px; } td { line-height: 1.5em; } a { color: #1d439b; text-decoration: none; } #footer-block { padding: 15px 0; background-color: #2E51A2; color: #FFFFFF; font-family: Avenir, "lucida grande", tahoma, verdana, arial, sans-serif; } #copyright { font-size: 12px; font-weight: bold; color: #9caed9; padding-top: 3px; text-align: center; } /* * Highlighted Row */ tr:hover td, tr:hover td a{ background-color: #2E51A2; color: white !important; } div.add-edit-more, a.edit { opacity: 0; } .list-item:hover .add-edit-more, .list-item:hover .edit { opacity: 1; } /* * Status Content */ .list-table .list-table-data .data.title .rewatching, .list-table .list-table-data .data.title .rereading, .list-table .list-table-data .data.title .content-status { color: black; font-style: italic; font-size: 0.9em } tr:hover .content-status, tr:hover .rewatching, tr:hover .rereading { color: white !important; } /* * Header */ .header a { font-weight: bold; color: #fff; } .header a:hover { text-decoration: none; color: #9caed9; } .header { position: relative; color: #fff; display: block; width: 990px; height: 70px; margin: 0 auto } .header .header-title { position: absolute; top: 21px; background-image: url("/img/pc/ownlist/logo_mal.png"); background-position: left top; background-repeat: no-repeat; background-size: auto 36px; display: block; width: 240px; height: 36px; text-indent: -9999px; overflow: hidden } .header .header-menu { position: absolute; top: 25px; right: 4px } .header .header-menu.other { top: 18px; } .header .header-menu .btn-menu { display: block; text-align: right; font-size: 16px; } .header .header-menu .header-info { font-size: 1.0em; margin-top: 6px; margin-right: 15px; text-align: right; } .header .username { font-weight: bold; } .header .header-menu .list-menu { position: absolute; top: 25px; right: -4px; background-color: #ffffff; display: none; border: #2E51A2 1px solid; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px; box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px; z-index: 1; } .header .header-menu .list-menu .icon-menu { display: block; width: 150px; height: 30px; color: #2E51A2; font-size: 14px; font-weight: bold; text-decoration: none; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .header .header-menu .list-menu .icon-menu:hover { background-color: #e1e7f5 } .header .header-menu .list-menu .icon-menu svg.icon { position: absolute; fill: #2E51A2; left: 12px; top: 4px; } .header .header-menu .list-menu .icon-menu .text { position: absolute; left: 52px; top: 6px; } /** * Floating Menu */ .list-menu-float { position: fixed; display: block; top: 20%; width: 50px; border: rgb(230, 233, 253) 1px solid; z-index: 2 } .list-menu-float .icon-menu { position: relative; background-color: rgb(230, 233, 253); display: block; width: 50px; height: 50px; opacity: 1; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } /* SVG */ .list-menu-float .icon-menu svg.icon { position: absolute; fill: #2E51A2; } .list-menu-float .icon-menu:hover svg.icon { position: absolute; fill: white; } .list-menu-float .icon-menu.profile { background-size: cover; } .list-menu-float .icon-menu.quick-add {} .list-menu-float .icon-menu.quick-add svg.icon-quick-add { left: 13px; top: 12px; } .list-menu-float .icon-menu.anime-list {} .list-menu-float .icon-menu.anime-list svg.icon-anime-list { left: 13px; top: 12px; } .list-menu-float .icon-menu.manga-list {} .list-menu-float .icon-menu.manga-list svg.icon-manga-list { left: 13px; top: 12px; } .list-menu-float .icon-menu.history {} .list-menu-float .icon-menu.history svg.icon-history { left: 13px; top: 12px; } .list-menu-float .icon-menu.export {} .list-menu-float .icon-menu.export svg.icon-export { left: 13px; top: 12px; } .list-menu-float .icon-menu.login {} .list-menu-float .icon-menu.login svg.icon-login { left: 13px; top: 12px; } .list-menu-float .icon-menu.logout {} .list-menu-float .icon-menu.logout svg.icon-logout { left: 13px; top: 14px; } .list-menu-float .icon-menu.setting {} .list-menu-float .icon-menu.setting svg.icon-setting { left: 13px; top: 13px; } .list-menu-float .icon-menu .text { position: absolute; top: 14px; left: 50px; width: 0; display: inline-block; color: white; font-size: 1.4em; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; text-align: center; vertical-align: middle; overflow: hidden; white-space: nowrap; opacity: 0; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .list-menu-float .icon-menu:not(.profile):hover { background-color: #2E51A2; width: 145px; } .list-menu-float .icon-menu:hover .text { width: 94px; opacity: 1 } /* setting */ .list-menu-float .icon-menu.setting .text { top: 0px; width: 0px; height: 100px; opacity: 0; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .list-menu-float .icon-menu.setting:hover .text { top: 0px; width: 114px; height: 100px; opacity: 1 } .list-menu-float .icon-menu.setting .text .link-list-setting, .list-menu-float .icon-menu.setting .text .link-style-setting { display: block; opacity: 0; } .list-menu-float .icon-menu.setting:hover .text .link-list-setting, .list-menu-float .icon-menu.setting:hover .text .link-style-setting { position: absolute; background-color: #2E51A2; display: block; width: 110px; height: 50px; line-height: 50px; text-decoration: none; color: white; opacity: 1; } .list-menu-float .icon-menu.setting:hover .text .link-list-setting { top: 0px; } .list-menu-float .icon-menu.setting:hover .text .link-style-setting { border-top: #EBEBEB 1px solid; top: 50px; } /** * List Container */ .list-container { position: relative; background-color: #ffffff; border: white 1px solid; border-radius: 30px !important; width: 990px; margin-bottom: 0; margin-right: auto; margin-left: auto; text-align: left; } /** * List Container - Cover Block */ .cover-block { display: block; width: 990px; margin: 0 auto; border: #2E51A2 0px solid; border-radius: 30px 30px 0px 0px; text-align: center; vertical-align: middle; } .cover-block .image-container { display: table-cell; width: 990px; padding-top: 0px; border: white 0px solid; border-radius: 30px 30px 0px 0px; } .cover-block .image-container.hide { display: none; } .cover-block .image-container img { max-width: 989px; border: white 0px solid; border-radius: 30px 30px 0px 0px; } /* setting icon */ .cover-block .image-container .btn-list-setting { display: none; } .cover-block .image-container:hover .btn-list-setting { display: block; position: absolute; top: 20px; right: 28px; padding: 8px; border: rgba(255,255,255,0) 1px solid; font-size: 14px; color: #ffffff; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; } .cover-block .image-container .btn-list-setting:hover { position: absolute; top: 20px; right: 28px; background-color: rgba(0,0,0,0.6); padding: 8px; border: #ffffff 1px solid; -moz-box-shadow: 0 0 4px #000000; -webkit-box-shadow: 0 0 4px #000000; -o-box-shadow: 0 0 4px #000000; -ms-box-shadow: 0 0 4px #000000; box-shadow: 0 0 4px #000000; font-size: 14px; color: #ffffff; text-shadow: #323232 1px 1px 1px; } .cover-block .image-container .btn-list-setting .fa-camera { font-size: 16px; -moz-text-shadow: #000000 1px 1px 3px; -webkit-text-shadow: #000000 1px 1px 3px; -o-text-shadow: #000000 1px 1px 3px; -ms-text-shadow: #000000 1px 1px 3px; text-shadow: #000000 1px 1px 3px; -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#000000,offx=1,offy=1)"; } .cover-block .image-container .btn-list-setting .icon-plus-circle { position: absolute; top: 4px; left: 18px; background-color: rgba(0,0,0,0.6); border-radius: 50%; -moz-box-shadow: -1px 1px 0px 0px #323232; -webkit-box-shadow: -1px 1px 0px 0px #323232; -o-box-shadow: -1px 1px 0px 0px #323232; -ms-box-shadow: -1px 1px 0px 0px #323232; box-shadow: -1px 1px 0px 0px #323232; font-size: 10px; } .cover-block .image-container .btn-list-setting .text { display: none; } .cover-block .image-container .btn-list-setting:hover .text { display: inline-block;; margin-left: 4px; } /** * List Container - Status Menu */ .status-menu-container { width: 989px; height: 46px; background-color: #2E51A2; border-bottom: #EBEBEB 0px solid; border-radius: 0px 0px 0px 0px; z-index: 1 } .status-menu-container.fixed { position: fixed; display: block; top: 0; } .status-menu-container.fixed + div.list-block { margin-top: 62px; } .status-menu-container .status-menu { display: table; margin: 0 auto; border-collapse: separate; border-spacing: 0px 0; } .status-menu-container .status-menu .status-button { position: relative; display: table-cell; padding: 12px 0; margin: 0; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; text-align: center; vertical-align: middle; font-size: 1.6em; font-weight: bold; color: white; width: 120px; } .status-menu-container .status-menu .status-button:nth-of-type(2) { width: 180px; } .status-menu-container .status-menu .status-button:nth-of-type(6) { width: 140px; } .status-menu-container .status-menu .status-button.on, .status-menu-container .status-menu .status-button:hover { color: #2E51A2; background-color: rgb(230, 233, 253); font-weight: bold; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .status-menu-container .status-menu .status-button:after { position: absolute; bottom: 0px; left: 0px; background-color: #4065BA; display: block; width: 100%; height: 0px; content: ''; opacity: 0; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .status-menu-container .status-menu .status-button.on:after, .status-menu .status-button:hover:after { opacity: 1 } /** * List Container - Status Menu - Search */ .status-menu-container .search-container { position: absolute; right: 18px; } .status-menu-container .search-container #search-button { display: inline-block; height: 22px; margin-top: 15px; color: white !important; font-size: 1.6em; vertical-align: middle; } .status-menu-container .search-container #search-box { display: inline-block; width: 0; height: 22px; overflow: hidden; margin-top: 13px; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; vertical-align: middle; } .status-menu-container .search-container #search-box.open { display: inline-block; width: 100px; } .status-menu-container .search-container #search-box input { width: 100%; height: 100%; box-sizing: border-box; color: #4065BA; } /** * List Container - List Block */ .list-block { margin-top: 16px; min-height: 500px; padding: 0 } .list-unit { display: block; margin: 0 auto; width: 900px } /** * List Container - List Status Title (with Stats) */ .list-unit .list-status-title { position: relative; display: table; background-color: transparent; width: 900px; height: 38px } .list-unit .list-status-title .text { display: table-cell; width: 900px; height: 50px; font-size: 2.0em; color: #2E51A2; font-weight: bold; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; font-size: 36px; text-align: center; vertical-align: middle } .list-unit .list-status-title .stats { position: absolute; height: 38px; line-height: 38px; right: 4px; } .list-unit .list-status-title .stats a { margin-right: 8px; font-weight: bold; color: #2E51A2; } .list-unit .list-status-title .stats a.filterd { text-shadow: 0px 0px 2px #2E51A2; } .list-unit .list-stats { display: none; background-color: white; width: 900px; height: 30px; line-height: 30px; font-weight: bold; color: #2E51A2; text-align: center; } /** * List Container - List Table */ .list-table { width: 100%; margin: 0 auto; border-collapse: collapse; border: #EBEBEB 1px solid; } .list-table > tbody:first-of-type, .list-table > tbody:last-of-type { border: #2E51A2 1px solid; border-radius: 20px 20px 0px 0px !important; } .list-table > tbody:nth-of-type(2n+1), .list-table > tbody:nth-of-type(2n) { background-color: rgb(230, 233, 253); } /** * List Container - List Table - Header */ .list-table .list-table-header .header-title { background: #2E51A2 url("/img/pc/ownlist/bar-table-header.png") no-repeat right 7px / 1px 22px; display: table-cell; border-bottom: #EBEBEB 1px solid; height: 36px; text-align: center; vertical-align: middle; color: white; font-size: 15px; } .list-table .list-table-header .header-title:last-child { background-image: none; } .list-table .list-table-header .header-title.status { background-image: none; width: 4px } .list-table .list-table-header .header-title.number { width: 30px } .list-table .list-table-header .header-title.image { width: 66px } .list-table .list-table-header .header-title.title { padding-left: 8px; text-align: left } .list-table .list-table-header .header-title.score { width: 65px } .list-table .list-table-header .header-title.type { width: 60px } .list-table .list-table-header .header-title.progress { width: 90px } .list-table .list-table-header .header-title.chapters { width: 90px } .list-table .list-table-header .header-title.volumes { width: 90px } .list-table .list-table-header .header-title.tags { width: 120px } .list-table .list-table-header .header-title.rated { width: 70px } .list-table .list-table-header .header-title.started { width: 110px } .list-table .list-table-header .header-title.finished { width: 110px } .list-table .list-table-header .header-title.days { width: 45px } .list-table .list-table-header .header-title.storage { width: 75px } .list-table .list-table-header .header-title.retail { width: 65px; } .list-table .list-table-header .header-title.priority { width: 70px } .list-table .list-table-header .header-title .link { font-size: 11px; color: white; text-decoration: none; } .list-table .list-table-header .header-title .link.sort { position: relative; font-size: 15px; display: inline-block; color: white; white-space: nowrap; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .list-table .list-table-header .header-title .link.sort:hover { color: #9caed9; } .list-table .list-table-header .header-title .sort-icon { color: white; } /** * List Container - List Table - Items */ .list-table .list-table-data .data { display: table-cell; padding: 4px 0; text-align: center; vertical-align: middle; border-bottom: #EBEBEB 1px solid } .list-table .list-table-data a:not(.edit-disabled):hover { text-decoration: underline; } .list-table .list-table-data a.edit-disabled { cursor: text; color: black; } .list-table .list-table-data .tags .edit { display: block; width: 100%; text-align: center; color: white; font-size: 10px; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; } .list-table .list-table-data .tags .edit:hover { color: white !important; } .list-table .list-table-data .tags textarea { box-sizing: border-box; width: 100%; height: 60px; } .list-table .list-table-data .data.image a { display: inline-block; } .list-table .list-table-data .data.image .image { width: 48px; height: 68px; border: #EBEBEB 1px solid } .list-table .list-table-data .data.title { padding-left: 8px; text-align: left; word-wrap: break-word } .list-table .list-table-data .data.title .link { font-size: 1.1em; font-weight: bold } .list-table .list-table-data .data.score .link { font-size: 1.1em; font-weight: bold } .list-table .list-table-data .data.title .add-edit-more { float: right; margin-right: 10px; font-size: 0.9em; } .list-table .list-table-data .data.title .more { position: relative; } .list-table .more-info { display: none; border-bottom: #EBEBEB 1px solid; } .list-table .more-info .more-content { padding: 10px; padding-left: 25px; } .list-table .list-table-data .data.tags { word-wrap: break-word } .list-table .list-table-data .data.status { width: 4px } .list-table .list-table-data .data.status .text { display: none } .list-table .list-table-data .data.status.reading, .list-table .list-table-data .data.status.watching { background-color: #2db039 } .list-table .list-table-data .data.status.plantoread, .list-table .list-table-data .data.status.plantowatch { background-color: #c3c3c3 } .list-table .list-table-data .data.status.completed { background-color: #26448f } .list-table .list-table-data .data.status.onhold { background-color: #f1c83e } .list-table .list-table-data .data.status.dropped { background-color: #a12f31 } .list-table .list-table-data .data.title { padding-left: 8px; text-align: left } .list-unit .loading-space { margin: 8px; height: 20px; font-size: 20px; text-align: center; } .icon-watch, .icon-watch-pv { display: none!important; } Thanks! |
May 30, 2016 9:20 PM
#3846
akai_ryu said: 1- How could I move the category buttons to the left? .status-menu-container .status-menu{margin:0;} akai_ryu said: 2- How could I put round corners on the table? .list-table{display:block;} .list-table tbody:first-child{display:block; border-radius:10px;} |
May 31, 2016 8:28 PM
#3847
I was just wondering if anyone knew of a way to fix the offset titles on my list. Down on the 'Plan To Watch' section the section headers are offset from the actual sections ('Score', 'Type', and 'Progress'). http://myanimelist.net/animelist/522Gage Thanks for the help! |
May 31, 2016 10:37 PM
#3848
@522Gage Remove this bit:/* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 410px !important;} } .table_header { border-width:0; font-weight:bold; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px 0; } |
May 31, 2016 11:27 PM
#3849
Doomcat55 said: @522Gage Remove this bit: /* GOOGLE CHROME FIX Adjust this amount 50px at a time if your columns are uneven in Chrome. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class^='td']:nth-of-type(2) { width: 410px !important;} } .table_header { border-width:0; font-weight:bold; padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px 0; } Thanks! That fixed it. Is there any way to make it so there is a cut off for the length of the titles. Like in the Completed section, the titles that go over to the score get cut off and go to the next line. Is there a way to make them all look the same, either way is fine. |
More topics from this board
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1262 |
by Shishio-kun
»»
Sep 22, 4:35 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
382 |
by Shishio-kun
»»
Sep 22, 4:29 AM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
57 |
by Shishio-kun
»»
Sep 22, 4:27 AM |
|
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
31 |
by Shishio-kun
»»
Sep 22, 4:14 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |