Basic Rotator - Main Index: About & Video List

The below design instructions are for the Basic Rotator theme only. By using these modifications, you agree to these terms (click here)

The theme modifications: 

  • Are geared towards sites that host their entire business within Vidcaster 
  • Provide written information space to provide instructions and guidance to use the site. 
  • Links to external pages or Vidcaster pages to learn more 
  • Display a snapshot list of video content available on the site by category 

Image and video hosting by TinyPic

Instructions

Make the following modifications in the listed files of your Advanced Editor while on the Basic Rotator Theme. Press 'Save & Publish' after each step. 

1) Add the following code to your CSS file

.main-page .main-column,
.main-page .sub-column {
    width: 50%;  
}
.main-page p {
    margin: 14px 50px 14px 0;
}
.main-page h2 {
    margin-bottom: 15px;
}
.main-page h2,
.main-page p a{
    font-weight: bold;
}
.sub-column ul{
    list-style: inherit;
    list-style-position: inside;
}

2) Copy the following code and REPLACE the entire code in your Index File. 

Replace the text links and titles within the code to your desired changes and change out the category (called group) short codes. 

{% extends base_template %}
{% load users_tags %}
{% load item_extras %}
{% load sites_extras %}
{% block bodyid %} id="home"{% endblock bodyid %}
{% block google-admanager %}{% endblock google-admanager %}
{% block canonical %}<link rel="canonical" href="http://{{ current_site.domain }}/" />{% endblock canonical %}
{% block intro %}{% endblock intro %}
{% block content %}
            <div class="section-offset">
                {% get_items_by_filters item_list max_items=6 backfill_type=pub_date %}
                {% if item_list %}
                <div class="section rotating-promo">
                    <div class="section-wrap flexslider">
                        <ol class="slides">
                            {% for item in item_list %}
                            <li>
                                <div class="main-column">
                                    <a class="thumbnail" href="{{ item.get_absolute_url }}" title="watch {{ item.headline }}"><img src="{% fetch_thumbnail_url item 640 360 %}" alt="video poster for {{ item.headline }}" /><span></span></a>
                                </div>
                                <div class="sub-column">
                                    {% if item.group %}<p class="group {{ item.group.short_name }}">{{ item.group.get_html_tag|safe }}</p>{% endif %}
                                    <h2><a href="{{ item.get_absolute_url }}">{{ item.headline }}</a></h2>
                                    {% if item.summary %}<p class="summary">{{ item.summary|truncatewords:35 }}</p>{% endif %}
                                </div>
                            </li>
                            {% endfor %}
                        </ol>
                    </div>
                    <div id="flexslider-controls"></div>
                </div>
                {% else %}
                {% if user.is_authenticated %}{% include include_no_videos %}{% endif %}
                {% endif %}
            </div>
            <div class="main-page section">
                <div class="main-column">
                    <h2>Category Title Text One</h2><!-- replace text -->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ex, vehicula quis accumsan nec, tempor ut ligula. Etiam imperdiet dolor vitae turpis vestibulum, nec suscipit risus elementum. Vivamus quis nibh risus. Sed tristique urna at mattis maximus. Vestibulum vulputate vitae arcu at fringilla. Nulla facilisis urna a dapibus pulvinar. Suspendisse at blandit sapien, pharetra lobortis orci.</p>
                    <p>Vivamus iaculis lacus id tempus cursus. Sed vitae tempus neque. Maecenas vel ante at ante ultricies tincidunt et non augue. Donec placerat tempor condimentum. Praesent vehicula sollicitudin ornare. Nullam gravida lobortis risus pharetra vulputate. In non imperdiet ipsum.</p><!-- replace text -->
                    <p> <a href='http://www.vidcaster.com/'>LEARN MORE</a> | <a href='http://www.vidcaster.com/'>SUBSCRIBE</a> </p>
                    <h2>Category Title Text Two</h2><!-- replace text -->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ex, vehicula quis accumsan nec, tempor ut ligula. Etiam imperdiet dolor vitae turpis vestibulum, nec suscipit risus elementum. Vivamus quis nibh risus. Sed tristique urna at mattis maximus. Vestibulum vulputate vitae arcu at fringilla. Nulla facilisis urna a dapibus pulvinar. Suspendisse at blandit sapien, pharetra lobortis orci.</p>
                    <p>Vivamus iaculis lacus id tempus cursus. Sed vitae tempus neque. Maecenas vel ante at ante ultricies tincidunt et non augue. Donec placerat tempor condimentum. Praesent vehicula sollicitudin ornare. Nullam gravida lobortis risus pharetra vulputate. In non imperdiet ipsum.</p><!-- replace text -->
                    <p> <a href='http://www.vidcaster.com/'>LEARN MORE</a> | <a href='http://www.vidcaster.com/'>SUBSCRIBE</a> </p>
                </div>
                <div class="sub-column">
                    <div>
                        {% get_items_by_filters group_list max_items=20 sorting=featured group_short_names=cat1 %}<!-- replace group_short_names -->
                        {% if group_list %}
                            <h2>Category Title One</h2><!-- replace text -->
                            <ul>
                                {% for current_item in group_list %}
                                <li><a href="{{ current_item.get_absolute_url }}"><strong>{{current_item.headline}}</strong></a></li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </div>
                    <div>
                        {% get_items_by_filters group_list max_items=20 sorting=featured group_short_names=cat2 %}<!-- replace group_short_names -->
                        {% if group_list %}
                            <h2>Category Title Two</h2><!-- replace text -->
                            <ul>
                                {% for current_item in group_list %}
                                <li><a href="{{ current_item.get_absolute_url }}"><strong>{{current_item.headline}}</strong></a></li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </div>
                    <div>
                        {% get_items_by_filters group_list max_items=20 sorting=featured group_short_names=cat3 %}<!-- replace group_short_names -->
                        {% if group_list %}
                            <h2>Category Title Three</h2><!-- replace text -->
                            <ul>
                                {% for current_item in group_list %}
                                <li><a href="{{ current_item.get_absolute_url }}"><strong>{{current_item.headline}}</strong></a></li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </div>
                </div>
 
            </div>
{% endblock content %}
{% block page-scripts %}<script src="/media/js/jquery.flexslider-min.js"></script>
        <script>//flexslider 
            $(window).load(function() {
                $('.flexslider').flexslider({
                    animation: "slide",
                    controlsContainer: "#flexslider-controls",
                    prevText: "&lsaquo;",
                    nextText: "&rsaquo;"
                });
            });
        </script>{% endblock page-scripts %}

3) Additional Notes

As in the public index change, you'll want to change these values:

  1. Each <h2> on this page should have it's text replaced with whatever titles the end user would like to use.
  2. Replace all instances of group_short_names with the short names of whatever category they want displayed.

{% get_items_by_filters group_list max_items=20 sorting=featured group_short_names=cat1 %} needs to be explained:

  1. max_items: change this to change the total number of videos it will return
  2. group_short_names: they need to change these to each be a specific short name for each category they have. To get the short names, tell them to go to the category page and it's the short string at the end of the URL. They defined this as the short name when they created the category, for instance: http://public-theme-test.vidcaster.com/cat1/ in this case, the short name is cat1
  3. sorting: will sort this according to order of videos in the playlist if you use featured

To make this process easier, we've put in comments next to the things that need to be replaced. Simply search the code for the text "replace" and you'll find all the areas you need to fill in.