Skip to main content

Change size of mobile close icon

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

#tm-dialog-mobile .uk-close svg {
width: 30px;
height: auto;
}

Adjust the size according to your requirements.

  • Hits: 4

Adding Anchor Points Links in Yootheme Joomla

Go to the item you want to link to.

Create a text box or highlight some text you want to link to. You do not need text to create an anchor point.

Click to open JCE editor then click on the anchor icon a pop up will open.

Fill in the appropriate name/description of the anchor point and insert an anchor icon will appear in the content. 

Go to the place or page where you want the link to be accessed come from.

Create a button or text, then link it by adding the full url to the linked page. The final piece of the link should be the name of the anchor point with a # in front of it.

Save and Test the link

  • Hits: 4

Toolbar right left, show in sticky header and the mobile header

Navigate to YOOtheme > SETTINGS > Custom Code > CSS/LESS, and add the following to it:

 /*Force toolbar (Top area above header) to show on small screens*/
@media(max-width:  @breakpoint-medium) {
    .tm-toolbar.uk-visible\@m {
    display: block !important;
    }
    .tm-page {
    display: flex;
    flex-direction: column;
    }
    .tm-toolbar {
    order: -1;
    }
}
  • Hits: 6

Adding Anchor points in YooTheme pro

You can create anchor points in a section:

Edit > Advanced > ID - say 

my-anchor-point

to link to the anchor from a button or similar use '

#my-anchor-point
  • Hits: 10

Button padding space

/*button padding */

.btn, .uk-button {
padding-top: 12px;
padding-bottom: 12px;
}

  • Hits: 6

Paragraph spacing space between bullet pointed or numbered, list items

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

/* bullet list - force paragraph space to match - YOOtheme > STYLE > Base > Margin > Vertical. */
ul:not([class]) li + li {
margin-top: @base-margin-vertical;
}

FULL ANSWER

You could edit the HTML markup and change the opening tag of the "Unnumbered List" element from

<ul>

to

<ul class="uk-list">

This is the recommended approach.

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

ul:not([class]) li + li {
margin-top: @base-margin-vertical;
}

This would inherit the default margin between paragraphs as defined via YOOtheme > STYLE > Base > Margin > Vertical.

You can replace the variable @base-margin-vertical by a lenght of your choice. Just make sure to use an integer followed by a unit, like 20px for example.

  • Hits: 6

Make a button element text header sticky

Put code into the CSS of the element you want to be sticky.

Adjust the position settings.

/*make the button sticky at the bottom*/
.el-element {
position: fixed;
right: 0;
bottom: 2%;
z-index: 1;
}
  • Hits: 9

RSForm layout style not working contact page

  • 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.

  • Hits: 16