Title Bars in Board List Mod?

[Lauren]

Hi, I'm wondering if there's a way to change the way the titles in the board list are shown

from this:


to this:


with the ability to change the fonts of threads/posts/last post to be a little different than the title part if we want. Possibly with the table cell boarders between threads/posts/last post too.

Any help would be greatly appreciated!! Thanks!!

[Tressa]

To remove the row "Board-Threads-Posts-Last Post" go to Layouts, Board, Board List tab. Remove or comment out lines 2-10.

<!--<thead>
        <tr>
            <th class="icon"></th>
            <th class="main">Board</th>
            <th class="threads">Threads</th>
            <th class="posts">Posts</th>
            <th class="latest last">Last Post</th>
        </tr>
    </thead>-->

[Stinky666]

May 30, 2013 16:28:13 GMT -8 Lauren said:

Hi, I'm wondering if there's a way to change the way the titles in the board list are shown

from this:


to this:


with the ability to change the fonts of threads/posts/last post to be a little different than the title part if we want. Possibly with the table cell boarders between threads/posts/last post too.

Any help would be greatly appreciated!! Thanks!!

May 31, 2013 10:33:27 GMT -8 Tressa said:

To remove the row "Board-Threads-Posts-Last Post" go to Layouts, Board, Board List tab. Remove or comment out lines 2-10.

<!--<thead>
        <tr>
            <th class="icon"></th>
            <th class="main">Board</th>
            <th class="threads">Threads</th>
            <th class="posts">Posts</th>
            <th class="latest last">Last Post</th>
        </tr>
    </thead>-->

I was going to suggest removing the "board" text only, and maybe add a margin to move the text up for the rest. The only problem with that is, you'd have to add font tags to each one to turn them white, as in your example.

Let me go give this a little play see if it works

Edit:
Ok, that failed haha. Sorry.

[Lauren]

May 31, 2013 10:33:27 GMT -8 Tressa said:

To remove the row "Board-Threads-Posts-Last Post" go to Layouts, Board, Board List tab. Remove or comment out lines 2-10.

<!--<thead>
        <tr>
            <th class="icon"></th>
            <th class="main">Board</th>
            <th class="threads">Threads</th>
            <th class="posts">Posts</th>
            <th class="latest last">Last Post</th>
        </tr>
    </thead>-->

Thanks! But what about adding the text for Threads, Posts, Last Post to the blue title bar?

[Tressa]

Sorry, I don't know how you could add those headings to the title bar and have them align with the columns. Hope someone can help you with that.

[Lauren]

Ok, I added this code to Layout Templates / Home:

5  <!--<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>-->
6     <div class="title-bar bbcode" style="color:#ffffff;font:bold 100% Verdana,Arial;"><table width="100%"><tr valign="middle">
7     <td class="title_wrapper">$[category.display_name]</td>
8     <td class="threads">Threads</td>
9     <td class="posts">Posts</td>
10     <td class="latest last">Last Post  </td>
11 </tr></table></div>
I put the <!--  --> tags around the original code so you could see how it was originally & so I could go back to it in the future if I want it.

Can someone please tell me if this is the right way to do it & if if the coding is "bomb-proof" so to speak. Or, if there's a better, more precise/correct way, please let me know.



Then, once I got the Threads, Posts, & Last Posts in the title bar, I did what Tressa said to hide the Borads, Threads, Posts, Last Posts bar.



Thanks!!


(FYI, there is actually more space between the Threads & Posts columns, I just photoshopped the screenshot to make them closer so the whole image would not be as wide. )

[M³]

I'd like to get in on this, too. However, doing it the way shown above, didn't work for me. Hopefully, someone can shed some light on this one.

[David Clark]

Seems like you cracked the case, Lauren. Looking good from where I'm sitting.

M³, what was the result when you tried to implement the template modification?

[M³]

David Clark You can get an idea from the image link I've left.  I removed the coding because it really messed things up as you can see here



Normal view:  here

[David Clark]

Was that after following both sets of instructions provided, M³? Tressa outlined how to get rid of the existing column titles, and Lauren's instructions are for replacing them in the actual title bar.

[M³]

David Clark OK, I got it in .. however, they seem to appear a little off. forum

[David Clark]

M³, if you go to Admin > Themes > Advanced Styles & CSS, on line 854 you should see this CSS:

.boards .latest { width: 20%; text-align: @board_align_last_post; }

Change the specification in green to about 13, or 13.5%. After playing with it a bit in my developer console I saw that served to line them up a bit better

[M³]

David Clark That worked! However, the 'Last Post' text appears to be butted up against the right side. I'm guessing the modification is somewhere around 854ish? Goes back to look ..

[David Clark]

 Ah, I see. Give 'er some padding on the right:

.boards .latest {padding-right: 10px; width: 20%; text-align: @board_align_last_post; }

EDIT: I just realized that using quotes for codes is a bad idea if there's CSS with an at-rule. Make sure the line looks like the one above! The quote stripped out an @ symbol and turned it into a forum tag.

[David Clark]

Go ahead and re-copy the code in my last post over the code on line 854. I can see that you're missing an @ symbol on that line, which is what I attempted to correct with my post edit, but I wasn't quick enough.

Let me know what you get.