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

/* accordion design */

.uk-accordion-content{
margin-left: 20px;
margin-bottom: 20px;
}
.uk-accordion {
margin-top: 40px;
background-color: #fff;
}
.uk-accordion-title::before {
background-image: url("/images/graphics/accordion-graphics/shield-20.png");
background-repeat: no-repeat
}
.uk-open > .uk-accordion-title::before {
background-image: url("/images/graphics/accordion-graphics/shield-20-red.png");
}
.uk-accordion > :nth-child(n+2) {
margin-top: 0;
padding-top: 0;
}
.uk-accordion-title {
background-color :#f7f7f6;
padding: 20px;
}
.uk-open > .uk-accordion-title {
background-color: #999;
}

.uk-accordion-content>:last-child {
margin-bottom: 20px;
}
/* END accordion design */

Biomin redesign.

/* accordion radius corved corners and uppercase*/
.uk-accordion-title {
border-radius: 5px;
text-transform: uppercase;
font-size: 14px;
}

/*accordion making the text stay in the middle of the button vertically*/
.el-title {
display: flex;
align-items: center;
width: 160px}
}

/*center accordion */

.el-title {
margin:0 auto;
}

Make sure the JFilters, YoothemePro plugin is loaded and enabled.

Make sure Ajax Interfce is turned off.

In the Joomla menu make a menu item JFilter Reshils and select JFilter /  Results from the Menu itme type - save.

In YoothemePro go to the new JFilter menu item page.

Create a Template, call it JFilters Results. Choose Page / JFilters Results

Save the template it will have a dot beside it if you are on the JFilter page, click on the templte to open the builder / template 

Click New Layout.

Split the section into 2 columns

Add a grid into the the second column

Click on the grid and add an item

Inside the item you have just created to to the advanced tab and from the Dynamic Content drop-down, select JFilters Results Items.

 Still inside the item go to the Content tab and map the title

Contine to map the items on this page.

Limit the amount of full content showing, by setting the content length. Click on the edit icon.

YOOtheme > SETTINGS > Custom Code

/* add in the dividers in the dropdown sub menu */
.tm-header .uk-navbar-dropdown li + li::before {
content: "";
display: block;
height: 1px;
width: 100%;
background: #739ed1;
}

Style / Global / Box Shadows

The font weight is defined at Style > Nav > Default > Font Weight,

the colour is defined by the setting Style > Inverse > Nav Default > Item Color