Notifications
Clear all

wpForo Forums Widget looks different in Elementor editor vs frontend

4 Posts
2 Users
0 Reactions
101 Views
Posts: 3
Topic starter
(@d0rk62)
Active Member
Joined: 3 weeks ago

I’m using the wpForo “Forums” widget inside Elementor (WordPress widget).

In Elementor edit mode, the forum list displays correctly (icons, spacing, parent/child hierarchy).
On the frontend, the same widget renders flatter — Font Awesome icons disappear and indentation/spacing changes, even though the HTML output is identical.


3 Replies
Robert
Posts: 10617
Admin
(@robert)
Support Team
Joined: 10 years ago

Hi @d0rk62 ,

The Elementor edit mode doesn't load wpForo CSS code. Also, wpForo widgets are displayed correctly if they are loaded in wpForo Sidebar, in other places you'll see different layout and stile. So we only support wpForo widget layout and style issues if they have been loaded in wpForo Sidebar in through Appliance > Widget admin page. Other ways of inserting wpForo widgets will have unexpected results in therms of view, because the CSS class and ID tree will be crashed even if the widget HTML is the same.

Please use wpForo sidebar for wpForo widgets if you want to get the best results. In other cases you should do custom CSS to make it look as you want.

The doc: https://wpforo.com/docs/wpforo-v2/getting-started/forum-sidebar-and-widgets/wpforo-sidebar/


Reply
Posts: 3
Topic starter
(@d0rk62)
Active Member
Joined: 3 weeks ago

Key points from Robert (wpForo admin):

  1. Elementor edit mode does NOT load wpForo CSS - But I see the images in edit mode they dont display when im out of edit mode.

  2. wpForo widgets are only officially supported inside the wpForo Sidebar.. ok thx

  3. When widgets are placed elsewhere (Elementor, page builders, theme areas):

    • CSS class/ID structure does not match

    • Layout and icons may break

    • Behavior is considered unsupported

  4. If you don’t use the wpForo Sidebar:


Reply
Posts: 3
Topic starter
(@d0rk62)
Active Member
Joined: 3 weeks ago

got it
https://mspservices.us/

  • Go to WordPress Admin → Plugins → Add New

  • Search for “Code Snippets”

  • Install & Activate it

  • Go to Snippets → Add New

  • Name it something like:

    Force Font Awesome 5 for wpForo & Elementor

  • Paste this code:

    add_action('wp_enqueue_scripts', function () {
    
        // Force Font Awesome 5 (required by wpForo & Elementor frontend)
        wp_enqueue_style(
            'fontawesome-5',
            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css',
            [],
            '5.15.4'
        );
    
    }, 5);
    

Reply