Adjusting child board area

[Lexi P]

Please see attachment. How do i go about changing the child board area background color and adjust margins without affecting other areas like the stats box? I would like a bigger gap between the child section and the General Discussion and then at the bottom between the child section and bottom border.

Thanks. Lexi. 

[Antes]

Find .table_list tbody.content td.children on your index.css and add background: #color;

[Lexi P]

Thanks for the quick reply. Okay i did that and the color changed but when i add a margin it has no affect. I just want more space at the top and bottom so the new background color is not touching the white borders at the top and bottom.

[Antechinus]

You can't add margins to table cells. Use padding instead.

[Lexi P]

Padding works only to make the area larger, not to actually space it away from the borders. See in the second attachment where there is more white space and the child text is more vertically in line with the board titles. I was told that anything could be positioned with margins but I guess not. Thanks anyway. 

[Antechinus]

Ah. I get what you want now. There are ways to cheat that. Using padding will align the text horizontally, so no problems there.

If you want the appearance of greater spacing between the child board cell and the other cells, but without increasing spacing on every cell, you can add white borders (or any other colour borders) to the child board cell.

You can also do it with an inset box-shadow that has a zero blur radius. That acts like a normal CSS border, so by using multiple box-shadows you can give the appearance of multiple borders of whatever colour and width you want. That's a bit trickier to set up, but can be fun to play with (just as an exercise).

[Lexi P]

Yeah i guess borders to match the background will work. I am new at this so i am learning as i go. Thanks again. 

[Lexi P]

The borders didnt work the way that i wanted due to my custom background image. I imagine that it works fine with a basic flat color but i do appreciate your help. I did however find a great solution here that may help others that may want to do the same thing.

Thanks again. 

[Antechinus]

Yeah that'll work, as long as everybody is using the same font size in their browser. It's likely to look weird if anyone needs a large font, but should be fine for most people.

However, you do know it is possible to set solid CSS borders to transparent? You could try that too.

[Lexi P]

Well i set the font size for that section to 12 px. Wont that make everyone see it as 12 px?

[Antechinus]

Yup. Unless they have their browser set to override your stylesheet (which they may do if their eyesight is impaired in any way, or if their monitor's pixel density and/or workstation layout means they want bigger text).

This is getting into "default theme dev thinking" though, where you have to try and consider all possibilities for everyone. TBH most custom themers wouldn't even think about this stuff, so it's up to you.

[Lexi P]

Well its a private family forum so i am not too worried about the font size to that extent. Not to mention that i have absolutely no idea how to do transparent borders. 

[Antechinus]

Easy.

Code Select Expand

.your_class_or_id {border: 4px solid transparent;}


ETA: Actually you'd probably want this:

Code Select Expand

.children {border-top: 4px solid transparent; border-left: 4px solid transparent;}

You shouldn't have to declare the whole hierarchy unless a border was previously declared for .children with greater specificity (ie: table_list tbody.content td.children). TBH the 2.0.x CSS is overly specific in a lot of cases.

[Antechinus]

Scratch this post. I said silly things without testing them live.

[Lexi P]

You can get around that by hacking the template to remove the windowbg2 class from the tr, and assign it to td.info and td.lastpost instead. That will enable you to use transparent borders with unrestricted cell height, which saves calling an image and is far more flexible in terms of content (like if you have a pile of child boards listed on a fairly narrow screen, or whatever).

I actually tried very similar to this earlier today on the advice from ARG at smf admin but it was way too confusing for me to follow. I will give your last option a shot in the morning. Thanks. 

[Antechinus]

Hmm, Turns out that doesn't work.

Made the mistake of actually testing it live on local. Apart from me borking the syntax because of not paying attention (easy to fix) there's another problem.

It turns out that transparent borders on table cells don't work. The background colour of the table cell fills it completely, and a transparent border is just rendered on top of the full-sized background. This means that all you see is the background colour everywhere, and you don't see (or you see through) the transparent border.

If you use a coloured border, no problems, because the solid colour renders on top of the background colour, so your border shows up fine.

This is interesting because I'd never actually tried transparent borders on table cells before, although I have often used them on other elements (anchors, lists., divs, whatever) for various reasons. It works on any other elements I can think of, just not on table cells, and probably not on table rows either (didn't test that).

So there you go. Learn something every day.

Ok, so this means it's necessary to get more determined and devious, which I'm good at. Lotsa practice.

If you hack the template just a little bit, to drop a div inside the .children table cell, it then becomes really easy to get the desired result. So you'd open BoardIndex.template.php and find this bit (starting on Line 217 of a default template):

Code Select Expand

echo '
<tr id="board_', $board['id'], '_children">
<td colspan="3" class="children windowbg">
<strong>', $txt['parent_boards'], '</strong>: ', implode(', ', $children), '
</td>
</tr>';


Change that to this (which is just dropping the aforementioned div around the contents of the table cell):

Code Select Expand

echo '
<tr id="board_', $board['id'], '_children">
<td colspan="3" class="children windowbg">
<div>
<strong>', $txt['parent_boards'], '</strong>: ', implode(', ', $children), '
</div>
</td>
</tr>';


Then use this for your CSS (you can just add it at the end of index.css if you like):

Code Select Expand

.children.windowbg {
background-color: transparent;
padding: 3px 0 0 3px;
}
.children.windowbg>div {
padding: 8px;
background-color: #e7eaef;
}

This will work. No, really. I even saw it working for real.

Tweak colours and paddings to whatever you like. The padding on .children.windowbg is what controls the apparent extra gap to the other cells. The padding on .children.windowbg>div  controls the spacing of the coloured background around the text.

[Lexi P]

BINGO! At first it didnt work any different than adding a basic background color (shown below) that ARG stated earlier.

Code Select Expand

.table_list tbody.content td.children { background-color: #252525;}

But then he suggested using your code but adding a margin in css and it works perfectly.

Code Select Expand

.children.windowbg {
background-color: transparent;
padding: 3px 0 0 3px;
}
.children.windowbg>div {
padding: 8px;
background-color: #252525;
margin: 10px;
}

Thanks so much for your help. 

[Antechinus]

It shouldn't need that additional margin. It was fine running live on my local with the code I gave. If you wanted a bigger gap, all you had to do was tweak the first padding (the 3px 0 0 3px on .children.windowbg). Changing that to 13px 10px 10px 13px would have the same effect as adding that 10px margin.

If you couldn't see any effect at first, it was probably a cache problem. CSS is cached in your browser, so it's always a good idea to force a reload (Ctrl+F5) when doing CSS changes.

[Lexi P]

Yea you are right. But adding the margin works just as well so i guess either way will work.

[Antechinus]

Less code is good.

Anyway it works. Now you can find yourself another dilemma.

[Lexi P]

Less code is good.

Anyway it works. Now you can find yourself another dilemma.

Lol. I am sure i will sooner or later.