Recent Threads and Participated.

[toetapping]

Forum URL: nicetomeet.proboards.com

I would like to put Recent Threads and Participated on the same line as in picture.

Thank you.

[Retread]

Hi toetapping

This will require a two-part process. First we'll create the styling for the additional buttons by defining a new class in your Style Sheet. Then we'll modify your Forum Wrapper layout template.


From your Admin panel, navigate:
Admin Home> Themes> Advanced Styles & CSS, then click on the Style Sheet tab.
Select the desired theme by using the dropdown to the right of the words: Current Theme.

Scroll all the way to the very bottom of the Style Sheet.

Then add this:

/* Styling for Nav-Tree addons */
.nav-tree-addon {
   color: @nav_tree_color;
   border-width: @nav_tree_border_width;
   border-style: @nav_tree_border_style;
   border-color: @nav_tree_border_color;
   background: @nav_tree_background_color;
   margin-bottom: 10px;
   height: 20px;
   .rounded-corners(@nav_tree_border_radius);
   font: @nav_tree_font;
   cursor: pointer;
   float: right;
   height: 14px;
   margin: 0 0 10px 10px;
   padding: 3px 6px 3px 6px;
   text-align: center;
}
.nav-tree-addon:hover {
   color: @nav_tree_hover_color;
   font: @nav_tree_hover_font;
   text-decoration: @nav_tree_hover_decoration;
   background-color: @nav_tree_hover_background_color;
}
/* End of Section */

Then click the Save Changes button at the bottom-left of the page or the Save Theme button near the top of the page.

---

From your Admin panel, navigate:
Admin Home> Themes> Layout Templates, then click on Forum Wrapper.
Select the desired theme by using the dropdown to the right of the words: Current Theme.

Find the line (somewhere near line 52) that looks like this:
           $[participated_threads_link]

Replace that line with these three lines:
           $[participated_threads_link]
           <a href="/threads/recent" class="nav-tree-addon">Recent Threads</a>
           <a href="/posts/recent" class="nav-tree-addon">Recent Posts</a>

Then click the Save Changes button at the bottom of the page or the Save Theme button near the top of the page.

---

Please let me know if this gets you where you want to go.

[toetapping]

Hi Retread. Thank you for getting back to me.  I would like though Recent Posts to be replaced by Participated.  I just wanted Recent Threads and Participated.

What is happening I click on a topic and it shows for a split second and disappears. It is in the right place when that happens but look where it is in the end. Top right hand side.

[Retread]

Hi toetapping

From the image you posted, I thought you wanted the line to have:

Navigation tree | Recent Posts | Recent Threads | Participated

The modifications I gave you should have done that. I don't know why the Recent Posts and Recent Threads buttons would relocate to the top of the page that way. It works correctly on a stock proboards theme.

Could you export the theme to your computer, then add an attachment to a reply in this thread, that would have the .pbt file for that theme? I could then examine it on my test forum to see if I can find the cause of this.

[toetapping]

Thank you Retread. I have exported it .

Attachments:

Animals.pbt (7.11 MB)

[Retread]

Okay toetapping , now I see why that happens. You have a script in your Forum Wrapper that moves the elements that normally appear above the banner ad, and places them below the banner ad. We'll add the new elements to that script so they will also be relocated.

From your Admin panel, navigate:
Admin Home> Themes> Layout Templates, then click on Forum Wrapper.
Select the Animals theme by using the dropdown to the right of the words: Current Theme.

On line 75 you should see this:
var elements = $("#wrapper header, #wrapper a.recent-threads-button, #wrapper #navigation-tree" );
Replace that line with this line:
var elements = $("#wrapper header, #wrapper a.recent-threads-button, #wrapper #navigation-tree, a.nav-tree-addon" );
Then click the Save Changes button at the bottom of the page or the Save Theme button near the top of the page.

---

If you want to get rid of the Recent Posts button, go to line 88 which should look like this:
           <a href="/posts/recent" class="nav-tree-addon">Recent Posts</a>And remove that line completely.

[toetapping]

Hi Retread thank you. I have Recent Threads looking nice. Is it possible to have Participated there as well?

[Retread]

hi toetapping

On my test forum, the participated button does show to the far right of the line where the Navigation Tree resides.



But for that button to display, the member must be logged in. This is normal behavior even on a stock theme.

Can you see it on your forum when you are logged-in, using that the animals theme?

[toetapping]

This is what I see Retread.

Do you want me to copy and paste any part and send it to you may save you time.

[Retread]

Hi@toetapping

I created an account on your forum so I could view it as a member. Using the Animals theme, this is what I saw:



I suspect the reason I'm seeing that and you are not, may be due to your account settings.

If you go to your own profile and click edit profile, then switch to the Settings tab, I think you'll find you have Show Participated set to No, via the radio button associated with that.

Also, you have this script somewhere on your forum, probably in the Global Header:


<script>

$(function(){
   var recent = $("a.recent-threads-button");
   
   recent.clone().attr("href", "/threads/recent").html("Recent Threads").insertBefore($("#navigation-tree"));
   recent.clone().attr("href", "/posts/recent").html("Recent Posts").insertBefore($("#navigation-tree"));
});

</script>

That's creating two clones of the Participated button. One for the Recent Threads, one for the Recent Posts. But it will only do that if the Participated button appears on the page. Not a good choice if you want those buttons to appear for guests as well as logged-in members.

[toetapping]

Brilliant Retread I now have just Recent Thread and Participated.

Thank you I really do appreciate your time helping me.

Enjoy the rest of the weekend.

[Retread]

Hey toetapping , glad to hear we got to your destination. I wouldn't call myself brilliant but it did require some tenacity and channeling my inner ...

[Kitezer]

Jul 24, 2020 15:21:59 GMT -8 Retread said:

Hi toetapping

This will require a two-part process. First we'll create the styling for the additional buttons by defining a new class in your Style Sheet. Then we'll modify your Forum Wrapper layout template.


From your Admin panel, navigate:
Admin Home> Themes> Advanced Styles & CSS, then click on the Style Sheet tab.
Select the desired theme by using the dropdown to the right of the words: Current Theme.

Scroll all the way to the very bottom of the Style Sheet.

Then add this:

/* Styling for Nav-Tree addons */
.nav-tree-addon {
   color: @nav_tree_color;
   border-width: @nav_tree_border_width;
   border-style: @nav_tree_border_style;
   border-color: @nav_tree_border_color;
   background: @nav_tree_background_color;
   margin-bottom: 10px;
   height: 20px;
   .rounded-corners(@nav_tree_border_radius);
   font: @nav_tree_font;
   cursor: pointer;
   float: right;
   height: 14px;
   margin: 0 0 10px 10px;
   padding: 3px 6px 3px 6px;
   text-align: center;
}
.nav-tree-addon:hover {
   color: @nav_tree_hover_color;
   font: @nav_tree_hover_font;
   text-decoration: @nav_tree_hover_decoration;
   background-color: @nav_tree_hover_background_color;
}
/* End of Section */

Then click the Save Changes button at the bottom-left of the page or the Save Theme button near the top of the page.

---

From your Admin panel, navigate:
Admin Home> Themes> Layout Templates, then click on Forum Wrapper.
Select the desired theme by using the dropdown to the right of the words: Current Theme.

Find the line (somewhere near line 52) that looks like this:
           $[participated_threads_link]

Replace that line with these three lines:
           $[participated_threads_link]
           <a href="/threads/recent" class="nav-tree-addon">Recent Threads</a>
           <a href="/posts/recent" class="nav-tree-addon">Recent Posts</a>

Then click the Save Changes button at the bottom of the page or the Save Theme button near the top of the page.

---

Please let me know if this gets you where you want to go.

Just wanted to mention I just tried this out on my site and it works perfectly! Just the way I was hoping. Thanks to both of you. (For requesting the code and for making it). Much appreciated. I had no issues on my end.