Change Appearance Of Search Fields and Results

Home Forums Premier Support Change Appearance Of Search Fields and Results

This topic contains 13 replies, has 2 voices, and was last updated by  Cici 5 months, 4 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #45522

    emilie
    Participant

    Hi Lance and Cici,

    (Plugin Environment attached in a screenshot)

    This is an easier one for you. I’ve gotten SLP all up to date, (after much wrestling) and I am just wondering how I would go about changing the appearance of the search field to look a little bit neater on our search page. As you can see the alignment between the fields and the text is goofy. (Please see attached screenshots).

    Also, in the past the results list would show the Categories written out in full next to the Category logo, but at this point it is only displaying the icon associated with each category. We’d rather be explicit to our users about the Location Category. How do I add back that text? I’d also like the phone number to appear on it’s own line instead of right after the address. How do I fix these things?

    In the results “bubbles” the word “Phone” appears without a space between it and the actual phone number. Is there a way to fix that too? Looks untidy.

    We have both the Premier and Experience plugins installed.

    #45524

    emilie
    Participant

    Also, it appears as if I am unable to actually change the size of the map as shown under Experience > Map. Any changes I make there do not seem to affect the appearance on our map page. Is this because of our WordPress theme? Any way around it?

    #45526

    emilie
    Participant

    My other screenshot to my initial post  did not attach.

    #45535

    Cici
    Keymaster

    Just so you know, Premier has been updated to 4.7.7.  With Premier there are quite a few special Gallery styles that might be what you are looking for in a responsive design.  yes your theme can have an effect on your map and sizing. In that case, if you cannot find the right style under Experience/view, you can add some CSS in the locator layout.

    As far as the legend icon, there is a category separator but it appears to be messed up, I have been trying to get it right on my test site, that will have to be bumped up to Lance, I have a call in to him

    As far as the Map size. Try a responsive design. Are you saying that when you change its appearance under Experience/Map it isnt having an effect?

     

     

     

    #45537

    Cici
    Keymaster

    Also to answer your question, yes your theme could be dictating how the map appears. If you are working on a staging site or dev site you can try changing your theme to an out of the box WordPress theme.   Yes there is a way around it if you know CSS and can write the rule to apply. If you aren’t sure where to look, there is documentation and a tutorial video on the SLP YouTube channel.

    As far as the phone in results etc. , any results lines can be moved around . Under Experience/Results/Appearance/Results Layout. Just copy and past the phone span class to be where you want it.  Ditto applies with the search layout and the map info bubble layout. The info is in docs site. Here are the posts you should take a look at.

    Results Layout Shortcodes and Attributes

    Appearance Layouts

    Layout Shortcode Cheat Sheet

    As far as the legends, I was not having an issue with the icon and the text right after it, my issue was that the category separator in the  icon legend box was squished together but that could’ve been because I was fooling around with my settings trying to answer your questions.   Have you gone under  the Tab for Categories in the UI and under results, check off  show icon array, and under view check off text under legend.

    If you wouldn’t mind in the future, could you perhaps separate unlike topics so that if there is a question that is specific that I cannot answer I can provide Lance the actual link to the topic.

    (The question about Legends would be best be on a separate post.)

     

     

     

     

    #45547

    emilie
    Participant

    Hi Cici,

    Thank you for your thoughts. To answer your question, “<span style=”color: #43454b; font-family: ‘Source Sans Pro’, HelveticaNeue-Light, ‘Helvetica Neue Light’, ‘Helvetica Neue’, Helvetica, Arial, ‘Lucida Grande’, sans-serif; font-size: 12px;”> </span><span style=”color: #43454b; font-family: ‘Source Sans Pro’, HelveticaNeue-Light, ‘Helvetica Neue Light’, ‘Helvetica Neue’, Helvetica, Arial, ‘Lucida Grande’, sans-serif; font-size: 12px;”>Are you saying that when you change its appearance under Experience/Map it isnt having an effect?”</span>

    Yes, exactly. Changing the pixel height/width values does not have any actual effect on the size of the map. Come to think of it, this feature of SLP has never worked for me.

    I guess it must be my website’s theme that is preventing me from making any changes? I tried simply adding a <br> tag between the Address search form and the category drop-down menu in the Search Form, part of the Experience menu, but even that does not do anything. I’d just like to find a way to make the search for look a little bit more professional than it does right now. (See attached screenshot) I’m not especially familiar with the finer points of CSS and I’m unsure where/how I would modify that.

     

     

    <span style=”color: #43454b; font-family: ‘Source Sans Pro’, HelveticaNeue-Light, ‘Helvetica Neue Light’, ‘Helvetica Neue’, Helvetica, Arial, ‘Lucida Grande’, sans-serif; font-size: 12px;”> </span>

    #45553

    Cici
    Keymaster

    You need to use CSS if you need to overwrite the plugin style and how  it works with your theme. Where the search form appears on your site etc.  If you are customizing a theme , I assume you are familiar with  css and html . If not there are a few tutorials on the SLP youtube channel

    As far as the map height etc.  You cannot change the height %. you can change the  height px. I just tried it on my site and it works the way it is supposed to.

    I have a task in for Lance regarding the categories ,br. comma separator. He is currently working on coding in  MYSLP so cannot break atm.

    Make sure you have updated the versions, there was a patch to Premier and Lance did a quikc fix for me on another item so Premier will be 4.7.8

    Your screen shot does not provide me with any info. I do not know what theme you are using nor what you have customized thus far.

     

     

     

     

     

    #45555

    emilie
    Participant

    Hi Cici,

    I haven’t done any customization so far, because I do not quite understand where I am to change the CSS for the SLP plugin? There looks to me to be quite a few CSS files associated with the plugin…which one should I be looking at? (See attached screenshot 2)  As-is the search form just doesn’t look great on the site, as shown in the screenshot in my previous post. It looks misaligned and the fields are awkwardly close together. I’ve tried several of the other styles included with the Premier plugin but none of them are satisfactory.

    In response to “<span style=”color: #43454b; font-family: ‘Source Sans Pro’, HelveticaNeue-Light, ‘Helvetica Neue Light’, ‘Helvetica Neue’, Helvetica, Arial, ‘Lucida Grande’, sans-serif; font-size: 12px; background-color: #fbfbfb;”>As far as the map height etc.  You cannot change the</span><span style=”box-sizing: border-box; font-weight: bold; color: #43454b; font-family: ‘Source Sans Pro’, HelveticaNeue-Light, ‘Helvetica Neue Light’, ‘Helvetica Neue’, Helvetica, Arial, ‘Lucida Grande’, sans-serif; font-size: 12px;”> height %</span><span style=”color: #43454b; font-family: ‘Source Sans Pro’, HelveticaNeue-Light, ‘Helvetica Neue Light’, ‘Helvetica Neue’, Helvetica, Arial, ‘Lucida Grande’, sans-serif; font-size: 12px; background-color: #fbfbfb;”>. you can change the  height px. I just tried it on my site and it works the way it is supposed to.”</span>

    I cannot change the pixel height either. Changing the pixel height/width does not result in ANY actual change to the appearance of the Store Locator map. I have played with the values in a few different ways, but how the map actually looks does not change. I would like the map to be more “square” shaped than how it currently looks, instead of a little on the wide and narrow side as it appears now. Like I said, this feature has never worked at all for us, across multiple versions/installations of SLP.

    I am already using Premier version 4.7.8.

     

    #45558

    Cici
    Keymaster

    Ok, Gotcha, You are using a Gallery style so that has a lot of the one stop shopping as far as CSS goes.

    The older Plugin styles, if you had  them on your site before and some CSS saved , they are still available to you.

    If you can provide the site url where you are using the new features and specifics…Lance is making a new gallery style for my test site  and he is interested in adding more Gallery styles for Premier customers.  So I will tag him on this post, maybe he can build you a specific style that will help you out.  So you want the Map square, you do not like how the search form appears on the page….any more specifics that he should look at?  Where the results appear etc?

     

    #45576

    emilie
    Participant

    Hi Cici,

    This is the current “live” version of our map: http://backcountryaccess.com/map

    In case you are curious, the theme on the site is called Jumbo and is made by a company called Obox. It is a responsive theme.

    I would like to experiment with a more square-shaped map. At the very least, it would be nice if the feature that was supposed to allow changing the map size would work. To me, at least, it’s a little too wide and not tall enough and feels awkward. I welcome any other opinions on that… what do you think?

    In addition, yes, it would be nice if the search form looked a little nicer. Perhaps smaller font/form elements, and maybe have them more vertical eg:

    Address Form: [……………….] (newline)

    Server Center Type: […….] (newline)

    Radius [……….] (newline)

    [Find Locations Button]

    [Map]

    The other thing was that the category name no longer shows next to the category symbol/icon in the results listings, but I think you said to make another post about that issue?

    #45577

    Cici
    Keymaster

    Ok, I have let Lance know, when he has some time he will look at it.  Do you want the new site tmap and style to look like the old one?

    He made me a galley style last night.  Below are  his notes for me which I think you will find useful as well.I have the legend on my Charleston SC locations using the new style

    My test site is    https://cici.storelocatorplus.com/

    It may look a little wonky , it is very simple because I am constantly changing settings and testing to see what can be changed to recreate customer issues…of course then Lance asks  me what I changed to break something and I usually have to say , I have NO freaking $%E% idea….

    I change settings constantly. 🙂

    As you can see on my test site , my map is square but I am not using a normal search form since I have it set up  specifically for a friend from Australia who is visiting next month.

    Lances notes to me

    “Default With Font Tweak has been updated to pull in the old Power formatting.         I tested on your site.  It works.   It does NOT put a border around the legend.

    You can add a border with this rule in custom CSS rules:
    #tagalong_legend {
    border: double 3px black;
    }

    [11:51]
    2) Your site does not need to do this as I’ve been testing the style updates there… but users will want to switch from that Default With Font Tweaks to another style and back.   It will set all of the layout fields when you switch and switch back so if a user customized any of them (like you did) they will need to save the setting first so it can be restored.

    For your site I put [tagalong legend] on there again.

    [11:53]
    3) I created a new Style Gallery entry “Default Legend Below”.     It is the same as the updated Default Font Tweaks but has your [tagalong legend] under the results.

    If you  want to switch from “Default With Font Tweaks to another style and back.   It will set all of the layout fields when you switch and switch back so if a user customized any of them (like you did) they will need to save the setting first so it can be restored.

    #45585

    emilie
    Participant

    Hi Cici,

    I like the way your map looks overall, excepting that the search form you have isn’t super clean looking. I do think the square shape for the map is more user-friendly.

    I tried changing to your Style Default Legend Below and it only changed things slightly – now the Category drop-down is below the label for the field, but overall it looks very much the same. Still a bit…awkward.

    I think maybe you misunderstood what I meant when I said that the labels next to the category icons weren’t showing. I don’t necessarily want a “legend” anywhere – what we would want is for each listed Location to show it’s categories next to the symbol. In the past, SLP did this, but it does not appear anymore for some reason. Now, only the icons show in each listed Location.

    In other words, next to the little icon that indicates a “Cylinder Refill Center” in our system, I want it to actually print “Cylinder Refill Center” not just show the icon. Is that possible?

    See attached.

     

    #45586

    Cici
    Keymaster

    You have to go back to the Plugin style you had before with the CSS you had before, those plugin styles still work…you did back up that site right?

    And I am using an out of the box WP Twentyfifteen or twentytwelve theme one of those, I keep switching …you mentioned you have a paid for theme?

    You should  use Firebug or some other browser tool  in your developer tool box to look at those CSS and script elements….You will then be able to see if the styling is being  subjected to your them, inherited from your theme…If it is,  the only thing left to do is to write the CSS and add that in the CSS box under Experience/view.

     

    Your file didnt upload

    Upload Errors:
    1. Screen Shot 2017-03-24 at 3.26.00 PM.png: File exceeds allowed file size.

    If you had CSS rules before then use those, assuming you copied and saved or can copy and save.  I think the whole thing is your them is boxing in that MAP area, because I change my map sizes and they save no problem., Once you can get that area fixed I think a  lot of your issues will be gone.

    We cant fix the plug in styles to work with everyone’s themes, they have to be sort of generic.

    Or is this a fresh install, you are talking about , in  a new site and therefore you do not have the old Plugin styles?? Are you using something like VaultPress?  Now I am confused

     

    #45587

    Cici
    Keymaster

    If you need help with the whole CSS and styling and getting your site to look awesome with exact specs, we use our sister affiliate  Cybersprocket

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

You must be logged in to reply to this topic.