This guide assumes you are familiar with using vidmeup. If you are not, we recommend you go and play for a while.
Your theme consists of three main elements:
|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|
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.
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:
The majority of the themes featured follow this structure. This is an example of the HTML for the homepage of a videosite:
<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">
### 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>
<div class="clear-both"></div> </div>
Your vidmeup theme requires five individual .vmu pages.
|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.
A typical directory tree for a theme might be:
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>
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.
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:
Once you've designed your beautiful (we hope) new theme, it's time to test it in the vidmeup sandbox.