Skip to main content

FluentCommunity

#General

Font size and spacing in left & right sidebars

Please help me with css code to increase sidebars fonts and reduce links spacing
(both for left sidebar and right sidebar with lessons links)

Thanks!

  • 8 comments

Thomas Oates

I think his will work for the left sidebar. I don't have courses enabled so I can't test that part. Adjust numbers accordingly.

.fcom_sidebar_contents .fcom_menu_link {
    font-size: 16px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

Sophia S

Thomas Oates this is great, is it possible to change the font-size for the body and post items nd every other thing on the platform?

Thomas Oates

Sophia S Yep, I did that for the site I'm working on. Here is what I used to change most everything at once.

body * {
    font-family: sans-serif !important;
    font-size: 14px !important;
}
h1, h2, h1 a, h2 a, h1 span, h2 span {
    font-size: 16px !important;
}

D@vid

Thomas Oates 👍Thx !

Sophia S

Thomas Oates thank you, it sees like this only works on PC not mobile. Have you confirmed in any way?

Thomas Oates

Sophia S It does but you may need to clear your browsing history and files on your mobile device to force it to download the CSS updates. Or try with an incognito (or similar if not Chrome) tab.

EricK Bueno

Thomas Oates Do you know if I can change the font type for the entire community?

Thomas Oates

EricK Bueno Yep, you can. What I did was create a separate CSS file inside my theme. I added all the FluentCommunity style settings in it. Example:

body * {
    font-family: sans-serif !important;
    font-size: 14px !important;
}
h1, h2, h1 a, h2 a, h1 span, h2 span {
    font-size: 16px !important;
}

Then I used the following code in my theme functions.php file (it may work using FluentSnippets also).

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
}

You could probably do the same using the Custom CSS setting under Customizations inside FluentCommunity admin but I like to be able to easily manage all the CSS in one file.