This topic is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 These codes are designed to be used on any layout, just always add them to the bottom of your CSS. You can combine multiple codes together too (like add the border code then the opacity code to get borders and padding on your list). btw there is a tutorial on changing the color on your list or rows and opacity of that color (the opacity tutorial here customizes the entire list including text) here: http://myanimelist.net/forum/?topicid=440525 Adding borders Lets say you wanted to add borders to your list. Below I have the Shojo style layout: Now if I add borders to it, it looks like this: Just add these codes below in the spoiler button to add them to your list. Instructions to customize them are in the code. You can change the color and size of them! Horizontal lines only Get horizontal lines only across the list! Control the entire list's spacing This will let you control the entire list's spacing all around the words, known as padding. Increase the padding for more spacing. You can also change it to padding-top, padding-bottom, padding-right, or padding-left for padding on those individual sides. Boxed-in borders  Best for more classic styled mal layouts, but you can try it on others. |
Shishio-kunSep 1, 2016 9:15 PM
| How would you make the borders thinner, so that they are onley 1px at all sides? I only changed the color of the border in the code given here, but in places (like between the lines) the borders look like they're 2px wide, but the entire top bar looks fine (here). Is there away to make them thin like in the preset MAL styles, or here? |
  |
RulenneClarissa said: the borders look like they're 2px wide Well, there is a left border and a right one, of 1px each, the same goes for top and bottom, and on MAL presets there is only right and bottom ones set as 1px, others being zeroed. On the very first collumn [#] it is overrided by "style" attribute on td itself. This issue is result of using the same 1px for all elements at once. I can suggest following code, it may or may not work, just try: |
VeriTiJan 31, 2012 5:54 AM
 |
| Thanks those will work for her. And the borders codes helped me improve the main post, thanks! |
Shishio-kunFeb 1, 2012 9:19 AM
| How do you make the borders have round edges? :o |
 Click it. I dare you. |
everblue said: How do you make the borders have round edges? :o Good question, I should add that to this section, anyhow its border-radius: .td1, .td2 { border-radius: 15px; } I think if you add that to the bottom of your CSS code it will round all your boxes (just for an example). Think of 15px as the " amount of roundness" to your corners. You can play around with the code to see what other increases do and add it to other parts. Also you can affect multiple corners differently like: .td1, .td2 { border-radius: 25px 15px 45px 75px; } Add that to the bottom instead and you'll get a really wonky looking list, but it shows how different border radius amounts work. Plus border-radius is expanded on real well here but I don't plan to get this deep into it for this club: http://www.css3.info/preview/rounded-border/ |
| thank you ^^ but then how do you make the entire list have a round border? |
Click it. I dare you. |
everblue said: thank you ^^ but then how do you make the entire list have a round border? Depends where your list begins or ends. If it began on the table header, and ended on the category totals, you could round the top corner of the top left table header part and the top right of the last table header part and the bottom left and right of category totals. Its a little complicated that way tho. A lot of people just replace their table header with a rounded graphic, and one on their category totals too. |
| How do I add a box-shadow on each catagory table ?(if it's possible) I tried #list_surround but then also the gaps have shadows.. |
Flopsie said: How do I add a box-shadow on each catagory table ?(if it's possible) I tried #list_surround but then also the gaps have shadows.. Not sure what you mean to add box shadows too exactly but why don't you borrow the codes for the individual parts you want with this tutorial, then add box shadows to just them. I guess depending you can add box-shadow: none; or box-shadow: 0; to parts you want to remove unintended shadows from too. http://myanimelist.net/forum/?topicid=410909 |
Flopsie said: How do I add a box-shadow on each catagory table ?(if it's possible) I tried #list_surround but then also the gaps have shadows.. is not possible to surround each category, 'cause each category is not a single table with as many rows as animes has the category(it should be), each row is a single table. |
| How do I make my list have just horizontal lines and none of the vertical dividers? |
 |
clone4 said: How do I make my list have just horizontal lines and none of the vertical dividers? .td1, .td2, .table_header { border-color: white; border-style: solid; border-width: 0 0 1px !important; } td.table_header:nth-of-type(1) { border-right-width: 0 !important; } This will work, I'm adding it to the top post too! |
| @Shishio-kun Thank You! |
|
| When I tried doing the horizontal lines, for some reason, they didn't quite go all the way to the end, leaving a space on each end. Is there a way to fix it? Thanks! |
 |
| Hello, I tried to use the padding for my list but the code doesn't work for me for some reason. Does someone know what's the problem? The code's at the bottom. |
grvysxn said: yesHello! Is it possible to have graphic borders? I want my background to be able to shift around but I would like to make custom borders that look good with the theme I'm trying to create! Thank you for your help! http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image2 http://www.w3schools.com/cssref/css3_pr_border-image.asp |
         |
grvysxn said: http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-image2 Actually, one more thing. How would I add a custom border to that? I'm finding it a little troublesome to read the code. You will have to find/make an image according to the same template as the one in the example and replace the "border.png" part with it. |
|
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 |
7812 |
by mtsRhea
»»
Apr 21, 5:25 AM |
|
» [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 |