This topic is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 As you can see my tags (outlined in red) are stretching out the vertically stretching the list out.  But with this CSS trick, the tags have more room and don't stretch the list!  You can control the width of individual boxes and headers on your list, as I did there. But its trickier than controlling the width of the entire list. There's a few steps to doing it and I'll make it easy as I can. 1. Find the selector code to the part you want to make wider. Selector is like the heading code that controls a part of the layout. For example body is the selector for the main background. Your CSS doesn't have all possible selectors, you will probably have to add the one you want to your CSS edit box. Each of those little boxes and sections on your list has a selector for it, like the Tags row for example. Here are some highly requested selectors for the boxes and rows on your layout, including the Tags row! One of them might be the one you want. For example if all you're looking to do is increase the width of your tags row, then all you need is the first code. But if for some reason you need to adjust the Tags table header I provided it below it. I also provided the anime title row and header codes too. Note: The tag codes below are numbered assuming the tags row is the #6 column on your list. So if its not the sixth column on yours you need to change the number in parenthesis maybe 1 or 2 numbers lower then what it is (6). Same for the anime title codes. After installing the code see which row was increased and if its not the change the number and see if it affects the part you wanted. /* Tags Row Width */ .td1:nth-of-type(6), .td2:nth-of-type(6){ width: 200px; } /* Tags table Header width */ .table_header:nth-of-type(6) { width: 200px; } /* Animetitle's box width */ .td1:nth-of-type(2), .td2:nth-of-type(2){ width: 200px; } /* Animetitle table header width */ .table_header:nth-of-type(2) { width: 200px; } Step 2: Add the selector to the bottom of your CSS. Add a width code if it doesn't have one. Simply copy and paste that selector to the bottom of your CSS edit box. Add a width code if it doesn't have one already, btw the selectors post above already have a width code. Step 3: Adjust the width of the selector and your list. Now you can adjust the width of that row to your liking. After you're done save the changes with the blue button at the bottom and see if its to your liking on your list. If not, adjust again. You'll also probably need to adjust (most likely increase) the width of your entire list after making the change to row and box's width, you can use this tutorial for that: http://myanimelist.net/forum/?topicid=553645 |
Shishio-kunMar 6, 2019 3:49 PM
| ? You're using the Square layout. You don't even have the code from this topic in your list it seems. You don't even have the type of table this topics for. Your list doesn't have anything you're describing, it looks like it does in the original topic. If your problem is for Square layout, go post the problem there and describe it although there isn't a visible one anyways. |
| When I add the first code to make the tags bigger it doesn't change anything at all I used numbers 1~8. However the 2nd code works, but that's not the one I need. Also my "More" button is gone and idk why. Can you help? |
 |
nvtheplaymate said: "Shisho", would you mind showing me how I can increase the width of my tag box? http://prntscr.com/do4rc0 I tried changing the number in the parenthesis to 9 or 10 but still didn't work. :^( I think I have 8 or 9 columns in my row /* Tags Row Width */ .td1:nth-of-type(9), .td2:nth-of-type(9){ width: 2000px; } Willing to accept help from anyone!! Your tags are the 6th column on your list, so the default tags width code in the OP is for your list /* Tags Row Width */ .td1:nth-of-type(6), .td2:nth-of-type(6){ width: 600px; background-color: red; } Tried this on the bottom of your anime list CSS codes and it turns the box red and increases the width to 600, so just add and adjust it. |
| Hello ! I'd like to know how can I add the Tags row in this premade layout please ? Sankyu |
  |
KonoDioDakeda said: Hello ! I'd like to know how can I add the Tags row in this premade layout please ? Sankyu Remove td[class^="td"]:nth-of-type(6) {background-color: rgba(223,255,242,0.5) !important; text-align: justify; display: none; height: 122px; width: 217px; padding: 4px; position: fixed; bottom: 4px; right: 660px; z-index: 1; color: #005963;} td[class^="td"]:nth-of-type(6) a {color: #005963 !important;} td:nth-of-type(6) div a, .table_header:nth-of-type(6) {display: none !important; width: 0px !important; max-width: 0px !important; font-size: 0px !important;} tr:hover td[class^="td"]:nth-of-type(6) {display: block;} and td[class^="td"]:nth-of-type(1), .table_header:nth-of-type(1) {width: 30px !important; min-width: 30px !important;} td[class^="td"]:nth-of-type(2), .table_header:nth-of-type(2) {width: 430px !important; min-width: 430px !important;} td[class^="td"]:nth-of-type(3), .table_header:nth-of-type(3) {width: 45px !important; min-width: 45px !important;} td[class^="td"]:nth-of-type(4), .table_header:nth-of-type(4) {width: 50px !important; min-width: 50px !important;} td[class^="td"]:nth-of-type(5), .table_header:nth-of-type(5) {width: 70px !important; min-width: 70px !important;} Also add a bigger number after right: under #list_surround like 220px instead of 20px Finally, turn your tags row on under list settings if you haven't. |
| Worked fine, thank you !! |
|
More topics from this board
» β Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7813 |
by Guigolias
»»
4 hours ago |
|
» [CSS- MODERN] β Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
121 |
by Pokitaru
»»
Apr 21, 3:25 AM |
|
» [CSS-MODERN] Change list text/font colors on any list layoutShishio-kun - May 4, 2021 |
3 |
by hideso
»»
Apr 20, 4:33 PM |
|
» [CSS] [VIDEO GUIDE] βοΈ How to change fonts on a list layoutShishio-kun - Jul 15, 2019 |
17 |
by hideso
»»
Apr 20, 4:03 PM |
|
» [CSS][Modern] βοΈ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page )Cateinya - Aug 18, 2016 |
309 |
by hideso
»»
Apr 20, 3:56 PM |