Here some Css changes for the MOOD Module by @Jerome Mingo

Tested by UNA 13.0.0-B3

Theme: Artificer

Module-Version: 1.0.1

Input for ur Custom Theme CSS:

/* --- Moods --- */

#mood_div h2:before {

  content: "“ ";

  color: #8c4e92;

  font-size: 28px;

  font-weight: 600;

}

#mood_div h2:after {

  content: " ”";

  color: #8c4e92;

  font-size: 28px;

  font-weight: 600;

}

#mood_div img {

  --tw-border-opacity: 0.12;

  border-color: rgb(128 128 128/var(--tw-border-opacity));

  border-width: 8px;

  border-radius: .275rem;

  margin-left: auto;

  margin-right: auto;

}

.bx-form-advanced-wrapper.mz_mood_give_mood_wrapper .comp-form-ul li span {

  font-size: 12px;

}

.bx-form-advanced-wrapper.mz_mood_give_mood_wrapper .comp-form-ul li span img {

  max-width: 75px;

  max-height: 75px;

}

#bx-page-block-4429 .bx-def-margin-sec-bottom.bx-clearfix {

  display: none;

}

Input for a RAW Box under Profiles:

<style>

#mood_div h2:before {

  content: "“ ";

  color: #8c4e92;

  font-size: 28px;

  font-weight: 600;

}

#mood_div h2:after {

  content: " ”";

  color: #8c4e92;

  font-size: 28px;

  font-weight: 600;

}

#mood_div img {

  --tw-border-opacity: 0.12;

  border-color: rgb(128 128 128/var(--tw-border-opacity));

  border-width: 8px;

  border-radius: .275rem;

  margin-left: auto;

  margin-right: auto;

}

.bx-form-advanced-wrapper.mz_mood_give_mood_wrapper .comp-form-ul li span {

  font-size: 12px;

}

.bx-form-advanced-wrapper.mz_mood_give_mood_wrapper .comp-form-ul li span img {

  max-width: 75px;

  max-height: 75px;

}

#bx-page-block-4429 .bx-def-margin-sec-bottom.bx-clearfix {

  display: none;

}

</style>

Let me know it is working or not. Who want can change the Border-Color and With

Hello,

if u want to use a EXPLORE Site like this:

[ https://lapixi.com/explore ], can follow this guide, how u can set the online Icons for visitors off.

1. Go under ur Site in the administration where u want to show off the online icons.
2. Add a RAW Box on first position on Site.
3. Set under the Box visiblity " ONLY FOR GUESTS or VISITORS "
4. Insert the following code and save:

<style>.bx-base-pofile-unit-online { display: none; }</style>

... this should be working for all templates.

Who want fix the Qicksearch on mobile and PC a little bit, can test and insert this code:

/* --- QuickSearch - Light and Dark --- */

#sys_search_results_quick {

 width: 100vw;

 height: 100vh;

 margin-top: 11px;

 border-radius: 0px;

}

/* --- QuickSearch - Light Theme --- */

#sys_search_results_quick {

 --tw-bg-opacity: 1 !important;

 background-color: rgb(255 255 255/var(--tw-bg-opacity)) !important;

}

/* --- QuickSearch - Dark Theme --- */

.dark #sys_search_results_quick {

 --tw-bg-opacity: 1 !important;

 background-color: rgb(0 0 0/var(--tw-bg-opacity)) !important;

}

----------------------------------------------------------------------------

• change the opacity to 0.95 if u like to have it transparent,
• change ur background-color same as ur header color

Changes for Page Covers

• [ https://una.io/cmts-view/6jw6pt?sys=bx_forum&cmt_id=41481 ]

Changes for Login Covers

• [ https://una.io/cmts-view/6jw6pt?sys=bx_forum&cmt_id=41488 ]

Changes for Login Covers - Between Guests and Members

• [ https://una.io/cmts-view/6jw6pt?sys=bx_forum&cmt_id=41488 ] and
• [ https://una.io/cmts-view/6jw6pt?sys=bx_forum&cmt_id=41489 ]

Before:

After:

insert this code in ur custom CSS of the artificer design.

.justify-start { min-width: 1px; }

For mobiles u should use the Avatar and max. 3 more Icons than u have at moment a good way to use the site in the application view on mobile ;)

Let me know it is working for u at first

I was playing a little bit with the Labels what u can create and not.

It is working and looking very nice if u put Emojis before the Label font ;)

Here is a list of Emojis, what will be working [ https://emojikopieren.de ]

Have fun !

Who want to fix the notifications at first can use this Code:

div#bx_notifications_preview {

  right: -1rem !important;

  left: auto !important;

position: fixed !important;

}

ARTIFICER Theme:

who want to have the Timeline in the middle row smaller, can insert this piece of code:

(with this code all boxes un the midlle row are smaler)

.lg\:px-3 {
    max-width: 560px;
    margin: auto;
}