> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.metalocator.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Custom CSS in MetaLocator

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:

[![](https://storage.crisp.chat/users/helpdesk/website/-/c/1/4/1/c141811d970cf000/ccee74c7-f5db-4575-a87f-34c276_l2rl9x.png)](https://downloads.intercomcdn.com/i/o/375311093/4d73281cf30cae0f834ef1bb/image.png?expires=1794511800&signature=7dbbe3e8fea95d85cb348dd174939bf01f25b919340fe54ca19b6b926f8c47e3&req=dyciFch%2FnYhcFb4f3HP0gMeNwP9JmpPTdpczSK7u6UIn4rqaegcjb%2FFWOSQx%0AFNZPX%2FnncdaPntdFzw%3D%3D%0A)

Click the External Link arrow to "maximize" the CSS editor as shown below:

[![](https://storage.crisp.chat/users/helpdesk/website/-/e/1/0/b/e10b2a466fe35000/e1ad96ab-dbb8-4055-9fba-3e8129_163leyu.png)](https://downloads.intercomcdn.com/i/o/375311334/b7af27edb10482aae3fc2ee7/image.png?expires=1794511800&signature=0605bc940c5a215419e4e38445adbe29cd1a30cac31afbd8aa5b4d1542ec6704&req=dyciFch%2FnoJbFb4f3HP0gFu07qkdRTmUtBEm2suyfgwBtNZCdSYQGLgEuzaj%0A2vfqooCs7FBHhwPqOg%3D%3D%0A)

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:  
​  
​

[![](https://storage.crisp.chat/users/helpdesk/website/-/1/5/1/d/151d7a21bca2eb00/3ad74973-3d7a-45f7-97fe-cc605b_1tux8po.png)](https://downloads.intercomcdn.com/i/o/841500272/6d0921ca6e9f1f304a5a95aa/image.png?expires=1794511800&signature=9a1392886324fabb183000f5030c6867bd5921309ee79664fbe37cf7156a471b&req=fCQmE8l%2Bn4ZdFb4f3HP0gPDOyJUiRagPpnxq7kFcyrdTLqsGqLc9GmYDqm7y%0AT1aV0cNYwGP1fLrNHA%3D%3D%0A)

1. **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.  
​
2. **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.  
​
3. **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.  
​
4. **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.  
​
5. **Avoid any external assets.**  
​  
Upload any image files, fonts or assets used directly to MetaLocator using the file uploader under Tools > File Uploader.  
​
6. **Use modern image file formats**  
​  
Use SVG, Webp or PNG-24 for images. Woff & Woff2 for fonts  
​
7. **Use modern positioning**  
​  
Use CSS Grid and Flexbox, not floats  
​
8. **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  
​
9. **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.  
​
10. **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](http://chrispederick.com/work/web-developer/) or Chrome Inspector or [Firebug](http://getfirebug.com).