Feedback

vidmeup - Free Video Hosting | Private Video Hosting | Free Video Streaming | Secure Video Hosting

Vidmeup Theme Guide

This guide assumes you are familiar with using vidmeup. If you are not, we recommend you go and play for a while.

Structure

Your theme consists of three main elements:

Element Notes
HTML Saved in a .vmu file, supplies the structure of the theme
CSS Contained in a css directory, styles your theme
vidmeup tags Contained within your HTML, the vidmeup engine will use the parameters you supply to generate the dynamic content
↑ Back to top

CSS

Your CSS files should be contained in a css directory within your theme. Any CSS files in this directory will be automatically included by the vidmeup engine.

A 'base' stylesheet will be applied to the video controls and comments, but these are just a guide, and can be overwritten in your own stylesheet.

Users can customise the background, text and border/accent colour for every theme. To allow this functionality, simply add the following code where you would place your colour reference. The theme engine will save your default settings when you upload your theme.

				### background_color(default="EEEEEE") ###
				
				### type_color(default="333333") ###
				
				### border_color(default="E6005B") ###
			

These snippets then dynamically add the colours to your stylesheet.

For more information please read the section on colour tags.

↑ Back to top

HTML

You are able to edit the HTML around the video listings and main content sections as you would like. For a full list of features, please read the tags section.

To download a basic videosite template, minus any CSS styling (which you can add yourself) click the link below:

Basic videosite template (blank.zip)

The majority of the themes featured follow this structure. This is an example of the HTML for the homepage of a videosite:

header.inc.vmu

				<div id="global">
					<div id="header">
						<div class="container">
							<div id="utils">
								### global_nav ###
								### member_nav ###
							</div>		
							<div id="logo">
								### logo ###
							</div>
							### search ###
							<div class="clear-both"></div>
						</div>
					</div>
					<div class="clear-both"></div>
					<div id="content">				
			

index.vmu

				### home_content ###
				<div id="primary" class="home">
					<div class="main-video">
						### video(width="630" height="436" title="Y" tags="N" comments="Y" date="Y" date_format="j F Y" views="N" embed="N" share="N" description="Y") ###
					</div>
				</div>
				<div id="secondary" class="home">
					<div class="featured video-list-container">
						<span class="flash-of-colour"></span>
						### video_list(type="popular" title="Y" thumbnail_width="98" description="Y" description_length="100" pagination="Y" limit="3") ###
					</div>
				</div>
				<div id="more-videos">
					<div class="video-list-container">
						<span class="flash-of-colour"></span>
						### video_list(type="playlist" title="Y" thumbnail_width="98" description="Y" description_length="100" pagination="Y" limit="16") ###
					</div>
				</div>			
			

footer.inc.vmu

				<div class="clear-both"></div>
			</div>			
			
↑ Back to top

Tags

Tags do the magic. The Vidmeup engine can generate the dynamic aspects of your pages from the tags you give it in your theme.

Simple Tags

Simple tags are well, simple. Like all the tags, they start and end with three hashes and a space, like this:

### tag ###

Tags that are formatted differently will be ignored. We like to encourage neat code!

Tag Description view HTML HTML Returned view description
comments_form Form to add a comment to a video.
									<form id="comments-form">
										<div class="form-item">
											<label>Add a Comment</label>
											<textarea id="comment-message"></textarea>
										</div>
										<div class="form-item">
											<input type="submit" class="button" value="Add" />
										</div>
									</form>
								
member_nav The login, sign up, account etc links for videosite members.
									<ul id="member-nav">
										<li><a href="/video_upload.php" title="Upload Video">Upload Video</a></li>
										<li><a href="/account" title="Account">Account</a></li>
										<li><a href="/members_logout" title="Logout">Logout</a></li>
									</ul>
								
search Search field for video searches, the search results will be displayed on your listing page.
									<form id="site-search" method="post" action="/site_search">
										<div class="form-item">
											<input type="text" class="text" name="search" value="..." placeholder="Search" />
											<input type="submit" class="button" name="submit" value="Search" />
										</div>
									</form>
								
logo The videosite logo, or the site name if there isn't one.
									<h1 class="site-name">
										<a href="/" title="Site Name">
											<img src="..." alt="Site Name" />
										</a>
									</h1>
								
home_content User's introductory text for the index.vmu page.
									<p>This the first paragraph the user has added.</p>
									<p>This is another paragraph the user has added.</p>
								
article_headline Title of the article.vmu page.
My Page
article_content Content of the article.vmu page.
									<p>This the first paragraph the user has added.</p>
									<p>This is another paragraph the user has added.</p>
								
headline Title of the general.vmu page.
Sign Up
content Content of the general.vmu page.
Various content depending on the page.
site_name Videosite name.
Videosite
root_path The absolute URL of your theme directory.
http://vidmeup.com/uploaded_themes/abc123
  view HTML view description

Complex Tags

Simple tags are great, but they can only go so far. For the really cool stuff you can specify attributes in brackets after the tag name – like this:

### tag(attribute1="value1" attribute2="value2" attributes="value3") ###

You'll notice it looks similar to good old friendly HTML.

Like the simple tags, we are quite strict on how complex tags are formatted. There can't be a space between the tag name and the opening bracket, and there can't be a space either side of the equals signs. Attribute values delimited in single quotes (or anything apart from double quotes) will be ignored. Because we're just generous like that, we will let you vary the whitespace between attribute/value pairs, but we recommend a single space.

Any attributes you don't include will be set to their default value. The brackets are always required, so a complex tag with no attributes would be printed:

### tag() ###

We do recommend specifying every attribute to ensure maximum forward compatibility.

video_list

This tag is probably the one you will use the most, so it might be an idea to get familiar with it. It outputs a list of videos based on the attributes you give to the tag.

Attribute Possible Values (Default) Description
type search, playlist, recent, popular (popular) Defines what sort of list to display:
  • search: search results (for use on the listing.vmu page)
  • playlist: a list of playlists or videos in a playlist depending on context
  • recent: recently added videos
  • popular: most popular videos
limit integer (4) Number of videos to display in the list
pagination Y, N (N) Display pagination controls (if "Y", limit will apply to the number of videos to display per page)
thumbnail_width integer (160) The width of the video thumbnail, set to 0 for no thumbnail
title Y, N (Y) Display the video/playlist title
author Y, N (N) Display video author
views Y, N (N) Display a view count
comments Y, N (N) Display a count of comments
description_length integer (200) Character limit for the video description, set to 0 for no description
tags Y, N (N) Display video tags
date Y, N (N) Display the upload date
date_format date format string (Y-m-d) Format for the upload date, uses PHP date formatting strings

HTML returned if all attributes are enabled. This is designed to be as flexible as possible. Have a look at the CSS for one of the vidmeup themes for ideas.

						<div class="video-list-container">
							<span class="video-list-title">My Playlist <a href="#" title="View all playlists">Back</a></span> <!-- back link added if viewing videos in a playlist -->
							<ol class="video-list playlist"> <!-- playlist class added if viewing list of playlists -->
								<li class="video-list-item">
									<a href="/view?q=video.flv" title="View Video Title">
										<span class="title">Video Title</span>
										<span class="thumbnail">
											<img src="..." alt="Video Title thumbnail" width="160" /> <!-- your thumbnail_width attribute applied here -->
											<!-- vmu thumbnail overlay -->
										</span>
										<span class="description">This is a video</span>
										<span class="info">
											<span class="author"><span class="lbl">By</span> videosite</span>
											<span class="comments"><span class="lbl">Comments</span> 123</span>
											<span class="views"><span class="lbl">Views</span> 456</span>
											<span class="tags"><span class="lbl">Tags</span> video, tags, keywords</span>
											<span class="date-added"><span class="lbl">Date Added</span> 2011-11-11</span>
										</span>
									</a>
								</li>
							</ol>
						
							<ol class="video-list-controls">
								<li class="prev inactive"></li> <!-- no link and inactive class if no previous page -->
								<li class="next">
									<a href="#" title="Next page of comments">Next</a>
								</li>
							</ol>
						</div>
					
video

Now it wouldn't be vidmeup without any videos would it?

Attribute Possible Values (Default) Description
width integer (720) Width of the video, in pixels
height integer (428) Height of the video, in pixels
title Y, N (Y) Display the video title (you would probably want this)
author Y, N (N) Display the author of the video
views Y, N (N) Display a view count
comments Y, N (N) Display a count of comments
description Y, N (Y) Display the video description
tags Y, N (N) Display video tags
date Y, N (N) Display the upload date
date_format date format string (Y-m-d) Format for the upload date, uses PHP date formatting strings
embed Y, N (Y) Display video embed code
share Y, N (Y) Display sharing options

HTML returned if all attributes are enabled. This is designed to be as flexible as possible. Have a look at the CSS for one of the vidmeup themes for ideas.

						<h2 class="page">Video Title</h2>
						<!-- video code -->
						<span class="info">
							<span class="author"><span class="lbl">By</span> Author</span>
							<span class="comments"><span class="lbl">Comments</span> 123</span>
							<span class="tags"><span class="lbl">Tags</span> video, tags, keywords</span>
							<span class="date-added"><span class="lbl">Date Added</span> 2011-11-11</span>
							<span class="views"><span class="lbl">Views</span> 456</span>
						</span>
						<!-- flag as inappropriate link -->
						<!-- download video link, if appropriate -->
						<p class="movie-info">This is a video description. <!-- OR <em>No description</em> --></p>
						<div id="embed-share">
							<div id="embed">
								<div id="form-item">
									<input type="text" value="<embed..." />Use this code to embed this video on your website
								</div>
							</div>
							<div id="addthis">
								<!-- AddThis button code -->
							</div>
							<div class="clear-both">
						</div>
					
comments

Need somewhere to view the constructive comments, right?

Attribute Possible Values (Default) Description
author Y, N (Y) Display author of the comment
date Y, N (N) Display date of comment
date_format date format string (Y-m-d) Format for the comment date, uses PHP date formatting strings
limit integer (10) Number of comments to display
pagination Y, N (Y) Display pagination controls (if "Y", limit will apply to the number of videos to display per page)

HTML returned if all attributes are enabled. This is designed to be as flexible as possible. Have a look at the CSS for one of the vidmeup themes for ideas.

						<div id="comments">
							<h5>Comments</h5>
							<div class="comment-item">
								<span class="comment"><p>This video is great</p></span>
								<span class="info">
									<span class="name"><span class="lbl">By</span> Enthused</span>
									<span class="date"><span class="lbl">At</span> 2011-11-11</span>
								</span>
							</div>
							<div class="comment-item">
								<span class="comment"><p>This video sucks</p></span>
								<span class="info">
									<span class="name"><span class="lbl">By</span> Misery</span>
									<span class="date"><span class="lbl">At</span> 2011-11-11</span>
								</span>
							</div>
							<!-- etc -->
							<ol class="comments-controls">
								<li class="prev inactive"></li> <!-- no link and inactive class if no previous page -->
								<li class="next">
									<a href="#" title="Next page of comments">Next</a>
								</li>
							</ol>
						</div>
					

The complex version of this tag allows you to specify whether you want the navigation for pages to be a dropdown menu or inline with the 'Home' and 'Videos' links.

Color Tags

These are placed in your CSS files anywhere you want a user to have a choice over color.

These are similar to complex tags, in that they have one optional attribute – the default color as a HEX value. There is no need to specify a default color more than once as only one value will be used.

Place these in your CSS in place of a color:

					html {
						background-color: ### background_color(default="E8E8E8") ###;
					}
					#global {
						background-color: ### background_color() ###; /* no need to specify default again */
					}
				

It is unnecessary to put an extra hash at the beginning.

Tag Possible use  
type_color Text, headings, links Obviously, you are free to place these tags wherever you like, but we recommend you use them in sensible places so as not to confuse the end user. Also consider what would be robust and legible if the user picks lime type on gold background.
background_color Overall background or background to foreground elements
border_color Border, accent, decorative flashes
↑ Back to top

Pages

Your vidmeup theme requires five individual .vmu pages.

Page Purpose
index Home page of the videosite, this will typically include one featured video and a video list
view Video viewing page, this should include a video, comments and one or more video lists
listing Search results page, this should include a large video list with a "search" type attribute
article For any content pages the user creates
general This is the page used for any other content required by a videosite, such as the payment pages

You must also include a header.inc.vmu and footer.inc.vmu file inside an inc directory. These are for elements at the top and bottom of your pages that will remain constant. These files can contain tags just like the other .vmu files.

You may include Javascript in your theme in any page except general.vmu. Videosites use the popular jQuery library. Scripts contained in a js directory with the same file name as a page will be automatically included, so you don't have to (eg js/index.js will be included in index.vmu).

A typical directory tree for a theme might be:

  • /
    • article.vmu
    • css/
      • theme.css
    • general.vmu
    • img/
      • bg.png
    • inc/
      • footer.inc.vmu
      • header.inc.vmu
    • index.vmu
    • js/
      • index.js
      • view.js
    • listing.vmu
    • view.vmu

↑ Back to top

Contact Forms

Your vidmeup video site can included standard contact forms.

You can create a form either in a template file or directly from the Manage Pages section of the dashboard. You can include any type of input tag or select box.

To create a form you can use standard HTML. The form action must be set to "/mail". A typical form may look like this:

				<form method="post" action="/mail" id="signup_form">
					<label class="white">Name: *</label>
					<input type="text" class="emaillist" name="name" value="" />
					<label class="white">Email Address: *</label>
					<input type="text" class="emaillist" name="email" value="" />
					<input type="submit" class="button-red" value="Sign Up" name="signup" />
					<input type="hidden" name="thanks" value="/thanks" />
				</form>
			

Thank-you page

You can specify a thankyou page using the a hidden input box. if you do not specify one, then the system will return to /thank-you.

The "thank you" page is created just like a normal page in Site Pages. To stop this page from being displayed in the menu, simple click the "Hide in menus" option at the bottom of the edit screen.

↑ Back to top

Restrictions

We have to enforce some restrictions on your theme to maintain the security and quality of a video site. Your theme will be rejected if you ignore them:

  • Only the file extensions .vmu, .css, .js, .jpg, .jpeg, .gif and .png are permitted.
  • You must have each of the pages listed above.
  • Your CSS files may not contain 'display: none' or 'visibility: hidden' rules.
  • general.vmu may not contain <script> tags.
  • You may not upload a general.js or a members_payment.js file.
  • PHP opening tags (<?php, <?, <?=) may not be included.

↑ Back to top

Uploading your theme

Once you've designed your beautiful (we hope) new theme, it's time to test it in the vidmeup sandbox.

  1. First, you'll need to upload it to vidmeup. You can do this by going to the theme selector and clicking on My Themes. This is your theme management page. It's probably looking a bit empty at the moment, so you need to click the Upload button near the top.
  2. Name your theme something sensible, give it a short description and a few tags. Make sure you're happy with these as you can't change them without re-uploading a theme. Select the 'just testing' radio button for now.
  3. You must upload an image for your theme, which will appear in the theme selector if you make a theme public. This has to be a screenshot. Make the image square for best results.
  4. Zip up your theme files from within your theme directory (ie, don't zip the containing directory). Upload this zip file.
  5. If your theme does not meet the requirements, you will be told so and given a handy list of things to fix. Hopefully your upload was successful and you are directed back to the theme management page.
  6. You will be shown your new theme, along with a usage count and options to change the theme scope and delete it. These options will disappear if any members are using the theme. Click on the theme or the 'options' button and you will be shown the familiar window from the theme selector. Select your colors (if applicable) and click the 'test drive' button.
  7. You will be shown your site with the new theme applied, but the public will still see your previous theme. If everything works, great! You can make the theme public (anybody can use it) or private (only you can use it) and enjoy your sweet new look. More likely though, something will have gone wrong. You'll need to fix the problem and upload the fixed theme. It might be an idea to delete the old one so you don't make it public accidentally.
  8. Eventually your theme will be working and you can make your theme public. It will then appear in the 'recently added' section in the theme selector. If your theme is really good lots of members might start using it and it will appear in the 'popular' section.
  9. You may have noticed the 'report a bug' button on the theme selector window, this allows users of the theme to email you directly to report problems you might have missed. If you are not happy using your regular email address for this purpose, we recommend you create a separate vidmeup account for creating themes based on another email address.
↑ Back to top