# Template Customization

{% hint style="info" %}
**Good to know:** your product docs aren't just a reference of all your features! use them to encourage folks to perform certain actions and discover the value in your product.
{% endhint %}

#### [Jump Straight to the video](#template-editing-in-action)

## The basics

We use Smarty Templating Engine to Render Template. Here is the current structure. and how it works.

For each file that Person is landed on we load the HTML file of it using Smarty. E.g 

When user open **/watch\_*****video.php**, for smarty, we have **watch\_video.html** file present in **/styles/template/layout/** folder*

![](/files/dVUCm5vcTDK90kK6CC0A)

{% hint style="info" %}
template\_*directory is basically a placeholder by default template\_directory is **cb\_28***
{% endhint %}

### Directory Structure

```
/styles 
|--/template_directory 
   |--/layout 
   |--/theme 
   |--/images 
   |--/template.xml
```

#### /Layout Directory

it has all the HTML files of the template and that is where you edit the files. to access this folder dynamically use **{$tyles\_dir}**

```
//Home Page is index.php and we load index.html file
{include file="$styles_dir/my_file.html}

//This will load file that is present in /styles/template_directory/layout/my_file.html
```

#### /theme Directory

this is where we place our CSS files, this is to include them easily and place them seperately.

```
<link rel="stylesheet" href="{$theme}/css/bootstrap.min.css?cache={$cache_buster}" />
/images Directory
//This will load css from /styles/template_directory/theme/css/bootstrap.min.css
```

#### /images Directory

This directory is where we place our images file required for any template and to access it

```
<img src="{$imageurl}/logo.png" />
```

### Common Variables

### $baseurl

returns the base url of the website

### $imageurl

to access the images folder URL of the template

### $theme\_url&#x20;

to access the theme folder of the URL

## Objects & Methods That you can use&#x20;

$vdo object from Video.class.php

$userquery object from User.class.php

Basically all is mentioned in /includes/common.php

### Methods

userid();

get\_videos();

get\_video();

and all PHP functions...because smarty support PHP

{% hint style="info" %}
in Vodlix we use two parenthesis {{ }} for smarty while for ClipBucket we use single.&#x20;

So in case of ClipBucket if you enter a JS code such as data({'yes','test'}) it will throw an error so you will have to wrap this kind of a code in {literal} ... {/literal}
{% endhint %}

### Template Editing in Action

{% embed url="<https://youtu.be/_2NkCKB3D64>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.clipbucket.com/guides/template-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.