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
    • imagesThe images for the theme
    • soundsThe sounds for the theme
    • templateThe HTML templates for the theme
      • announcements_display.phpHTML for the announcements popup
      • applications_bookmarks_list.phpHTML for each application bookmark in the main app window
      • applications_bookmarks_tab.phpHTML for a bookmarked application tab
      • applications_bookmarks_window.phpHTML for a bookmarked application window
      • applications_tab.phpHTML for the main application tab
      • applications_window.phpHTML for the main application window
      • bar_hide_tab.phpHTML for the hide bar tab
      • bar_show_tab.phpHTML for the show bar tab
      • 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_room.phpHTML for a chat room once you've joined one
      • 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
      • mod_report.phpHTML for the moderation window when a report is opened
      • mod_tab.phpHTML for the moderation tab
      • mod_window.phpHTML for the moderation window list (no report opened)
      • notifications_tab.phpHTML for the notifications tab
      • notifications_window.phpHTML for the notifications window
      • warnings_display.phpHTML for the warning popup
    • 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
$bar_background The color of the main ArrowChat bar.
$bar_text The text color of the main ArrowChat bar.
$bar_border The border color of the main ArrowChat bar.
$bar_hover The color when a user hovers over tabs in the main ArrowChat bar.
$window_title The color of all the windows within ArrowChat.
$window_title_hover The color of all the windows within ArrowChat when a user hovers over them.
$window_title_focus The color of all the windows within ArrowChat when a user has focus on them.
$window_text The text color of all the windows within ArrowChat.
$chat_bubble The color of chat messages.
$chat_bubble_text The text color of chat messages.
$chat_bubble_self The color of chat messages sent by the user.
$chat_bubble_self_text The text color of chat messages sent by the user.

Additional Resources

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