.board_icon, .info, .board_stats, .lastpost Alignment

[Skhilled]

Looking at the link below, you can see that all of their sizes are different according to the borders:

https://skhilled.com/rc1/index.php?theme=4

I'm trying to make them look like the categories shown here with each centered vertically and appearing to be in its own separate block:

https://skhilled.com/smftest/index.php

I can make them all appear to be in a separate block but not all at the same height. For instance:

1.  .info with a description have a separate height while those that do not have a description have a totally different height. And, when I try to make any one of them a certain height that has a description, the other's will not be the same size.

2. Same goes for .boardstats, especially the "Redirects: 0". And if I change the height of the ".up_contain" it throws everything out of wack vertically.

How can I easily make them all the same height and edit , let's say .boardstats, and all of the rest will be the same?

Then I believe that all of the .boardstats should be lined up vertically on the page. Removing "flex-grow: 1;" solves this but then you'd still have to move the .boardstats to the left to line them up. I'm not sure why they were never originally lined up as they were in previous versions.

[Bigguy]

This is hard to explain for me but you might have to move some of the  .  around, lol.

.info
.boardstats.

Try combining them or adding them to other areas that do what you want in the css. I know...it sounds weird but how do you think I got the background behind the menu all one color. I had to combine one part of the css with another to make it work. I hope that explains what I was trying to explain.

[Skhilled]

I know what you mean. In the 2.1 version a lot of the css code seems to have been combined which makes it harder in some ways but easier in other ways. I'm just really getting into this and have learned a lot just by trying to port Jeff's themes to 2.1. Each of those in the title do have their own separate code and are not all grouped together. If you select the correct part you'll see it in dev as well as in index.css.

[live627]

Do you still need some help here?

[Skhilled]

Yes, please. Been trying for about 2 months to do this with very little luck. LOL

[live627]

2 months holy hell

[live627]

Find

Code Select Expand

.board_icon {
text-align: center;
padding: 8px 0 0 0;
width: 60px;
flex-shrink: 0;
}
.boardindex_table .board_icon {
width: 80px;
}
.boardindex_table .info {
width: calc(55% - 80px);
}
.boardindex_table .board_stats {
padding: 13px 10px 10px;
}
.boardindex_table .board_stats p {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.boardindex_table .board_stats:last-child p {
border-right: none;
}
.info {
overflow: hidden;
overflow-wrap: break-word;
padding: 5px 5px 5px 0;
flex-grow: 1;
}
.info .subject {
font-weight: 600;
font-size: 1.1em;
color: #a85400;
}
.board_stats {
width: 15%;
font-size: 0.9em;
margin: 0 0 0 auto;
text-align: center;
}
.lastpost {
width: 30%;
font-size: 0.9em;
padding-top: 3px;
}
.board_icon, .info, .board_stats, .lastpost {
display: inline-block;
align-self: center;
}
.main_container {
margin-bottom: 20px;
}
.up_contain {
overflow: hidden;
border: 1px solid #ddd;
margin: -1px 0 3px 0;
display: flex;
flex-wrap: wrap;
}
/* Child boards */
.children {
border-top: 1px solid #ddd;
padding: 5px;
width: 100%;
}
 Replace with

 

Code Select Expand

.board_icon {
justify-content: center;
width: 80px;
}
.info {
flex: 4;
overflow: hidden;
overflow-wrap: break-word;
}
.info .subject {
font-weight: 600;
font-size: 1.1em;
color: #a85400;
}
.board_stats {
font-size: 0.9em;
flex: 1;
justify-content: center;
}
.lastpost {
font-size: 0.9em;
flex: 2;
}
div[id^="board_"].up_contain > div {
background: #f1f3f5;
border: 1px solid #ddd;
margin: 1px;
padding: 6px 8px;
}
@media (min-width: 480px) {
.board_icon, .children, .board_stats, .lastpost {
align-items: center;
display: flex;
}
div[id^="board_"].up_contain {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
@media (max-width: 480px) {
div[id^="board_"].up_contain > div:not(.info) {
display: none;
}
.info {
width: unset !important;
}
}
.main_container {
margin-bottom: 20px;
}
.up_contain:not([id^="board_"]) {
overflow: hidden;
border: 1px solid #ddd;
margin: -1px 0 3px 0;
display: flex;
flex-wrap: wrap;
}
/* Child boards */
.children {
width: 100%;
}

Find

Code Select Expand

#topic_container .windowbg {
border: 1px solid #ddd;
border-top: none;
display: flex;
box-shadow: none;
border-radius: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
Replace with

Code Select Expand

#topic_container .windowbg {
border: 1px solid #ddd;
border-top: none;
display: flex;
box-shadow: none;
border-radius: 0;
padding: 0;
margin: 0;
overflow: hidden;
padding: 6px 8px;
}
#topic_container .board_icon, #topic_header .board_icon {
text-align: center;
padding: 8px 0 0 0;
width: 60px;
}

[lurkalot]

In the 2.1 version a lot of the css code seems to have been combined which makes it harder in some ways

Funny you should mention this.  It's put me right off messing with 2.1 themes if I'm honest. I wouldn't mind if the relevant parts were grouped together.  Say you just want to change the gradient on the very top bar, it changes other stuff like buttons, and the section just above the forum which I don't want it to.  Change the color of the news top right, and it changes colour of the text in the forum posts etc.

I was impressed when I first started playing, but now it just bugs the hell out me. It's a mare for the none coder again, which is a real shame imo. 

Yours truly frustrated. 

[Skhilled]

Funny you should mention this.  It's put me right off messing with 2.1 themes if I'm honest. I wouldn't mind if the relevant parts were grouped together.  Say you just want to change the gradient on the very top bar, it changes other stuff like buttons, and the section just above the forum which I don't want it to.  Change the color of the news top right, and it changes colour of the text in the forum posts etc.

I was impressed when I first started playing, but now it just bugs the hell out me. It's a mare for the none coder again, which is a real shame imo. 

Yours truly frustrated. 

Yes, it is frustrating but I've been finding my way through it...mostly. I also think if the web developer in the browsers were more accurate it would help a lot, too.

As far as the code that was given by live627 goes, it's great!!! 

At first, I wasn't sure about it because it didn't look as wanted it to. But after applying my code changes it worked great! The only problem is that I did something wrong while playing with it and screwed to the alignment of .info in the categories somehow. It was looking as it should but I've done something that messed it up and can't figure it out just yet.

https://skhilled.com/rc2/index.php

[lurkalot]

Yes, it is frustrating but I've been finding my way through it...mostly. I also think if the web developer in the browsers were more accurate it would help a lot, too.

Well as it happens I asked @SychO about the css stuff I was stuck on, and he very helpfully provided me with a mini masterclass with examples, that's now put me back on track.  There's a couple of bits of code I'm not sure about (might have to ask about that at some point), but the main parts I wanted to change independently I now can. 

Steve regarding your issue, I'm sure someone will jump in with a solution for you.  I agree about web dev browsers stuff, I seem to get varied results, but for me it's probably operator error. lol.. I often find stuff with one browsers inspector that I can't with another, so that's something you could try if you haven't already.

[SychO]

The only problem is that I did something wrong while playing with it and screwed to the alignment of .info in the categories somehow. It was looking as it should but I've done something that messed it up and can't figure it out just yet.

you removed align-self: center; from .info

although adding it back will screw up with your background color, so you'll have to find a different way to give bg colors, maybe do it on the parent instead

[Skhilled]

Thanks, Sych0. Ok, back to the drawing board cause I probably screwed something else up while adding things without that setting. LOL

[Skhilled]

Ok, I see a problem. If I add the code to a forum that already has a number of boards already on it, it works well.

If I add it to a fresh install then add boards the newly created boards are not centered vertically for the .info text but looks exactly as I want them otherwise.

https://skhilled.com/rc2/index.php

EDIT: It appears to center everything according to the category title and description. But not if the description is not present.

Edit #2: What you see now is using the code on a fresh install without adding any boards first. What you saw the first time had extra boards installed before adding the code.

[live627]

Code Select Expand

.info {
flex: 4;
overflow: hidden;
overflow-wrap: break-word;
}
Replace with

Code Select Expand

.info {
display: flex;
flex: 4;
flex-direction: column;
justify-content: center;
overflow: hidden;
overflow-wrap: break-word;
}

[Skhilled]

Close! But messes up the #topic_header info:

https://skhilled.com/rc2/index.php?board=1.0

Been messing with various code for it but can't seem to get it right.