Hi there. Newly arrived here. Thanks in advance for your support.
For the life of me, I cannot target the text inside the reply box for any topic. Let's say someone post a new topic and another one responds to it. I wish to style the replies. Which css to use to target the content of these replies? Grateful for your assistance.
p.s. Is there a location where there is list of all css targeting each part of a wpforo? I see in the styling section area a yellow box with lots of css codes in there. I tried to find and use the ones including reply but no effect at all despite Ctrl+F5 twice. Looks like I am hitting the right spot.
Hi there @manoskout and welcome.
When you say you want to style the replies, I think it depends what forum view you have adopted.
Do you have a screenshot of the portion of the screen you are looking to style? That would probably help anyone who replies.
Hello there,
Thanks for the welcome and reply. I'm using Extended layout here, I believe. But it'll be nice to have the css for all 4 layout since I plan on using them later on.
Ps. Identifying how to CSS target the replied content is only step 1 of what I want to achieve in the end. Would love to clear that first hurdle. Thanks so much for the assistance, everyone.
@manoskout hi again.
I could be wrong but the post template used for the original topic and the replies is the same.
I say "I could be wrong" because I'm not up to date with the latest wpForo version as I use a customised, older version.
In any case, it is possible to customise the CSS for most parts of wpForo with the custom CSS styles found under Settings (pic attached).
Have you tried that approach?
@fawp Hello again,
Thanks for the reply. Do you mean this area (see screenshot)? If yes, I'm already placing my custom code there. My current issue is about finding the precise css handle targeting the content inside the reply box. When I try Inspect Element in Google chrome, the css attribute I find affects the topic starter as well as the replies. They cannot be differentiated. Does wpforo provide a premade list of all css handles targeting distinct part of the forum? I see a yellow text area in settings where there are dozens of css codes but none I've isolated so far has affected the reply section. Besides, they don't even look like any of the css selector shown under Chromed inspect element.
Do you mean this area (see screenshot)?
Yes, that's the area.
the css attribute I find affects the topic starter as well as the replies. They cannot be differentiated.
Which would be consistent with what I mentioned earlier: the topic post and the reply post are from the same template, so styling one affects the other too.
Does wpforo provide a premade list of all css handles targeting distinct part of the forum? I see a yellow text area in settings where there are dozens of css codes but none I've isolated so far has affected the reply section. Besides, they don't even look like any of the css selector shown under Chromed inspect element.
In this regard it's most likely a matter of trial and error. Achieving the styling you want takes practice and mostly is a function of knowing CSS. How familar with CSS are you?
@fawp Thanks for the reply. I am quite familiar with CSS (I think :-)) 😀 . It's just that finding the selectors for the wpforo forum parts has proven elusive until now.
Here is the code that targets my reply box (as well as initial post)
#wpforo #wpforo-wrap .wpforo-post .wpforo-post-content p, #wpforo #wpforo-wrap .wpforo-revision-body p, #wpforo #wpforo-wrap .wpforo-post .wpforo-post-content span {
font-family: "Arial Rounded MT Std", Arial, sans-serif !important;
filter: blur(5px);
opacity: 0.5; /* Fade effect */
transition: filter 0.3s, opacity 0.3s;
color: red;
font-size: 30px;
}
My ultimate goal actually was to hide the content inside the replies box for some usergroups (with a blur effect achieved via CSS) while allowing the original starting topic to be read/viewed by all usergroups/user roles. I got the blur effect fine but it affects the original topic too. I wish there was an easy way to add another class to the reply content and apply styling to it only.
But now that I think of it, I may be dealing with this challenge the wrong way.
(Using forum access settings) If you were to allow viewing of forum Post #1 for all usergroups A, B, C..., but hide/blur the subsequent replies to a specific usergroup B, how would you achieve it?
thanks again for all the assistance provided so far. It is very much appreciated.
p.s. For the Xenforo forum, Wutime (a Xenforo user/developer) was able to create a full-fledged plugin that does just that: It's called Content Blur Pro and has been operating for about half a decade now. Do we have anything similar for Wpforo? or other ways to achieve similar results?
My ultimate goal actually was to hide the content inside the replies box for some usergroups (with a blur effect achieved via CSS) while allowing the original starting topic to be read/viewed by all usergroups/user roles. I got the blur effect fine but it affects the original topic too. I wish there was an easy way to add another class to the reply content and apply styling to it only.
Ok, so if that's what you're after, I think CSS is not the way to go. If a user is knowledgeable enough all they would have to do to bypass CSS is open up a web inspector and turn off the CSS attributes you put in place.
What you can do with permissions is let all users see the name of a certain topic, but then allow only selected usergroup to open the topic and see all the replies.
I am not aware of wpForo permissions where you can see the topic first post only.
