styling like Spaghetti Factory and other mobile format fixes

Home Forums Store Locator Plus styling like Spaghetti Factory and other mobile format fixes

This topic contains 4 replies, has 2 voices, and was last updated by  Cici 1 year, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #34425

    Richard
    Participant

    locations page URL.: http://beta.rbpkc.com/locations/
    PLUGIN / WP ENVIRONMENT : attached.

    We’ve purchased : 4 plugins – Pro Pack, Enhanced Search, Enhanced Results and widgets SLP plugins in hopes of achieving a style similar to your Spaghetti Factory setup – map on left, preview on right with thumbnail images in a simple clean style.

    We’re having some display problems. This plugin seems wonderfully robust but possibly out of our budget to achieve what we were hoping for. Now our first purchase is past the 30 day return policy. I need to know if we can achieve something similar that looks clean without significantly more expense. Is there a list of CSS STYLE ELEMENTS available so I know what to look for so we can fix? I found this but that only covered a few items. So I’m stuck.

    Some of the issues:

    • MOBILE FORMAT (reference attached) does not work with “Beside Myself (A) – it’s completely jumbled. Do we have ability to select 1 style for mobile and another for webview? Noticed spaghetti factory hides the sidebar for mobile view. I tired searching form “hide mobile” in your forum but only got this guidance…
    div#map_sidebar { display: none;
    but I need it to hide the search too and ONLY for mobile view.

    • VIEW SIDEBAR – Search field and title “Address/Zip” are not fitting on one line, I tried this
    #sl_div #searchForm INPUT#addressInput { width: 5em; }

    but it didn’t help.

    • VIEW SIDEBAR “directions” text link is not fitting in the space, the “s” is shifting to next line

    • VIEW SIDEBAR – how to hide miles?

    • VIEW SIDEBAR cafe thumbnails not showing in initial view like Spaghetti Factory, it seems like in order to achieve this everything in the sidebar would need to be re-structured?

    • VIEW SIDEBAR – there’s extra space in middle of address and then there no extra space before phone number,

    • RESULTS – “Phone” title is showing jutting into the phone number, needs a slight space or line break.

    • RESULTS – line-hight too much,
    tried
    p style { line-height: 90%; }
    tried
    line-height: normal;

    still spacing is too wide top to bottom for text.

    • SLP CREDIT – How can we hide “search provided by Store Locator Plus…”?

    • WIDGET “go” footer button color is gray in webview, but for some reason disappears or turns dark for the mobile view so it doesn’t show in our footer, we need to change the color or resolve why it’s changing.

    I tried following your css example shifting to red hex but it didin’t change anything
    div#address_search #addressSubmit.slp_ui_button {
    background: -moz-linear-gradient(center top , #c66565, #b80000) repeat scroll 0 0 transparent;
    border: 2px solid #b80000;
    color: #FFFFFF;
    font-family: Arial;
    font-size: 18px;
    font-weight: 700;
    height: 30px;
    width: 110px;
    }

    • This topic was modified 1 year, 2 months ago by  Richard.
    • This topic was modified 1 year, 2 months ago by  Cici. Reason: Html
    Attachments:
    You must be logged in to view attached files.
    #34429

    Richard
    Participant

    I tried to edit and remove all the html formatting in this forum post but it’s still coming through as code view and now I don’t see that I can edit again.

    I don’t see anyplace I can delete and recreate either. Please advise.

    #34637

    Cici
    Keymaster

    First, the way to edit is to go to the “visual option of the forum, highlight and cut all the text that was actually in HTML format, then click on the text button in the log and Paste it there, when you submit you will see the correct visual. I have done this for you.

    All of your questions are answered in the Doucmentation, such as Hide search, hide miles etc. That has nothing to do with CSS but are simple check box options. Under the EXPERIENCE /MAP tab under APPEARANCE there is a checkbox that is “remove credits”

    To see what that particular company (Spaghetti Factory) is using for their theme, use Any developer tool, Google, Firebox, and Inspect elements , if you are adept at web design or just semi techie (Like me I am learning) you should be able to figure out what they are using, since WP is Open source

    There is also a specific video that Lance posted all about CSS under Documentation Videos, just look at the playlist , I think #10 and #16 would give you insight.

    As far as having two different styles one for Mobile and one for regular…I have no idea what you are trying to accomplish, but no, you cant have two different styles that I am aware of. I suggest you pick a Style from the dropdown menu that is more responsive. Choose some of the newer templates and see if they will work for you.

    #34757

    Richard
    Participant

    Thank you, I thought I was toggled to the text view when I put in my html but it still went awry. Appreciate your help to fix my post and address our questions.

    We’re not thrilled about the styles of the theme and my abilities to customize the css are limited. I will try to follow your guides. Thank you. We also fixed some of the issues where words weren’t fitting on one line by changing words to shorter ones.

    Major concern is still the mobile view. Did you see the attachment how it’s displaying?
    /wp-content/uploads/2015/09/RBPKC-SLP-mobile-capture.jpg    I clicked through several of the template styles but they looked worse. How do I know which is newest and which are responsive? Thanks for the guidance.

    #34761

    Cici
    Keymaster

    Hi Richard, I see what you mean about that style. What one were you using?   We had to fool around with different styles to get one that was more responsive on one of our projects as well.  It was for the WordCamp Charleston directory, there are two posts about it blog. WordCamp Charleston

    and

    /store-locator-plus-update-4-1-25/

    They both reference Big Map, check that one out.

    The Spaghetti Factory may be redoing their site from what I understand,  not sure if you should use their current one as an example to compare.

    Your  WP theme also effects the way your map will appear.   There is a general SLP  you tube video about plugin styles. It does not get into responsive themes though

    The drop down menu is alphabetical , it would be great if it could be the newer or redesigned styles, most recent first.  If there is a rev on one, that is the one that is newer. Cant get rid of all the styles, a lot of people use them so they are in there and may not be perfect, but we cant get rid of them.

    The default template is going to be changed to Twenty-fifteen REV 03.  I will have to see how that will work as a responsive theme.

    You can custom everything that appears below the map. the listings, the size of the map, the font size of the words,the font colors, the output, line breaks and all those things using the CSS rules.  I learned how to do them after watching the tutorial.  I am by far not the best at designing. So check out that video and see if it makes more sense to you.

     

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

You must be logged in to reply to this topic.