Customize the appearance and content of Advokit for your campaign

A mechanism for adding custom pages

Would you like to be able to have your own links in the sidebar and to be able to show your own content in the main display area of AdvoKit? You can!


Here's how to create a custom page:
  1. Create a HTML file with the content that you wish to show in the main display panel of Advokit. (Important - use the ".html" extension, ".htm" won't work.)
  2. Put a copy of that file into the ../templates/raw/ directory of your Advokit installation.
Here's how to add links to the sidebar:
  1. Edit the template file named "custom_sidebar_section.tpl". You just need to remove the comments "{{*" and "*}}" to activate this template. It will be displayed as a new section in the sidebar immediately above the "My Account" section. Here is a sample
    <h4 class="sidebarsectionhead">The Issues</h4>
    <p class="alist">
    <a href="index.php?display=CustomHtml&heading=Eight Talking Points&html_name=talkpts">
    Eight Talking Points</a>
    <br>
    <a href="index.php?display=CustomHtml&heading=Spin&html_name=spin">The Spin</a>
    </p>
    The first line causes a section header to be displayed with the name "The Issues". Below that are the links, separated by breaks (<br>).
  2. You can put any kind of link you want into this code, but note in this example the link to a display called "CustomHtml". This is how you can have your HTML page displayed inside AdvoKit. The "heading" argument determines what will appear as a title for this display in the header area. The "name" argument is the name of your HTML file, minus the ".html" extension.
That's all there is to it!

Customize the look of your Advokit website

  1. Changing the page title displayed by the browser
    • In your advokit.ini file, look for where the "title_override" configuration variable is set. By default it is blank, which causes Advokit to use the product name and version number. However you can enter any text here, and it will be substituted for the page title.
  2. Changing the logo
    • To use your own logo, the simplest thing is to name it "logo.gif" and upload it to the "images" directory under your Advokit installation's web root - replacing the original "logo.gif". You can use a different file name and/or location, or not use a logo at all by editing the "logo_url" variable in advokit.ini. Here is the documentation for that. (Not using a logo might be desirable if you intend to use a css background-image - see the next section).

      ; Enter a url here to use for the logo image (relative url is from
      ; web root of application, exclude the leading slash). If left blank then
      ; the default AdvoKit logo will be used. If "none" is entered, no logo will
      ; appear. Examples:
      ; logo_url = ""
      ; logo_url = "images/logo.gif"
      ; logo_url = "http://www.a_domain.com/advokit/images/logo.gif"
      ; logo_url = "none"
      logo_url = ""
  3. More extensive changes
    • Most of the graphical appearance of Advokit is determined by the stylesheet "advokit.css" which is installed at the Advokit web root. There are a couple additional stylesheets that occasionally come into play as well.
    • The HTML code that you see displayed is created by Smarty templates, of which there are a large number! However only a few templates are used for "wrapping up" page content. These are generally  identified with lower-case file names in the /templates/raw/ directory. For example, "browse-header.tpl" controls the appearance of the tops of browser pages. The sidebar is created by the "activist-sidebar.tpl", "admin-sidebar.tpl" and "anonymous-sidebar.tpl" files.