BarnsleyBloke
I already fix that issue. I will attach the HTML code that probably will help. This HTML I took this from
the table "portfolio content" and then I just added a new category with an id inside the HTML code:
<html lang="[(_lang)]">
{{head}}
<body>
<!--Loader -->
<div class="loader2">
<div class="loader loader_each"><span></span></div>
</div>
<!-- loader end -->
<!-- main start -->
<div id="main">
{{header}}
{{left}}
<!-- wrapper -->
<div id="wrapper">
<!-- content-holder -->
<div class="content-holder" data-pagetitle="[*pagetitle*]">
{{nav}}
<!--content-->
<div class="content">
<!--fixed-column-wrap-->
<div class="fixed-column-wrap">
<div class="pr-bg"></div>
<!--fixed-column-wrap-content-->
<div class="fixed-column-wrap-content">
<div class="scroll-nav-wrap color-bg">
<div class="carnival">[(__scrolldown)]</div>
<div class="snw-dec">
<div class="mousey">
<div class="scroller"></div>
</div>
</div>
</div>
<div class="bg" data-bg="[*bg*]"></div>
<div class="overlay"></div>
<div class="progress-bar-wrap bot-element">
<div class="progress-bar"></div>
</div>
<!--fixed-column-wrap_title-->
<div class="fixed-column-wrap_title first-tile_load">
<h2>[*#longtitle*]</h2>
<p>[*introtext*]</p>
</div>
<!--fixed-column-wrap_title end-->
<div class="fixed-column-dec"></div>
</div>
<!--fixed-column-wrap-content end-->
</div>
<!--fixed-column-wrap end-->
<div class="column-wrap dark-bg">
<!--filter-panel -->
<div class="fixed-filter-panel top_fix-filter top-element in-filter_mobpanel">
<div class="pr-bg"></div>
<div class="fixed-filter-panel_title color-bg">
[(__wfilter)] <i class="fal fa-long-arrow-right"></i>
</div>
<div class="gallery-filters">
<a href="#" class="gallery-filter gallery-filter-active" data-filter="*">[(__allproj)]</a>
<a href="#" class="gallery-filter" data-filter=".62">[(__62)]</a>
<a href="#" class="gallery-filter" data-filter=".63">[(__63)]</a>
<a href="#" class="gallery-filter" data-filter=".64">[(__64)]</a>
<a href="#" class="gallery-filter" data-filter=".65">[(__65)]</a>
<a href="#" class="gallery-filter" data-filter=".66">[(__66)]</a>
<a href="#" class="gallery-filter" data-filter=".67">[(__67)]</a>
<a href="#" class="gallery-filter" data-filter=".68">[(__68)]</a>
<a href="#" class="gallery-filter" data-filter=".114">[(__114)]</a>
</div>
<div class="folio-counter">
<div class="num-album"></div>
<div class="all-album"></div>
</div>
</div>
<!--filter-panel end-->
<!-- portfolio start -->
<div class="gallery-items min-pad two-column fl-wrap">
[!Ditto? &parents=`60`&orderBy=`menuindex ASC` &tagData=`kateqories` &tagMode=`onlyTags` &tagDelimiter=`,` &tags=`62, 63, 64, 65, 66, 67, 68, 114` &display=`90` &tpl=`project`!]
</div>
<!-- portfolio end -->
</div>
<!--column-wrap-->
<!--column-wrap end-->
<div class="limit-box fl-wrap"></div>
</div>
<!--content end -->
<!-- footer -->
<div class="height-emulator fl-wrap"></div>
{{footer}}
<!-- footer end -->
<!-- share-wrapper-->
<div class="share-wrapper">
<div class="close-share-btn"><i class="fal fa-long-arrow-left"></i> [(__bagla)]</div>
<div class="share-container fl-wrap isShare"></div>
</div>
<!-- share-wrapper end -->
</div>
<!-- content-holder end -->
</div>
<!-- wrapper end -->
</div>
<!-- Main end -->
<!--=============== scripts ===============-->
<script src="/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 11,
slidesToScroll: 3,
variableWidth: true,
});
});
</script>
<!-- Main end -->
<!--=============== scripts ===============-->
<script type='text/javascript' id='megamenu-js-extra'>
/* <![CDATA[ */
var megamenu = {"timeout":"300","interval":"100"};
/* ]]> */
</script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>```