Specific theme for a thread - looking for help.

[SilverEyes]

Forum URL: br-legion.boards.net/


Hello!

Once more I come searching for a friendly point in the right direction, knowing full well that yet again I may get much more than what I asked for, and be probably offered a complete solution.

Which is to say how great I think everyone is on ProBoards... So far, the help has been outstanding.
Anyways, nuff' with the praise, let's get down to my query.

I have set-up a public board on my private forum.
Within that public board, I have locked and stickied threads, for informational purposes directed at visitors.

I'd like to also set-up a visitor's book thread, a "Livre d'Or", to allow the said visitors to leave a message.
Now here comes the tricky part.

I'd like for all posts within that thread, and only within that thread, to differ from my main theme, with regards to font (weight, style, colour, size), container background (I have a hi-def image of antique paper that I'd like to background-repeat:repeat-y, and background-size:cover), container padding (to make sure the text fits nicely within the background page).

Is it possible to pre-set such an automated theme for only a specific thread? Not even talking about the whole public board, but only that very thread.
Can it be done within the CSS style-sheet, or will I have to go through some javascript in my footer to make the magic happen ?
Finally, is there a cursive font (ie: handwriting) that is browser-safe (should normally work/display for everyone)?

Thanks for any help that comes my way!
Best regards!

[Craig]

Hi

Each post does have it's own id, in the form of post-xx where xx is the post's id number. To get the ID number, you can click the cog in the right hand top corner, and select link to post. This will show you a link like:

support.proboards.com/post/6125208

Which is for your post above. The numbers at the end is the post's ID. So, say i want to edit the styling of your post above, i could say in the stylesheet:

#post-6125208 td {
font-weight: bold;
color: #000000;
background-image: url('');
}

You can add your own styling, obviously. But give that a try, and see how it goes.

[SilverEyes]

Thank you Craig for the quick reply. In effect, tell me if I'm wrong, that would allow me to format a post once it has been created, and therefore generated a post id.

What I want to do is to set a specific theme to a thread, so that ANY POST created within the thread are AUTOMATICALLY formatted to the specified theme attributes mentioned above.

A bit as if I had set .container { background-image:... etc}, but specified for posts that will be created within the target thread. Which, following your logic, leads me to a question: is there such a thing as a thread id? And therefore, could I define .container etc with regards to thread id, making it that any posts within the thread designated by it's id are formatted automatically with the new specs?

Not sure if I'm being clearer about it. But I do have a great excuse, I'm french

[CheatAreZee]

Hi SilverEyes,

You are correct. What Craig provided would allow you to adjust based on a topic that you have created already, rather than a specific board on your forum.

With that said, if you want to change the styling of a specific board on the forum, you could visit your admin panel and then navigate to Structure > Headers & Footers. Once there, double-click on the name of the board that you want the different styling for, and then on the next page you can use CSS or Javascript in the header text box to modify the look for that particular section of your forum

[SilverEyes]

Thank you CheatAreZee. I have learnt, thanks to you, that what I place in the header of a specific board will apply to that board only. That is a great step forwards!

Now, the problem is that I don't want to change the format of posts within all threads within the board, but only of posts within a specific thread, within a board.

I see two possible issues:
EITHER it is not possible to differentiate one thread from another within a board when specifying things such as container background image, etc, and therefore I will need to have TWO public boards, one for the locked threads, and one for just the visitor's book.
OR it is possible, when defining .container values, to specify containers values that concern one specific thread as opposed to others within the same board. If it is, I'd love to know how.

Once choice has been made on course of action, comes the second point:

How to differentiate the container of the first post in the target thread...
- which will have a specific design (with a huge book, welcome text, bla bla bla) applied within the post using

DIVs within the post itself -

...from the containers of the following posts that will be created by the visitors as they leave messages in the visitor's thread
- which will obey the formatting specified within the header -

With regards to the second point, if a generic set of theme values are set for all the containers within the thread, be it first post or not, can those be over-ridden by format within the post, by applying DIVs?
For example

[div style="background-image:url('html...');..."] Hello Visitors, thank you for visiting our "Livre d'Or"... bla bla bla [/div]

Would that over-ride any container format set in the Header by .container values?

Thank you so much for the time taken, I'm eagerly awaiting a reply, this is a big step forwards for me - I've only learnt how to do all this stuff a few weeks ago.

Regards.

Edit: Is there a difference as to where I play the CSS stuff, header or footer?

[CheatAreZee]

If you only want to style it for specific posts of a select thread, you could use the Post ID's to single them out. For example, if you were to click the gear icon to your post above here on support and then select the "Link to Post" option you'll be presented with the following link:

support.proboards.com/post/6125374/thread

The number 6125374 in the URL is the ID of the post, and would be what you would want to use for that. Unfortunately I'm not sure of the exact means you would use to style the post (like what Craig provided for example), but that would be one way it could be done. This would also depend on the post already existing before it could be styled.

In regards to placing CSS in the header / footer area, typically you would want to place it in the header so that it's one of the first items loaded on the page

[David Clark]

SilverEyes, if you had some CSS you wanted to apply to a specific thread, you could try using an {if} statement in your Thread template that contains the CSS.

Go to Admin > Structure > Thread and use this at the bottom of that template:

{if $[thread.id] == 5}
    <style>
        /*Your thread-specific CSS goes here*/
    </style>
{/if}

This will apply whatever CSS you have in place of the highlighted bit to the thread with the ID "5" -- you can edit that "5" to match whatever the thread ID is that you want to change. (Find the thread ID right inside the thread's URL. For example, this thread's URL is support.proboards.com/thread/534068/specific-theme-thread, so the ID is 534068)

[SilverEyes]

Craig, CheatAreZee, David Clark, many thanks to the 3 of you for the great help and advice supplied so far. Sorry for the late response, pressing maters keeping me away from the computer, and my style sheet.

Anyways.

First of all, as I have mentioned earlier, the post-id method suggested by Craig and CheatAreZee is not going to cut it: unless there is a way to predict a post-ID before the post is even created, the method relies on creating CSS code to apply on an already existing post. I want to create an existing style that will apply to the posts as they are created. Once the style is set, posts should take the desired format as new visitors create them.

I am considering David Clark's method. Even though the Header method seems perfectly legitimate, I like the idea of creating structure within the template, and pointing to new definitions within the CSS (which I suppose I can give the names I want, such as ".livre_background"). Edit: I just realised that the style brackets means I don't have to point to definitions within the CSS sheet, I can just define them directly in the HTML template. This will be the first time I'm actually "creating" something, and not just changing values here or there, or copy pasting code supplied. Time to see if I really have learnt anything over the past 3 weeks. I think I will basically inspire myself from the structures that are already present in the thread template.

So, I am going to go for a style that applies to a whole thread. And then, with regards to the first post within the thread, the "welcoming" post, I shall change the format of that specifically, by pointing to it as both Craig and CheatAreZee suggested respectively.
If you don't mind, I will come back here to post what I have done, both for error check and reference.

Cheers!

[SilverEyes]

Help! Quick question!

I'm using .message to define the styles, as such:


{if $[thread.id] == 62}
   <style type="text/css">
       /*Your thread-specific CSS goes here*/
       .message {
           padding: 1em;
           min-height: 500px;
           background-image: url('http://storage.proboards.com/6044970/i/RUNAH8kLyS3dcueu3SW4.jpg');
           background-position: left;
           background-size: cover;
       }
   </style>
{/if}


However, it's ofc applying the style to .message in general, whether it's being called by the post template or the Quick reply template. How can I specify that I want to change the style of .message ONLY for it's use in the post template ?

[David Clark]

Try using ".posts .post .message" as the selector instead of ".message".

If you're going to be styling PMs the same way, use this:


.posts .post .message,
.messages .item .content .message {
/*Your thread-specific CSS goes here*/
}


[SilverEyes]

Genius David Clark!
Working like a charm.

Will continue on this tomorrow (since it's nearly 2am here, I really need some sleep ) and ofc I'll keep this thread updated.

Quick question though, out of learning curiosity: why are we adding ".messages .item .content .message" to
.posts .post .message ?

[David Clark]

Here's a quick article on CSS selectors and what they accomplish -- in this case, we're providing a very specific selector so we only affects posts and not anything else by accident, but if we wanted to do so we would be able to use "#content div" as a selector to select all div elements within the element with the ID "content", for example.

[SilverEyes]

Thx David Clark! Fantastic link, very useful.

A last one for you, and then I really must be going.

Once I've styled how I want every post in the thread to be, I'm going to define a specific style for the first post of that thread, which is the welcoming post, by using post id.

If I have read correctly how the CSS selectors work, I want to first define the parent #post-391, and then define exactly what has to be changed WITHIN that parent element.

Hence, would I be right in thinking that, to style my first post, I would be coding something along the lines of :



<style type="text/css">

   #post-391 > .posts .post .message,
   #post-391 > .messages .item .content .message {
       /*CCS styles here*/
   }

</style>


Is that correct?

[SilverEyes]

Good morning!

Okay, so I'm back after what has been a pretty much sleepless night. I was so excited to do all these new things that I just couldn't let it go. Fortunately, we are the week end.

So, step 1 complete. I have managed to do pretty much all I wanted.

- Set-up a theme specifically for a thread, identified by it's ID.

- Set-up a background image specifically for the first post of that thread.

- Hide some things from the thread, such as signatures.

Here is the code I used:


{if $[thread.id] == 62}
   <style type="text/css">
       .posts .post .message,
       .messages .item .content .message {
           font-family:"Apple Chancery", "Zapf Chancery", "Monotype Corsiva", Georgia, cursive;
           color: rgb(92,44,34);
           font-size: 22px;
           font-weight: 400;
           line-height: 1.3em;
           padding: 1.5em;
           min-height: 8em;
           background-image: url('http://storage.proboards.com/6044970/i/RUNAH8kLyS3dcueu3SW4.jpg');
           background-position: center;
           background-size: cover;
           background-repeat: repeat-y;
       }
       .posts {
           background-color: transparent;
           background-image: url('http://storage.proboards.com/6044970/i/qUd3qXDKRwbyDOdqxbW9.jpg');
       }
       .signature {
           display:none
       }
       #post-391 .message,
       .messages .item .content .message {
           background-image: url('http://storage.proboards.com/6044970/i/Ze_YvNwc34HEKRpm3_mE.jpg');
           background-size: cover;
           background-position: center 47%;
           height:26em;
       }
       #post-391 .foot {
           display:none;
       }    
   </style>
{/if}


And here is what it looks like :

Now, there are still some tiny tweaks that I'd like to do, but I'm having some troubles with the pointers. I have studied carefully the link that David Clark provided about CSS selectors, but I'm still very much the newbie.

So, here it goes, if anyone can help me find the right selectors, would be wonderful.

• Deactivating/hiding certain mini-profile items

I was thinking of applying something like .selector {display:none}. I'd also like to deactivate the custom background, and make it transparent.

• Scroll the first post down as much as possible

I tried to remove this space with

#post-391 .foot {
           display:none;
       }
but apparently that only made the "content" disappear (last edited by...) but not the container itself. Either that, or there is a padding value somewhere that I need to set to zero.

• Fiddle with the font within the quote containers
  
  

What are the selectors that point to the time stamp, and the username link ?

There we go, if anyone has any ideas, please feel free to let me know!

[Craig]

Morning

For the mini profile, two of the three are pretty easy, and can be selected:

.posts .mini-profile .awards,
.posts .mini-profile .post_activity_target {
...
}

That should get the awards, and the activity bar. However, the online does not have it's own class. You can add one, however, by editing the mini profile template. Look for your online part, since it looks like you have edited that, i can't be specific, but the line should look similar to this:

{if $[user.is_online]}<br /> CODE FOR IMAGE {/if}

Wrap the code you have to display an image in a span tag, and give it a class of, say, online-status

{if $[user.is_online]}<br /><span class="online-status"> CODE FOR IMAGE </span> {/if}

So you would then be left with the following to hide them:

.mini-profile .awards,
.mini-profile .post_activity_target,
.mini-profile .online-status {
display: none;
}

For the background, it should be:

.mini-profile {
background: none #transparent;
}

########################################################################################

There is a padding for 10px within the containing cell, but that space looks a lot more than 10px. Did you want the space removed altogether, or just reduced to the normal 10px spacing?

########################################################################################

.quote_header .time {
....
}