Perfect Dark and Light. theme Snippet
Hey guys, checkout I created a perfect dark and light theme snippet for my community, who wants this PHP Snippet?
Here is the link to the snippet https://onemco.com/forum/d/84-community-skin-php-snippet
GREAT job, Manoj Sharma!
I want it, how to get it
Nestor Lima I tried sending on this chat and in private message but its not working... let me raise this as a bug...
Manoj Sharma Great work🔥
Can you send to me pls
Manoj Sharma did you tried to use the / Slash commend for Code formatting?
Manoj Sharma I don’t know what’s going on. Can you send it to my email? [email protected] This is my email address.
Nestor Lima you can copy snippet from here... https://onemco.com/forum/d/84-community-skin-php-snippet
Please click the link I hsared... and copy the Php code and use snippets..
Manoj Sharma thank you
Mat nope, let me try it...
I’d love to have it :-) Manoj Sharma
That's awesome - I'd love to have it, too, Manoj Sharma!
Kymberlee Medina here you go.. copy it from here https://onemco.com/forum/d/84-community-skin-php-snippet
Same would love this!
Is it the colour gradient that you've added on top of the regular dark/light feature? Yes that be cool
Manoj Sharma Could we apply this CSS to the rest of the Theme, because I am concerned about linking out to any other pages of the site outside of the /portal and it not looking the same. I think this is super important to keep the look/feel of the whole site and deserves its own post probably.
Daniel Herrera yes, you can apply any css you like, Ninja Team has designed it beautifully...
You can use put your css in between style tags...
add_action('fluent_community/portal_head', function() { ?> \ \
\<?php
});
Manoj Sharma have you worked out how to load a different font in and apply it?
I worked it out :-)
thank you Manoj Sharma you've enabled me to style my whole portal to look like my main website :-)
Paul Hopkins that is so cool...
/* ONEMCO Skin for Fluent Community Light/dark */
add_action('fluent_community/portal_head', function() {
?>
<style>
/* Light Mode Variables */
<a data-user_name="media" class="fcom_mention fcom_route" href="https://community.wpmanageninja.com/portal/u/media/">Media Rocketeer</a> (prefers-color-scheme: light) {
body {
/* Primary Background Color */
--fcom-primary-bg: #ffffff !important;
/* Secondary Background for Gradients */
--fcom-secondary-bg: #CAD0FF !important;
/* Active Background (e.g., for selected menu items) */
--fcom-active-bg: #c6cbf9 !important;
/* Light Background for Header and Sub-header */
--fcom-light-bg: #d5daff !important;
/* Deep Background, typically used for dark accents */
--fcom-deep-bg: #222530;
/* Text Colors */
--fcom-menu-text: #545861;
--fcom-primary-text: #19283a;
--fcom-secondary-text: #525866;
--fcom-text-off: #959595;
--fcom-text-link: #2271b1;
/* Button Color */
--fcom-primary-button: #2B2E33;
/* Border Colors */
--fcom-primary-border: #e3e8ee;
--fcom-secondary-border: #9CA3AF;
/* Highlight Background for Interactive Elements */
--fcom-highlight-bg: #fffce3;
/* Skeleton Loading Animation Background */
--fcom-skeleton-bg: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 37%, #f0f2f5 63%);
/* Primary Color for Elements */
--el-color-primary: #19283a;
}
}
.dark body {
/* Primary Background Color */
--fcom-primary-bg: #443F69 !important;
/* Secondary Background for Gradients */
--fcom-secondary-bg: #211f2f !important;;
/* Active Background (e.g., for selected menu items) */
--fcom-active-bg: #211f2f !important;;
/* Light Background for Header and Sub-header */
--fcom-light-bg: #211f2f !important ;
}
/* Applying Variables to Components */
/* Header with Gradient Background */
.fcom_single_layout.fcom_max_layout.feeds.fcom_sticky_header {
background: linear-gradient(180deg, var(--fcom-secondary-bg) 0%, var(--fcom-primary-bg) 70%) !important;
}
/* Content Layout Header */
.fhr_content_layout_header {
background: unset !important;
border-bottom: none !important;
}
/* Top Menu Styling */
.fcom_top_menu {
background: var(--fcom-active-bg) !important;
border-bottom: none !important;
}
/* Sidebar Menu with Gradient */
#fluent_community_sidebar_menu {
background: linear-gradient(180deg, var(--fcom-secondary-bg) 0%, var(--fcom-primary-bg) 70%) !important;
}
/* Active Menu Link Styling */
.fcom_menu_link.fcom_dashboard.route_url.fcom_compt_link.router-link-exact-active {
background: var(--fcom-active-bg) !important;
color: var(--fcom-primary-text) !important;
}
/* Sub-header Styling */
nav.fcom_sub_header {
background: var(--fcom-light-bg) !important;
border-bottom: 0px solid var(--fcom-primary-border) !important;
}
/* Additional Sub-header Styling */
.fcom_sub_header {
background: var(--fcom-light-bg) !important;
margin: 0px 15px !important;
border-radius: 9px !important;
}
/* License Actication notice */
.notices.fcom_notice_wrap {
display: none;
}
</style>
<?php
});