Form Design Customization
When Locatoraid renders a store locator search form on a front end page of your Wordpress website, it tries to use as unobtrusive html code as possible. It means that most probably the Locatoraid search form will smoothly integrate into your Wordpress theme design. The look and feel of the search inputs and buttons in the store locator page will match those of other parts of your Wordpress website.
Nevertheless Locatoraid also lets you finely tune the visual details of the store locator form to fulfill your design requirements.
You can easily do this with custom CSS settings. Just add your custoim CSS code for the following entities:
Search Text Input | #locatoraid-search-form-search input |
Search Submit Button | #locatoraid-search-form-button |
Your code may read something like this:
#locatoraid-search-form-search input {
height: 2.5em;
padding: 0.5em 1em;
border: 1px solid #060;
border-radius: 0.25em;
}
#locatoraid-search-form-button {
height: 2.5em;
padding: 0.5em 1em;
background-color: #900;
color: #fff;
}
Wordpress provides a few way to apply those changes. Here are some of the options:
- Add this custom CSS to your Wordpress theme style. In your WordPress admin panel, go to Appearance, Customize, then click Additional CSS. Paste your CSS code, then click Save & Publish.
-
Or you can add the custom CSS code directly to the content of the page with [locatoraid] shortcode. Open this file in the Wordpress page editor, enter the opening <style> tag, paste the CSS code, and enter the closing </style> tag.
About Locatoraid
Lightweight, easy to use WordPress store locator plugin to help your customers find your stores, dealers, hotels, restaurants, ATMs, products, or any other types of locations. Get started with the free Locatoraid version and enjoy the beautiful add-ons of Locatoraid Pro.