Home Widgets

Embed Snippet on Your Site

<script src="https://library.wpcode.com/embedjs/r5pjgle5.js/"></script>

Enhancing Topic Filter Layout in Fluent Community

This code snippet customizes the layout of topic filters in Fluent Community by wrapping them to the next line with a 12px gap between buttons. It also removes the left margin between consecutive buttons for a more streamlined and visually appealing user interface.

Gerrit Jessen PRO

<10

Code Preview

Comments

php


	`<?php`
	`// * CodeSnippet Name: Fluent Community Modification`
	`// * Description: A custom Code for Fluent Community plugin`
	`// * Author: InKontaktBringer Team - Sumaiya`
	`// * Author URI: https://www.inkontaktbringer.de/linktree`
	`add_action('fluent_community/portal_head', function() {`
	`?>`
	`<!-- Custom CSS for Fluent Community -->`
	`<style>`
	`/* Wrap topic filters to the next line with a 12px gap between buttons */`
	`.fcom_space_topics .fcom_topics_filters {`
	`flex-wrap: wrap !important;`
	`gap: 12px !important;`
	`}`

	`/* Remove left margin between consecutive buttons */`
	`.fcom_space_topics .fcom_topics_filters .el-button + .el-button {`
	`margin-left: 0px;`
	`}`
	`</style>`
	`<?php`
	`});`

// * CodeSnippet Name: Fluent Community Modification
// * Description: A custom Code for Fluent Community plugin 
// * Author: InKontaktBringer Team - Sumaiya
// * Author URI: https://www.inkontaktbringer.de/linktree
add_action('fluent_community/portal_head', function() {
?>
<!-- Custom CSS for Fluent Community -->
<style>
/* Wrap topic filters to the next line with a 12px gap between buttons */
.fcom_space_topics .fcom_topics_filters {
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Remove left margin between consecutive buttons */
.fcom_space_topics .fcom_topics_filters .el-button + .el-button {
    margin-left: 0px;
}
</style>
<?php
});

Embed Snippet on Your Site

Enhancing Topic Filter Layout in Fluent Community

Comments

Add a Comment Cancel Reply