Custom Widget Templates

Localist allows you to create widgets with custom code that changes the overall look, feel, and behavior of Localist’s standard widgets. You can use this tool to build widgets that match the aesthetic of your homepage, a sub-page, or a separate website.

In this article you’ll find:

  • Adding a Widget Template
  • Default Widget Templates
  • Related Articles

Adding a Widget Template

1. Navigate via Settings > Appearance

Screen Shot 2016-05-16 at 12.16.53 PM

2. On this page you will see a section for Widget Templates. To enter the editor, click the Edit Widget Templates button, or “Widget Templates” text.Screen Shot 2016-05-19 at 9.33.47 AM

3. This is the editor screen.

Screen Shot 2016-07-22 at 8.49.40 AM

4. Click + Add Widget Template.

5. Name your widget and choose which template to copy from as a starting point.

Screen Shot 2016-05-24 at 4.08.18 PM

  • Display Name: This is what will be displayed in the public facing widget builder’s style drop down.
  • Internal Name: This will be automatically filled in. For example, if you enter “Pinterest Board” for the Display Name then the Internal Name will be pinterest-board. This is displayed in the URL the widget builder generates when using a custom theme.
  • Copy From: This allows you to pick another default or custom widget’s HTML to build off of. The Defaults are Modern and Classic:

6. Click Save Changes.


 Default Widget Templates

In addition to being able to create new widget templates, the Widget Editor also includes access to Localist’s default templates for customization. Modifying these files will alter the presentation of any widgets currently using the style, whether they are already live or to be created in the future.

Screen Shot 2016-07-22 at 8.51.02 AM

There are two kinds of widget types: List and Mini Calendar + List.

Screen Shot 2016-07-22 at 8.53.09 AM

Both can be displayed in a Classic or Modern style.

Screen Shot 2016-07-22 at 8.56.50 AM

List (Classic):

Screen Shot 2016-05-19 at 9.44.27 AM

List (Modern):

Screen Shot 2016-05-17 at 2.51.39 PM

Mini Calendar + List (Modern):

Screen Shot 2016-05-19 at 9.49.46 AM

Mini Calendar + List (Classic):

Screen Shot 2016-05-19 at 9.50.12 AM

The third style is the Card, which can only be used with the List Widget type. Screen Shot 2016-07-20 at 1.58.12 PM

 

Places List: This displays a list of place profiles with name, image and description in the List (Classic) style.

  • Generating a preview: Visit yourcustomdomain.com/widget/places?format=html.
  • Creating a script tag: <script src=yourcustomdomain.com/widget/places></script>
  • Filtering
    • You can pull places with a certain type by adding types[]=1234 (ID is found in the admin URL)
    • Restrict the list amount by adding num=5
    • Sort list in alphabetical order by adding order=name

 

Logged-In User Plans: This displays a list of events that a user has selected “I’m Going” on (Note: they must be currently logged in).

  • Generating a preview: Visit yourcustomdomain.com/widget/plans?format=html.
  • Creating a script tag: <script src=yourcustomdomain.com/widget/plans></script

 

Badge: This creates a “see more events” button that can be added to any webpage or as a compliment to a widget event list.

Screen Shot 2016-05-19 at 10.10.20 AM

  • Generating a preview: Visit yourcustomdomain.com/widget/badge?format=html.
  • Creating a script tag: <script src=yourcustomdomain.com/widget/badge></script

 

5. _platform_styles: This file affects the List (Classic), Logged-In User Plans and Place List widgets.


Related Articles