Basic Themes - Defined Playlist for Playback Pages

About the Basic Themes

The Basic Themes that can be found in your Theme Editor include: Basic Four Column, Basic Grid, Basic Rotator, and Basic Sequential. The themes all have varying Main Index (Home) pages with the same layout for Category and Playback pages. 

Related Videos - Playback Pages

The Basic Themes use do not use a defined playlist order out of the box and display related video content on the Playback Pages based on videos placed in that same category in a random order. Here is what the related videos looks like out of the box: 

Image and video hosting by TinyPic

If you would like to create a defined playlist order on the playback pages of your content, check out these instructions below for modifications to your Advanced Editor. 

Modification Option: Defined Playlist Order - Sidebar

The defined Playlist Order creates a text-only list of your videos in the order defined within your Manage Playlist page for a specific category. 

Image and video hosting by TinyPic

Instructions:

1) Remove the old Related Videos code from the Playback page of your Advanced Editor

Image and video hosting by TinyPic

2) Replace it with the following code: 

<ul>

<li id="tab-related-videos" class="on">Next Video<span></span></li>

    {% if item.geo_long %}<li id="tab-map">Map<span></span></li>{% endif %}

</ul>

</div>

<div class="content sidebar">

                            <div id="course-view" class="sidebar-list">

{% get_items_by_filters group_list playlist_id=item.group.get_playlist.id sorting=featured %}

                                {% if group_list %}

                                    <ul class="list-unstyled video-playlist">

                                        {% for current_item in group_list %}

                                        <li{% if current_item = item %} class="current"{% endif %}><a href="{{ current_item.get_absolute_url }}"><strong>{{current_item.headline}}</strong></a></li>

                                        {% endfor %}

                                    </ul>

                                {% endif %}

                            </div>

{% if item.geo_long %}

<div id="map">

<div id="map-container" style="width: 280px; height: 285px"></div>

<span id="id_geo_long">{{ item.geo_long|default_if_none:"" }}</span>

<span id="id_geo_lat">{{ item.geo_lat|default_if_none:"" }}</span>

</div>

{% endif %}

</div>

It will look like this in your Advanced Theme Editor: 

Image and video hosting by TinyPic

Save your changes and you will see this updated on your Playback Page: 

Image and video hosting by TinyPic

**Note: You can change the text display of 'Next Video' by replacing in the code with what you would like to display. 

3) Go to your Custom CSS file in your Advanced Editor and add the following code: 

#course-view {

    padding: 10px 0 0 20px;

}

.sidebar-list {

    max-height: 300px;

    overflow: auto;

}

It will look like this in your Advanced Theme Editor: 

Image and video hosting by TinyPic

Click Save and you will see the final display (as shown in the first screenshot listed in these instructions). 

Please Note: There are many ways to customize your site. The instructions provided are an example and may conflict with any custom code you have placed. If you have any questions, please reach out to support@vidcaster.com.