Site owners are able to customize how their forum or website looks and behaves when accessed under
Forum Fiend. This is an overview on the customization options available to site owners and developers.
Firstly, if absolutely no site owner action is taken at all, Forum Fiend will still attempt to derive your site's name, icon, and theme color from the meta data of your website. These items are taken from your site's title tag, it's favicon, and the theme-color meta tag.
High-Level Configuration
The easiest way to customize a site under Forum Fiend, one which requires no development experience whatsoever, is to upload a
forumfiend.json file to the root directory of your site. Any site that is accessed by a fair number of users through Forum Fiend should take the time to include this simple file. The forumfiend.json file allows you to set high level parameters for your site, as well as branding logos and theme customizations. Creating the file should take no more than a couple of minutes, and you can see a complete guide in the following thread:
Complete forumfiend.json Reference
Access Methods
Forum Fiend can display a forum using either the Tapatalk API or through a custom WebView interface. Tapatalk access is based on the outdated open source version of the Tapatalk API and is no longer maintained. If your forum already uses Tapatalk, it may work just fine under Forum Fiend, and you are encouraged to test it out to be sure.
Note that the Tapatalk interface has not been updated since 2014 and will not be receiving support or updates in the future, as newer versions of the API are no longer open source.
The Forum Fiend WebView
Forum developers or site owners with JavaScript experience can further customize their site under Forum Fiend using the custom WebView API interface methods. Site owners who have Tapatalk installed on their system but prefer to use the custom WebView under Forum Fiend can do so by setting the
disable_api to
"1" in their
forumfiend.json file.
The Forum Fiend WebView has a user agent string of
ForumViewerCore. Developers can check the user agent to determine if their site is being accessed under Forum Fiend. Some implementations may want to alter UI or Stylesheets based on the presence of Forum Fiend.
Forum Fiend will also add a global
ForumViewerCoreInterface JavaScript object to your site for accessing WebView API methods. Thus, the presence of Forum Fiend can also be detected in JavaScript by checking for the existence of the
window.ForumViewerCoreInterface object.
setProperty Interface
Forum Fiend will add a
window.ForumViewerCoreInterface.setProperty(key,value) function to your website that will allow you to customize several aspects of the Forum Fiend interface. Below is a reference to things you can do with the setProperty function, as well as some code examples.
All keys and values must be text strings.
User Account
To personalize your forum or site for your Forum Fiend users, you can display their logged account username and avatar on the main forum listing screen. Use the following two properties to set the user's details.
key | values |
fvc-logged-username | username or "0" for not logged in |
fvc-logged-avatar | full URL to avatar image file (png,jpg,gif supported) or "0" for no avatar |
window.ForumViewerCoreInterface.setProperty("fvc-logged-username","little bobby");
window.ForumViewerCoreInterface.setProperty("fvc-logged-avatar","https://mysite.com/avatar-bobby.png");
Pagination Bar
Forum Fiend can provide a pagination bar at the bottom of the screen with controls for first/last/next/previous page. The following table lists the pagination related properties, followed by a code example.
key | values |
fvc-show-pagination | "true" or "false" |
fvc-pagination-pagedisp | ex: "5 of 10" |
fvc-pagination-first | url: "https://mysite.com/viewpage?p=1&pg=1" |
fvc-pagination-last | url: "https://mysite.com/viewpage?p=1&pg=10" |
fvc-pagination-next | url: "https://mysite.com/viewpage?p=1&pg=6" |
fvc-pagination-previous | url: "https://mysite.com/viewpage?p=1&pg=4" |
window.ForumViewerCoreInterface.setProperty("fvc-show-pagination","true");
window.ForumViewerCoreInterface.setProperty("fvc-pagination-pagedisp","5 of 10");
window.ForumViewerCoreInterface.setProperty("fvc-pagination-first","https://mysite.com/viewpage?p=1&pg=1");
window.ForumViewerCoreInterface.setProperty("fvc-pagination-last","https://mysite.com/viewpage?p=1&pg=10");
window.ForumViewerCoreInterface.setProperty("fvc-pagination-next","https://mysite.com/viewpage?p=1&pg=6");
window.ForumViewerCoreInterface.setProperty("fvc-pagination-previous","https://mysite.com/viewpage?p=1&pg=4");
Colors and Theme
There are several properties related to the appearance of the site under Forum Fiend.
key | values |
fvc-theme | Title/Status Bar Colors, hex string |
fvc-page-foreground | general foreground (text) color, hex string |
fvc-page-background | general background color, hex string |
window.ForumViewerCoreInterface.setProperty("fvc-theme","#2196F3");
window.ForumViewerCoreInterface.setProperty("fvc-foreground","#212121");
window.ForumViewerCoreInterface.setProperty("fvc-background","#CFD8DC");
Slide-Out Menu
The left-hand slide-out menu can be customized using the
window.ForumViewerCoreInterface.addMenuItem(name,icon,url,color) function. The following lists the parameter values expected for the function.
parameter | description |
name | The name of the menu item. If set to "CLEARMENU" will reset all custom menu items. |
icon | absolute url to a png icon for the menu item |
url | absolute url to navigate to when the menu item is selected |
color | optional hex color mask for the icon, or null |
window.ForumViewerCoreInterface.addMenuItem("CLEARMENU",null,null,null);
window.ForumViewerCoreInterface.addMenuItem("Latest Posts","https://mysite.com/latest-icon.png","https://mysite.com/latest.php",null);
window.ForumViewerCoreInterface.addMenuItem("Exciting Section","https://mysite.com/exciting-icon.png","https://mysite.com/viewpage.php?p=50",null);
Application Toolbar
The top actionbar/toolbar of the Forum Fiend app can also be customized using the
window.ForumViewerCoreInterface.addToolbarItem(name,url,icon,secondary) function.
parameter | description |
name | The name of the menu item. If set to "CLEARTOOLBAR" will reset all custom menu items. |
url | absolute url to navigate to when the menu item is selected |
icon | a named icon, reference below, ex "back" or "chat" |
secondary | boolean value, if true will force the toolbar item into the drop down menu |
window.ForumViewerCoreInterface.addToolbarItem("CLEARTOOLBAR",null,null,null);
window.ForumViewerCoreInterface.addToolbarItem("New Post","https://mysite.com/newpost.php","add",false);
window.ForumViewerCoreInterface.addToolbarItem("Sign Out","https://mysite.com/signout.php",null,true);
Named Icons
Here is a list of available named icons you can try out. These can be used for both Toolbar and Menu items, but toolbar items require a named icon (menu icons can be a URL).
selectall,stopwatch,sort,relationship,ruler,pdf,chat,build,search,feedback,merge,envelope,allapps,viewall,filter,threedotshoriz,calendar,system,yescheck,nocheck,font,record,location,nolocation,movie,notes,description,bookmark,notifications,gavel,home,person,unlock,directions,print,undo,rss,showresults,personalize,share,sponsor,fanmail,premium,achievements,scores,import,movetofolder,page,back,add,delete,export,new,save,open,send,clear,emoji2,play,rename,volume,info,contactinfo,important,library,zerobars,help,people,emoji,shop,money,audio,fourbars,sync,switch,like,refresh,list,calculator,map,savelocal,copy,camera,fullscreen,flag,highlight,color,preview,previewlink,settings,rotatecamera,crop,backtowindow,lock,skull,microphone,video