How to embed Posting Guidance in the Create Thread process?

[Retread]

Forum URL: (private)

I'd like to incorporate Posting Guidance (not sure if that's the correct terminology) in the Create Thread process, much the same as what's seen on the Support Board of the Support Forum.

I'd like to use it only on a few specific Sub-boards of our forum.

There are two items I'd like to include. 

1. 'Ghost text' for tips on thread title  <----- EDIT: the correct terminology is 'placeholder text' and item #1 is complete.  Thank you, Lynx
   
2. A 'Content box' with instructions on what kinds of threads are permitted in the sub-board as well as a link to the parent board for other threads. <----- EDIT #2: This is now complete.

Is there already convenient method to do this in my Admin tools or do I need to add code/script somewhere? 
Or perhaps there's a plug-in?

[Lynx]

Retread ,

For the "Ghost Text" (called placeholder text), since you only want it on certain boards, go to Admin > Structure > Headers & Footers. Rather than putting this in the Global or Main header, click on the board you want the placeholder shown in the subject line. In the header, you can drop this code in:

<script type="text/javascript">
$(document).ready(function(){
   var placeholderText = "Please briefly summarize your issue here. Avoid vague subjects like 'Please help' or 'Problem'.";

      if(pb.data('route').name == "new_thread")
      $('input[name="subject"]').attr("placeholder",placeholderText);
});
</script>

Just change the text in red to what you want the placeholder text to be in the subject line. Just put the code in each board that you want the placeholder text to show in the subject line.

[Lynx]

For your other inquiry, it looks like PB is basically just inserting a table after the subject line:




Unfortunately, I don't have the time right now to work up the code for you, but the Inspect Element image I attached should give you a start. The table looks to be a single row with 2 columns: the first column holds the image and the text is in the 2nd column. It also looks like there may be a .content-box class you might be able to use to put the table in.

Fair warning, I know there's a .content class, as I've used it in some of my plugins. However, I've never looked to see if there was a .content-box class available in a vanilla theme.


EDIT: Just as an after thought - this should probably have been posted in the Coding Help board.

[Retread]

Apr 29, 2018 6:43:37 GMT -8 Lynx said:

EDIT: Just as an after thought - this should probably have been posted in the Coding Help board.

Thanks for the help, both on the script for item #1 as well as the correct terminology.

I'll throw up a flag for a staff member to move this to Coding Help.

Less than an hour in, and I'm halfway home!

[Lynx]

Apr 29, 2018 6:55:39 GMT -8 Retread said:

Apr 29, 2018 6:43:37 GMT -8 Lynx said:

EDIT: Just as an after thought - this should probably have been posted in the Coding Help board.

Thanks for the help, both on the script for item #1 as well as the correct terminology.

I'll throw up a flag for a staff member to move this to Coding Help.

Less than an hour in, and I'm halfway home!

Heh - I looked at the clock wrong. Guess that's what I get for looking at it before my first cup of coffee.

I'm on my test forum now, seeing if I can put together the other half for you.

[Lynx]

Retread,

You can get rid of that last code I gave you - this one does both for you. Same thing, place in each board's header where you want them to show. Here's an image of the code as well, so I can reference line numbers:




Line 3: Put the placeholder text you want inside the quotes.
Line 4: Feel free to adjust the styling. Feel free to add your own class to the div, but please keep the content-box class there.
Lines 6-9: I separated out the table to make it easier to see the different parts. Make sure the += remains as is, as that what appends each line to the last (you'll break it if those are changed).

Line 7: Replace the image URL to one of your own please. I'm hosting that on my test forum.
Line 8: Whatever you put between the <td> and </td> tags is your text portion. Feel free to use <a> tags to create links.

WARNING: Do not change anything from Line 11 down!

Line 11: Makes sure we're on creating a new thread page.
Line 12: Puts our placeholder text (from Line 3) into the subject line.
Line 13: Inserts our table after the subject line.


CODE (goes in each board's HEADER that you want it to show in):

<script type="text/javascript">
$(document).ready(function(){
    var placeholderText = "Please create a thread here if you are requesting a new plugin.";
    var noticeBox = "<div class='content-box' style='padding: 10px; font-size: 14px; border-width: 3px;'>";
    
    noticeBox += "<table><tbody><tr>";
    noticeBox += "<td><img src='http://storage.proboards.com/6303556/images/RGSZLuwljrEsfTNEVDuA.png' style='padding-right: 10px;'></td>";
    noticeBox += "<td>(This is the text portion.  You can include links with the anchor tag.)</td>";
    noticeBox += "</tr></tbody></table></div>";

      if(pb.data('route').name == "new_thread") {
          $('input[name="subject"]').attr("placeholder",placeholderText);
          $(noticeBox).insertAfter('.subject_line');
      }
});
</script>

Just edit Lines 3, 7 (if need be) and 8 to have placeholder text, image (if need changing) and content text for each board to make it more specific to that board.

Enjoy!


EDIT: End result:

[Retread]

Apr 29, 2018 7:33:04 GMT -8 Lynx said:

Retread ,

You can get rid of that last code I gave you - this one does both for you. Same thing, place in each board's header where you want them to show. Here's an image of the code as well, so I can reference line numbers:

As it happens, the standalone version of placeholder text is exactly what I need in the parent board (Guitar Wiring) and the boilerplate version has the right wording for that location.  I popped that into that board Header on our forum and it works a treat.

I'll put the complete version on my test board first and make the necessary changes with the help of your nicely detailed instructions.  Then move it to the Schematics sub-boards on GN2.  I'll post again, either with questions about details should they arise (or more likely) to confirm that all is well.

At this point, I just briefly express my thanks for your quick response and the effort you put in.  I'll save the lavish praise for later, after I have some time to tweak it and enjoy the product.

[Lynx]

Glad it's (so far) working for you, Retread.

I also sent you a PM with adding a link example.

[Craig]

Brian posted the code used here, previously, if it helps.

support.proboards.com/post/6233392/thread

[Lynx]

Apr 29, 2018 9:16:00 GMT -8 Craig said:

Brian posted the code used here, previously, if it helps.

support.proboards.com/post/6233392/thread

I knew I had seen it before, Craig, but couldn't remember where. Thanks for posting that.

Also, just to note, Brian's code references a .support-reply-info class - to which was not mentioned as to what the CSS properties are that are affiliated with that class, and I don't think it's a standard class just by its name.

[Craig]

I know that feeling.

Brian injects a div after the subject line and sets that class, first.

$('.subject_line').after('<div class="content-box support-reply-info" style="padding: 10px; font-size: 14px; border-width: 3px;"></div>');

[Lynx]

Isn't that more of inline styling, rather than the styling of the class itself?

[Craig]

Apr 29, 2018 9:42:49 GMT -8 Lynx said:

Isn't that more of inline styling, rather than the styling of the class itself?

Ah, yeah.  That class does not exist outside of that code, so it has no existing properties declared.   Brian just made the class up to use in his code.  Not sure if that answers your question or not.

[Lynx]

Okay, thanks!

I could be wrong, but I read that like:

- take the properties of the .content-box class;
- take the properties of the .support-reply-info class;
- then, with inline styling, add / modify the specific properties in the inline style.

To me, that seems that the .content-box and support-reply-info classes may already exist with their own set of properties here on support, and the inline styling is just tweaking / adding properties to what those classes may already provide. So, while the .content-box class seems to be available in a vanilla theme, maybe Brian had added the .support-reply-info class for specific use here on support.


Thanks for the info though, Craig!

[Retread]

Apr 29, 2018 9:16:00 GMT -8 Craig said:

Brian posted the code used here, previously, if it helps.

support.proboards.com/post/6233392/thread

Thanks for posting that.  I stayed with the process given by Lynx but that seems to accomplish the same goal although there are a few differences in how he gets to the same result.  I don't know enough yet to understand the nuances, but at some point I'll try to learn something from comparing the two.


Status Report

This is now complete. The details were clear and thorough, both here and the tips given in the PMs for such things like paying attention to using single quotes rather than double quotes in particular place. That kept this rookie from making mistakes and slowing down the process.

We'll talk about verbage and style in our staff workshop but I have everything I need to make those adjustments. I think it we'll probably use just one link with the target attribute _self so as to not open a new tab or window.

The code:

SPOILER: Click to show

<script type="text/javascript">
$(document).ready(function(){
    var placeholderText = "Include indicators like 2HB-Superswitch-1V-1T-2DPDTs in the title when possible";
    var noticeBox = "<div class='content-box' style='padding: 5px;  text-align: left; background-color: #ffff88;  font-size: 14px; border-color: #ff0000;  border-width: 3px;'>";
    
    noticeBox += "<table><tbody><tr>";
    noticeBox += "<td><img src='http://dev.prbrds.com/s/o/YrNROqgNolFRPJRPbvmU.png' style='padding-right: 10px;'></td>";
    noticeBox += "<td>Whoa thar, big fella!  Are ya sure ya wanna post here?  Schematics sub-boards are reserved for presentation of <b>completed</b> schematics or wiring diagrams.  If you are requesting a custom diagram to suit your application or help working on your design, please start your thread on the <a href='/board/28' target='_blank'><b>Guitar Wiring board</b></a>.  If you prefer, you can go <a href='/thread/new/28' target='_self'><b>directly</b></a> to the thread creation process for Guitar Wiring.  Thanks!</td>";
    noticeBox += "</tr></tbody></table></div>";

      if(pb.data('route').name == "new_thread") {
          $('input[name="subject"]').attr("placeholder",placeholderText);
          $(noticeBox).insertAfter('.subject_line');
      }
});
</script>

The result:

SPOILER: Click to show

One quick, terminology question. Are what's between the single quotes referred to as attributes and what's between double quotes referred to as definitions?

There's only one more thing I want to express.

SPOILER: Click to show