Making icons always stay in the center

[enderboy]

Hi, this is probably the wrong board but how do I keep the icons in the center instead of the top like this, can it be done with a plug-in?

[Nscalerr]

Hi enderboy

Don't think you need a plugin for this to be done. The following bit of code placed at the bottom of the style sheet should have the desired affect. Only caveat is that is may affect the entire forum and not just the home page.

/* Vertical align board icons. */
.board .icon {
   vertical-align: middle;
}

Let me know if there is any problems.


Knowning my luck, Chris may have a better way of doing it than me.

[enderboy]

Jul 17, 2024 2:33:26 GMT -8 Nscalerr said:

Hi enderboy

Don't think you need a plugin for this to be done. The following bit of code placed at the bottom of the style sheet should have the desired affect. Only caveat is that is may affect the entire forum and not just the home page.

/* Vertical align board icons. */
.board .icon {
   vertical-align: middle;
}

Let me know if there is any problems.


Knowning my luck, Chris may have a better way of doing it than me.

It just doesn’t work

[Chris]

Jul 17, 2024 8:33:11 GMT -8 enderboy said:

It just doesn’t work

You should include the forum URL with your issue so that the theme's HTML structure and the hundreds of other CSS stylings present on that forum can be evaluated to see what would work for your particular forum. Applying a size six solution to a forum with a size ten footprint probably won't work.

Remember that guests viewing your forum can be limited by what they can see, so view your forum as a guest to ensure the problem is still present and viewable. Then, copy the link that adequately showcases the issue so somebody who has never seen your forum before does not waste time searching for an area where they can view the issue. Seeing the issue and evaluating all the related factors is always the first step to constructing a proper solution.

Doing this generally leads to a quicker resolution to your problem.

Edit:

---

There was a forum URL of aerorevived.boards.net on that screenshot that I missed at the the thumbnail size, and it looks like that forum is using the CSS posted in this topic. The CSS in that topic forces the "table-row" to become a flexbox, and its cells are automatically treated as block elements, which would be why "vertical-align:middle;" is ineffective. If you want the cells to be center aligned, you would add it to the CSS from that topic like so

.container.boards .list {
   display:grid;
   > :where(thead,tbody) > tr{
       display:flex;
       > :where(th,td){
           align-content:center;
           &:nth-of-type(3){order:1; border-width:0 1px 1px;}
           &:nth-of-type(4){order:1}
       }
   }
}

[enderboy]

Jul 17, 2024 10:05:10 GMT -8 Chris said:

Jul 17, 2024 8:33:11 GMT -8 enderboy said:

It just doesn’t work

You should include the forum URL with your issue so that the theme's HTML structure and the hundreds of other CSS stylings present on that forum can be evaluated to see what would work for your particular forum. Applying a size six solution to a forum with a size ten footprint probably won't work.

Remember that guests viewing your forum can be limited by what they can see, so view your forum as a guest to ensure the problem is still present and viewable. Then, copy the link that adequately showcases the issue so somebody who has never seen your forum before does not waste time searching for an area where they can view the issue. Seeing the issue and evaluating all the related factors is always the first step to constructing a proper solution.

Doing this generally leads to a quicker resolution to your problem.

Edit:

---

There was a forum URL of aerorevived.boards.net on that screenshot that I missed at the the thumbnail size, and it looks like that forum is using the CSS posted in this topic. The CSS in that topic forces the "table-row" to become a flexbox, and its cells are automatically treated as block elements, which would be why "vertical-align:middle;" is ineffective. If you want the cells to be center aligned, you would add it to the CSS from that topic like so

.container.boards .list {
   display:grid;
   > :where(thead,tbody) > tr{
       display:flex;
       > :where(th,td){
           align-content:center;
           &:nth-of-type(3){order:1; border-width:0 1px 1px;}
           &:nth-of-type(4){order:1}
       }
   }
}

Thanks!