[PAID/FREE] Tidy-Child-Boards on 2.1.4

[dodos26]

I tried everything written via (F12 Inspect element) but it doesn't work, here is the url so you can test it, if anyone can let me know if it works, thanks

https://los-balkan.com/index.php

Check it!
First find:

Code Select Expand

.children {
    padding: 5px;
    border-top: 1px solid #000;
    width: 100%
}
And replace to:

Code Select Expand

.children {
    padding: 5px;
    border-top: 1px solid #000;
    width: 100%;
    /* Add a fragment */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: baseline;
    justify-items: center;
   
}

/* Add new */
.children strong {
    grid-column: span 3;
    text-align: center;
    margin-bottom: 10px;
}

Effect:




Or use it (this will be nicer and give smaller gaps):

Code Select Expand

.children {
    padding: 5px;
    border-top: 1px solid #000;
    width: 100%;
    /* Add a fragment */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: baseline;
    justify-items: center;
   
}

/* Add new */
.children strong {
    grid-column: span 3;
    text-align: center;
}


[Antechinus]

Not sure why you would want it looking like that. The code I gave him does this...

You cannot view this attachment.

You cannot view this attachment.

Although it does need a slight refinement for phones, which I didn't check earlier.

Code Select Expand

.children {
column-count: 2;
width: fit-content;
padding: 0 5px 8px 5.6%;
border-top: 0;
}
.children > strong {
display: block;
column-span: all;
margin: 0 5px 3px 2px;
padding: 2px 4px;
}
.children-bg {
display: block;
margin: 0 3px 3px 0;
padding: 2px 4px;
}
@media screen and (max-width: 720px) {
  .boardindex_table .board_icon {
    width: 65px;
  }
.children {
padding-left: 60px;
}
}
But that is without the other stuff he just put in, so he'd have to revert the CSS to standard, then do the above.

I did notice that there is a glitch with break points on that theme. It will get horizontal overflow between 772px and 720px viewport width. I haven't bothered to debug that, since it's really the theme author's problem. It's also arguably not a big deal, since it's a range that most phone and tablets will skip (which is probably why the theme's author missed it).

[Alex98]

Thank you very much gentlemen. Is there a possibility to add an icon (on/off) next to the sub-board to make it the original TCB?

[Antechinus]

Sure. You already get a "New" icon when there are new posts in a child board, so all you need is to add a "no new" icon the rest of the time. Unfortunately, in 2.1 they have gone and made the whole PHP logic thing as opaque and convoluted as possible, with gruesome ternaries in the template and various tasty bits hidden in Sources, which is a wonderful advance over the simplicity of doing it in 2.0.

It's still doable though. All you need to do is outsmart the buggers. Essentially you need to kill the default "New" icon, and throw in your own on/off icons. The easiest way to do this is to not bother with the template and do the whole shebang with CSS.

This will kill the default "New" icon:

Code Select Expand

.children .new_posts {display: none;}
Now you need your own groovy icons. By default the relevant spans and anchors have no class assigned. Here's an example showing two current child boards here (I've taken out the title attributes to simply things):

Code Select Expand

<div id="board_34_children" class="children">
<p>
<strong id="child_list_34">Sub-Secțiune</strong>
<span class="strong">
<a href="https://www.simplemachines.org/community/index.php?action=unread;board=106" class="new_posts">
Nou
</a>
<a href="https://www.simplemachines.org/community/index.php?board=106.0" class="board_new_posts">
Theme Site Themes
</a>
</span>
<span>
<a href="https://www.simplemachines.org/community/index.php?board=178.0">
Theme Previews
</a>
</span>
</p>
</div>

The first anchor tag there is the one you just killed via display: none (as shown previously). The easiest way to get usable icons on the other anchors is to use a ::before pseudo element on them, and set your icons as background images on the pseudos, with the off icon being called purely via descendants, and that being overridden by the .board_new_posts class when necessary.

Haven't tested it live, because it's early and I'm feeling lazy, but this should work:

Code Select Expand

/* ---------------------------------- */
/* This kills the default "New" icon. */
/* ---------------------------------- */
.children .new_posts {
display: none;
}
/* ---------------------------------- */
/* Use this if you want icon images. */
/* ---------------------------------- */
.children p > span > a::before {
display: inline-block;
width: 16px;
height: 16px;
background: url('path_to_off_icon.png');
content: '';
}
.children p > span > .board_new_posts::before {
background: url('path_to_on_icon.png');
}
/* ---------------------------------- */
/* Alternatively, sprite the images, */
/* then change background-position. */
/* ---------------------------------- */
.children p > span > a::before {
display: inline-block;
width: 16px;
height: 16px;
background: url('path_to_icon_sprite.png');
content: '';
}
.children p > span > .board_new_posts::before {
background-position: 100%;
}
/* ---------------------------------- */
/* Or you could use a utf-8 character */
/* instead, and just change colour. */
/* ---------------------------------- */
.children p > span > a::before {
display: inline-block;
/* 'Two speech bubbles' utf-8 character. */
content: '\1F5EA';
/* Grey by default. */
color: #444;
}
.children p > span > .board_new_posts::before {
/* Same colour as link for new posts. */
color: inherit;
}
If it doesn't work, come back and grumble at me.

[Antechinus]

Actually, I just thought of a better way of doing it, but I can't edit that post anymore*.
It's still all CSS but is better for functionality. I'll write it up later.

(*Note to team: Install nifty new mod - you know you want to. )

[live627]

Instructions unclear; installed nifty new modded oven, got pizza.

[Antechinus]

Updated Instructions
Install this here: Always Delete/Modify Own Posts
Kthnx.

[Antechinus]

Anyway, this is the better way of doing it. It's better because it preserves the default "Unread posts" link when there are some (which is what the default "New" icon does) and because it gives screen readers a readable text indication that there are new posts.*

Code Select Expand

/*    Use this if using two icon images.    */
/*    ----------------------------------    */
.children p > span > a::before {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('path_to_off_icon.png');
    content: '';
}
.board_new_posts::before {
    display: none;
}
/*    ------------------------------    */
/*    Hijack the default "New" icon    */
/*    to make your custom "On" icon.    */
/*    ------------------------------    */
.children .new_posts {
    width: 16px;
    height: 16px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url('path_to_on_icon.png');
}


Code Select Expand

/*    Or sprite the two images into one    */
/*    & then change background-position.    */
/*    ----------------------------------    */
.children p > span > a::before {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('path_to_icon_sprite.png');
    content: '';
}
.board_new_posts::before {
    display: none;
}
/*    ----------------------------------    */
.children .new_posts {
    width: 16px;
    height: 16px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url('path_to_icon_sprite.png');
    background-position: 100%;
}


Code Select Expand

/*    Or you could use a utf-8 character    */
/*    instead, and just change colour.    */
/*    ----------------------------------    */
.children p > span > a::before {
    display: inline-block;
    width: 16px;
    height: 16px;
    /* 'Two speech bubbles' utf-8 character. */
    content: '\1F5EA';
    /* Grey by default. */
    color: #444;
}
.board_new_posts::before {
    display: none;
}
/*    ----------------------------------    */
.children .new_posts {
    width: 16px;
    height: 16px;
    overflow: hidden;
}
.children .new_posts::before {
    display: block;
    height: 16px;
    /* Will inherit link colour. */
    content: '\1F5EA';
}


*And don't anyone say "But the other links all have readable title attributes", because the title attribute is notorious for being a useless pile of wombat droppings when it comes to accessibility. So, why do we bother with title attributes? Presumably because forum apps have always had them, so we must continue to have them or God will kill kittens.