Notifications
Clear all

wpForo 1.x.x [Solved] Sticky topic styling

13 Posts
4 Users
5 Reactions
1,149 Views
Posts: 5
Topic starter
(@istcwebmaster)
Active Member
Joined: 4 years ago

Is there any way to make sticky topics stand out more? Like change the background colour or something? 

The padlock icon isn't distinct enough so looking for ways to make sticky posts more obvious and visible (they will contain guidelines for the forum users so don't want them to 'not see them').

Topic Tags
12 Replies
1 Reply
Robert
Admin
(@robert)
Joined: 9 years ago

Support Team
Posts: 10589

Posted by: @istcwebmaster

Is there any way to make sticky topics stand out more? Like change the background colour or something? 

The padlock icon isn't distinct enough so looking for ways to make sticky posts more obvious and visible (they will contain guidelines for the forum users so don't want them to 'not see them').

New solution started from wpForo 2.2.9 version:

https://wpforo.com/community/how-to-and-troubleshooting-2/sticky-post-styling/paged/2/#post-107093

 

Tutrix
Posts: 1452
(@tutrix)
Noble Member
Joined: 4 years ago

@istcwebmaster

you can use jQuery for this

Example for a gray background and an orange border

jQuery( ".wpforo-topic-title i.fa-thumbtack" ).parent().parent().parent().parent().css({ "background-color": "#f5f5f5", "border" : "1px solid #ff9900" } );

paste this code into a .js file of your Wordpress theme

 

by the way padlock icon is not sticky

 

 

Posts: 5
Topic starter
(@istcwebmaster)
Active Member
Joined: 4 years ago

@tutrix thanks for this, I'm looking for a CSS solution though. 

Aware the icon itself isn't sticky, I just mean a way to highlight the 'sticky' posts when you look at them in a list on a forum.

7 Replies
Alvina
Moderator
(@alvina)
Joined: 5 years ago

Member
Posts: 1863

@istcwebmaster,

Please leave your forum URL to allow us to check and provide some code for you.

(@istcwebmaster)
Joined: 4 years ago

Active Member
Posts: 5

@alvina Forums are for members only so require a login to access... it's using the Simple layout if that helps.

Alvina
Moderator
(@alvina)
Joined: 5 years ago

Member
Posts: 1863

@istcwebmaster,

Please try the following JS code:

jQuery( "i.fa-thumbtack" ).parent().parent().parent().parent().css({ "background": "#cd2653", "border" : "1px solid #FF9900" } );

The red marked value can be changed.

(@istcwebmaster)
Joined: 4 years ago

Active Member
Posts: 5

@alvina thanks, I don't have the ability to use jQuery I don't think? No place to put JS code that I can see... is there a PHP alternative?

Alvina
Moderator
(@alvina)
Joined: 5 years ago

Member
Posts: 1863

@istcwebmaster,

Here is the good instruction on how to add a js file or js code in the active theme:

https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/

Tutrix
(@tutrix)
Joined: 4 years ago

Noble Member
Posts: 1452

@istcwebmaster

Which Wordpress theme are you using?

Tutrix
(@tutrix)
Joined: 4 years ago

Noble Member
Posts: 1452

@istcwebmaster

unfortunately there is no possibility via CSS

use the code I posted above I also use it, look here

but that only works with sticky Post, not for just closed (padlock icon)

Posts: 5
Topic starter
(@istcwebmaster)
Active Member
Joined: 4 years ago

Thank you for all the help, I installed a plugin to allow custom JS, then used the code above and it works!!

Appreciate the patience, I've still got a lot to learn.

1 Reply
Alvina
Moderator
(@alvina)
Joined: 5 years ago

Member
Posts: 1863

@istcwebmaster,

Thank you for letting us know.

Glad to hear it worked.