UNA - Themes, Html, CSS - Tips and Cheats | [EN], [DE],

  • O

    19 members
  • O

    19 followers
  • 4169 views
  • 2 votes
  • More
Add new...
 
 

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 --- */

h2:before {
  content: "“ ";
  color: #8c4e92;
  font-size: 28px;
  font-weight: 600;
}

h2:after {
  content: " ”";
  color: #8c4e92;
  font-size: 28px;
  font-weight: 600;
}

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;
}

-page-block-4429 .bx-def-margin-sec-bottom.bx-clearfix {
  display: none;
}

Input for a RAW Box under Profiles:

<style>
h2:before {
  content: "“ ";
  color: #8c4e92;
  font-size: 28px;
  font-weight: 600;
}

h2:after {
  content: " ”";
  color: #8c4e92;
  font-size: 28px;
  font-weight: 600;
}

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;
}

-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

  • 1483

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.

  • 673

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

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

{

 width: 100vw;

 height: 100vh;

 margin-top: 11px;

 border-radius: 0px;

}

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

{

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

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

}

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

.dark {

 --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
  • 784
  • 634

Before:

ytanjbtgdz5eacu9eqhthywylwq4jaxm.jpgAfter:mr2es7eafqtmzbrkgmczls8neeww5cms.jpgnzv3z2sxrruphfzdjp8fngphytijhixa.jpg

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

  • 632

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 ;)

image_transcoder.php?o=sys_images_editor&h=551&dpx=1&t=1659203745

image_transcoder.php?o=sys_images_editor&h=552&dpx=1&t=1659203845

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

Have fun !

  • 603

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;

}

  • 614

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;
}
  • 504
  • 900
  • 1