Dec 14, 2019, 10:12 AM

News:

Keep an eye on your notifications page. It can get huge.


QUICK NEWS

{NEW} - A new tutorial for Github is ready for your veiwing in the articles section.

{OLD} -New boards have been introduced. Stop on in and check it out.

Video of the week


Internal Links

SMF Sites

Quick Info

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

Started by Skhilled, Apr 11, 2019, 12:23 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

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. :dontknow

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


Skhilled

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

live627


live627

Find

.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

 .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

#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

#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

Quote from: Skhilled on Apr 11, 2019, 12:48 AMIn 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.  :lb

Skhilled

Quote from: lurkalot on Apr 13, 2019, 06:08 AMFunny 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.  :lb
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!!!  :rgton

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

Quote from: Skhilled on Apr 13, 2019, 10:21 AMYes, 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.  8)

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

Quote from: Skhilled on Apr 13, 2019, 10:21 AMThe 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

Apr 13, 2019, 07:37 PM #12 Last Edit: Apr 13, 2019, 08:09 PM by 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

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

Replace with

.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.

live627

 Curve2 makes this difficult.

.info {
flex: 4;
overflow: hidden;
overflow-wrap: break-word;
}
div[id^="board_"] ].up_contain .info {
display: flex;
flex-direction: column;
justify-content: center;
}

Skhilled

Apr 15, 2019, 08:50 AM #16 Last Edit: Apr 15, 2019, 09:19 AM by Skhilled
Excellent! And thanks for showing me:

justify-content: center;
I was trying "align-something" to make it work and even searched for something for a few days but gave up.

EDIT: I was wrong. It fixed the topic_header but threw off the justification in the categories again.

live627

a typo in the code I gave ya

div[id^="board_"] ].up_contain .info {
should be

div[id^="board_"].up_contain .info {

Skhilled

Apr 16, 2019, 07:24 AM #18 Last Edit: Apr 16, 2019, 07:25 AM by Skhilled
Yup, that did it. Thanks a lot! I'll save this index.css to my template to help converting the other themes easier. :)

Marked as solved!

Skhilled

I just realized that I've never checked that code to see when the height was adjusted it still looks ok and it does! :rgton

live627

That code is the basis for a new theme I started.

Skhilled

Update:

I took one last look at the site today before making any other adjustments and noticed that the code made the child board (called sub-boards now) the same size as the categories. So, using bits of code found here I fixed it. 8)

I changed the code here:

div[id^="board_"].up_contain > div {
background: #f1f3f5;
border: 1px solid #ddd;
margin: 1px;
padding: 6px 8px;
/* Adjust height as needed */
height: 50px;
}

To:

div[id^="board_"].up_contain > div:not(.children) {
background: #f1f3f5;
border: 1px solid #ddd;
margin: 1px;
padding: 6px 8px;
/* Adjust height as needed for all boards except .children */
height: 50px;
}
I then added the code above to .children so I can adjust the height of the child boards by itself.

.children {
width: 100%;
background: #f1f3f5;
border: 1px solid #ddd;
margin: 1px;
padding: 6px 8px;
/* Adjust height as needed */
height: 25px;
}

Skhilled

Les found an issue with this...

If you add multiple lines of text in your description or have to approve a post the text is cutoff. See the General Discussion board:

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

It does not adjust the height for the extra text.