added faqs labels in category and page template, controlled using function in theme

adminstyles.css

@@ -798,9 +798,13 @@ Add your custom styles in this file so it is easier to update the theme.
 	text-transform: uppercase;
 }
 
+.edit-post-visual-editor__content-area .ofisuport-faqs-types ul {
+	margin: 0;
+}
+
 .edit-post-visual-editor__content-area .ofisuport-faqs-types .cat-item {
 	display: inline-block;
-	margin: 0.1em 0;
+	margin: 0.1em 0.5em 0.1em 0;
 	padding: 0.2em 0.2em 0 0.2em;
 	color: #fff;
 	background-color: #000;
@@ -809,6 +813,10 @@ Add your custom styles in this file so it is easier to update the theme.
 	text-transform: uppercase;
 }
 
+.edit-post-visual-editor__content-area .ofisuport-faqs-types .current-cat {
+	background-color: #ff8d76;
+}
+
 .edit-post-visual-editor__content-area .ofisuport-faqs-types a {
 	color: #fff;
 	text-decoration: none;
@@ -1098,6 +1106,9 @@ Add your custom styles in this file so it is easier to update the theme.
 	.edit-post-visual-editor__content-area .ofisuport-destacats, .edit-post-visual-editor__content-area .ofisuport-featured, .edit-post-visual-editor__content-area .archive-posts {
 		grid-template-columns: repeat(4, 1fr);
 	}
+	.edit-post-visual-editor__content-area .ofisuport-faqs-types {
+		margin: 1em 0;
+	}
 }
 
 @media screen and (min-width: 80em) {

category.php

@@ -16,22 +16,7 @@ get_header();
 	<main id="primary" class="site-main">
 
   <?php if( in_category('faq') ) : ?>
-    <nav id="tipus-faqs" class="ofisuport-faqs-types">
-      <ul class="ofisuport-label">
-        <?php // https://developer.wordpress.org/reference%2Ffunctions%2Fwp_list_categories%2F/
-          wp_list_categories(
-            array(
-              'child_of'            => 1, // category FAQ id=1
-              'hide_empty'          => 0,
-              'hide_title_if_empty' => true,
-              'separator'           => '<li>',
-              'style'               => 'list',
-              'taxonomy'            => 'category',
-              'title_li'            => '',
-            )
-        	); ?>
-      </ul>
-    </nav>
+    <?php ofisuport_display_faqs_labels(); ?>
   <?php endif; //end if is_category faq ?>
     <content class="archive-posts ">
 		<?php if ( have_posts() ) : ?>

page-templates/faqs-page.php

@@ -40,23 +40,9 @@ get_header();
 			get_template_part( 'template-parts/content', 'none' );
 
 		endif;
-		?>
-<nav id="tipus-faqs" class="ofisuport-faqs-types">
-<ul class="ofisuport-label">
-			<?php // https://developer.wordpress.org/reference%2Ffunctions%2Fwp_list_categories%2F/
-		    wp_list_categories(
-          array(
-            'child_of'            => 1, // category FAQ id=1
-            'hide_empty'          => 0,
-            'hide_title_if_empty' => true,
-            'separator'           => '<li>',
-            'style'               => 'list',
-            'taxonomy'            => 'category',
-            'title_li'            => '',
-          )
-				); ?>
-</ul>
-</nav>
+    ?>
+
+      <?php ofisuport_display_faqs_labels(); ?>
 			<content class="archive-posts <?php ofisuport_class_posttype(); ?>">
       <?php
        // https://developer.wordpress.org/reference/functions/get_posts/

sass/base/elements/_lists.scss

@@ -74,9 +74,12 @@ article:not(.type-post){
   }
 }
 .ofisuport-faqs-types {
+  ul {
+    margin: 0;
+  }
   .cat-item {
     display:inline-block;
-    margin:0.1em 0;
+    margin: 0.1em 0.5em 0.1em 0;
     padding: 0.2em 0.2em 0 0.2em;
     color: $color__white;
     background-color: $color__black;
@@ -84,6 +87,9 @@ article:not(.type-post){
     font-size: $font__size-body*1.1;
     text-transform: uppercase;
   }
+  .current-cat{
+    background-color: $color__orange;
+  }
   a {
     color: $color__white;
     text-decoration: none;

sass/layouts/_no-sidebar.scss

@@ -113,6 +113,12 @@
 	.ofisuport-destacats,.ofisuport-featured,.archive-posts {
 		grid-template-columns: repeat(4 , 1fr);
 	}
+	.ofisuport-faqs-types {
+		margin: 1em 0;
+		.ofisuport-label {
+		//	margin: 0;
+		}
+	}
 }
 @media screen and (min-width: 80em) {
 	//only bigger than 80rem

style.css

@@ -724,9 +724,13 @@ article:not(.type-post) .item-os_fund_apply_text {
 	text-transform: uppercase;
 }
 
+.ofisuport-faqs-types ul {
+	margin: 0;
+}
+
 .ofisuport-faqs-types .cat-item {
 	display: inline-block;
-	margin: 0.1em 0;
+	margin: 0.1em 0.5em 0.1em 0;
 	padding: 0.2em 0.2em 0 0.2em;
 	color: #fff;
 	background-color: #000;
@@ -735,6 +739,10 @@ article:not(.type-post) .item-os_fund_apply_text {
 	text-transform: uppercase;
 }
 
+.ofisuport-faqs-types .current-cat {
+	background-color: #ff8d76;
+}
+
 .ofisuport-faqs-types a {
 	color: #fff;
 	text-decoration: none;
@@ -1032,6 +1040,9 @@ textarea {
 	.ofisuport-destacats, .ofisuport-featured, .archive-posts {
 		grid-template-columns: repeat(4, 1fr);
 	}
+	.ofisuport-faqs-types {
+		margin: 1em 0;
+	}
 }
 
 @media screen and (min-width: 80em) {