Themes
From Joomlaholic Wiki
Contents |
Overview
Customizing Seyret is very easy as it is built upon a well designed theming system. You can change colors, buttons, even layout according to your taste. In theme files there is zero line php code, so when you edit a theme, you'll not break your code. A theme consists of three main elements. CSS, images and templates. Structure of a theme is very clear. A main directory, which name is also theme name, three subdirectories under it. style, images and templates. None of files will be proceed outside of these three subdirectories. Now we will tell more about these three elements.
Installation
We haven't implemented an automatic installation system yet, so you should install a theme manually. First download the theme to your computer. Extract it and upload it under com_seyret/themes directory via FTP. Then goto Seyret configuration panel. You'll see that new template is in templates list box.
Templates
Templates directory keeps Seyret template files under it. These files define the layout of Seyret on your web page. They are called by the core of component, processed and then display is printed on screen. All these files contain only html and seyrettags. These seyrettag all refer elements of layout. So, you should keep seyrettags in your page, but you can edit html however you want. Even you can embed some small javascript codes or new style definitions. We have seven template file for now, but during developement process, some more will come. Please try to keep your custom template up-to-date.
mainpage.php
This file contains layout of your main page of Seyret.
Used seyrettags:
{toolbar} - Defines the toolbar position. Moderation toolbar appears just under it. This tag should exist in template file, otherwise javascript will be broken. If you don't want to show this add a style definition like this: <div style="display:none;">{toolbar}</div>
{seyrettabs} - Defines the tabs display and order. You can remove tab references or reorder however you like. Pay attention to use | between tab references.
{seyrettabs}latestvideos|mostviewedvideos|highestratedvideos|featuredvideos|videocategories{/seyrettabs}
{seyretmod#} - Defines the module position to be used in Seyret Theme. You can use module positions from 1 to 9, like {seyretmod1}
mainpagecategory.php
Defines the layout of category box in main page.
Used seyrettags:
{categorynameinmainpage} - Defines the category name.
{categorythumbnailsrcinmainpage} - Defines the source url of category thumbnail.
{categorydescrinmainpage} - Defines the category description of category.
listviewinvideolisttabs.php
Defines the layout of one video row on main page tabs.
Used seyrettags: {videotitle} - Defines the video title. {videodetails} - Defines the video details. {useravatar} - Defines the user avatar. {addedby} - Defines the owner of video. {addeddate} - Defines the video submission date. {incategory} - Defines the parent category of video. {votestars} - Defines the rating stars.
frontpage.php
This file contains video page layout.
Used seyrettags: {toolbar} - Defines the toolbar position. Moderation toolbar appears just under it. This tag should exist in template file, otherwise javascript will be broken. If you don't want to show this add a style definition like this: <div style="display:none;">{toolbar}</div>
{videodirectoriesheader} - This tag presents the position of video categories table. You can remove it if you don't like. You can use Categories Menu Module as an alternative. Content of grouplist.php comes here.
{videomainarea} - This area defines video position and codes below it. Of course this tag should be in template file. Content of videomainarea.php comes here.
{videolistarea} - Defines the video list position. This tag should be in file. Content of videolist.php comes here.
{comments} - Defines the position of comments. You can disable comments from backend, so don't remove this tag to avoid breaking code.
videomainarea.php
This is one of the most important parts of layout. Defines the layout of video area. Also embed codes etc appear here.
Used seyrettags:
{videotitle} - Defines the position of video title.
{embedvideoarea} - Defines the position of video.
{showvideodetailsarea} - Defines the position of video details.
{totalhit} - Defines the position of video hit count.
{totalvotes} - Defines the position of video vote count.
{rating} - Defines the position of video rating.
{addeddate} - Defines the position of video date.
{videovotearea} - Defines the position of video voting area. Voting starts come here.
{useravatar} - Defines the position of user avatar.
{addedby} - Defines the position of username of video owner.
{videooperations} - Defines the position of operation buttons, like fullscreen, download...
{videourl} - Defines the position of video link box.
{videoembedcode} - Defines the position of video embed code box.
{bookmarks} - Defines the position of social bookmarks.
grouplist.php
Defines the position of video categories list. Contains only one tag.
{categorylist} - Defines the position of category list. The content of directory.php file comes here in two columns.
Important: For javascript compliance, please use groupcontext span in this file.
<span id="groupcontext">{categorylist}</span>
directory.php
This file contains the appearance of one category column.
{dirimage} - Defines the position of category thumbnail. If category isn't empty, image is the thumbnail of latest video.
{dirname} - Defines the position of category title.
{dirsubcategories} - Defines the position of sub categories list.
videolist.php
This file contains video list appearance definitions.
{sortbykeys} - Defines the position of video list sort keys.
{navigation} - Defines the position of video navigation arrows.
{videolistrows} - Defines the position of video list rows. The content of videolist_row.php comes here.
{pagenumber} - Defines the position of page number.
videolist_row.php
Defines the layout of video list rows.
Used seyrettags:
{videoscreen} - The thumbnail of video.
{videotitle} - Defines the position of video title.
{videoinfo} - Defines the position of video details.
allvideosforbotslist_row.php
Defines the layout of all videos page list rows.
Used seyrettags:
{videothumbnail} - Defines the position video thumbnail.
{videotitle} - Defines the position video title.
{description} - Defines the position video details.
{addeddatelabel} - Defines the position video date label.
{addeddate} - Defines the position video date.
{addedbylabel} - Defines the position video owner label.
{addedby} - Defines the position video owner name.
{hitlabel} - Defines the position video hit label.
{hitcount} - Defines the position video hit.
{votecountlabel} - Defines the position video count label.
{votecount} - Defines the position video count.
{ratinglabel} - Defines the position video rating label.
{rating} - Defines the position rating count.
CSS
The CSS file of a Seyret theme should be under style directory with seyret_style.css name. There are two kind of definitions in CSS file. Some of style definitions are used in core of Seyret. Try not delete these definitions or change the name. Especially the ones which are used by voting system should be used carefully. You can also add new style definitions for your theme. In the CSS file of default theme, you will find explanations about all style definitions.
Images
In a Seyret theme, all images should be under images directory. Pay attention to image names. Do not change the names if it is not defined by you in your own template. They are chosen to be in PNG format to give transparency opportunity. In buttons side, to give chance to use multilanguage buttons, they are placed under language directories. If you don't have buttons in your own language, english will be chosen as default. You can find more buttons in Joomlaholic download area.
