[Tutorial] Show the first post reminder in specific topics

Go down

[Tutorial] Show the first post reminder in specific topics

Post by Wecoc on March 18th 2018, 3:16 am

With this trick you will be able to show the first post reminder in only specific topics.
It works in phpBB3, punBB, Invision and modernBB.
It doesn't work in phpBB2.

Instructions


1) Enable the first post option.

To do that you have to go to:
General Configuration Messages Always show the first post in the topics Yes

2) Open the template viewtopic_body

Display Templates General viewtopic_body

phpBB3 and modernBB:
Search this line:

Code:
<div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">

and change it by this:

Code:
<div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}<!-- BEGIN first_post_br --> first_post<!-- END first_post_br -->"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">

punBB:
Search this line:

Code:
<div class="post post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">

and change it by this:

Code:
<div class="post post--{postrow.displayed.U_POST_ID}<!-- BEGIN first_post_br --> first_post<!-- END first_post_br -->"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">

Invision:
Search this line:

Code:
<div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ONLINE_IMG_NEW} clearfix post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">

and change it by this:

Code:
<div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ONLINE_IMG_NEW} clearfix post--{postrow.displayed.U_POST_ID}<!-- BEGIN first_post_br --> first_post<!-- END first_post_br -->"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">

3) Add this in your CSS

Display Colors CSS Stylesheet

Code:
/* Hide first post reminder (default) */
.first_post, #first-post-br { display: none }


4) Insert the Javascript

Modules Javascript codes management Create a new Javascript

Make sure you have Javascript Codes enabled.

Name: First post toggle
Placement: In all the pages

Code:
$(function() {
  $('.first_post').filter(function(){
    var e = $(this);
    if (e.html().indexOf("<!--first_post-->")) {
      var post = e[0];
      var br = post.nextElementSibling;
      post.style.display = "block";
      br.style.display = "block";
    }
  });
});

How to use it


The first post will not be displayed by default in other pages.
To display it you have to add
Code:
<!--first_post-->
on its content. Don't worry, that will not be shown in the post itself.



Extra:
You may want to add a SCEditor button to insert that text automatically for you in your post.
To do that, add this in the same javascript, after the code I posted before.

Code:
$(function(){
  $(function(){
    $('<a class="sceditor-button sceditor-button-firstpost" unselectable="on" title="First post reminder"><div unselectable="on">First post</div></a>').insertAfter('.sceditor-button-removeformat').click(function(){
      $('#text_editor_textarea').sceditor("instance").insertText("<!--first_post-->");
    });
  });
});

And add this in your CSS:

Code:
.sceditor-button-firstpost div {
  background-image: url('https://i62.servimg.com/u/f62/19/86/96/38/first_10.png') !important;
}

And that's all. Hope you find it useful Wink
avatar
Wecoc
Forumember

Male Posts : 127
Reputation : 82
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: [Tutorial] Show the first post reminder in specific topics

Post by Luffy on March 18th 2018, 10:14 am

And what does this do? Do we have an image to see the result?
avatar
Luffy
Manager
Manager

Male Posts : 5510
Reputation : 607
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Re: [Tutorial] Show the first post reminder in specific topics

Post by Wecoc on March 18th 2018, 3:10 pm

Well, it's difficult to show the result with an image in this case, but let's see...

Spoiler:

I used the same principle as in the tutorial Hide the sentence "Last edited by..." on specific or all messages. Also, now the first post reminder has a specific class called first_post, so you could modify some properties of it via CSS.

Spoiler:
avatar
Wecoc
Forumember

Male Posts : 127
Reputation : 82
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: [Tutorial] Show the first post reminder in specific topics

Post by SLGray on March 19th 2018, 1:18 am

So if you do not want to use the first reminder feature in the AP, you can use this one for certain topics?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43465
Reputation : 3084
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: [Tutorial] Show the first post reminder in specific topics

Post by Wecoc on March 19th 2018, 1:29 am

Long story short, this uses the first reminder feature in the AP but "hides" it by default except for certain topics.
Sorry if I didn't explain it well enough the first time.
avatar
Wecoc
Forumember

Male Posts : 127
Reputation : 82
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum