ABEFLIX Theme Documentation

Welcome to the official documentation for the ABEFILM Blogger theme. This guide will walk you through setting up and customizing your theme to get the most out of its powerful features.

Table of Contents

• Initial Setup
• Layout Guide & Widget Configuration
• Creating a Post (The Right Way)
• Key Features & Special Pages
• Theme Customization

1. Initial Setup

a. Creating Required Static Pages

This theme uses static pages for features like Watchlist, History, etc. You must create these pages first for the links to work correctly.

1. Go to **Pages** > **New Page**.
2. Enter one of the required titles (e.g., Watchlist).
3. Leave the content area completely **blank** and click **Publish**.
4. Repeat for all pages: Watchlist, Favorite, History, Discover, My Account, and Leaderboard.

Important: You do not need to import any files or add special code to these pages. The theme's JavaScript handles everything automatically by detecting the page URL.

b. General Settings

• Favicon: Go to Settings > Basic > Favicon and upload your icon.
• Time Zone: Go to Settings > Formatting and set your time zone correctly.

2. Layout Guide & Widget Configuration

This section explains every widget section shown in your **Layout** dashboard.

a. Header Widgets

• DESKTOP MENU - MAIN LINK: Contains two Link List widgets for the desktop header navigation.
• DESKTOP HEADER WIDGET: Contains built-in widgets for Search and User Actions (History, Watchlist, etc.). These do not need configuration.
• MOBILE LOGO, SEARCH, NAVIGATION: These three sections control the mobile header. Edit the Image and Link List widgets to change the logo and navigation links for mobile users.

b. Sidebar Widgets (DESKTOP SIDEBAR NAV)

• ABEFLIX (Image): Your main site logo for the desktop sidebar.
• Main Navigation (Link List): The primary navigation links in the sidebar (Home, Movie, TV Series, etc.).
• Theme Settings (HTML/JS): The "Theme" button that opens the color and mode customization panel.
• Download App (HTML/JS): The QR code and "Download App" button. Edit this widget to add your Android app link.
• Follow Us (HTML/JS): Add your social media profile links here.

c. Homepage Content Widgets

These sections use widgets with special **shortcodes** to build your homepage layout. The parts in bold are customizable.

PAGE BODY

• Trending Now (Popular Posts): This is a special widget that automatically displays the Top 10 most viewed posts from the last week. No configuration needed.
• Continue Watching (HTML/JS): This widget works automatically, showing users the content they have recently watched.

LABEL FILTER POST 1 & 2

These sections are for your custom content carousels and grids. Add an **HTML/JavaScript** gadget and paste one of the shortcodes below.

Shortcode Examples:

• Carousel Layout (nowrap):

{lazyPosts} $label={Movie} $results={12} $style={nowrap}

• Grid Layout (grid):

{lazyPosts} $label={Thriller} $results={6} $style={grid}

• Ranked Wide List (wide-list):

{lazyPosts} $label={TV Series} $results={9} $style={wide-list} $sortBy={rating}

• Alternate Ranked Grid (ranked-grid-alt):

{lazyPosts} $label={Movie} $results={9} $style={ranked-grid-alt} $sortBy={rating}

• Filtered Switch Grid (filtered-switch):

Pulls random posts from multiple labels (separated by commas). A "Switch" button loads a new random set.

{lazyPosts} $label={Romance,Comedy} $results={6} $style={filtered-switch}

HOMEPAGE GENRE FILTER

This is the horizontal bar of genre buttons that filters the main blog post feed on the homepage. It works automatically.

Celebrity & Upcoming Carousels

• CELEBRITY CAROUSEL: Edit the **Image** widgets inside. Use the celebrity's name for the **Title** and their role (e.g., "American Actor") for the **Caption**.
• UPCOMING CAROUSEL: Edit the **Image** widgets and use this specific format for the **Caption**: [Movie][Sep 17, 2025] The movie description...

d. Post Page Widgets

• POST PAGE SIDEBAR WIDGETS: This section appears on the right side of the watch page on desktop. Edit the "Top Rating" widget with the top-list style shortcode.

{lazyPosts} $results={10} $style={top-list} $sortBy={rating}

e. Footer Widgets

The footer is divided into several sections (Footer Info, Widget Footer Link, Footer Attribute) where you can edit Link Lists and Text widgets to customize your site's bottom area.

3. Creating a Post (The Right Way)

To make posts fully compatible with all theme features, you must structure them correctly using the **HTML view**.

1. Go to **Posts** > **New Post**.
2. In the editor toolbar, switch from "Compose view" to **"HTML view"**.
3. Paste the code template below into the editor and replace the placeholder content.

Post Content Template

<!-- Backdrop Image -->
<span class="slider-backdrop" style="display:none;">BACKDROP_IMAGE_URL</span>
<div>
  <!-- Poster Image -->
  <img alt="poster" src="POSTER_IMAGE_URL" />
  <!-- Main Video Iframe (must be present) -->
  <iframe class="lazyloaded" data-src="/" src="/" allowfullscreen="true"></iframe>
  <!-- Synopsis/Overview -->
  <p class="overview" id="overview-data">This is the short description of the movie/show.</p>
</div>
<!-- METADATA (Hidden) -->
<div id="extra-meta" style="display:none;">
  <span class="meta-title-logo">TITLE_LOGO_IMAGE_URL</span>
  <span class="meta-pg">TV-MA</span>
  <span class="meta-country">Japan</span>
  <span class="meta-genre">Animation</span>
  <span class="meta-genre">Comedy</span>
  <span class="meta-year">2025</span>
  <span class="meta-rating">8.1</span>
  <span class="meta-type">TV Series</span>
  <span class="meta-subtitles">Multi-Sub</span>
  <span class="meta-audio">Dual Audio</span>
  <span id="trailer-data">https://www.youtube.com/embed/YOUTUBE_ID</span>
</div>
<!-- Video Episodes/Servers -->
<div id="episodes-data" style="display:none;">
  <ul data-server-name="Server 1" data-server-logo="LOGO_URL">
    <li><a href="VIDEO_URL_EP1">Episode 1</a></li>
  </ul>
</div>
<!-- Download Links -->
<div id="download-data" style="display:none;">
  <ul>
    <li><a href="DOWNLOAD_URL_1">Episode 1 (720p)</a></li>
  </ul>
</div>
<!-- Cast/Celebrity Data -->
<div id="celebrity-data" style="display:none;">
  <ul>
    <li><img src="ACTOR_IMAGE_URL"/><span>Actor Name</span></li>
  </ul>
</div>

Post Labels are Crucial: Add labels like Action, Movie, etc. in the Post Settings sidebar. To enable **Safe Mode** for a post, just add the label Mature.

4. Key Features & Special Pages

a. User System & Custom Avatars

The "My Account" page (/p/my-account.html) is the central hub for logged-in users. It provides links to their Watchlist, History, and Favorites pages, and allows them to customize their username and avatar.

Setting Up Custom Avatars (Admin)

1. Go to **Layout**.
2. Scroll to the hidden section named **Avatar Data Source**.
3. To add categories: Edit the **LinkList** widget named "Avatar Categories". Add a new link for each category (e.g., Name: "Anime", URL: "#").
4. To add avatars: For each category, edit the corresponding **HTML/JavaScript** widget. Inside, **Add a Gadget**, choose an **Image** widget, and upload your avatar image. Repeat for all avatars in that category.

b. Discover & Leaderboard Pages

The Discover page allows users to filter your content, while the Leaderboard page creates dynamic "Top Charts". Both pages work automatically by pulling data from your posts.

5. Managing Notifications

Add announcements that appear in the notification bell icon in the header.

1. Go to **Layout** > **Notifications**.
2. Click **Add a Gadget** and choose **HTML/JavaScript**.
3. Leave the title blank and paste one of the formats below into the "Content" area.

Format 1: System Message

<div class="noti-item">
  <div class="noti-content">
    <div class="noti-main">Your password has been changed.</div>
    <div class="noti-sub">System Message • Sep 14, 2024</div>
  </div>
</div>

Format 2: Announcement with Image

<div class="noti-item">
      <div class="noti-content">
    <div class="noti-main">
      <span class="text-highlight">Great news!</span> We are launching our new update.
    </div>
    <div class="noti-sub">ABEFILM • Sep 14, 2024</div>
  </div>
  <div class="noti-icon">
    <img src="YOUR_IMAGE_URL" loading='lazy' alt="Avatar"/>
  </div>
</div>

6. Other Interactive Features

a. Rating & Reaction System

The star rating and emoji reaction systems are powered by a Supabase backend and work automatically.

b. Comment Formatting Helper

On post pages, users have a "Formatting +" tab to help create formatted text (bold, quotes, code blocks) to copy into their comments.

7. Theme Customization

a. Theme Designer

For basic color changes, go to Theme > **Customize**. Here you can change the main theme color, backgrounds, and font colors.

b. Theme Settings Panel

In the sidebar, click the "Theme" button to open the settings panel where users can change colors and modes.