| Hello, I'm using one of the premade CSS list styles and I do not know if anyone has asked this, but I wonder if there any way I can sort my list by score instead of anime titles??? thanks! |
| @Shishio-kun Nope, no for Opera, and the only way around seem to be display: none; @jama91 You can only sort yourself for one time by clicking "Score", there seem to be no way of setting default here. If you add &show=0&order=4 to your animelist link, it will open sort by score view. You can add this link to your profile then so that people clicking it (and you) will see it ordered by score, but that's not much. @drinkbeer Just remove the whole line if you aren't gonna use it. BTW, the correct syntax is background-image: none; |
 |
| @drinkbeer It's background-color, not background-image |
|
| How do I make the borders curved? |
Ellyhm said: How do I make the borders curved? border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; or border-radius: 4px 2px 6px 8px; -o-border-radius: 4px 2px 6px 8px; -moz-border-radius: 4px 2px 6px 8px; -webkit-border-radius: 4px 2px 6px 8px; or border-radius: 6em 10em / 3em 5em; -o-border-radius: 6em 10em / 3em 5em; -moz-border-radius: 6em 10em / 3em 5em; -webkit-border-radius: 6em 10em / 3em 5em; |
 |
Hahaido said: Ellyhm said: How do I make the borders curved? border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; or border-radius: 4px 2px 6px 8px; -o-border-radius: 4px 2px 6px 8px; -moz-border-radius: 4px 2px 6px 8px; -webkit-border-radius: 4px 2px 6px 8px; or border-radius: 6em 10em / 3em 5em; -o-border-radius: 6em 10em / 3em 5em; -moz-border-radius: 6em 10em / 3em 5em; -webkit-border-radius: 6em 10em / 3em 5em; Doesn't work. Where must I put it under? |
ZeltezaNov 14, 2012 5:28 AM
Ellyhm said: Doesn't work. Where must I put it under? At that part of your list where you want to apply it :) Unlock your list to let me see the CSS Updated And what borders you want to make curved? |
HahaidoNov 14, 2012 6:58 AM
|
Hahaido said: Ellyhm said: Doesn't work. Where must I put it under? At that part of your list where you want to apply it :) Unlock your list to let me see the CSS Updated And which borders you want to make curved? Just unlocked. Hmm actually from top to bottom. |
Ellyhm said: Just unlocked. Hmm actually from top to bottom. Try this: .table_header:first-child { border-top-left-radius: 5em; -o-border-top-left-radius: 5em; -moz-border-top-left-radius: 5em; -webkit-border-top-left-radius: 5em; } .table_header:last-child { border-top-right-radius: 5em; -o-border-top-ight-radius: 5em; -moz-border-top-ight-radius: 5em; -webkit-border-top-ight-radius: 5em; } .category_totals { border-radius: 0 0 5em 5em; -o-border-tradius: 0 0 5em 5em; -moz-border-radius: 0 0 5em 5em; -webkit-border-radius: 0 0 5em 5em; } |
HahaidoNov 14, 2012 7:40 AM
|
Hahaido said: Ellyhm said: Just unlocked. Hmm actually from top to bottom. Try this: .table_header:first-child { border-top-left-radius: 5em; -o-border-top-left-radius: 5em; -moz-border-top-left-radius: 5em; -webkit-border-top-left-radius: 5em; } .table_header:last-child { border-top-right-radius: 5em; -o-border-top-ight-radius: 5em; -moz-border-top-ight-radius: 5em; -webkit-border-top-ight-radius: 5em; } .category_totals { border-radius: 0 0 5em 5em; -o-border-tradius: 0 0 5em 5em; -moz-border-radius: 0 0 5em 5em; -webkit-border-radius: 0 0 5em 5em; } Okay it works now. Thanks! But how do I make it less curved? Because the "TV" under "Watching" seems to be out of place. Also, I have added the DVD covers into my anime list, how do I make it so the DVD covers are also inside my table background? (Don't really know how to explain it) and have lines separate my anime from each other? |
ZeltezaNov 14, 2012 7:39 PM
Ellyhm said: Okay it works now. Thanks! But how do I make it less curved? Because the "TV" under "Watching" seems to be out of place. Also, I have added the DVD covers into my anime list, how do I make it so the DVD covers are also inside my table background? (Don't really know how to explain it) and have lines separate my anime from each other? Here is the complete code: |
|
Hahaido said: Ellyhm said: Okay it works now. Thanks! But how do I make it less curved? Because the "TV" under "Watching" seems to be out of place. Also, I have added the DVD covers into my anime list, how do I make it so the DVD covers are also inside my table background? (Don't really know how to explain it) and have lines separate my anime from each other? Here is the complete code: Sorry but this happened when I changed my current code into yours. http://img15.imageshack.us/img15/4752/problemjwj.jpg |
Ellyhm said: Sorry but this happened when I changed my current code into yours. http://img15.imageshack.us/img15/4752/problemjwj.jpg Find .hide selector at the your CSS and replace it code with following: .hide { background-size: auto; height: 310px; margin-left: 0px; background-position: left top; background-repeat: no-repeat; display: inline-block !important; margin-top: 0; margin-bottom: 0; position: relative; width: 600px !important; background-color: rgba(17, 54, 81, .5); } Also replace the name of .table_header:last-child selector with .table_header[width="70"] |
HahaidoNov 15, 2012 12:08 AM
|
Hahaido said: Ellyhm said: Sorry but this happened when I changed my current code into yours. http://img15.imageshack.us/img15/4752/problemjwj.jpg Find .hide selector at the your CSS and replace it code with following: .hide { background-size: auto; height: 310px; margin-left: 0px; background-position: left top; background-repeat: no-repeat; display: inline-block !important; margin-top: 0; margin-bottom: 0; position: relative; width: 600px !important; background-color: rgba(17, 54, 81, .5); } Also replace the name of .table_header:last-child selector with .table_header[width="70"] Sorry for having so many problems arising haha. Did everything you told me, almost everything's back to normal but there's three more problems. http://img715.imageshack.us/img715/5089/problem2gm.jpg 1) (as you can see) The words are behind the table 2) The sides are not really aligned. 3) The borders on the right are not curved anymore >.< Sorry and thanks for the help >< |
ZeltezaNov 15, 2012 2:25 AM
Ellyhm said: 1) (as you can see) The words are behind the table 2) The sides are not really aligned. 3) The borders on the right are not curved anymore New code: For the solving of the second problem I recommend you to change the browser. Are you using Chrome? |
|
Hahaido said: For the solving of the second problem I recommend you to change the browser. Are you using Chrome? Yes I am using Chrome |
Ellyhm said: Yes I am using Chrome Try Firefox. There are no gaps between the columns. That happens because 'Score' and "Tags" columns are not at their places |
|
Hahaido said: Ellyhm said: Yes I am using Chrome Try Firefox. There are no gaps between the columns. That happens because 'Score' and "Tags" columns are not at their places Oh okay, Thanks it works now! Last question, the scores on certain anime seems to overlap the anime title. Must I change the position of the score box to fix it? |
Ellyhm said: Oh okay, Thanks it works now! Last question, the scores on certain anime seems to overlap the anime title. Must I change the position of the score box to fix it? Play with this code: .td1[align="center"][width="45"], .td2[align="center"][width="45"] { color: gold !important; font-size: 40px; margin-top: 44px; /* Vertical align of your score */ position: absolute; right: 209px; /* Horizontal align of your score */ width: 70px; z-index: 5; } |
|
Hahaido said: Ellyhm said: Oh okay, Thanks it works now! Last question, the scores on certain anime seems to overlap the anime title. Must I change the position of the score box to fix it? Play with this code: .td1[align="center"][width="45"], .td2[align="center"][width="45"] { color: gold !important; font-size: 40px; margin-top: 44px; /* Vertical align of your score */ position: absolute; right: 209px; /* Horizontal align of your score */ width: 70px; z-index: 5; } Oh okay! Everything's okay now. Thanks for your help!! |
| Is there any way improve the way mobile phones see a list? Is there a CSS hack that can be used only on mobile phones? No lists look good through the mobile phone views.. http://quirktools.com/screenfly/ |
| @Shishio-kun I was going to use this construction in my layout: @import url("…") screen, print, tv; /* for all*/ @import url("…") handheld; /* for phones */ |
|
VeriTi said: @Shishio-kun I was going to use this construction in my layout: @import url("…") screen, print, tv; /* for all*/ @import url("…") handheld; /* for phones */ You mean the import in the top link will be for computers and the bottom for phones? |
Shishio-kun said: VeriTi said: @Shishio-kun I was going to use this construction in my layout: @import url("…") screen, print, tv; /* for all*/ @import url("…") handheld; /* for phones */ You mean the import in the top link will be for computers and the bottom for phones? That would be nice, have a separate CSS for phones. I'll try some ideas with my X10 miniPro and my iPod. Now let the mobile list design contest begin!! hahaha. |
| @Shishio-kun Yes, first is for PCs and for printing page also. The second is for phones. It is also possible to use @media queries to apply different styles, say, for different screen resolutions. |
|
| Got something totally new here. I am trying to make a random import link through Dropbox, which would lead to (at the moment) two simple CSS import links, ones a red background and the others a blue background. The final goal is to have it so the import link on my MAL CSS takes me to one of the two random background colors. I have the Javascript on this page: https://dl-web.dropbox.com/get/Public/randomCSS.html?w=ee44ad09 The button takes you to one of the two CSS links. Any idea how I can make the path of the button or link my import link? Here's the code for the page: <script> <!-- /* Random link button- By JavaScript Kit (http://javascriptkit.com) Over 300+ free scripts! This credit MUST stay intact for use */ //specify random links below. You can have as many as you want var randomlinks=new Array() randomlinks[0]="http://dl.dropbox.com/u/78340470/red.css" randomlinks[1]="http://dl.dropbox.com/u/78340470/blue.css" function randomlink(){ window.location=randomlinks[Math.floor(Math.random()*randomlinks.length)] } //--> </script> <form> <p><input type="button" name="B1" value="Random Link >>" onclick="randomlink()"></p> </form> <a href="javascript:randomlink()">Random Link</a> --> |
Shishio-kunNov 18, 2012 12:58 PM
| Can someone take a look at my list and tell me what's wrong with my menu? :o3 |
 |
AngelicXI said: Can someone take a look at my list and tell me what's wrong with my menu? :o3 You have all your buttons under '.status_not_selected a, .status_selected a' (which is by default) and its set to 'position: absolute'. You just need to individually code set their position with left/right codes etc, or just set it to relative instead of absolute. |
| @Shishio-kun This is impossible to do in javascript. You need a langage like PHP to do that, but PHP won't work on dropbox, so you would need to find a host supporting PHP. Then here is a solution that would work: Host 2 files, list.txt, containing the list of CSS files to switch between: And randomCSS.php: <?php header('Content-type: text/css'); $list = file('list.txt', FILE_IGNORE_NEW_LINES + FILE_SKIP_EMPTY_LINES); echo '@import url(' . $list[array_rand($list, 1)] . ');'; ?> Then all you need to do is import randomCSS.php |
u531355Nov 18, 2012 2:47 PM
Shishio-kun said: AngelicXI said: Can someone take a look at my list and tell me what's wrong with my menu? :o3 You have all your buttons under '.status_not_selected a, .status_selected a' (which is by default) and its set to 'position: absolute'. You just need to individually code set their position with left/right codes etc, or just set it to relative instead of absolute. Let's try and see what comes out of it. |
|
u531355 said: @Shishio-kun This is impossible to do in javascript. You need a langage like PHP to do that, but PHP won't work on dropbox, so you would need to find a host supporting PHP. Then here is a solution that would work: Host 2 files, list.txt, containing the list of CSS files to switch between: And randomCSS.php: <?php header("Content-type: text/css"); $list = file('list.txt'); echo "@import url(" . $list[array_rand($list, 1)] . ");"; ?> Then all you need to do is import randomCSS.php Confusing @_@ Lemme try... |
|
u531355 said: @Shishio-kun This is impossible to do in javascript. You need a langage like PHP to do that, but PHP won't work on dropbox, so you would need to find a host supporting PHP. Then here is a solution that would work: Host 2 files, list.txt, containing the list of CSS files to switch between: And randomCSS.php: <?php header('Content-type: text/css'); $list = file('list.txt'); echo '@import url(' . $list[array_rand($list, 1)] . ');'; ?> Then all you need to do is import randomCSS.php Wow dude thank you so much! I'm using 000webhost right now so I'll set up what you told me and hopefully get this random import going! |
| Ack,dammit.I'm giving up. =_= |
|
u531355 said: @Shishio-kun This is impossible to do in javascript. You need a langage like PHP to do that, but PHP won't work on dropbox, so you would need to find a host supporting PHP. Then here is a solution that would work: Host 2 files, list.txt, containing the list of CSS files to switch between: And randomCSS.php: <?php header('Content-type: text/css'); $list = file('list.txt', FILE_IGNORE_NEW_LINES + FILE_SKIP_EMPTY_LINES); echo '@import url(' . $list[array_rand($list, 1)] . ');'; ?> Then all you need to do is import randomCSS.php THANK YOU, IT WORKED!  This is amazing! I can host random CSS import to my list, and get changing layout. I have an idea for a really simple but unique list design having a random "recommendation" or character review on each list page and on refresh. I'll be sure to put your name in the copyright credits too. |
| You guys make me want to murder my IT teacher....hahaha. |
|
AngelicXI said: You guys make me want to murder my IT teacher....hahaha. Well heres how you can do it, basically: open free subdomain on 000webhost.com make Notepad on computer with the import layouts you want to be randomized listed on it, named list.text, upload this file to the site make a new page for the site (php script) and it will be u's php script he posted, heres mine: http://randomcss.site90.com/random%20script then put an import link with a link to the PHP script page in your CSS, mine is: @import "http://randomcss.site90.com/randomcss.php"; |
Shishio-kun said: make Notepad on computer with the import layouts you want to be randomized listed on ^ this,mainly the bold part,is where I am screwing up.I'm good at designing basic profile layouts and other graphics (I am a GFX'er,thank you very much!) but this current layout that I have problems with is my second attempt at re-making a list after someone else's.Mainly,one submitted here recently by Hahaido-san. When I was editing it in the browser (with firebug),it shown up like this,but then bundled up together. As for rewriting it in two separate layouts,I frankly have no idea how. ^^' /I'm a noob.Lol. |
|
| Here is a new version for randomCSS.php <?php header('Content-type: text/css'); $list = file($_GET['list'], FILE_IGNORE_NEW_LINES + FILE_SKIP_EMPTY_LINES); echo '@import url(' . $list[array_rand($list, 1)] . ');'; ?> Then use @import url(http://randomcss.site90.com/randomcss.php?list=link.to.your.own.list.txt); and everyone can use your php file with his own list on his own dropbox |
u531355 said: Here is a new version for randomCSS.php <?php header('Content-type: text/css'); $list = file($_GET['list'], FILE_IGNORE_NEW_LINES + FILE_SKIP_EMPTY_LINES); echo '@import url(' . $list[array_rand($list, 1)] . ');'; ?> Then use @import url(http://randomcss.site90.com/randomcss.php?list=link.to.your.own.list.txt); and everyone can use your php file with his own list on his own dropbox AH ok, now I get how this works for other people lol. Thanks. It will make a useful expert level tutorial for people who want random CSS and know how to use imports already. The tricks just don't stop! |
| Didn't you used to be able to click tags on your list and it filter out only animes with that tag on it? It seems this doesn't work now. |
Shishio-kun said: Didn't you used to be able to click tags on your list and it filter out only animes with that tag on it? It seems this doesn't work now. Perhaps the hacker attack gave MAL a bigger malfunction than we expected? o.o |
|
Shishio-kun said: Didn't you used to be able to click tags on your list and it filter out only animes with that tag on it? It seems this doesn't work now. As long as I remember, it never worked |
| Does anyone know how to link a user to the comments on the front page of a club? Not 'all comments', going straight to the comment box on the front page. This was a useful way to go right to the discussion section on the same page. I thought used to be http://myanimelist.net/clubs.php?cid=19736#lastcomment or something like that but I can't find it anymore. Maybe its been disabled as well... u531355 said: Shishio-kun said: Didn't you used to be able to click tags on your list and it filter out only animes with that tag on it? It seems this doesn't work now. As long as I remember, it never worked Really? Damn. It will probably never be fixed then. Unfortunate, cuz I had a very good way to filter out lists with CSS using it. |
| Well ... just wanted to ask something. Does anyone know how to make these kinds of borders for the images ?? Sample bellow. |
Asilva said: Well ... just wanted to ask something. Does anyone know how to make these kinds of borders for the images ?? Sample bellow. Looks like they were custom made for those images specifically. Both modeled after the Thousand Sunny. You could probably make something like this using various pictures/screenshots and cutting out the parts you want and piecing them together to make the border, which requires some photoshop skill. Or the best way is to make them yourself via drawing, coloring, and making it pretty, but that is also the hardest. Usually a familiar and recognizable pattern is suitable for a border. Something That stands out and frames the central image well. Like the gold around Sunnys lion head, using One Piece as an example. Another example I found : http://fc00.deviantart.net/fs70/f/2010/117/6/1/Monkey_D_Luffy_by_AlexXTM.swf I thought this was a pretty cool border. Doesn't need to be a swf though, lol. I hope this helps |
| http://myanimelist.net/animelist/Shishio-kun&show=0&order=4 Is there a way to add space in between content and the same selectors :after content? For example, go to Monster (#4 via the link) on my list, after the tag description (which is clickable) there's a short review thats the :after content (not clickable). I'd like to have the after content with a space separating it from the tag description. |
Shishio-kunNov 29, 2012 10:33 PM
Shishio-kun said: http://myanimelist.net/animelist/Shishio-kun&show=0&order=4 Is there a way to add space in between content and the same selectors :after content? For example, go to Monster (#4 via the link) on my list, after the tag description (which is clickable) there's a short review thats the :after content (not clickable). I'd like to have the after content with a space separating it from the tag description. td[class^="td"] span[id^="tagLinks"]:after { display: block; margin-top: 10px; } |
u531355 said: Shishio-kun said: http://myanimelist.net/animelist/Shishio-kun&show=0&order=4 Is there a way to add space in between content and the same selectors :after content? For example, go to Monster (#4 via the link) on my list, after the tag description (which is clickable) there's a short review thats the :after content (not clickable). I'd like to have the after content with a space separating it from the tag description. td[class^="td"] span[id^="tagLinks"]:after { display: block; margin-top: 10px; } Ah thanks that did the trick! |
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Sep 13, 10:56 AM |
|
» 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 |