Post/Thread background

[XENO QUEEN]

Jul 13, 2013 8:57:02 GMT -8 David Clark said:

Alrighty Morpheus, just give me the red pill and a stiff drink. :)

Head to Admin, mouse over Structure, and click on Layout Templates. Locate the Thread template, click it, and then click the Post List tab. Scroll down to about line 28 and locate this:

<div class="message">$[post.message]</div>
Replace it with this, to give it that board ID:

<div class="message-$[post.board_id]">$[post.message]</div>
Then on line 33, find:

<td class="foot">
Replace with:

<td class="foot-$[post.board_id]">

From here on out, you can set backgrounds per board with CSS, based on the board's ID. To get the board's ID, just navigate to the board in your browser and check the address bar for the number. For example, the Support board here has an ID of 44.

Setting a background image for a board with CSS would look like this, placed at the bottom of your style sheet:


.message-1, .foot-1 {background-image:url('IMAGE URL');}
This would place the background image in all posts of all threads in the board with the ID 1. :)

-Salutes- I'm heading over there to give this a go now, I'll let you know how I fair. :D

Thank you very much.

~Georgia.

[David Clark]

Lemme know how it goes.

[XENO QUEEN]

Jul 13, 2013 11:37:06 GMT -8 David Clark said:

Lemme know how it goes. :)

Alright, David Clark , I did everything and guess what... IT WORKED!

x-is-tence.proboards.com/thread/3/general-site-rules

;)

Thank you so much!

[XENO QUEEN]

Though... is there a way to make it FILL the post? rather than just where we write?

[David Clark]

It should already - I just checked your CSS and it looks like you have the .foot- bit set to the board ID 1 whereas the .message- bit refers to 3. Set them both to 3 and it should work.

[XENO QUEEN]

Oh! Thank you lmao! Well it works in Chrome but there's discrepancies, like chunks taken out of it on the left side where it starts and then at the end of the first post where it says edited. And it doesn't show up on firefox?

[David Clark]

That indentation can be taken care of by going to your style sheet, scrolling to line 973, and removing the highlighted code.

.posts .post .content { padding-left: 10px; vertical-align: top; }

Can you take a screenshot of what you see in Firefox? I don't have a copy to test it.

[XENO QUEEN]

Jul 13, 2013 13:17:43 GMT -8 David Clark said:

That indentation can be taken care of by going to your style sheet, scrolling to line 973, and removing the highlighted code.

.posts .post .content { padding-left: 10px; vertical-align: top; }

Can you take a screenshot of what you see in Firefox? I don't have a working copy to test it.

Fixed that and here you go:

[David Clark]

Try adding the following to the bottom of your style sheet. I grabbed a working copy of FF and found, in my developer console, that this takes care of the issue:

.posts .post .content {height: 50px;}

[XENO QUEEN]

Jul 13, 2013 13:46:19 GMT -8 David Clark said:

Try adding the following to the bottom of your style sheet. I grabbed a working copy of FF and found, in my developer console, that this takes care of the issue:

.posts .post .content {height: 50px;}

Perfect. You, my dear, are a doll.

~ Georgie.

[David Clark]

Glad you're liking it. Let me know if I can help with anything else.

[XENO QUEEN]

I've got a few other threads if you're interested?

[David Clark]

If I can help I will - go ahead and link me to them.

[XENO QUEEN]

Tagged you in one.