[Template] Replace On/Off with Coloured Cells

[pawl]

Got a PM request for this, so I thought I'd post it up.
This modification will remove the on/off (or new/no new post) icons, and replace them with a thin coloured cell instead. A preview can be found here at the time of posting.

---

First off, head to your Style Sheet (Admin Panel -> Themes -> Colours & Styles -> Style Sheet), and at the very bottom, add the following;

#boardnew { background: #HEX COLOUR FOR NEW POSTS; }
#boardold { background: #HEX COLOUR FOR NO NEW POSTS; }
#boardredirect { background: #HEX COLOUR FOR REDIRECT BOARD; }

You will of course have to supply your own hex codes to replace the purple text.



Next, look for this line, approx 847, and make the change in blue;

.boards .main { width: 69%; text-align: @board_align_main; }

This actually brings the total % of the four cells over 100%, but I found that anything less and it didn't look quite right. The default is 59%, so once you've finished with the rest of this post feel free to tweak this number as you see fit.


Lastly, head to your Board List template (Admin Panel -> Themes -> Layout Templates -> Boards -> Board List) and look for the following, approx lines 12-16, and replace the fourth line with the orange one below;

{foreach $[board]}
{if !$[board.is_redirect]}
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon" {if $[board.is_new]}id="boardnew"{else}id="boardold"{/if}><!-- $[board.icon] --></td>
<td class="main clickable">

A little further down at approx lines 47-50 you'll find the following, with changes in green this time;

{else}
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon" id="boardredirect"><!-- $[board.icon] --></td>
<td class="main clickable redirect last" colspan="4">



With these changes made, your on/off icons should be gone, and the little bar at the far left (what's left of the cell) should now light up when there are new posts instead.

As ever, feel free to post if you have questions, problems or I've made any silly mistakes. =]

[Stinky666]

Just to note for other people in case they have trouble finding the lines..

- Step 1) It was line 876 for me, not 847.
- Step 2) It was line 6, and not 12-16.
- Step 3) I found it on line 41, not 47.


Other than that though, the mod works perfectly.
Thanks pawl

[pawl]

Oops, sorry. I try and use a clean template for the changes, but at some point I need to go through and make sure they're all default values.

[Stinky666]

pawl, is there any way to do this but on a per category basis?
So for Category 1, have the on/off as 2 colours.
Category 2 would be 2 other specific colours.
Category 3 two others, and so on



Edit:
ORR even though more tedious, if it had to be done by board name/display name, could it? so long as there was/is a way that would be great.

[pawl]

You'll have to leave that with me, Stinky666. If it is possible then it will actually solve another problem I'm having with Kami's forum. Gonna make a thread about it when I get the chance, assuming I can't figure it out myself.
In the meantime though, perhaps someone like Ryan Roos or Martyn Dale could tell us if it's possible to target individual boards or categories in the Template. =]

[Stinky666]

Jan 5, 2013 16:07:50 GMT -8 pawl said:

You'll have to leave that with me, Stinky666. If it is possible then it will actually solve another problem I'm having with Kami's forum. Gonna make a thread about it when I get the chance, assuming I can't figure it out myself.
In the meantime though, perhaps someone like Ryan Roos or Martyn Dale could tell us if it's possible to target individual boards or categories in the Template. =]

Hopefully one of them will respond, even if it is just a simple yes or no.

[pawl]

DISREGARD THIS POST, I AM AN IDIOT, READ DOWN. =]



Think I found a way to do it for boards at least, haven't yet looked for categories - they're another template I think.

Anyway; this is the template that I'm using here - I think you can probably work out what I've done. I'll keep looking though. =]

<td class="icon" {if $[board.is_new]}id="boardnew"{elseif $[board.id] == 2}id="boardtest"{else}id="boardold"{/if} width="10%"><!-- $[board.icon] --></td>

In my Style sheet I use the following:

#boardnew { background: #7d068d; }
#boardold { background: #696969; }
#boardredirect { background: #6f0101; }
#boardtest { background: #ffffff; }


All make sense so far? Will carry on looking for doing it by category. =]

[Stinky666]

Jan 5, 2013 17:01:30 GMT -8 pawl said:

Think I found a way to do it for boards at least, haven't yet looked for categories - they're another template I think.

Anyway; this is the template that I'm using here - I think you can probably work out what I've done. I'll keep looking though. =]

<td class="icon" {if $[board.is_new]}id="boardnew"{elseif $[board.id] == 2}id="boardtest"{else}id="boardold"{/if} width="10%"><!-- $[board.icon] --></td>

In my Style sheet I use the following:

#boardnew { background: #7d068d; }
#boardold { background: #696969; }
#boardredirect { background: #6f0101; }
#boardtest { background: #ffffff; }


All make sense so far? Will carry on looking for doing it by category. =]

To be honest, I thought I did understand it easily.
What I have done is: Layout Template > Board > Board List > replaced the old bit of code with the above of your one. Changed "boardtest" to "boardthe_lounge" (also I tried boardthe.lounge and boardthelounge).

I then went to my Style Sheet and added your part (I changed/edited the part for boardthe_lounge etc to match the other). Unfortunately, nothing has happened for me


Link: exdat.freemessageboards.com/

[pawl]

Will have a look when I finish work, and can use something other than my phone =P

[Stinky666]

Jan 6, 2013 6:46:34 GMT -8 pawl said:

Will have a look when I finish work, and can use something other than my phone =P

Appreciated =)

[pawl]

Haha. Just realised I was a complete pleb last night, and only set it one colour, regardless of on/off. xD
Looks like yours is still defaulting to boardold though. Either way, gimme ten minutes and I'll find a way of actually setting on/off for a board, instead of just one colour. =P

[pawl]

Okay, this is what I'm using now;

#boardtest { background: #ffffff; }
#boardtest2 { background: #ff0000; }

<td class="icon" {if $[board.id] == 2}{if $[board.is_new]}id="boardtest"{else}id="boardtest2"{/if}{/if}{if $[board.is_new]}id="boardnew"{else}id="boardold"{/if} width="10%"><!-- $[board.icon] --></td>

A little messier than I'd like, but it works at least. If anyone happens to be able to neaten it up at all, by all means be my guest. Tried a few other ways, but it's died on me every time. Doesn't help that I really have no clue what I'm doing, haha. Another little annoyance is that I can't seem to find a way to target multiple boards in one {if}, which means that to cover more than one would take up a fair amount of coding. Pain in the arse, and I dunno what it would do to the loading speeds, either.
Still, it's a temporary solution for the time being.

[Stinky666]

Jan 6, 2013 17:23:56 GMT -8 pawl said:

Okay, this is what I'm using now;

#boardtest { background: #ffffff; }
#boardtest2 { background: #ff0000; }

<td class="icon" {if $[board.id] == 2}{if $[board.is_new]}id="boardtest"{else}id="boardtest2"{/if}{/if}{if $[board.is_new]}id="boardnew"{else}id="boardold"{/if} width="10%"><!-- $[board.icon] --></td>

A little messier than I'd like, but it works at least. If anyone happens to be able to neaten it up at all, by all means be my guest. Tried a few other ways, but it's died on me every time. Doesn't help that I really have no clue what I'm doing, haha. Another little annoyance is that I can't seem to find a way to target multiple boards in one {if}, which means that to cover more than one would take up a fair amount of coding. Pain in the arse, and I dunno what it would do to the loading speeds, either.
Still, it's a temporary solution for the time being.

I'm heading to bed now, but will try this tomorrow.
Me editing when I am wide awake is dangerous, so doing it when tired... you can only imagine



pawl
Edit:
Ok this is going to sound stupid, but.. If I had the below boards, how would I do it?

Category 1 (lets say I want these black when new posts)
Welcome
The Lounge
The Motion Room

Category 2 (white when new posts)
Image Gallery
Art Lobby

---

exdat.freemessageboards.com
I have it so my "old" icons are blue, and when there's new they turn white.
It only looks good/right in the blue categories. So in the pink categories I want "old" as pink, and new as white.

[pawl]

Just to let you know, tagging people when you edit a post doesn't actually notify them. =P

The thing about the way I've got it so far (I can't seem to get a single {if} to target more than one board and still work, tried everything I can think of, so not much, haha) is that to get it to work for all of them you're gonna need a whole tonne of {if}s.

<td class="icon" {if $[board.id] == 2}{if $[board.is_new]}id="boardtest"{else}id="boardtest2"{/if}{/if}{if $[board.id] == 3}{if $[board.is_new]}id="boardtest"{else}id="boardtest2"{/if}{/if}{if $[board.id] == 4}{if $[board.is_new]}id="boardtest"{else}id="boardtest2"{/if}{/if}{if $[board.id] == 5}{if $[board.is_new]}id="boardtest"{else}id="boardtest2"{/if}{/if}{if $[board.id] == 6}{if $[board.is_new]}id="boardtest"{else}id="boardtest2"{/if}{/if}{if $[board.is_new]}id="boardnew"{else}id="boardold"{/if} width="10%"><!-- $[board.icon] --></td>


Something as utterly ridiculous as that. =P

At some point this evening I'm gonna put up a thread seeing if anyone can work out what I'm doing wrong. Tried stuff like {if $[board.id] == 2 | 3 | 4} and {if $[board.id] == 2 || 3 || 4} and {if $[board.id] == 1 || $[board.id] == 2} etc, but had no luck thus far.

[Stinky666]

pawl

Could you possibly tag me if/when you do create the topic, so I can keep an eye on it please?
My categories look stupid as hell as they are, so I am holding off on doing bugger all else until hopefully I am able (or not) to do this.