MetaLocator supports custom CSS for users in our Pro and higher plans.
CSS can be provided directly in the CSS setting found under Style & Color as shown below:
Click the External Link arrow to "maximize" the CSS editor as shown below:
Click the down arrow to minimize the editor.
Clicking the Save icon applies the CSS changes to the Interface in the Builder, but does not save the Interface.
Essential MetaLocator CSS Best Practices
MetaLocator avoids making markup changes to key structural elements to avoid breaking customer-authored CSS, however; occasionally markup changes can not be avoided.
The best CSS practice is to avoid CSS first. Before authoring any CSS, use the Style Controls in the Interface builder to establish the colors, fonts, border-styles, ordering and spacing required. This ensures that a non-programmer can maintain the Interface in the future by changing class selections. Most fields include a Style setting which can accept any Bootstrap class as shown below:
Include a vendor prefix
When authoring CSS, we recommend using the vendor prefix before every rule.metalocator ...your CSS selector(s) here... {In front of every selector as shown above. This will avoid any conflict of the CSS rule with any integrated frameworks within our software or your Website.
Choose selectors that isolate the target elements, but are not over-specific.
Selectors should include the following basic structure where possible:
<vendor prefix> <Primary Container ID> <Recurring Container Class> <Recurring Element Class>
Where vendor prefix is always MetaLocator,
Examples of Primary Container ID include #ml_results_wrapper, #ml_searchform, #ml_locator_details. Not all containers will have a specific ID in which case it will typically include a class that identifies it's use case, as in #ml_locator_modal.ml_modal_email_form.
The most common Recurring Container Class is .com_locator_entry, a class used every time MetaLocator displays location details. A CSS selector of .com_locator_entry will select every result in the List, Details and Map Popup, where as #ml_results_wrapper .com_locator_entry will only select those results in the List.
Similar to Recurring Containers are Recurring Elements. For example, the phone number might be found displayed in the List, Details and Map Popup and if a selector for was written without a Primary Container ID, it would apply to each display of the phone number. However, if the phone number was displayed within the same card in a second place, we would inadvertently select both.
The recurring elements have special classes in their outermost wrapping SPAN which helps to identify their context. Examples are as follows
1. ml_field_type_container_text - The data type of this value (text).
2. ml_field_name_container_phone - The field type, this is a phone field
3. ml_field_template_container_phone_linked - The template used. This is the template called "Phone Linked"
4. ml_field_instance_container_phone_7 - The specific instance of this field.
In the example above, if we wanted to target all phone fields, linked phone fields, or just a specific phone field, we could identify those using the selectors above.
Not all selectors begin with ml_, but we do prefer them. For historical reasons, some selectors do not include an ml_ prefix, but if one is available use it.
The main.metalocator includes classes with application state indications.
Depending on the application state, the classes will be added and removed. This is useful for targeting a style based on a specific state, like no results, before and after search, initial state etc. Examples include:
1. ml_locator_no_results - A search was performed and no results are available
2. ml_selected_tag_54 - The user has selected a category with ID = 54 in the search
3. ml_locator_results - There are results displayed.
Retain function of the Color Pickers by using placeholders
The color picker variable names are all dynamic within the CSS and can be inserted as shown below:
.ml_directory_focused .card{
background-color: %%theme_color_primary%%;
}
The %%theme_color_primary%% placeholder is replaced by the Interface Builder user's choice of color in the Primary Color picker, allowing the CSS to remain in place, while retaining the color picker's functionality.
Avoid any external assets.
Upload any image files, fonts or assets used directly to MetaLocator using the file uploader under Tools > File Uploader.
Use modern image file formats
Use SVG, Webp or PNG-24 for images. Woff & Woff2 for fonts
Use modern positioning
Use CSS Grid and Flexbox, not floats
Avoid child > selectors
Child selectors can break if MetaLocator changes the markup to insert a wrapper or similar empty element. Where possible use, .parent .child instead of .parent > .child
Avoid excessive, repeated CSS rules
This is a general best practice. When a phone number, for example, must appear in red in the list, the map popup and the details pane, this should be one CSS rule, not 3.
Avoid overly specific CSS selectors
.metalocator .results_wrap.com_locator_results_wrapper div.com_locator_entry
This could just as easily be:
.metalocator #ml_results_wrapper .com_locator_entry
Overly-specific CSS is the most common type of feedback we provide. If there is a question regarding the best CSS selector to use, please reach out and ask for our advice.
Of course, the best way to find information about the CSS on a Web site is to use an extension like the Web Developer Toolbar or Chrome Inspector or Firebug.