QUICK NEWS

{NEW} - A new css video is up.

{OLD} - New video courtesy of Skhilled, Thanks for posting it up.

Video of the moment:


Internal Links

SMF Sites

Quick Info

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

Started by Skhilled, Apr 10, 2019, 11:23 PM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.

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

#16
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

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