Ticket #3629 - Artificer template (Part 2): Covers, Blocks, Tabs, Buttons, etc.

modules/boonex/artificer/data/template/bx_timeline/menu_custom_item_bx_timeline_menu_view.html

@@ -3,6 +3,7 @@
         <bx_if:icon><div class="bx-menu-item-icon bx-stl-mii-sm mr-0 group-hover:text-gray-700 dark:group-hover:text-gray-300"><i class="sys-icon __icon__"></i></div></bx_if:icon>
         <bx_if:image><div class="bx-menu-item-icon bx-stl-mii-sm mr-0"><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></div></bx_if:image>
         <bx_if:icon-html><div class="bx-menu-item-icon bx-stl-mii-sm mr-0 group-hover:text-gray-700 dark:group-hover:text-gray-300">__icon__</div></bx_if:icon-html>
-        <bx_if:title><div class="bx-menu-item-title bx-stl-mit ml-1 first:ml-0">__title__</div></bx_if:title></a>
+        <bx_if:title><div class="bx-menu-item-title bx-stl-mit ml-1 first:ml-0">__title__</div></bx_if:title>
+    </a>
     <bx_if:addon>__addon__</bx_if:addon>
 </div>

modules/boonex/artificer/data/template/mod_groups/cover.html

@@ -1,10 +1,12 @@
 <div class="bx-menu-toolbar-padding">
-    <div class="bx-base-pofile-cover-wrapper __class__ relative bg-gradient-to-b from-gray-100 to-white dark:from-black dark:to-gray-900">
-         <div class="absolute w-full h-full overflow-hidden">
-            <div class="absolute top-6 -left-1/4 w-2/3 h-2/3 bg-blue-700 filter blur-3xl z-0 opacity-50 animate-goo"></div>
-            <div class="absolute top-6 -right-1/4 w-2/3 h-2/3 bg-green-700 filter blur-3xl z-0 opacity-50 animate-goo"></div>
+    <div class="bx-base-pofile-cover-wrapper __class__ relative">
+        <div class="absolute top-0 left-0 w-full h-full dark:hidden">
+            <img src="<bx_image_url:cover-profile.svg />" class="object-cover h-full w-full" />
         </div>
-        <div class="bx-base-pofile-cover">
+        <div class="absolute top-0 left-0 w-full h-full hidden dark:block">
+            <img src="<bx_image_url:cover-profile-dark.svg />" class="object-cover h-full w-full" />
+        </div>
+        <div class="bx-base-pofile-cover relative">
             <div class="bx-base-pofile-cover-image-wrp relative xl:px-4 overflow-hidden">
                 <div class="bx-base-pofile-cover-image bx-def-page-width relative mx-auto opacity-100 xl:rounded-b-lg <bx_if:show_cover_placeholder>bx-bpci-holder h-32 lg:h-32 bg-gradient-to-b from-green-400 to-green-500</bx_if:show_cover_placeholder><bx_if:show_cover>h-64 lg:h-80</bx_if:show_cover> __add_class__">
                     <a class="bx-base-pofile-cover-image box-border absolute h-full w-full" href="__cover_href__" onclick="$('#__cover_popup_id__').dolPopupImage('__cover_url__', this)">

modules/boonex/artificer/data/template/mod_profile/cover.html

@@ -1,10 +1,12 @@
 <div class="bx-menu-toolbar-padding">
-    <div class="bx-base-pofile-cover-wrapper __class__ relative bg-gradient-to-b from-gray-100 to-white dark:from-black dark:to-gray-900">
-         <div class="absolute w-full h-full overflow-hidden">
-            <div class="absolute top-6 -left-1/4 w-2/3 h-2/3 bg-blue-700 filter blur-3xl z-0 opacity-50 animate-goo"></div>
-            <div class="absolute top-6 -right-1/4 w-2/3 h-2/3 bg-green-700 filter blur-3xl z-0 opacity-50 animate-goo"></div>
+    <div class="bx-base-pofile-cover-wrapper __class__ relative">
+        <div class="absolute top-0 left-0 w-full h-full dark:hidden">
+            <img src="<bx_image_url:cover-profile.svg />" class="object-cover h-full w-full" />
         </div>
-        <div class="bx-base-pofile-cover">
+        <div class="absolute top-0 left-0 w-full h-full hidden dark:block">
+            <img src="<bx_image_url:cover-profile-dark.svg />" class="object-cover h-full w-full" />
+        </div>
+        <div class="bx-base-pofile-cover relative">
             <div class="bx-base-pofile-cover-image-wrp relative xl:px-4 overflow-hidden">
                 <div class="bx-base-pofile-cover-image bx-def-page-width relative mx-auto opacity-100 xl:rounded-b-lg <bx_if:show_cover_placeholder>bx-bpci-holder h-32 lg:h-32 bg-gradient-to-b from-blue-400 to-blue-500</bx_if:show_cover_placeholder><bx_if:show_cover>h-64 lg:h-80</bx_if:show_cover> __add_class__">
                     <a class="bx-base-pofile-cover-image box-border absolute h-full w-full" href="__cover_href__" onclick="$('#__cover_popup_id__').dolPopupImage('__cover_url__', this)">

modules/boonex/artificer/data/template/mod_profile/cover_block.html

@@ -1,13 +1,15 @@
 <div class="bx-base-profile-cover-block-wrapper">
     <div class="bx-base-pofile-cover-wrapper __class__ relative bg-gradient-to-b from-gray-100 to-white dark:from-black dark:to-gray-900 rounded-md">
-        <div class="bx-base-pofile-cover">
+        <div class="absolute top-0 left-0 w-full h-full dark:hidden rounded-md overflow-hidden">
+            <img src="<bx_image_url:cover-profile.svg />" class="object-cover h-full w-full" />
+        </div>
+        <div class="absolute top-0 left-0 w-full h-full hidden dark:block rounded-md overflow-hidden">
+            <img src="<bx_image_url:cover-profile-dark.svg />" class="object-cover h-full w-full" />
+        </div>
+        <div class="bx-base-pofile-cover relative">
             <bx_if:show_cover>
                 <div class="bx-base-pofile-cover-image-wrp relative overflow-hidden">
-                    <div class="absolute w-full h-2/3">
-                        <div class="absolute top-6 -left-1/4 w-2/3 h-2/3 bg-blue-700 filter blur-3xl z-0 opacity-50 animate-goo"></div>
-                        <div class="absolute top-6 -right-1/4 w-2/3 h-2/3 bg-green-700 filter blur-3xl z-0 opacity-50 animate-goo"></div>
-                    </div>
-                    <div class="bx-base-pofile-cover-image relative h-64 lg:h-40 max-w-7xl mx-auto opacity-100 __add_class__">
+                    <div class="bx-base-pofile-cover-image relative h-64 lg:h-40 max-w-7xl mx-auto opacity-100 bg-gradient-to-b from-blue-400 to-blue-500 rounded-tl-md rounded-tr-md __add_class__">
                         <a class="bx-base-pofile-cover-image box-border absolute h-full w-full" href="__cover_href__" onclick="$('#__cover_popup_id__').dolPopupImage('__cover_url__', this)">
                             <img class="bx-base-pofile-cover-image h-64 mx-auto w-full object-cover bg-cover lg:h-40 rounded-t z-10 __img_class__" style="background-image:url(__cover_url__)" src="<bx_icon_url:spacer.gif />" />
                         </a>

modules/boonex/artificer/data/template/mod_profile/css/main.css

@@ -128,6 +128,9 @@ p.bx-base-pofile-unit-thumb.bx-def-ava-big-size {
 
 
 /*--- Profile Cover ---*/
+.bx-base-pofile-cover-wrapper.bx-no-cover .bx-base-pofile-cover-info {
+    padding-top: 1rem;
+}
 .bx-base-pofile-cover-wrapper.bx-no-cover .bx-base-pofile-ci-cnt {
     margin-top: 0;
 }

modules/boonex/artificer/data/template/system/_block_explore.html

@@ -0,0 +1,61 @@
+<!-- 
+    This file contains a copy of Explore block which is stored in the DB and available for future customizations via Studio -> Pages builder.  
+    It's needed here to let Tailwind compailer know about the classes which should be included in compilation.
+-->
+<style>
+.bx-artificer-splash .bx-form-element .bx-btn.bx-btn-primary {
+    width: 100%;
+}
+</style>
+<div class="bx-artificer-splash relative max-w-7xl ring-1 ring-gray-200 dark:ring-gray-800 bg-gray-50 dark:bg-gray-900 shadow-sm rounded divide-y divide-gray-200 dark:divide-gray-800 my-2 lg:my-3 mx-2 lg:mx-3 xl:mx-auto overflow-hidden">
+    <div class="absolute top-0 left-0 w-full h-full dark:hidden z-1">
+        <img src="<bx_image_url:cover.svg />" class="object-cover h-full w-full" />
+    </div>
+    <div class="absolute top-0 left-0 w-full h-full hidden dark:block z-1">
+        <img src="<bx_image_url:cover-dark.svg />" class="object-cover h-full w-full" />
+    </div>
+    <div class="relative pb-8 z-2">
+        <main class="mt-6">
+            <div class="mx-auto max-w-7xl">
+                <div class="lg:grid lg:grid-cols-12 lg:gap-8">
+                    <div class="px-6 lg:px-8 text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
+                      <div>
+                        <h1 class="text-5xl tracking-tight font-bold text-gray-800 dark:text-white xl:text-6xl">
+                            <span class="block"><bx_text:_bx_artificer_txt_splash_welcome_l1 /></span>
+                            <span class="block pb-3 bg-clip-text text-transparent bg-gradient-to-r from-green-500 to-blue-500 sm:pb-5"><bx_text:_bx_artificer_txt_splash_welcome_l2 /></span>
+                        </h1>
+                        <p class="mt-3 text-base font-normal text-gray-700 dark:text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+                            <span class="block"><bx_text:_bx_artificer_txt_splash_welcome_l3 /></span>
+                        </p>
+                        <p class="mt-3 text-base font-light text-gray-700 dark:text-gray-300 sm:mt-5 sm:text-sm lg:text-xs xl:text-base">
+                            <span class="block"><bx_text:_bx_artificer_txt_splash_welcome_l4 /></span>
+                        </p>
+                      </div>
+                    </div>
+                    <div class="relative mt-16 px-6 lg:mt-0 lg:px-8 lg:col-span-6 lg:ml-4">
+                        <div class="opacity-80 relative max-w-lg ring-1 ring-white dark:ring-gray-700 sm:overflow-hidden bg-gray-50 dark:bg-gray-800 shadow-2xl rounded divide-y divide-gray-300 dark:divide-gray-700 m-2 lg:m-3  mx-auto bg-opacity-80">
+                            <div class="p-8">
+                                <div>
+                                    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200"><bx_text:_bx_artificer_txt_splash_login_title /></h2>
+                                    <div class="mt-6">{{~system:login_form:TemplServiceLogin["no_join_text no_auth_buttons"]~}}</div>
+                                    <div class="mt-6 relative">
+                                        <div class="absolute inset-0 flex items-center" aria-hidden="true">
+                                            <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
+                                        </div>
+                                    </div>
+                                    <div class="pt-6">
+                                        <a class="bx-btn w-full flex justify-center py-2 px-4 border border-transparent rounded shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" href="__join_link__"><bx_text:_bx_artificer_txt_splash_login_join /></a>
+                                    </div>
+                                    <div class="mt-4">{{~system:member_auth_code:TemplServiceLogin~}}</div>
+                                </div>
+                            </div>
+                            <div class="px-4 py-6 bg-white dark:bg-gray-900 bg-opacity-50 sm:px-10">
+                                <p class="text-xs leading-5 text-gray-500">{{~bx_artificer:get_splash_marker["login_agreement"]~}}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+</div>

modules/boonex/artificer/data/template/system/_block_splash.html

@@ -0,0 +1,93 @@
+<!-- 
+    This file contains a copy of Splash block which is stored in the DB and available for future customizations via Studio -> Pages builder.  
+    It's needed here to let Tailwind compailer know about the classes which should be included in compilation.
+-->
+<style>
+.bx-artificer-splash .bx-form-element .bx-btn.bx-btn-primary {
+    width: 100%;
+}
+</style>
+<div class="bx-artificer-splash relative bg-gradient-to-br from-gray-100 to-blue-100 dark:bg-gradient-to-r dark:from-gray-900 dark:to-black overflow-hidden">
+    {{~bx_artificer:get_splash_marker["header"]~}}
+    <div class="relative pt-6 pb-16 sm:pb-24">
+        <div class="absolute top-0 left-0 w-full h-full dark:hidden z-1">
+            <img src="<bx_image_url:cover.svg />" class="object-cover h-full w-full" />
+        </div>
+        <div class="absolute top-0 left-0 w-full h-full hidden dark:block z-1">
+            <img src="<bx_image_url:cover-dark.svg />" class="object-cover h-full w-full" />
+        </div>
+        <main class="relative mt-16 z-2">
+            <div class="mx-auto max-w-7xl">
+                <div class="lg:grid lg:grid-cols-12 lg:gap-8">
+                    <div class="px-6 lg:px-8 text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
+                        <div>
+                            <h1 class="text-5xl tracking-tight font-bold text-gray-800 dark:text-white xl:text-6xl">
+                                <span class="block"><bx_text:_bx_artificer_txt_splash_welcome_l1 /></span>                      
+                                <span class="block pb-3 bg-clip-text text-transparent bg-gradient-to-r from-green-500 to-blue-500 sm:pb-5"><bx_text:_bx_artificer_txt_splash_welcome_l2 /></span>
+                            </h1>
+                            <p class="mt-3 text-base font-normal text-gray-700 dark:text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+                                <span class="block"><bx_text:_bx_artificer_txt_splash_welcome_l3 /></span>
+                            </p>
+                            <p class="mt-3 text-base font-light text-gray-700 dark:text-gray-300 sm:mt-5 sm:text-sm lg:text-xs xl:text-base">
+                                <span class="block"><bx_text:_bx_artificer_txt_splash_welcome_l4 /></span>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="relative mt-16 px-6 sm:mt-24 lg:mt-0 lg:px-8 lg:col-span-6">
+                        <div class="opacity-80 relative max-w-lg ring-1 ring-white dark:ring-gray-700 sm:overflow-hidden bg-gray-50 dark:bg-gray-800 shadow-2xl rounded divide-y divide-gray-300 dark:divide-gray-700 m-2 lg:m-3  mx-auto bg-opacity-80">
+                            <div class="p-8">
+                                <div>
+                                    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200"><bx_text:_bx_artificer_txt_splash_login_title /></h2>
+                                    <div class="mt-6">{{~system:login_form:TemplServiceLogin["no_join_text no_auth_buttons"]~}}</div>
+                                    <div class="mt-6 relative">
+                                        <div class="absolute inset-0 flex items-center" aria-hidden="true">
+                                            <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
+                                        </div>
+                                    </div>
+                                    <div class="pt-6">
+                                        <a class="bx-btn w-full flex justify-center py-2 px-4 border border-transparent rounded shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" href="__join_link__"><bx_text:_bx_artificer_txt_splash_login_join /></a>
+                                    </div>
+                                    <div class="mt-4">{{~system:member_auth_code:TemplServiceLogin~}}</div>
+                                </div>
+                            </div>
+                            <div class="px-4 py-6 bg-white dark:bg-gray-900 bg-opacity-50 sm:px-10">
+                                <p class="text-xs leading-5 text-gray-500">{{~bx_artificer:get_splash_marker["login_agreement"]~}}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+</div>
+<div class="bg-gray-100 dark:bg-gray-900 pt-12 sm:pt-16">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="max-w-4xl mx-auto text-center">
+            <h2 class="text-3xl font-semibold text-gray-900 dark:text-gray-100 sm:text-4xl"><bx_text:_bx_artificer_txt_splash_stats_l1 /></h2>
+            <p class="mt-3 text-xl font-light text-gray-500 sm:mt-4"><bx_text:_bx_artificer_txt_splash_stats_l2 /></p>
+        </div>
+    </div>
+    <div class="mt-10 pb-12 bg-white dark:bg-black sm:pb-16">
+        <div class="relative">
+            <div class="absolute inset-0 h-1/2 bg-gray-100 dark:bg-gray-900 "></div>
+            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="max-w-7xl mx-auto">
+                    <dl class="rounded-lg bg-white dark:bg-gray-800 shadow-lg sm:grid sm:grid-cols-3">
+                        <div class="flex flex-col border-b border-gray-100 dark:border-gray-700 p-4 pt-5 text-center sm:border-0 sm:border-r">
+                            <dt class="order-2 mt-2 text-lg leading-6 font-light text-gray-500"><bx_text:_bx_artificer_txt_splash_stats_c1 /></dt>
+                            <dd class="order-1 text-3xl font-bold text-blue-600">{{~bx_artificer:get_splash_marker["members"]~}}</dd>
+                        </div>
+                        <div class="flex flex-col border-t border-b border-gray-100 dark:border-gray-900 p-4 pt-5  text-center sm:border-0 sm:border-l sm:border-r">
+                            <dt class="order-2 mt-2 text-lg leading-6 font-light text-gray-500"><bx_text:_bx_artificer_txt_splash_stats_c2 /></dt>
+                            <dd class="order-1 text-3xl font-bold text-blue-600">{{~bx_artificer:get_splash_marker["posts"]~}}</dd>
+                        </div>
+                        <div class="flex flex-col border-t border-gray-100  dark:border-gray-700 p-4 pt-5 text-center sm:border-0 sm:border-l">
+                            <dt class="order-2 mt-2 text-lg leading-6 font-light text-gray-500"><bx_text:_bx_artificer_txt_splash_stats_c3 /></dt>
+                            <dd class="order-1 text-3xl font-bold text-blue-600">{{~bx_artificer:get_splash_marker["comments"]~}}</dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

modules/boonex/artificer/data/template/system/_header_js_custom.html

@@ -17,6 +17,16 @@
                 bx_sidebar_toggle(aMatches[1]);
             });
 
+            $('.bx-sidebar .bx-sidebar-' + aSidebars[i] + '-bg').on('click', function(event){
+                event.preventDefault();
+
+                var aMatches = $(this).attr('class').match(/bx-sidebar-(.*)-bg/);
+                if(!aMatches || aMatches.length != 2)
+                    return;
+                
+                bx_sidebar_toggle(aMatches[1]);
+            });
+
             $('.bx-sidebar .bx-sidebar-' + aSidebars[i] + '-close').on('click', function(event){
                 event.preventDefault();
 

modules/boonex/artificer/data/template/system/cover.html

@@ -6,12 +6,8 @@
 </style>
 </bx_if:logged_in>
 <div class="bx-cover-gap overflow-hidden" >
-    <div class="bx-cover-wrapper<bx_if:empty_cover_class> bx-cover-empty</bx_if:empty_cover_class> relative bg-gradient-to-br from-gray-100 to-blue-100 dark:bg-gradient-to-r dark:from-gray-900 dark:to-black" <bx_if:bg>style="background-image:url(__image_url__)"</bx_if:bg>>
-        <div class="bx-def-page-width relative mx-auto">
-            <div class="absolute top-0 -left-8 w-96 h-96 bg-purple-700 rounded-full  filter blur-3xl z-0 opacity-60 animate-goo"></div>
-            <div class="absolute top-12 -right-8 w-96 h-96 bg-red-700 rounded-full filter blur-3xl z-0 opacity-60 animate-goo animation-delay-2000"></div>  
-            <div class="absolute -bottom-12 left-1/3 w-96 h-96 bg-green-700 rounded-full filter blur-3xl z-0 opacity-60 animate-goo animation-delay-4000"></div> 
-        </div>
+    <div class="bx-cover-wrapper<bx_if:empty_cover_class> bx-cover-empty</bx_if:empty_cover_class> relative" <bx_if:bg>style="background-image:url(__image_url__)"</bx_if:bg>>
+        <div class="bx-cover-gradient bx-def-page-width relative mx-auto"></div>
         <div class="relative mx-auto py-16 text-center">
             <bx_if:image>
                 <div class="bx-cover-image">

modules/boonex/artificer/data/template/system/cover_home.html

@@ -6,12 +6,8 @@
 </style>
 </bx_if:logged_in>
 <div class="bx-cover-gap overflow-hidden">
-    <div class="bx-cover-wrapper<bx_if:empty_cover_class> bx-cover-empty</bx_if:empty_cover_class> relative bg-gradient-to-br from-gray-100 to-blue-100 dark:bg-gradient-to-r dark:from-gray-900 dark:to-black" <bx_if:bg>style="background-image:url(__image_url__)"</bx_if:bg>>
-        <div class="bx-def-page-width relative mx-auto">
-            <div class="absolute top-0 -left-8 w-96 h-96 bg-purple-700 rounded-full  filter blur-3xl z-0 opacity-60 animate-goo"></div>
-            <div class="absolute top-12 -right-8 w-96 h-96 bg-red-700 rounded-full filter blur-3xl z-0 opacity-60 animate-goo animation-delay-2000"></div>  
-            <div class="absolute -bottom-12 left-1/3 w-96 h-96 bg-green-700 rounded-full filter blur-3xl z-0 opacity-60 animate-goo animation-delay-4000"></div> 
-        </div>
+    <div class="bx-cover-wrapper<bx_if:empty_cover_class> bx-cover-empty</bx_if:empty_cover_class> relative" <bx_if:bg>style="background-image:url(__image_url__)"</bx_if:bg>>
+        <div class="bx-cover-gradient bx-def-page-width relative mx-auto"></div>
         <div class="relative mx-auto py-16 text-center">
             <div>
                 <div class="text-4xl  sm:text-5xl xl:text-6xl tracking-tight  font-bold text-gray-800 dark:text-white ">
@@ -22,10 +18,10 @@
                     <span class="block"><bx_text:_bx_artificer_txt_splash_welcome_l3 /></span>
                 </p>
                 <div class=" w-full flex justify-center items-center">
-                    <button type="button" onclick="document.location='__link_join__'"  class="group inline-flex items-center px-4 py-2 border border-transparent shadow-sm hover:shadow-md text-sm font-medium rounded-md text-gray-200 hover:text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ">
+                    <button type="button" onclick="document.location='__link_join__'"  class="bx-btn bx-btn-primary">
                         <bx_text:_bx_artificer_txt_splash_welcome_a1 />
                     </button>
-                    <button type="button"  onclick="document.location='__link_login__'" class="ml-3 group inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 shadow-sm hover:shadow-md text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 dark:hover:text-white hover:text-gray-800 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    <button type="button"  onclick="document.location='__link_login__'" class="bx-btn ml-3">
                         <svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                           <path fill-rule="evenodd" d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                         </svg>

modules/boonex/artificer/data/template/system/css/cover.css

@@ -3,11 +3,14 @@ import url(../../../../../../../template/css/cover.css);
 --*/
 
 .bx-cover-wrapper {
-    background-color: #eee;
+    background-image: url(../images/cover-default.svg);
     background-repeat: no-repeat;
     background-position: center center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
+}
+.dark .bx-cover-wrapper {
+    background-image: url(../images/cover-default-dark.svg);
 }

modules/boonex/artificer/data/template/system/css/menu.css

@@ -129,6 +129,13 @@ div.bx-popup-menu-main.sys-add-content ul {
     flex-direction: column;
 }
 
+/*--- Profile Stats/Followings Menu ---*/
+.bx-db-content .bx-profile-stats .bx-menu-profile-stats,
+.bx-db-content.bx-content-padding-block .bx-menu-profile-stats,
+.bx-db-content.bx-content-padding-block .bx-menu-profile-followings {
+    margin: -0.75rem;
+}
+
 /*--- Profile Followings Menu ---*/
 .bx-menu-ver.bx-menu-object-sys_profile_followings li .bx-menu-show {
     display: none;

modules/boonex/artificer/data/template/system/images/cover-profile-dark.svg

@@ -0,0 +1 @@
+            <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1600 900'><rect fill='#111827' width='1600' height='900'/><defs><linearGradient id='g' gradientUnits='objectBoundingBox' x1='0' y1='1' x2='0' y2='0' gradientTransform='rotate(0,0.5,0.5)'><stop  offset='0' stop-color='#111827'/><stop  offset='1' stop-color='#374151'/></linearGradient><path fill='url(#g)' id='s' d='M-1-1v962.99c0 0 83-21.32 133.95 3.07c30.49 14.6 62.26 29.49 94.53 31.22c48.12 2.58 83.83-43.35 134.28-28.36c48.31 14.35 77.41 38.45 127.71 21.62c57.71-19.31 79.67-28.82 134.22-0.47c45.19 23.49 69.44-20.07 112.8-22.78c24.62-1.54 47.65 20.86 71.51 27.14c30.32 7.98 45.34-2.78 73.3-17.86c47.93-25.86 73.7 10.17 120.63 17.73c47.42 7.63 89.49-29.52 138.45-19.47c57.07 11.71 92.9 22.9 150.33 5.31c55.2-16.91 84.9-2.33 138.27 10.43c42.48 10.16 70.72-5.45 110.92-22.69c49.74-21.33 87.42-12.78 135.85 6.42c57.47 22.78 91.63 0.27 148.01-7.13c48.48-6.37 92.85 25.53 140.83 28.72c50.26 3.35 98.07-36.73 147.67-26.18c52.04 11.06 75.93 26.45 127.95 6.28c51.71-20.05 70.96 13.72 118.82 22.69c54.92 10.29 89.44-43.34 145.6-13.92c47.61 24.94 59.53-1.14 103.25-17.59c49-18.44 96.2 32.64 145.07 32c47.46-0.62 88.49-46.72 137.13-33.07c46.15 12.95 70.4 36.99 119.16 20.85c31.56-10.45 62.88-42.89 93.1-22.96C3157 999 3199 981.74 3199 981.74V-1H-1z'/></defs><g  stroke='#000000' stroke-width='0' stroke-opacity='1'><use href='#s' x='-11' y='0'/><use href='#s' x='-850' y='-150'/><use href='#s' x='-1200' y='-300'/><use href='#s' x='-144' y='-450'/><use href='#s' x='-1599' y='-600'/><use href='#s' x='-760' y='-750'/><use href='#s' x='-1336' y='-900'/></g></svg>          

modules/boonex/artificer/data/template/system/images/cover-profile.svg

@@ -0,0 +1 @@
+              <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1600 900'><rect fill='#ffffff' width='1600' height='900'/><defs><linearGradient id='g' gradientUnits='objectBoundingBox' x1='0' y1='1' x2='0' y2='0'><stop  offset='0' stop-color='#ffffff'/><stop  offset='1' stop-color='#D1D5DB'/></linearGradient><path fill='url(#g)' id='s' d='M-1-1v962.99c0 0 83-21.32 133.95 3.07c30.49 14.6 62.26 29.49 94.53 31.22c48.12 2.58 83.83-43.35 134.28-28.36c48.31 14.35 77.41 38.45 127.71 21.62c57.71-19.31 79.67-28.82 134.22-0.47c45.19 23.49 69.44-20.07 112.8-22.78c24.62-1.54 47.65 20.86 71.51 27.14c30.32 7.98 45.34-2.78 73.3-17.86c47.93-25.86 73.7 10.17 120.63 17.73c47.42 7.63 89.49-29.52 138.45-19.47c57.07 11.71 92.9 22.9 150.33 5.31c55.2-16.91 84.9-2.33 138.27 10.43c42.48 10.16 70.72-5.45 110.92-22.69c49.74-21.33 87.42-12.78 135.85 6.42c57.47 22.78 91.63 0.27 148.01-7.13c48.48-6.37 92.85 25.53 140.83 28.72c50.26 3.35 98.07-36.73 147.67-26.18c52.04 11.06 75.93 26.45 127.95 6.28c51.71-20.05 70.96 13.72 118.82 22.69c54.92 10.29 89.44-43.34 145.6-13.92c47.61 24.94 59.53-1.14 103.25-17.59c49-18.44 96.2 32.64 145.07 32c47.46-0.62 88.49-46.72 137.13-33.07c46.15 12.95 70.4 36.99 119.16 20.85c31.56-10.45 62.88-42.89 93.1-22.96C3157 999 3199 981.74 3199 981.74V-1H-1z'/></defs><g  stroke='#E5E7EB' stroke-width='0' stroke-opacity='1'><use href='#s' x='-11' y='0'/><use href='#s' x='-850' y='-150'/><use href='#s' x='-1200' y='-300'/><use href='#s' x='-144' y='-450'/><use href='#s' x='-1599' y='-600'/><use href='#s' x='-760' y='-750'/><use href='#s' x='-1336' y='-900'/></g></svg>

modules/boonex/artificer/data/template/system/menu_custom_item_sys_create_post.html

@@ -1,8 +1,9 @@
 <div class="relative w-full __class_wrp__">
-    <a class="__class_link__ group text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 flex items-center p-2 text-sm font-normal rounded-md" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
-        <bx_if:icon><span class="bx-mi-icon flex items-center justify-center text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 h-5 w-5"><i class="sys-icon __icon__"></i></span></bx_if:icon>
-        <bx_if:image><span class="bx-mi-icon flex items-center justify-center h-5 w-5"><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></span></bx_if:image>
-        <bx_if:icon-html><span class="bx-mi-icon flex items-center justify-center h-5 w-5">__icon__</span></bx_if:icon-html>
-        <bx_if:title><span class="bx-mi-title ml-2 first:ml-0">__title__</span></bx_if:title></a>
+    <a class="__class_link__ bx-stl-mil-sm group" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
+        <bx_if:icon><span class="bx-mi-icon bx-stl-mii-sm mr-0  group-hover:text-gray-700 dark:group-hover:text-gray-300"><i class="sys-icon __icon__"></i></span></bx_if:icon>
+        <bx_if:image><span class="bx-mi-icon bx-stl-mii-sm mr-0 "><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></span></bx_if:image>
+        <bx_if:icon-html><span class="bx-mi-icon bx-stl-mii-sm mr-0 group-hover:text-gray-700 dark:group-hover:text-gray-300">__icon__</span></bx_if:icon-html>
+        <bx_if:title><span class="bx-mi-title bx-stl-mit ml-1 first:ml-0">__title__</span></bx_if:title>
+    </a>
     <bx_if:addon>__addon__</bx_if:addon>
 </div>

modules/boonex/artificer/data/template/system/menu_floating_blocks.html

@@ -1,6 +1,6 @@
 <ul id="__html_id__" class="bx-menu-floating-blocks<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ flex flex-wrap justify-center -my-1 space-x-2">
     <bx_repeat:menu_items><li class="bx-menu-item bx-menu-item-__name__ __class_add__ w-20 my-1 rounded-md">
-        <a href="__link__" onclick="__onclick__" class="flex flex-col items-center p-2 text-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 hover:bg-gray-200 hover:text-gray-700 dark:hover:text-white text-sm font-medium rounded-md"__attrs__>
+        <a href="__link__" onclick="__onclick__" class="bx-stl-mil-hover flex flex-col items-center p-2 text-gray-600 dark:text-gray-300 text-sm font-medium rounded-md"__attrs__>
             <div class="bx-menu-floating-blocks-icon m-2">
                 <bx_if:icon><i class="sys-icon __icon__ block w-8 h-8 leading-8 text-3xl text-center"></i></bx_if:icon>
                 <bx_if:image><img class="block w-8 h-8" style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>

modules/boonex/artificer/data/template/system/menu_floating_blocks_wide.html

@@ -1,15 +1,17 @@
 <ul class="bx-menu-floating-blocks-wide bx-menu-object-__object__">
-    <bx_repeat:menu_items><li class="bx-menu-item bx-menu-item-__name__ __class_add__ group relative flex justify-between items-center px-4 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700 text-sm font-medium">
-        <a class="flex flex-1 items-center py-2" href="__link__" onclick="__onclick__"__attrs__>
-            <div class="bx-menu-floating-blocks-icon flex items-center justify-center h-5 w-5 mr-2">
-                <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
-                <bx_if:image><img class="h-5 w-5" style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
-                <bx_if:icon-html>__icon__</bx_if:icon-html>
-            </div>
-            <div class="bx-menu-floating-blocks-title">__title__</div>
-        </a>
-        <bx_if:addon>__addonf__</bx_if:addon>
-    </li></bx_repeat:menu_items>
+    <bx_repeat:menu_items>
+        <li class="bx-menu-item bx-menu-item-__name__ __class_add__ bx-stl-mil-hover group relative flex justify-between items-center px-4 text-gray-600 dark:text-gray-300 text-sm font-medium">
+            <a class="flex flex-1 items-center py-2" href="__link__" onclick="__onclick__"__attrs__>
+                <div class="bx-menu-floating-blocks-icon flex items-center justify-center h-5 w-5 mr-2">
+                    <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
+                    <bx_if:image><img class="h-5 w-5" style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
+                    <bx_if:icon-html>__icon__</bx_if:icon-html>
+                </div>
+                <div class="bx-menu-floating-blocks-title">__title__</div>
+            </a>
+            <bx_if:addon>__addonf__</bx_if:addon>
+        </li>
+    </bx_repeat:menu_items>
 </ul>
 <script language="javascript">
     $(document).ready(function () {

modules/boonex/artificer/data/template/system/menu_profile_followings.html

@@ -1,4 +1,4 @@
-<ul class="bx-menu-profile-followings bx-menu-ver bx-menu-object-__object__">
+<ul class="bx-menu-profile-followings bx-menu-ver bx-menu-object-__object__ space-y-2">
     <bx_repeat:menu_items>
         <li class="bx-menu-item bx-menu-item-__name__ __class_add__ text-sm font-medium">
             <div class="bx-menu-item-cnt">
@@ -17,7 +17,7 @@
                     </span>
                 </div>
                 <bx_if:show_subitems>
-                    <div class="bx-menu-item-subitems">__subitems__</div>
+                    <div class="bx-menu-item-subitems pt-2">__subitems__</div>
                 </bx_if:show_subitems>
             </div>
         </li>

modules/boonex/artificer/data/template/system/menu_profile_followings_subitems.html

@@ -1,4 +1,4 @@
-<ul class="bx-menu-item-subitems bx-menu-pf-subitems bx-menu-ver">
+<ul class="bx-menu-item-subitems bx-menu-pf-subitems bx-menu-ver space-y-2">
     <bx_repeat:menu_items>
         <li class="bx-menu-subitem bx-menu-subitem-__name__ __class_add__">
             <div class="bx-menu-item-cnt bx-stl-mil">

modules/boonex/artificer/data/template/system/menu_profile_stats.html

@@ -1,4 +1,4 @@
-<ul class="bx-menu-profile-stats bx-menu-ver bx-menu-object-__object__">
+<ul class="bx-menu-profile-stats bx-menu-ver bx-menu-object-__object__ space-y-2">
     <bx_repeat:menu_items>
         <li class="bx-menu-item-__name__ __class_add__ rounded-md">
             <div class="bx-menu-item-cnt bx-stl-mil group justify-between">

modules/boonex/artificer/data/template/system/sidebar_account.html

@@ -1,5 +1,5 @@
 <div class="bx-sidebar bx-sidebar-account fixed inset-0 flex justify-end z-40" role="dialog" aria-modal="true">
-    <div class="bx-sidebar-bg fixed inset-0 bg-gray-600 opacity-75" aria-hidden="true"></div>
+    <div class="bx-sidebar-account-bg fixed inset-0 bg-gray-600 opacity-75" aria-hidden="true"></div>
     <div class="flex-shrink-0 w-14" aria-hidden="true"></div>
     <div class="bx-sidebar-cnt relative flex-1 flex flex-col max-w-xs w-full py-4 bg-white dark:bg-gray-900">
         <div class="absolute top-0 left-0 -ml-12 pt-2">

modules/boonex/artificer/data/template/system/sidebar_site.html

@@ -1,5 +1,5 @@
 <div class="bx-sidebar bx-sidebar-site fixed inset-0 flex z-40 lg:hidden" role="dialog" aria-modal="true">
-    <div class="bx-sidebar-bg fixed inset-0 bg-gray-600 opacity-75" aria-hidden="true"></div>
+    <div class="bx-sidebar-site-bg fixed inset-0 bg-gray-600 opacity-75" aria-hidden="true"></div>
     <div class="bx-sidebar-cnt relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white dark:bg-gray-900">
         <div class="absolute top-0 right-0 -mr-12 pt-2">
             <button type="button" class="bx-sidebar-site-close ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">

modules/boonex/artificer/install/langs/en.xml

@@ -27,7 +27,8 @@
 
     <string name="_bx_artificer_txt_splash_welcome_l1"><![CDATA[Welcome to]]></string>
     <string name="_bx_artificer_txt_splash_welcome_l2"><![CDATA[the community]]></string>
-    <string name="_bx_artificer_txt_splash_welcome_l3"><![CDATA[The social media network for people to connect, collaborate and share original content. Powered by <a class="text-blue-500 hover:text-blue-600" href="https://una.io">UNA Community Software</a>.]]></string>
+    <string name="_bx_artificer_txt_splash_welcome_l3"><![CDATA[The best social media network for people to connect, collaborate, share content and inspire each other.]]></string>
+    <string name="_bx_artificer_txt_splash_welcome_l4"><![CDATA[Powered by <a class="font-medium underline" href="https://una.io">UNA Community Management System</a>.]]></string>
     <string name="_bx_artificer_txt_splash_welcome_a1"><![CDATA[Create Account]]></string>
     <string name="_bx_artificer_txt_splash_welcome_a2"><![CDATA[Login]]></string>
     <string name="_bx_artificer_txt_splash_stats_l1"><![CDATA[We rise by helping others]]></string>

plugins_public/tailwind/css/tailwind.css

@@ -327,7 +327,7 @@
 
     /* Common elements: Pages. */
     .bx-def-color-bg-page{
-	@apply bg-gray-100 dark:bg-black;
+	@apply bg-gray-100 dark:bg-gray-900;
     }
 
     /* Common elements: Blocks, Boxes, etc. */
@@ -353,7 +353,7 @@
         @apply rounded-md;
     }
     .bx-artificer .bx-content-padding-block {
-        @apply p-4;
+        @apply p-3 md:p-4;
     }
     .bx-artificer .bx-def-color-bg-box-hover {
         @apply hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-800 dark:hover:text-gray-200;
@@ -362,6 +362,10 @@
         @apply bg-gray-100 dark:bg-gray-700;
     }
 
+    .bx-artificer .bx-db-title {
+        @apply leading-8 text-lg lg:text-xl text-gray-800 dark:text-gray-100 font-semibold align-middle;
+    }
+
     /* Common Elements: HR */
     .bx-artificer .bx-def-hr {
         @apply mx-0 p-0 border-t border-gray-200 dark:border-gray-700;
@@ -384,16 +388,39 @@
     }
 
     /* Common elements: Buttons */
+    .bx-btn-shadow {
+        @apply shadow-sm hover:shadow active:shadow-none;
+    }
+    .bx-btn-border {
+        @apply border border-gray-300 dark:border-gray-600 rounded-md;
+    }
+    .bx-btn-bg {
+        @apply bg-gray-100 dark:bg-gray-700;
+    }
+    .bx-btn-text {
+        @apply text-sm text-gray-700 dark:text-gray-100 font-medium ;
+    }
+    .bx-btn-hover {
+        @apply hover:bg-white dark:hover:bg-gray-600;
+        @apply hover:border-gray-300 dark:hover:border-gray-500;
+        @apply hover:text-gray-800 dark:hover:text-white;
+        @apply hover:-translate-y-px;
+    }
+    .bx-btn-active {
+        @apply active:bg-gray-300 dark:active:bg-gray-800;
+        @apply active:border-gray-400 dark:active:border-gray-700;
+        @apply active:text-gray-900 dark:active:text-gray-200;
+        @apply active:translate-y-px;
+    }
     .bx-btn {
         @apply relative inline-flex items-center px-4 py-2;
-        @apply shadow-sm hover:shadow active:shadow-none;
-        @apply bg-gray-100 hover:bg-white active:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-800;
-        @apply border border-gray-300 hover:border-gray-300 active:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500 dark:active:border-gray-700;
-        @apply font-medium text-sm text-gray-700 hover:text-gray-800 active:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:active:text-gray-200;
-        @apply transform-gpu hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-150;
-        @apply rounded-md;               
+        @apply bx-btn-shadow;
+        @apply bx-btn-bg;
+        @apply bx-btn-border;
+        @apply bx-btn-text;
+        @apply transform-gpu transition-all duration-150;
+        @apply bx-btn-hover bx-btn-active;
     }
-
     .bx-btn i, 
     .bx-btn u {
         @apply inline-block align-middle;
@@ -603,18 +630,29 @@
     /* Common elements: Menus */
     .bx-artificer .bx-stl-mil,
     .bx-artificer .bx-stl-mil-sm {
-        @apply flex items-center px-3 py-1.5 leading-6 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 active:bg-gray-300 dark:active:bg-black hover:bg-gray-50 dark:hover:bg-gray-700 text-sm font-medium rounded-md;
+        @apply flex items-center px-3 py-1.5;
+        @apply leading-6 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium;
+        @apply active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50;
+        @apply rounded-md;
     }
     .bx-artificer .bx-stl-mil-sm {
-        @apply px-2 leading-4;
+        @apply px-2 leading-5;
+    }
+    .bx-artificer .bx-stl-mil-hover {
+        @apply hover:text-gray-800 dark:hover:text-gray-200;
+        @apply hover:bg-gray-200/50 dark:hover:bg-gray-700/50;
+    }
+    .bx-artificer .bx-stl-mil-active {
+        @apply active:bg-gray-300 dark:active:bg-black/50;
     }
     .bx-artificer .bx-popup .bx-stl-mil,
     .bx-artificer .bx-popup .bx-stl-mil-sm {
         @apply rounded-none;
     }
     .bx-artificer .bx-menu-tab-active .bx-stl-mil,
-    .bx-artificer .bx-menu-tab-active .bx-stl-mil-sm {
-        @apply ring-1 ring-white dark:ring-gray-800 bg-gray-200 dark:bg-gray-900 text-gray-900 dark:text-white;
+    .bx-artificer .bx-menu-tab-active .bx-stl-mil-sm,
+    .bx-artificer .bx-db-header .bx-menu-custom-hor li.bx-menu-tab-active a {
+        @apply ring-1 ring-white/50 dark:ring-gray-800/50 bg-gray-200 dark:bg-gray-900 text-gray-900 dark:text-white;
     }
     .bx-artificer .bx-popup .bx-menu-tab-active .bx-stl-mil,
     .bx-artificer .bx-popup .bx-menu-tab-active .bx-stl-mil-sm {
@@ -641,10 +679,6 @@
         @apply text-gray-700 dark:text-gray-200 font-medium;
     }
 
-    .bx-artificer .bx-db-header .bx-menu-custom-hor li.bx-menu-tab-active a {
-        @apply dark:bg-gray-800 text-gray-900 dark:text-white;
-    }
-
     /* Vertical menu */
     .bx-artificer .bx-menu-ver li.bx-menu-tab-active .bx-mi-highlight,
     .bx-artificer .bx-menu-verlit li.bx-menu-tab-active .bx-mi-highlight,

studio/classes/BxDolStudioBuilderPageQuery.php

@@ -327,12 +327,14 @@ class BxDolStudioBuilderPageQuery extends BxDolStudioPageQuery
 
     function getModulesWithCopyableBlocks()
     {
+        $aTypes = [BX_DOL_MODULE_TYPE_MODULE, BX_DOL_MODULE_TYPE_TEMPLATE];
+
     	$sSql = $this->prepare("SELECT
-				`tm`.`name` AS `module`
-			FROM `sys_modules` AS `tm`
-			LEFT JOIN `sys_pages_blocks` AS `tpb` ON `tm`.`name`=`tpb`.`module`
-			WHERE `tm`.`type`=? AND `tpb`.`copyable`=?
-			GROUP BY `tm`.`name`", BX_DOL_MODULE_TYPE_MODULE, 1);
+                `tm`.`name` AS `module`
+            FROM `sys_modules` AS `tm`
+            LEFT JOIN `sys_pages_blocks` AS `tpb` ON `tm`.`name`=`tpb`.`module`
+            WHERE `tm`.`type` IN (" . $this->implode_escape($aTypes) . ") AND `tpb`.`copyable`=?
+            GROUP BY `tm`.`name`", 1);
     	return $this->getColumn($sSql);
     }
 

studio/template/scripts/BxBaseStudioBuilderPage.php

@@ -518,7 +518,7 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
             )
         );
 
-        $aModules = BxDolModuleQuery::getInstance()->getModulesBy(array('type' => 'modules'));
+        $aModules = BxDolModuleQuery::getInstance()->getModulesBy(['type' => 'type', 'value' => [BX_DOL_MODULE_TYPE_MODULE, BX_DOL_MODULE_TYPE_TEMPLATE]]);
         $aModulesWithBlocks = $this->oDb->getModulesWithCopyableBlocks();
         foreach($aModules as $aModule) {
             $sName = $aModule['name'];

template/designbox_0.html

@@ -1,5 +1,3 @@
 <!-- Design Box 0 [start]: Content only -->
-<div class="bx-db-content relative">
-__designbox_content__
-</div>
+<div class="bx-db-content relative">__designbox_content__</div>
 <!-- Design Box 0 [ end ] -->

template/designbox_1.html

@@ -1,7 +1,7 @@
 <!-- Design Box 1 [start]: Content + title + background -->
 <div class="bx-db-container bx-dbc-nopadding bx-def-color-bg-block bx-def-border-block bx-def-border-radius-block">
-    <div class="bx-db-header px-4 py-2 lg:px-6 lg:py-4">
-        <div class="bx-db-title text-lg lg:text-xl leading-6 font-bold text-gray-800 dark:text-gray-100 align-middle">__title__</div>__caption_item__
+    <div class="bx-db-header px-3 md:px-4 pt-2 md:pt-3 pb-4">
+        <div class="bx-db-title">__title__</div>__caption_item__
     </div>
     <div class="bx-db-content relative">__designbox_content__</div>
 </div>

template/designbox_10.html

@@ -1,3 +1,3 @@
 <!-- Design Box 10 [start]: Content only + padding -->
-<div class="bx-db-content relative p-3 md:p-4">__designbox_content__</div>
+<div class="bx-db-content bx-content-padding-block relative">__designbox_content__</div>
 <!-- Design Box 10 [ end ] -->

template/designbox_11.html

@@ -1,8 +1,8 @@
 <!-- Design Box 11 [start]: Content + title + background + padding -->
 <div class="bx-db-container bx-def-color-bg-block bx-def-border-block bx-def-border-radius-block">
     <div class="bx-db-header px-3 md:px-4 pt-2 md:pt-3">
-        <div class="bx-db-title text-lg lg:text-xl leading-6 font-bold text-gray-800 dark:text-gray-100 align-middle">__title__</div>__caption_item__
+        <div class="bx-db-title">__title__</div>__caption_item__
     </div>
     <div class="bx-db-content bx-content-padding-block relative">__designbox_content__</div>
 </div>
-<!-- Design Box 11 [ end ] -->
+<!-- Design Box 11 [ end ] -->

template/designbox_14.html

@@ -1,8 +1,8 @@
 <!-- Design Box 14 [start]: Content + title + padding -->
-<div class="bx-db-container bx-dbc-nobg rounded-md">
-    <div class="bx-db-header px-3 py-2 md:px-4 md:py-3">
-        <div class="bx-db-title text-lg lg:text-xl leading-6 font-bold text-gray-800 dark:text-gray-100 align-middle">__title__</div>__caption_item__
+<div class="bx-db-container bx-dbc-nobg bx-def-border-radius-block">
+    <div class="bx-db-header px-3 md:px-4 pt-2 md:pt-3">
+        <div class="bx-db-title">__title__</div>__caption_item__
     </div>
-    <div class="bx-db-content relative p-3 md:p-4">__designbox_content__</div>
+    <div class="bx-db-content bx-content-padding-block relative">__designbox_content__</div>
 </div>
-<!-- Design Box 14 [ end ] -->
+<!-- Design Box 14 [ end ] -->

template/designbox_4.html

@@ -1,8 +1,8 @@
 <!-- Design Box 4 [start]: Content + title -->
-<div class="bx-db-container bx-dbc-nopadding bx-dbc-nobg rounded-md">
-    <div class="bx-db-header px-4 py-2 lg:px-6 lg:py-4">
-        <div class="bx-db-title text-lg lg:text-xl leading-6 font-bold text-gray-800 dark:text-gray-100 align-middle">__title__</div>__caption_item__
+<div class="bx-db-container bx-dbc-nopadding bx-dbc-nobg bx-def-border-radius-block">
+    <div class="bx-db-header px-3 md:px-4 pt-2 md:pt-3 pb-4">
+        <div class="bx-db-title">__title__</div>__caption_item__
     </div>
     <div class="bx-db-content relative">__designbox_content__</div>
 </div>
-<!-- Design Box 4 [ end ] -->
+<!-- Design Box 4 [ end ] -->

template/scripts/BxBaseServices.php

@@ -675,6 +675,7 @@ class BxBaseServices extends BxDol implements iBxDolProfileService
             return '';
 
         return bx_srv($sModuleAuthor, $sMethodGetCover, [$oAuthor->getContentId(), [
+            'class' => 'bx-base-author',
             'use_as_author' => true,
             'show_cover' => false
         ]]);