Skip to main content

FluentCommunity

#General

Styling and layout customization for Fluent Community portal on mobile (WebView)

Hello Fluent Community Team and fellow developers,

I’m currently building a mobile app using AppMySite that loads Fluent Community entirely via WebView. Everything is working well, and the app renders the /heplus portal frontend of Fluent Community without issues.

However, I’m trying to customize the top navigation bar (header) specifically for mobile devices — for example, slightly increasing the header height, enlarging the logo, and adjusting padding and font sizes in the menu.

🔍 What I’ve tried:

  • Using standard WordPress “Additional CSS” (didn’t apply inside the portal).
  • CSS via Elementor (not loaded in /heplus).
  • JavaScript-injected CSS — not ideal for performance.
  • Finally, attempted to use the fluent_community/portal_head hook to inject mobile-specific \ code, which seems promising.

❓ My question:

Is there an official or recommended way to apply CSS or style overrides exclusively within the Fluent Community portal?

Specifically:

  • Are there supported methods (hooks, filters, templates) for injecting custom styles or modifying layout components?
  • How can we ensure that styles applied are scoped to the portal without affecting the rest of the WordPress site?
  • Does the portal support any custom class wrapping or mobile UI configuration layer?

Any recommendations, tips, or code examples would be greatly appreciated.

Thank you again for your amazing work — Fluent Community is an excellent solution!

Warm regards,

  • 3 comments

Ross FCA

You can add CSS from within the portal admin under Customisation settings. This CSS only applies to the portal and not the rest of your wordpress site.

Thomas Oates

You can also do something like this and put all your FluentCommunity specific CSS settings in a css file.

    add_action( 'fluent_community/portal_head', 'theme_load_custom_fc_css' );
    function theme_load_custom_fc_css() {
        ?>
        <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/fcstyle.css" media="all">
        <?php
    }

King Arius Official

This code is a WordPress PHP snippet that adds a custom CSS stylesheet to a website.

Here's how it works:

  • add_action( 'fluent_community/portal_head', 'theme_load_custom_fc_css' );

    • Hooks a function (theme_load_custom_fc_css) into the 'fluent_community/portal_head' action, which runs when the portal's head section loads.

  • The function theme_load_custom_fc_css() outputs a <link> tag that references a CSS file located at the theme's stylesheet directory, specifically fcstyle.css.

  • When the page loads, this CSS file is included in the <head>, allowing custom styles defined in fcstyle.css to be applied.

In summary, this code dynamically adds a custom stylesheet to style the page when using the Fluent Community plugin or theme.