Style / Components / Title

/*drop down background colour*/
.uk-navbar-dropdown-nav > li.uk-active {
background-color: rgba(204, 204, 204, 0.8);
}

Add to Setings / Custom Code / CSS/LESS

/*making the drop shadow stay on the header*/
.uk-navbar-sticky:not(.uk-navbar-transparent) {
box-shadow: 1px 1px 20px 0 #000;
}

Make a graduation and copy the code:

https://www.w3schools.com/colors/colors_gradient.asp

Add to the code into the colour area.

e.g. Jasper colour

linear-gradient(135deg, rgba(205, 83, 52, 0.5), rgba(133, 33, 36, 0.5))

linear-gradient(40deg, #E35996 0%, #B677D0 45%, #9791E9 70%, #6aaff5 100%)

• In the Joomla backend go to Components > RSForm! Pro > Manage Forms.

• For each form you use:

  • Click on the name of the form.

  • Click on "Form Properties".

  • Select Responsive Layouts > UIkit 3.x.

  • Set Options > Load Layout CSS / JS > No.

     

    

    (The screenshot is meant to provide general orientation. Your RSForm user interface might well look slightly different.)

• Click on "Save" in the toolbar.

Reload the page in the frontend to see if matters have improved.

Section / edit / Setting

make the header transparent, pull section under header

Then, Add this to the CSS of the top section - (NEW LMEQ website)

/* header menu area transparent black */
.uk-navbar-container:not(.uk-navbar-transparent),
.uk-navbar-transparent {
background-color: rgba(0,0,0,0.5);
}

/* headerbar above menu transparent black */
.tm-headerbar {
background-color: rgba(0,0,0,0.5);
}

/* header transparent black */
.uk-navbar-container:not(.uk-navbar-transparent),
.uk-navbar-transparent {
background-color: rgba(0,0,0,0.5);
}

See a section only on small screens -

Into Section / Advanced / CLASSES  add: 

uk-hidden@m

See a section only on large screens -

Into Section / Advanced / CLASSES  add: 

uk-visible@l

More detail:

https://getuikit.com/docs/visibility

edit the section in the page builder by clicking on the pencil icon next to the section name

click on the Advanced tab 

enter

Show on small screens: 

uk-hidden@m

 Show on large screens

uk-hidden@l

 uk-hidden@l> into the field Class for sections that shall only be visible on small screens (screen width of 0–1199px by default)

alternatively, enter uk-visible@l> into the field Class for sections that shall only be visible on large screens (screen width of 1200px and more by default)

alternatively, if you need to target a specific device width, enter the following into the field CSS (adjust the values to your needs)

/* section only visible on screens with a width of 900px and more */
@media(max-width: 899px) {
    .el-section {
        display: none;
    }
}

or

/* section only visible on screens with a width of 0–899px */
@media(min-width: 900px) {
    .el-section {
        display: none;
    }
}

• save

Here is the list of visibility classes available: https://getuikit.com/docs/visibility

Please also be informed that there is a Visibility setting in the general settings of each element. If no element in a section is visible, this section will collapse and not be visible either (also see collapsing layouts).

Alternatively, assign a page class to this particular "Home" menu item which can be addressed via CSS:

In the Joomla backend go to Menus > Main Menu and edit your menu item "R1-Connect" (I am not sure how precisely it is spelled).

Into Page Display > Page Class enter the exact string

  r1-connect

Click "Save & Close" in the toolbar.

Navigate to YOOtheme > SETTINGS > Custom Code and into the field "CSS/LESS" insert the following CSS:

 .r1-connect .uk-section {
  background-color: #00ff00;
  }

Same here: Adjust the colour, of course.

Save the changes, clear the cache, reload the page, and test the result.

Troubleshooting 

uk-width-expand@s uk-first-column" style="--uk-inverse: initial; margin: 0px; padding-left: 15px; box-sizing: border-box; width: 660.359px; max-width: 100%; flex: 1 1 0%; min-width: 1px;">

michael Support

Jun 30, 2025

.el-section {
background-color: #00ff00;
}

Edit the Grid item, and select Content > META > Dynamic > Article: Published.

Alternatively, select Content > META > Dynamic > Article: Meta, click on the pencil  icon, and — if you don't want to show the author — un-tick  Show author.

Regarding the date format — which you might want to change — please see https://yootheme.com/support/yootheme-pro/joomla/dynamic-content#date-format. Its syntax is that of the PHP Date function.

/* yellow outer panel border top left panel*/
.el-column > div > * {
border: 2px solid #fcc312;
}

add to row / advanced / css