Example HTML snippets: Adding Local Info Buttons


  • Explorer

    In response to a question by @Matthew-Giles:
    I know just enough about coding to be dangerous. Here’s how I added a Weather Forecast to my site.

    1. Open the Advanced Editor for your Local Info page.
    2. Add a “Left Column” formatting block at the bottom of the page.
    3. Into the left column, drag and drop an HTML block.
    4. Enter this code, editing as necessary. Each <li> element creates a new button – so to remove my Calendar example, delete the 7 lines from <li> to </li>. Choose icons from the Glyphicon set included with MyVR’s Bootstrap; most of them work, but if the icon comes up blank, try another.
    <div style="margin-top:-20px">
       <ul class="nav nav-pills nav-stacked">
          <li>
             <a href='https://www.wunderground.com/us/fl/panama-city-beach' target='_blank'>
             <i class="icon-sun">
             </i>
             Local Weather
             </a>
          </li>
          <li>
             <a href='/events/'>
             <i class="icon-calendar">
             </i>
             Local Events Calendar
             </a>
          </li>
       </ul>
    </div>
    
    1. If your area Description is longer than mine (someday I will stop designing and add some actual content) you’ll have a small gap above your button.
    2. Result blends with the widget buttons. Note the syntax on the 2 links: include target=’_blank’ for external links to open in a new window, while the local Event link loads like any other page of your website.

    Although your new button(s) looks like part of the widget, it isn’t. It will get pushed to the bottom of the page when you open the Recommendations list. That’s the best I can do lacking proficiency in javascript. Not perfect but it works.
    0_1477400710790_WeatherButtonExample.jpg
    {post edited to update icons link and enable copy/paste of code sample – thanks for the feedback!}


  • MyVR Employee

    Hi Ann - a great post. A few thoughts in response:

    • This is a really creative way to enhance the Local Info section, and it looks sharp.
    • When it comes to changing code at this level, it’s at your own risk. This looks OK to me, but I am not an expert.
    • As you mentioned, we use Bootstrap as our front-end framework. One of its big advantages is that you can be assured things don’t break in mobile. For any code changes, I would test to see how things look on your phone/tablet (again, I think your example looks fine).

    Fun to watch folks get more from our tools than we had expected!


  • Explorer

    You’re right, Markus. On the smallest screen size, the new group of button(s) appears underneath the Description (/Recommendations) text. So re step 5, don’t make that Margin any smaller than -20px, or it will overlap!
    Maybe you guys should just develop a way for us to add our own additional Local Info buttons😉


  • MyVR Employee

    @Ann-D-Liptak I’m really impressed!

    For icons - we use FontAwesome in our websites. The full list and version are available here: http://fontawesome.io/3.2.1/


  • Explorer

    Thanks for the tip @Ann-D-Liptak! Appreciate you sharing it. I’ll give it a try on my site later this week.

    Matthew


Log in to reply
 

About the MyVR Community

Looks like your connection to MyVR Community was lost, please wait while we try to reconnect.