Change Size of Address/Zip, Within, Find Locations Boxes

Home Forums Store Locator Plus Change Size of Address/Zip, Within, Find Locations Boxes

Tagged: , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Cici 11 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #36155

    elyssa
    Participant

    I currently have the plugin style set to Twenty Fourteen Rev 01. I like the centered layout, but would like to decrease the width of the “address/zip” input box, the “within” dropdown box and the “find location” button.

    Thank you in advance for your help.

    #36195

    Cici
    Keymaster

    We need your Plugin environment see posting guideelines. I do not know what versions or add-ons you have but if you are looking to change any style sheet settings from what the theme currently has you need custom CSS. There are tutorial how to videos (see playlist) and documentation that explans how to do that. You need ProPack enabled for CSS.

    #36707

    elyssa
    Participant

    Hi Cici,

    My Plugin environment info is:
    <p class=”envinfo” style=”font-size: 13px; line-height: 1.5; margin: 0px; padding: 0px; color: #666666; font-family: sans-serif; background-color: #f1f1f1;”><span class=”label” style=”display: inline-block; padding: 4px; text-align: right; width: 180px; margin-right: 6px; background-color: #f0f0e0;”>Store Locator Plus Version:</span>4.3.24</p>
    <p class=”envinfo” style=”font-size: 13px; line-height: 1.5; margin: 0px; padding: 0px; color: #666666; font-family: sans-serif; background-color: #f1f1f1;”><span class=”label” style=”display: inline-block; padding: 4px; text-align: right; width: 180px; margin-right: 6px; background-color: #f0f0e0;”>Pro Pack:</span>4.3.02</p>
    I looked through the playlist and do not see any tutorials explaining how to reduce the width of the input fields (Address/zip, within, find locations). Is there one that specifically handles this issue?

    Thank you.

    #36768

    Cici
    Keymaster

    I am unsure of your question. Are you unsure of how to use CSS or is it something other than that?  You can change the width of the Input box in the search form

    The Playlist selection is  called CSS and/or  Plugin styles. Both might help youUse any Browser Developer tool on the page where your map or search form is and click under Inspect Element:

    To see what were the parameters or rules, I clicked on my particular  search form   with my  WP theme Twenty Fifteen .  I went into the browser tools and clicked on inspect element”

    For example when I select the  search box it shows me <input type=”text” id=”addressInput” name=”addressInput” placeholder=”” size=”50″ value=””>

    You can find the div<div id=”addy_in_address” class=”search_item”><label for=”addressInput”>Address</label><input type=”text” id=”addressInput” name=”addressInput” placeholder=”” size=”50″ value=””></div>

    If that is what you want to change you can  add  a css rule to override the style sheet contained in the SLP style

    First select a SLP stlye  that displays the way you would like it and to further modify  go into the element and find the div you want to change and write a CSS rule to change it

    You need to know something about CSS, The tutorial can help you with that as well and Html  See Advanced Styles

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.