SiteBrain Customization

<h2>Modifying The SiteBrain Plex Background</h2>

<p>To modify the plex background, browse to res/images/backGrad.gif in your sitebrain.

Replace that with the .gif you want to use. This image is tiled, so I'd recommend using an image size that can be used over multiple resolutions, and whose edges will blend with the opposite edge.

You can also modify the layout.css file to point to the image name of your choice.</p>

<h2>SiteBrain Customization - Detailed</h2>

<p>Resources:</p>

<ul>

<li><a href="http://www.febooti.com/products/iezoom/online-help/online-color-chart-picker.html" rel="nofollow">Hexadecimal Color converter</a></li>

<li><a href="http://www.w3schools.com/css/default.asp" rel="nofollow">CSS Tutorial</a></li>

</ul>

<p>

You can customize the format of an exported sitebrain to correspond with your color scheme and site design.

Below are the two files you will edit and what the sections do (not complete):

<b>Note: </b>I’ve modified the settings below to mimic the plex layout of the example in the picture below. You can compare this with the default settings (in blue) .

<h3>settings.js</h3>

<p>The settings.js mainly revolves around the functionality of the plex.

// colors and sizes

var textColor = "#E0E0C6"; - Set the hexadecimal color for the font color of the thoughts in the plex. Default: "#ffffff"

var backColor = "#263644"; - Set the hexadecimal color for the thought background color. Default "#000000"

var linkColor = "#5D84A6"; - Set the hexadecimal color for the thought links color Default "#4893C2"

var plexFontSize = 12; - Set the font size for the thoughts text. Set as default

// other plex settings

var maxChildColumns = 6; - Allows you to define the maximum number of columns for thought children

var hideLinks = false; - Allows you to hide the link lines

// pins

var showPins = true; - Toggle the display of pins on or off

// past thoughts list

var showPastThoughtList = true; - Toggle the past thought list on or off

// instant search

var showSearch = true; - Toggle instant search on or off

// layout settings

// autohide

var autoHideEnabled = true; - Toggle if you want to be able to hide the plex (arrow button which causes the plex to slide up.

var autoHideVertical = true;  - True = Vertical autohide, False = Horizontal autohide

// resizing settings

var resizePlexEnabled = true;  - Toggle if you wish the plex to resize based on the browser window size

var splitterHeight = 4; - Define the size of the line under the plex that splits the plex and body portion of the page

var splitterBackgroundColor = "#00f";  - Set the hexadecimal color for the splitter body color

var splitterEdgesColor = "#000"; - Set the hexadecimal color for the splitter edges 

// title info

var pageTitle = "PersonalBrain”  - Set the title that appears in the browser window title

var showThoughtInTitle = true; - Set if the current thought name also appears in the browser window title.</p>

<h3>Layout.css</h3>

<p>The layout.css allows you to set the plex size, border and body layout.

#plexBar {

  position: relative;

  width: 912px; - You can set this to a pixel size if you don’t want the plex to use the full width of the screen. Default:  100%

  margin: 0px auto; - Set if you wish a margin around the plex.

  text-align: left;

}

#plexDiv {

  height: 250px; - Set this for the height of the plex. Default 300px

  background:#000;

  background-image: url(res/images/backGrad.gif); - You can change the name of this to point to a different background for the plex.

background-repeat: repeat-x;

  border:15px solid #EBF1FF; - Allows you to set a border around the plex so it doesn’t  show flush with the top of the web page.  Default  0px solid #000;

}

#mainPage {

  background:#858570; - Set for the background color. This allows you to differentiate this color from the font color. Default is not defined.

}

#content {

  width: 912px; -This is the width of the notes section. Default is 100%. Generally this should be the same width as the plex if customized.

  height: 100%;

  margin: auto;

}

#contentFrame {

  border: 0px;

  width: 912px; -This is the width of the frame around the notes section. Default is 100%. It allows you to set a border around the notes if you want. Default is 100%

  height: 100%;

}

 </p>