Themes

This article will provide you with the tools to create and setup a theme for the ArrowChat store so you can distribute it to others.

 


Sections in this article

Creating a Theme

Themes are complex and have a lot of files, images, and sounds so the best way to create a theme is by starting with another theme. You can then use the existing theme to change the CSS and HTML.

Directory Structure
  • Theme NameHolds an entire theme's files
    • cssThe CSS files for the theme
      • custom_css.phpThis file makes the colorize feature work. You can use variables to adjust colors.
      • index.htmlBlank file
      • style.cssThe main CSS file for the theme
      • style_popout.cssThe popout/embed CSS file for the theme
    • fontsFonts installed for the theme
    • imagesThe images for the theme
    • soundsThe sounds for the theme
    • templateThe HTML templates for the theme
      • announcements_display.phpHTML for the announcements popup
      • buddylist_tab.phpHTML for the online list tab
      • buddylist_window.phpHTML for the online list window
      • chat_tab.phpHTML for one-on-one chat tabs
      • chat_window.phpHTML for one-on-one chat windows
      • chatrooms_tab.phpHTML for the chat room tab
      • chatrooms_window.phpHTML for the main chat room list (no joined room)
      • index.htmlBlank file
      • maintenance_tab.phpHTML for the tab when maintenance mode is enabled
      • notifications_tab.phpHTML for the notifications tab
      • notifications_window.phpHTML for the notifications window
      • unseen_chat_tab.phpHTML for closed windows when too many are open
      • warnings_display.phpHTML for the warning popup
      • welcome_display.phpHTML for the welcome message to new users
    • index.htmlBlank file
    • install_config.phpConfig used when installing the theme into ArrowChat
File Explanations
style.css All the main CSS needs to go in here. You can import other CSS files if you want.
custom_css.php This file allows the colorize feature in the admin panel to work. You can put user defined variables in your CSS file using this file.
Templates Folder There are all the HTML templates. Keep all these files and do not rename them. Information about each file is available on our CSS and HTML page.
install_config.php This is required for the theme to be installed. Open it up and configure the settings inside.
index.html Files These are blank files not used to prevent outside users from browser the directories.
Custom CSS Setup (Colorize)

The ArrowChat admin panel has a feature called colorize. This allows users to input their own custom colors into your theme. In order for this feature to work on your theme, you must setup the custom_css.php file using the variables below.

Variables
$primary_color The main color of the chat (icons, buttons, etc)
$secondary_color The second color should be slightly lighter than the main, mostly used for hovers
$button_background The background color of the button to open ArrowChat
$button_icon The icon color of the button to open ArrowChat
$chat_bubble Background for text messages
$chat_bubble_text Text color for messages
$chat_bubble_self Background for messages sent by same user
$chat_bubble_self_text Text color for messages sent by same user

Additional Resources

We've compiled a list of the most useful articles and sources for creating a theme below.