I'm not sure what's happening here, but I decided to try adding some pizazz to my site by adding some img tags to my board descriptions. They are all 150x200 sized png file, yet, all the images show up as different sizes. See the attached screenshots.
ImageDesc.png
ImageBoardDesc.png
I do believe that's because of the table you made.
You need to set the table to a specific width, which should solve the issue.
As it is now, the boards with longer text is causing it to use the most table space.
You can add width and/or height parameters to [img] tags.
[img width=300]https://domain.com/pics/cat.jpg[/img]
Okay, I'll try that. I was unaware I could use width tags with the table bbc.
So I tried using [img width=150] and it didn't do anything.
Tried using and I got all my pictures to display as the correct size, but there was (picture)
(description text), so it broke my table.
[/td][/tr][/table]
BelldandyExample.png
Why are you even putting the images into the description?
Use css to show them
Try with just the image, no tables, no format.
[img]link to image[/img]Description
And then add to your css
.board_description {
display: flex;
gap: 0.5em;
align-items: center;
}
.board_description img.bbc_img {
width: 50px;
height: 50px;
}
The align-items is optional.
Quote from: Kindred on January 27, 2023, 08:03:46 PMWhy are you even putting the images into the description?
Use css to show them
It's an idea I had when I
finally noticed that I can add BBC tags to descriptions and IMG was one of them. Besides, I don't really understand CSS.
Quote from: Diego Andrés on January 27, 2023, 09:07:03 PMTry with just the image, no tables, no format.
[img]link to image[/img]Description
And then add to your css
.board_description {
display: flex;
gap: 0.5em;
align-items: center;
}
.board_description img.bbc_img {
width: 50px;
height: 50px;
}
The align-items is optional.
I originally tried it without the table, but that didn't provide the look I wanted. I wanted the text to the right of the image, not just to start on the right and along the bottom of the image to wrap around.
I'll try the CSS suggestion tonight. Thank you!
(That would be in the index.css or custom.css?)
You could try one and if that doesn't work, remove it and try the other. ;)
Hey, could I make a suggestion? Would you mind having the pictures taking the position of the board icon bubbles instead of being within the description itself? It would look a bit "cleaner" in my opinion. I did something similar with our forum:
Meta_Forum.jpg
Quote from: Julius_2000 on January 28, 2023, 02:21:58 PMHey, could I make a suggestion? Would you mind having the pictures taking the position of the board icon bubbles instead of being within the description itself? It would look a bit "cleaner" in my opinion. I did something similar with our forum:
[url="https://www.simplemachines.org/community/index.php?action=dlattach;attach=285418;type=preview;file"]Meta_Forum.jpg[/url]
I would love to do that, but it's a lot of work, especially when there is software update, I'd have to redo it everytime. I tried a mod (but that was for 1.1, back in the day, that I liked a lot), but that isn't compatible for 2.1.x.
For now, I just added this to the Index.css file. Works pretty well. :)
.board_description {
display: flex;
gap: 0.5em;
align-items: top;
}
.board_description img.bbc_img {
width: 100px;
height: 100px;
}
FinishedCovers.png
In 2.1.x, it is purely css. Not a single code change
Quote from: Kindred on January 28, 2023, 06:32:54 PMIn 2.1.x, it is purely css. Not a single code change
I like that a lot! It makes things really easy. And doing the image in the description means I only need one image instead of two or three (New, not new, and Child board new).
FYI align-items: top is not a thing.
It would be start.
Quote from: Senkusha on January 28, 2023, 06:07:59 PMQuote from: Julius_2000 on January 28, 2023, 02:21:58 PMHey, could I make a suggestion? Would you mind having the pictures taking the position of the board icon bubbles instead of being within the description itself? It would look a bit "cleaner" in my opinion. I did something similar with our forum:
Meta_Forum.jpg (https://www.simplemachines.org/community/index.php?action=dlattach;attach=285418;type=preview;file)
I would love to do that, but it's a lot of work, especially when there is software update, I'd have to redo it everytime. I tried a mod (but that was for 1.1, back in the day, that I liked a lot), but that isn't compatible for 2.1.x.
Actually, it's not that complicated, made with purely CSS and should not be affected by updates.
They way I did it is:
I figured out the names of each board that SMF generates with my browser's Dev tool and then I assigned images with "content" to these boards and adjusted the elements' look to my needs.
For instance:
#board_1 .board_icon a {
content: url(../images/icons/Chems/Mouth.svg);
}For .board_icon a, I specified a width and set height to auto
.board_icon a {
display: inline-block;
width: calc(70px + (80 - 70) * (100vw - 721px) / (3840 - 721));
height: auto;
padding: 0 10px;
}For your images just make sure that they have the same aspect ratio (just crop them with an image processing tool) to make them equally proportioned. If not, you can also set the width/height individually for each
board_icon a of course. I just made svg images that all have the same size so I can use global dimensions. If your cropped images have as well the same size, you could do that, too, like in my example.
Since the board icons are actually a sprite with 4 images indicating whether there are new posts, replacing them with your own images would maybe require you to create some sort of indicator with CSS. SMF assignes a .board_on/ .board_off class to each board. I use a small orange dot and a short animation so it would catch anyone's attention.
indicator.png
So you could use that or a border or whatever as an indicator.
alternatively, you could set board_off and board_on2 to use a background or an overlay color in CSS instead of a whole separate image.
Quote from: Julius_2000 on January 28, 2023, 02:21:58 PMHey, could I make a suggestion? Would you mind having the pictures taking the position of the board icon bubbles instead of being within the description itself? It would look a bit "cleaner" in my opinion. I did something similar with our forum:
Meta_Forum.jpg (https://www.simplemachines.org/community/index.php?action=dlattach;attach=285418;type=preview;file)
Actually, it's not that complicated, made with purely CSS and should not be affected by updates.
They way I did it is:
I figured out the names of each board that SMF generates with my browser's Dev tool and then I assigned images with "content" to these boards and adjusted the elements' look to my needs.
For instance:
#board_1 .board_icon a {
content: url(../images/icons/Chems/Mouth.svg);
}
For .board_icon a, I specified a width and set height to auto
.board_icon a {
display: inline-block;
width: calc(70px + (80 - 70) * (100vw - 721px) / (3840 - 721));
height: auto;
padding: 0 10px;
}
For your images just make sure that they have the same aspect ratio (just crop them with an image processing tool) to make them equally proportioned. If not, you can also set the width/height individually for each board_icon a of course. I just made svg images that all have the same size so I can use global dimensions. If your cropped images have as well the same size, you could do that, too, like in my example.
Since the board icons are actually a sprite with 4 images indicating whether there are new posts, replacing them with your own images would maybe require you to create some sort of indicator with CSS. SMF assignes a .board_on/ .board_off class to each board. I use a small orange dot and a short animation so it would catch anyone's attention.
indicator.png (https://www.simplemachines.org/community/index.php?action=dlattach;attach=285435;type=preview;file)
So you could use that or a border or whatever as an indicator.
How would I put like a green border around a New topic, and a red border around a NoNew topic?
Sorry for the double post. But I just discovered this alignment issue. Where do I fix this at? I would want the text to be top-aligned.
Thank you!
InsideBoardDesc.png
.board_icon a.board_on {
border: 2px red solid;
}
.board_icon a.board_on2 {
border: 1px red solid;
}
.board_icon a.board_off {
border: 2px green solid;
}