This is a custom layout for modern template lists. If you don't know how to install the codes, click here to view the Beginner's Tutorial. If there are problems: install the latest version, or check the Repair Thread for patches and updates (found here). All premade modern layouts can be found in the gallery by clicking here, and more ways to customize your list can be found here. A beautiful layout donated by Frajer_9! The original supports score, type, progress and tags. I've made a modified version if you want to use more list settings (as shown in the second preview). Both show large preview pics when you point to a row as in the second preview. Original version  Modified version  The modified version supports more settings. Edit and more will appear when you point to a row.   Source Code Original: https://xss.now.cc/forum/?topicid=393503&show=350#msg62388081 Modified: https://pastebin.com/raw/eHAWcAbF After you paste the code to your CSS edit box, you should change "SpaceCowboy" and "DateYukata" in the first two imports to your username. This provides personalized HD preview pics which are more reliable than the defaults. Your list(s) will also load significantly faster this way. However, lists set to private and friends-only can't use personalized preview pics and shouldn't edit them. Add snow or sparkles This layout looks great with animated effects! https://xss.now.cc/forum/?topicid=1911907 https://xss.now.cc/forum/?topicid=1911957 Here is a light snow effect you can add.
/* FALLING SNOW */
.list-container:after {
position: fixed;
left: 0;
top: 0;
content: '';
width: 100%;
height: 100%;
background-image: url(),
url(https://i.imgur.com/3d7VHiA.png),
url(https://i.imgur.com/s0pY1pb.png);
animation: SNOW 20s linear infinite;
z-index: 10000;
pointer-events: none !important;
}
@keyframes SNOW {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: 500px 1000px, 400px 400px, 300px 300px; }
}
|
Shishio-kunFeb 21, 2023 1:05 PM
 |
| Just a personal critique on the design, I feel like having too much info on the left near the title makes the list as a whole a lot less readable. It stops you from being able to simply scan the list to find an entry you're looking for. Otherwise this is great. might just be because I have a bias towards minimalist layouts. |
Rattbag said: Just a personal critique on the design, I feel like having too much info on the left near the title makes the list as a whole a lot less readable. It stops you from being able to simply scan the list to find an entry you're looking for. Otherwise this is great. might just be because I have a bias towards minimalist layouts. That's my fault, but I thought so too, so after reading your comment I decided to rearrange the text and update the code. I think it looks a lot better this way (edit and more appear when you point to a row for convenience and cleanliness). |
|
Shishio-kun said: looks like you have mastered HTML and codingRattbag said: Just a personal critique on the design, I feel like having too much info on the left near the title makes the list as a whole a lot less readable. It stops you from being able to simply scan the list to find an entry you're looking for. Otherwise this is great. might just be because I have a bias towards minimalist layouts. That's my fault, but I thought so too, so after reading your comment I decided to rearrange the text and update the code. I think it looks a lot better this way (edit and more appear when you point to a row for convenience and cleanliness). thank you i used your help along with some other customisation to create a superb anime page layout |
 |
VELVET_BLUES said: Shishio-kun said: looks like you have mastered HTML and codingThat's my fault, but I thought so too, so after reading your comment I decided to rearrange the text and update the code. I think it looks a lot better this way (edit and more appear when you point to a row for convenience and cleanliness). thank you i used your help along with some other customisation to create a superb anime page layout Thanks, I mapped everything out for the list here so I've been using this a lot to change layouts and it will work for you too https://xss.now.cc/forum/?topicid=1929120 |
|
| @VELVET_BLUES Also your layout looks wonderful, and you can remove the watermark circled from your render quick and easy with Lunapic's eraser tool https://www10.lunapic.com/editor/?action=eraser  |
|
Shishio-kun said: thanks!!!@VELVET_BLUES Also your layout looks wonderful, and you can remove the watermark circled from your render quick and easy with Lunapic's eraser tool https://www10.lunapic.com/editor/?action=eraser |
|
Shishio-kun said: now i can make as many renders as i want!!@VELVET_BLUES Also your layout looks wonderful, and you can remove the watermark circled from your render quick and easy with Lunapic's eraser tool https://www10.lunapic.com/editor/?action=eraser |
|
VELVET_BLUES said: Shishio-kun said: now i can make as many renders as i want!!@VELVET_BLUES Also your layout looks wonderful, and you can remove the watermark circled from your render quick and easy with Lunapic's eraser tool https://www10.lunapic.com/editor/?action=eraser Awesome! :D And here's another tip for renders, if you take a non-rendered pic, like this  This site can often render it. Even works on people in photos! https://photoscissors.com/  And if the render they give you is low quality or too small, you can run it thru Waifu2x to make it HUGE and remove noise (fuzziness) https://waifu2x.booru.pics/  If you notice the edges are too jagged, that might not show up on many backgrounds, but the edges can be blurred with Photoshop, Photopea, or maybe Lunapic if there's a blur tool. |
Shishio-kunJun 27, 2021 4:04 PM
|
Child-Of-God said: Hi so i'm using this and it has like 5 grey boxes stacked on each other on every anime slide. How can this be fixed I think you're using the original version which iirc wasn't made for the same list settings you have, its made for the list settings in the preview pic so you'd have to use those same settings https://xss.now.cc/editprofile.php?go=listpreferences Or you can use the modified version instead since it can use more list columns Otherwise you'd have to use Inspect Element to move everything around and recode it Don't post the same question three times here in different places, once is fine, see club rules |
Shishio-kunApr 9, 2022 12:32 PM
|
| Hi. I love your theme. There is one issue though. When I hover over a title the image will show up at the bottom and be cut off a little bit. How would I go about fixing that? I'm not too savvy when it comes to css but I would also like to show the images right next to the titles. Would that be too hard to implement? Thanks. Edit: to better illustrate  |
 |
| As of 10/20 I can not get this to work at all in my profile =/ Replacing the background img is just leaving the whole background white. Also the header is bugging out. |
  |
Gigarit said: As of 10/20 I can not get this to work at all in my profile =/ Replacing the background img is just leaving the whole background white. Also the header is bugging out. Seems fine to me when I tried it. You have to post the problem code or leave it on your list for me to tell you what's wrong |
Shishio-kunOct 20, 2022 9:27 PM
|
| @vickydont Your post didn't go through correctly If you post images directly into the comment box, it doesn't work |
Shishio-kunApr 17, 2023 4:48 PM
|
Bloomedwengts said: Hi. I love your theme. There is one issue though. When I hover over a title the image will show up at the bottom and be cut off a little bit. How would I go about fixing that? I'm not too savvy when it comes to css but I would also like to show the images right next to the titles. Would that be too hard to implement? Thanks. Edit: to better illustrate This is a year late but It's been done before, so for this one I'm guessing you'd need to switch fixed with relative positioning for the codes that control the position of the big covers, which looks to be controlled by this code. Then you'd adjust the top and left amounts probably to 0 for top and like 100px for left /* COVER POSITION */ .data.image a:after{ position: fixed; top: 550px; left: 320px; } |
|
More topics from this board
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
133 |
by Shishio-kun
»»
Dec 2, 10:24 AM |
|
» ⭐Ready to be amazed? View the Bunkasai graphic and list design contest (VOTE YOUR FAVES!)Shishio-kun - Nov 22 |
3 |
by Shishio-kun
»»
Nov 28, 9:02 PM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
65 |
by F124N
»»
Nov 11, 1:31 AM |
|
» ✳️[9-7-24] New even higher quality Cover Imports! + Fixes for Takana Grids and moreShishio-kun - Sep 7, 2024 |
37 |
by Shishio-kun
»»
Oct 30, 4:42 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
388 |
by Shishio-kun
»»
Oct 14, 1:27 PM |