Brixiobot

brixioapp edited this page Feb 25, 2015 · 6 revisions

Brix.io Bot

Brixio Bot helps casual users to edit a template. It finds all elements to modify. Just click on intuitive names on the list, like Background Color, Text Size, Logo, etc...

brix.io Bot


Guide for Template Authors

Brixio Bot provides a guidance for customers to find html elements and css definition by clicking Brixio Bot menu option. Now, with one simple step you can add Brixio Bot support to your template.

How to use Brixio Bot

Place one simple xml file in the root directory of your project - this is the program for our bot. No other changes are needed. Don’t worry, you can tune (or add) the bot program file inside brix.io editor.

Promote your template

Let us know about Brixio Bot program file included in your project, so we can add link to your template to brix.io website.

Configuration file

The .xml file includes all the entries regarding template elements, actions you can perform and information about the author.

After preparing the file and launching the editor:

  • Brixio Bot menu appears with the elements
  • editing is limited to the described action

Properties Template property may be a fragment of html code (section) or a style definition in css file. Property is defined in the file as:

<prop type="prop" >
  <description>element name 1</description>
  <selector>#id1</selector>
  <action>select</action>
  <file>*</file>
</prop>

attributes:

  • type - element’s type ("prop" for html element or "class" for the selector in css file),
  • save="true" - (optional) saves html element as a section (after the first run of the editor),
  • image="dir/image.jpg" - thumbnail (optional, for save="true" only),
  • icon="-name" - (optional) type of the icon to appear in the Brixio Bot dialog box.

elements:

  • description - name visible in the Brixio Bot menu
  • selector – element’s identification
  • action – feasible action
  • file - filename

description

The name visible in the Brixio Bot menu.

selector

In order to identify the selector and file sections are used.

You can use selectors in jQuery format. Examples:

  • xml<selector>#name</selector> indicates the element with "name" id - id="name"

  • xml<selector>.class</selector> indicates elements with "name" class - class="... name ..."

If you don’t use specific IDs in your project, you can use data-brixrem_section = "identifier" attribute. Data-brixrem_... attributes are removed during project’s export, so they won’t be found in the final version downloaded by the user making the customization. After adding data-brixrem_section attribute, you can use the following in the selector: xml<selector>[data-brixrem_section="myid"]</selector>

action

Action defines what kind of operations are possible on the html element. It is activated when you click the element’s name in the Brixio Bot menu.

  • none - no action, used when the element has save=true attribute and it is not necessary to work on it,
  • highlight - element can be highlighted and there is a possibility to add elements before or after it,
  • select - element can be selected to edit its properties (default),
  • textmode - element can be switched to the textmode.

Example: xml<action>select</action>

file

For html elements you can indicate a specific file here or skip “file” entirely, then the selector applies to all pages. For css elements “file” is mandatory and specifies the path (starting from the project’s root directory) to .css file.

Example: xml<file>/folder/style.css</file>


template info
<name>Template Name</name>
<author>Author/Company name</author>
<portfolio>http://portfolio_link</portfolio>
  • name – visible template’s name
  • author – visible author’s name
  • portfolio - link to author’s portfolio

brix-profile.xml file example:
<profile>
  <properties>
    <prop type="prop" save="true">
      <description>element name #1</description>
      <selector>#id1</selector>
      <action>select</action>
      <file>*</file>
    </prop>
    <prop type="class" icon="brush">
      <description>element name #2</description>
      <selector>.myclass</selector>
      <file>style.css</file>
    </prop>
  </properties>
  <name>Template Name</name>
  <author>Author/Company name</author>
  <portfolio>http://portfolio_link</portfolio>
</profile>