Site Design and Templates

What design options do I have?

You have multiple customization options available on the AVideo platform:

• 4 types of home page designs, including:

1. Gallery style

A clean grid layout that showcases the latest videos and categories.

🔗 Live sample

https://tutorials.avideo.com/

2. Netflix (Flix) style

Horizontal sliders by category, similar to the Netflix interface.

🔗 Live sample

https://flix.avideo.com/

3. Channel-focused style

The homepage displays videos grouped and prioritized by channel.

4. Player First Page

The main page is a full video player focused on a specific video.

• 19 themes
• 10 different player skins

This provides you with nearly 800 possible combinations of layout and appearance.

You can switch designs:

• Directly from the plugin manager
• Or by accessing:
  Admin Panel → Customize Advanced → Design First Page
  

Dark & Light Themes

In addition to layout and style combinations, AVideo also allows you to fully customize the visual theme of your site by choosing between dark and light themes, with an optional toggle switch for users.

How to set a default light or dark theme

1. Open the top-left sandwich menu

2. Navigate to Admin panel → Design → Themes

3. You will see two theme sections:

   • Left: Dark themes (e.g., Cyborg, Netflix, Slate)
   • Right: Light themes (e.g., Cerulean, Flatly, Readable)

4. At the top of each section, there's a toggle:

   • Dark is Default or Light is Default
   • This defines the default theme group used on your site

5. Below that, click on the theme you prefer to activate it:
   

---

How to allow users to switch between light and dark mode

You can also enable a theme toggle switch so users can manually switch between dark and light modes:

1. Go to Admin panel → Plugins → Layout plugin
2. Enable the option: canToogleDarkAndLightMode

This will add a Dark Mode switcher to your site menu:

You can configure additional layout features within the Layout plugin settings:

---

Add custom CSS or JavaScript

In addition to combining existing designs, you can also inject your own custom CSS or JavaScript.

There are two recommended ways to do this:

1. Via Admin Panel

Go to:
Admin Panel → Customize Advanced → Script Code → Head Code

You'll find a text area to paste your custom code:

2. Via Plugins

Some plugins allow injecting code as well:

⚠️ Do not modify core AVideo files directly. Doing so will prevent future updates from working properly and may result in lost changes.

---

Want to build your own layout or front page?

If you'd like full control over your site's layout, you can build your own frontend using our official API:

• 🔗 AVideo Platform API documentation
• 🧩 AVideo React Sample (Frontend using the API)

⚠️ We do not provide design jobs or frontend development services.
You're welcome to use our API and samples to create your own solution.

---

Do you need more customization?

If the built-in options are not enough, you can develop your own custom plugin to control the home page design.

To do this, you will need:

• Knowledge of PHP, HTML, and CSS
• Preferably experience with Bootstrap 3

I recommend copying the existing Gallery plugin, renaming it, and using it as a starting point to build your own design.

---

Can I hire you to create a design for me?

At the moment, we do not offer design customization services.

---

Can I hire you to teach me how to code?

Currently, we do not provide coding instruction, but you are welcome to use our GitHub repository to ask questions, including technical and development-related inquiries.