Forum Settings
Forums
Top
  >  
Forum
  >  
Support
  >  
How do I make the images in my...
RecentWatchedIgnoredSearch Forum

How do I make the images in my list smaller?

New
Mar 15, 2023 9:37 AM
#1
Minasahi
Offline
Oct 2019
9
I just started using the modern Night Shift on my Anime List and I think the design looks great, but I have a problem with the size of the images and boxes. I think they are too big and I really want them to be smaller. Smaller so that it can fit 3-4 boxes in one line. 

When you choose an modern design you also see preview images and on the image of Night Shift they are actually 3 anime in a row, so I am confused why I can't do that. 

I tried using the CCS but somehow that didn't work or I made a mistake. 

Please, can someone help me?
MinasahiMar 16, 2023 10:26 AM
Mar 15, 2023 11:07 AM
#2
Shishio-kun

Offline
Feb 2010
11294
Minasahi said:
I just started using the modern Night Shift on my Anime List and I think the design looks great, but I have a problem with the size of the images and boxes. I think they are too big and I really want them to be smaller. Smaller so that it can fit 3-4 boxes in one line. 

When you choose an modern design you also see preview images and on the image of Night Shift they are actually anime in a row, so I am confused why I can't do that. 

I tried using the CCS but somehow that didn't work or I made a mistake. 

Please, can someone help me?




For that particular layout, I think you could add this to your CSS edit box as it seems fine in preview to get the pics smaller and also five boxes per line. Moves and resizes some parts. The data image left/bottom let you move the preview pics around, .list-table tbody.list-item width controls the width of the boxes and therefore the number of boxes per line (less width = more boxes per line) and one of other the width codes controls the pic size

Third version seems closest to what you'd want, your screen is different from mine since I see 3 per line by default.




















                             .list-table .list-table-data .tags textarea {
    box-sizing: border-box;
    width: 60%;
    height: 30px;
}
            


.list-table tbody.list-item {
  background: var(--content-background);
  box-sizing: border-box;
  height: 250px;
  margin: 10px;
  overflow: hidden;
  padding-left: var(--width-img);
  position: relative;
  width: 370px;
}

.data.image {
    bottom: 118px;
left: 20px}
    
.data.image a {
  height: 34%;
  position: relative;
  top: 190px;
  width: 70%;
}

.list-block {
    --width-img:150px;
}
.list-table tbody.list-item::before {
  content: "";}

.add-edit-more {
  left: 17px;}

.icon-watch2 .malicon.malicon-streaming {
  margin-left: -207px !important;
}


.list-table tbody.list-item {
  height: 250px;}

.list-table .list-table-data .data.score .link {
  font-size: 1.1em;
  font-weight: bold;
  margin-left: 80px;
}


.data.status {
  right: 220px;}
Shishio-kunMar 15, 2023 12:53 PM
Mar 15, 2023 12:58 PM
#3
KyoyaTempest

Offline
Jan 2021
432
Shishio-kun said:
Minasahi said:
I just started using the modern Night Shift on my Anime List and I think the design looks great, but I have a problem with the size of the images and boxes. I think they are too big and I really want them to be smaller. Smaller so that it can fit 3-4 boxes in one line. 

When you choose an modern design you also see preview images and on the image of Night Shift they are actually anime in a row, so I am confused why I can't do that. 

I tried using the CCS but somehow that didn't work or I made a mistake. 

Please, can someone help me?




For that particular layout, I think you could add this to your CSS edit box as it seems fine in preview to get the pics smaller and also five boxes per line. Moves and resizes some parts. The data image left/bottom let you move the preview pics around, .list-table tbody.list-item width controls the width of the boxes and therefore the number of boxes per line (less width = more boxes per line) and one of other the width codes controls the pic size

Third version seems closest to what you'd want, your screen is different from mine since I see 3 per line by default.




















                             .list-table .list-table-data .tags textarea {
    box-sizing: border-box;
    width: 60%;
    height: 30px;
}
            


.list-table tbody.list-item {
  background: var(--content-background);
  box-sizing: border-box;
  height: 250px;
  margin: 10px;
  overflow: hidden;
  padding-left: var(--width-img);
  position: relative;
  width: 370px;
}

.data.image {
    bottom: 118px;
left: 20px}
    
.data.image a {
  height: 34%;
  position: relative;
  top: 190px;
  width: 70%;
}

.list-block {
    --width-img:150px;
}
.list-table tbody.list-item::before {
  content: "";}

.add-edit-more {
  left: 17px;}

.icon-watch2 .malicon.malicon-streaming {
  margin-left: -207px !important;
}


.list-table tbody.list-item {
  height: 250px;}

.list-table .list-table-data .data.score .link {
  font-size: 1.1em;
  font-weight: bold;
  margin-left: 80px;
}


.data.status {
  right: 220px;}


Hi, Shishio-kun! I'm using that theme too, the CSS you wrote made it better. Thanks. Arigatou gozaimasu.
Roxy

Mar 16, 2023 11:25 AM
#4
Minasahi
Offline
Oct 2019
9
Minasahi said:

Shishio-kun said:

For that particular layout, I think you could add this to your CSS edit box as it seems fine in preview to get the pics smaller and also five boxes per line. Moves and resizes some parts. The data image left/bottom let you move the preview pics around, .list-table tbody.list-item width controls the width of the boxes and therefore the number of boxes per line (less width = more boxes per line) and one of other the width codes controls the pic size
Third version seems closest to what you'd want, your screen is different from mine since I see 3 per line by default.






                            .list-table .list-table-data .tags textarea {
    box-sizing: border-box;
    width: 60%;
    height: 30px;
}
            
.list-table tbody.list-item {
  background: var(--content-background);
  box-sizing: border-box;
  height: 250px;
  margin: 10px;
  overflow: hidden;
  padding-left: var(--width-img);
  position: relative;
  width: 370px;
}
.data.image {
    bottom: 118px;
left: 20px}
    
.data.image a {
  height: 34%;
  position: relative;
  top: 190px;
  width: 70%;
}
.list-block {
    --width-img:150px;
}
.list-table tbody.list-item::before {
  content: "";}
.add-edit-more {
  left: 17px;}
.icon-watch2 .malicon.malicon-streaming {
  margin-left: -207px !important;
}
.list-table tbody.list-item {
  height: 250px;}
.list-table .list-table-data .data.score .link {
  font-size: 1.1em;
  font-weight: bold;
  margin-left: 80px;
}
.data.status {
  right: 220px;}

Thank you. I used the CCS of the second pic, because that's exactly like I want it, but now unfortunately I have a different problem. 

Now when I change the width so that it fits 5 boxes (200px) the whole box is squeezed so you can't read the title and the things that are written on the right side. 

I would want to show it with a screenshot but I don't know how to do that, so I hope you know what I mean. I don't know what to do @-@
MinasahiMar 16, 2023 11:35 AM
Mar 16, 2023 11:46 AM
#5
Shishio-kun

Offline
Feb 2010
11294
@Minasahi

I don't know what device you're on but you could google how to screenshot on your device and then paste it to Imgur

This may help, there's not a lot of room for what you want to do, you could also try to zoom the screen in or out. 

.list-table tbody.list-item {
  background: var(--content-background);
  box-sizing: border-box;
  height: 250px;
  margin: 10px;
  overflow: hidden;
  padding-left: var(--width-img);
  position: relative;
  width: 200px;
}

.data.image {
    bottom: 105px;
left: 10px}
    
.data.image a {
  height: 14%;
  position: relative;
  top: 190px;
  width: 80%;
}

.list-block {
    --width-img:80px;
}
.list-table tbody.list-item::before {
  content: "";}

.add-edit-more {
  left:5px;}

.icon-watch2 .malicon.malicon-streaming {
  margin-left: -327px !important;
}


.list-table tbody.list-item {
  height: 316px;}
            
.data.score a::before {
  margin-left: -34px;
}

.data.title .link {
  box-sizing: border-box;
  display: -webkit-box;
  font-size: 12px !important;
  height: var(--height-top-section);
  line-height: 1.06em;
  order: 1;
  overflow: hidden;
  padding: 5px !important;
  position: absolute;
  left: 0;
  text-shadow: 0px 0px 5px black;
  top: 0;
  width: var(--width-text-section);
  z-index: 1;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  text-align: left;
}
Mar 16, 2023 11:47 AM
#6
Shishio-kun

Offline
Feb 2010
11294
@KyoyaTempest awesome, thanks for letting me know 🙏
Mar 16, 2023 11:56 AM
#7
Minasahi
Offline
Oct 2019
9
Shishio-kun said:
@Minasahi

I don't know what device you're on but you could google how to screenshot on your device and then paste it to Imgur

This may help, there's not a lot of room for what you want to do, you could also try to zoom the screen in or out. 

.list-table tbody.list-item {
  background: var(--content-background);
  box-sizing: border-box;
  height: 250px;
  margin: 10px;
  overflow: hidden;
  padding-left: var(--width-img);
  position: relative;
  width: 200px;
}

.data.image {
    bottom: 105px;
left: 10px}
    
.data.image a {
  height: 14%;
  position: relative;
  top: 190px;
  width: 80%;
}

.list-block {
    --width-img:80px;
}
.list-table tbody.list-item::before {
  content: "";}

.add-edit-more {
  left:5px;}

.icon-watch2 .malicon.malicon-streaming {
  margin-left: -327px !important;
}


.list-table tbody.list-item {
  height: 316px;}
            
.data.score a::before {
  margin-left: -34px;
}

.data.title .link {
  box-sizing: border-box;
  display: -webkit-box;
  font-size: 12px !important;
  height: var(--height-top-section);
  line-height: 1.06em;
  order: 1;
  overflow: hidden;
  padding: 5px !important;
  position: absolute;
  left: 0;
  text-shadow: 0px 0px 5px black;
  top: 0;
  width: var(--width-text-section);
  z-index: 1;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  text-align: left;
}

I'm on my laptop. I tried Imgur but it always says that they are out of capacity or something like that. 

It didn't help that much, now the picture is really small and the box form looks like a vertical rectangle. 

But still thank you. I really appreciate that you tried to help me
Mar 16, 2023 12:15 PM
#8
Shishio-kun

Offline
Feb 2010
11294
Minasahi said:
Shishio-kun said:
@Minasahi

I don't know what device you're on but you could google how to screenshot on your device and then paste it to Imgur

This may help, there's not a lot of room for what you want to do, you could also try to zoom the screen in or out. 

.list-table tbody.list-item {
  background: var(--content-background);
  box-sizing: border-box;
  height: 250px;
  margin: 10px;
  overflow: hidden;
  padding-left: var(--width-img);
  position: relative;
  width: 200px;
}

.data.image {
    bottom: 105px;
left: 10px}
    
.data.image a {
  height: 14%;
  position: relative;
  top: 190px;
  width: 80%;
}

.list-block {
    --width-img:80px;
}
.list-table tbody.list-item::before {
  content: "";}

.add-edit-more {
  left:5px;}

.icon-watch2 .malicon.malicon-streaming {
  margin-left: -327px !important;
}


.list-table tbody.list-item {
  height: 316px;}
            
.data.score a::before {
  margin-left: -34px;
}

.data.title .link {
  box-sizing: border-box;
  display: -webkit-box;
  font-size: 12px !important;
  height: var(--height-top-section);
  line-height: 1.06em;
  order: 1;
  overflow: hidden;
  padding: 5px !important;
  position: absolute;
  left: 0;
  text-shadow: 0px 0px 5px black;
  top: 0;
  width: var(--width-text-section);
  z-index: 1;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  text-align: left;
}

I'm on my laptop. I tried Imgur but it always says that they are out of capacity or something like that. 

It didn't help that much, now the picture is really small and the box form looks like a vertical rectangle. 

But still thank you. I really appreciate that you tried to help me


Screenshot button is "print screen" on most laptops, paste into an image editor or printscreen + windows key for a saved screenshot

Well you're trying to fit 5 anime pics to a row on a medium screen and have all this info out, so sounds like you'd need to have the text under the pics in order to have bigger pics + the same text. If you can take a screenshot and then edit it to point out where you want everything, that would be helpful and I could look into it later. I'd like to know exactly how you want it before editing it some more

Postimage is another site to upload images to
https://postimages.org/

You can edit images online with these:

Online Image Editor
https://www.online-image-editor.com/

Lunapic (online image editor)
https://www.lunapic.com/


Or maybe you could try another layout altogether that fits what you want better?
https://myanimelist.net/forum/?topicid=2077861
Mar 16, 2023 1:03 PM
#9
Minasahi
Offline
Oct 2019
9
Shishio-kun said:
Minasahi said:
I'm on my laptop. I tried Imgur but it always says that they are out of capacity or something like that. 

It didn't help that much, now the picture is really small and the box form looks like a vertical rectangle. 

But still thank you. I really appreciate that you tried to help me


Screenshot button is "print screen" on most laptops, paste into an image editor or printscreen + windows key for a saved screenshot

Well you're trying to fit 5 anime pics to a row on a medium screen and have all this info out, so sounds like you'd need to have the text under the pics in order to have bigger pics + the same text. If you can take a screenshot and then edit it to point out where you want everything, that would be helpful and I could look into it later. I'd like to know exactly how you want it before editing it some more

Postimage is another site to upload images to
https://postimages.org/

You can edit images online with these:

Online Image Editor
https://www.online-image-editor.com/

Lunapic (online image editor)
https://www.lunapic.com/


Or maybe you could try another layout altogether that fits what you want better?
https://myanimelist.net/forum/?topicid=2077861
It's fine. I think my screen might be just too small because 3 boxes are no problem^^

Thank you for helping me, I think I can do it now :)
Mar 16, 2023 2:28 PM
#10
Shishio-kun

Offline
Feb 2010
11294
@Minasahi nice! 🙏😁

There's also learning to use Inspect Element in Firefox, this can edit the layout quite easily and it's what everyone uses:
https://myanimelist.net/forum/?topicid=2077862#msg68651728
See All Discussions

More topics from this board

Sticky: » Inactive Username Request Thread ( 1 2 3 4 5 ... Last Page )

Kineta - Sep 21, 2015

3372 by GARFIELDD666 »»
2 hours ago

» I can't use forums using Windows High Contrast anymore

vasipi4946 - 3 hours ago

0 by vasipi4946 »»
3 hours ago

» [Reported] Username being auto-pasted into search bar

DariTheWeeb - Feb 19

49 by DeadPiles »»
6 hours ago

» IP ban glitch?

AverageRiceFan - Apr 21

2 by hich4n_ »»
11 hours ago

» ishinashi has 300 alt accounts and counting ( 1 2 3 )

deg - Jun 16, 2023

127 by Spunkert »»
Today, 6:05 AM

MoreTop Anime

  1. 1 Sousou no Frieren
  2. 2 Fullmetal Alchemist: Brotherhood
  3. 3 Steins;Gate
  4. 4 Gintama°
  5. 5 Shingeki no Kyojin Season 3 Part 2

MoreTop Airing Anime

  1. 1 One Piece
  2. 2 Hibike! Euphonium 3
  3. 3 Kono Subarashii Sekai ni Shukufuku wo! 3
  4. 4 Yuru Camp△ Season 3
  5. 5 Haikyuu!! Movie: Gomisuteba no Kessen

MoreMost Popular Characters

  1. 1 Lamperouge, Lelouch
  2. 2 Levi
  3. 3 Monkey D., Luffy
  4. 4 Lawliet, L
  5. 5 Roronoa, Zoro
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login