Board Remodel + Image in Description Woes

[Tumbleweed]

Jul 5, 2016 7:08:11 GMT -8 Counterklock said:

(Oh gosh, please don't not sleep because of this! It certainly isn't my intention to cause you to be sleep deprived!)

I think the Visual Editor adds a Div to the mix (because I swear I did not add a div in for changing the font and alignment), which is odd, but I've gone in and added '.board .link a:link{float:right;margin-right:16px;}' anyways to make things nice and neat. 

Putting the height back to 200px definitely worked on both the testing site and my main forum. I even tinkered with setting it between 90-120px for individual boards to center things a little bit better, though if there's something not right I'll defer to your judgement. Since we're so close to figuring things out, I've set the theme to default on the main forum. Hopefully all the coding checks out.

Also!! I have a few final things a few members pointed out to me that I will admit I completely missed but are nonetheless a bit jarring.
 
1.) The 'newest threads+posts+whodunnit / No posts here' info to the left of each board is not vertically centered. Is it at all possible to center this? 

2.) The '# Viewing' seems to have a weird wrapping issue when board titles are long enough to interfere with it. Is it possible to move the #Viewing to its own line either above or b or below the board title, or within the board description box itself?

No, no... it has nothing to do with you when I go nuts and stay up later than I should. It's my own obsession to figure things out. lol

One thing that may help with #1 is decreasing the height of the border so you have equal amounts of space above threads/posts and space below the date. On your real site, there is probably about 12-ish pixel more gap below the date.  That is found in the css class: .the_border
I'm not sure if that is what you meant. I you are still not happy, try adding vertical-align to those td tags in the template:

<td class="posts_threads" style="vertical-align:middle;"> 

You may want to play with one being aligned to the top while the other is to the middle or even bottom. 

<td class="main clickable" style="vertical-align:top;">

But these are the two you need to fiddle with. 

Another thing you can try is adding margin-top to bring something up or down if it seems to be a few pixels off, like for this you could add the bold for example:

.the_des_border{
display: table;
width:98%;
background-color: #545454!important;
border:4px solid #666666;
text-align:left;
margin-top:2px;
}

And I do apologize for all the issues. The original template was just kind of thrown together without all the what-if's addressed. As far as #2, you are talking about the info center?

[Counterklock]

I definitely know that feeling, of wanting to stay up to conquer that one niggling problem that's now eating at you. You've no need to apologize, as I've certainly badgered you enough about this template/remodel that I should be doing so instead! I appreciate all your help with this as my little knowledge of the necessary coding wouldn't have gotten me anywhere.

I adjusted the .the_border a bit as you suggested (not sure when that big margin got stuck in there, welp) and it did seem to help, but it still didn't center it entirely. I also tried adding in '<td class="posts_threads" style="vertical-align:middle;">' and '
<td class="main clickable" style="vertical-align:top;">' to the board list template, but it didn't have any affect at all.

And as for #2, I was talking about the line that pops up on each board that shows how many people are viewing it at a specific time (if there is anyone viewing it, of course). I've decided to just get rid of it entirely with <!-- --> code, as a few of my members admitted that it actually caused them anxiety or worry and drove them to distraction.

[Tumbleweed]

I realized what you meant by the "viewing" bit after I went offline. I personally never liked that either.

As far as the middle aligned, actually looking at your real site, I think that did more harm then good because they don't seem to be consistent. Like your first board, there is no space at all below the date yet the next board has a gap. That is really puzzling as to why it is doing that.

But the question I have is how do you want that vertically aligned to the middle? Would that be middle aligned against the description/image area or middle aligned with the title and description/image area? I want to make sure I understand what you want before I dive into it again.

[Counterklock]

Like your first board, there is no space at all below the date yet the next board has a gap. That is really puzzling as to why it is doing that.

Like this?:


I think I might have tried setting the margin to that highish number to offset this and give that box a bit of room, but then completely forgot about it (as I too was coding late at night, and kept forgetting why I made changes etc.). Regardless, if we add in that margin again and then center things, it should all theoretically sort itself out, right?

As for the centering - is there any way to center it so it looks vaguely like this mockup? (I also apologize if these aren't centered perfectly, as I was eyeballing it using Paint)

[Tumbleweed]

Jul 6, 2016 19:29:58 GMT -8 Counterklock said:

Like your first board, there is no space at all below the date yet the next board has a gap. That is really puzzling as to why it is doing that.

Like this?:


I think I might have tried setting the margin to that highish number to offset this and give that box a bit of room, but then completely forgot about it (as I too was coding late at night, and kept forgetting why I made changes etc.). Regardless, if we add in that margin again and then center things, it should all theoretically sort itself out, right?

Yep, that's what I meant and I would assume it would right itself if I get it to do what you posted below.

Jul 6, 2016 19:29:58 GMT -8 Counterklock said:

As for the centering - is there any way to center it so it looks vaguely like this mockup? (I also apologize if these aren't centered perfectly, as I was eyeballing it using Paint)

I shall go fiddle with it and see if I can get it to do that. I'm glad I asked about centering because I totally thought you meant something else.


Edit: O.K. What you will have to do is go to your template and right after the td tag class "posts_threads" add the blue and then the closing div tag before the closing td tag:


<td class="posts_threads">
<div class="make_table">
<div class="the_border">
<div class="inner_bkg">
{if $[board.threads] == -1}N/A{else}$[board.threads]{/if} Threads and
{if $[board.posts] == -1}N/A{else}$[board.posts]{/if} Posts
</div>
<div class="latest last">
{if $[board.posts] > 0}
{if $[board.last_thread]}
<div class="inner_bkg">In: $[board.last_thread.recent_link]</div>
<div class="inner_bkg">By: $[board.last_thread.last_post.created_by]</div>
<div class="inner_bkg"><span class="date">$[board.last_thread.last_post.created_on]</span></div>
{/if}
{/if}
</div>
</div>
</div>
</td>


And then go to your style sheet and add this:

.make_table{
display: table;
}

and then in the class "the_border" add the blue and you may prefer a different width:

/*this is the border around threads-posts-latest-date*/
.the_border {
width:320px;
height:100px!important;
background-color: #545454!important;
border:4px solid #666666;
padding:8px;
display: table-cell;
vertical-align:middle;
}


I wonder if I shouldn't have started all over again now knowing more of the details of what you want. As it is, I feel like this is kind of turning into a mish-mash of "fixes". lol  But if it works, hey, I'll go with it.

[Counterklock]

I put in the code and it did a rather funny thing over at my testing forum on a fresh imported copy of the theme from my main site. It certainly centered things the way I wanted, but something funny happened to the category header boxes, and the description images returned to their top-left-aligned corners of shame. (When I saw it, I laughed. It's been one of those days.)

I feel so bad for throwing all of this at you. You've already helped me so, so much, and I very much appreciate your hard work! If we can't get this one centering thing figured out that's fine, it's mostly an aesthetic thing and nothing major. 

[Tumbleweed]

Jul 7, 2016 19:55:01 GMT -8 Counterklock said:

I put in the code and it did a rather funny thing over at my testing forum on a fresh imported copy of the theme from my main site. It certainly centered things the way I wanted, but something funny happened to the category header boxes, and the description images returned to their top-left-aligned corners of shame. (When I saw it, I laughed. It's been one of those days.)

I feel so bad for throwing all of this at you. You've already helped me so, so much, and I very much appreciate your hard work! If we can't get this one centering thing figured out that's fine, it's mostly an aesthetic thing and nothing major. 

"Corners of shame" ....ha ha ha...too funny. I don't see where you have that on your test site and things aren't centering in the middle so assume you removed it. Anyway, about the category, we talked about this in a previous post. If you just add this to the bottom of your style sheet it should move it over again:


.board .link a:link{float:right;margin-right:16px;
}

[Counterklock]

I realize now I was editing the wrong theme and that's why you couldn't see the centering issue, and that is absolutely my bad. The code has now been added and you should be able to see it.

(My lesson learned: I shouldn't be trying to do things at 10pm after a long day of driving.)

Edit: Honestly, I should've known better and just done it straight from the get go, but I added the code to my main forum as the testing forum seems to just not want to accept any sort of changes. Everything now seems to work, but there's still that margin at the bottom of the new posts-threads-etc. box that I can't seem to figure out.

[Tumbleweed]

This is what I have to finally get all that with equal amounts of padding and margins:


/*this is the border around threads-posts-latest-date*/
.the_border {
width:270px;
height:100px!important;
background-color: #545454!important;
border:4px solid #666666;
padding:4px;
display: table-cell;
vertical-align:middle;
}
/*You can change the font size here for threads-posts-latest*/
/*or you can change the font in the class the_border*/
/*for the date size to be changed you need special css*/
.inner_bkg{text-align:left;
background-color:#666666;margin:4px;padding:2px;width:262px;
}

You may have to change the width in the class .the_border to suit your site but the padding in there is how much space your want around all of all of the inner "boxes" combined. 

The width you put in the class .inner_bkg should be minus what ever margin you have which I highlighted in blue. In my case the class .the_border is 270 pixels and I have a margin of 4px all around so there is 4px on the right and 4px on the left with a total of 8px so my width in .inner_bkg is 270 minus 8 which is 262px.

I sure hope I explained that so you understand. Also I do want to apologize as I should have had this more perfected before I posted this for people to use.

[Counterklock]

There we go, that did the trick! You definitely explained it in a way I could understand, don't worry.

No, no, don't apologize at all! If anything, I should apologize for badgering you for so long about this. Thank you so, so much for all the help you've given me! I appreciate it so much!

[Tumbleweed]

Jul 10, 2016 8:10:59 GMT -8 Counterklock said:

There we go, that did the trick! You definitely explained it in a way I could understand, don't worry.

No, no, don't apologize at all! If anything, I should apologize for badgering you for so long about this. Thank you so, so much for all the help you've given me! I appreciate it so much!

Oh good, glad that did it for you and your very welcome. You didn't badger at all and had optimum patience with me working this out and I appreciate that. Have fun with your site!