remix

You can remix your own manuals. Select a manual (or manuals) in Step one with the drop down menu and drag chapters to the box on the right. Choose an output format (html/pdf) in step two and tweak the style. In step three you can export the remix and also use the (beta) ajax provided to put a live manual in your web page.

STEP 1. REMIX

STEP 2. STYLE

STEP 3. EXPORT

Make a manual remix 1. From this menu you can select one or more manuals to remix 2. Drag manual items to the remix box on the right in the order you want them 3. The output if the remix can be HTML or PDF (selected in step 2). 4. You can also use the AJAX code supplied in step 3 to include the manual in your website or blog.
		remix box (drag chapters here)

Format and style
1. Choose type of output for the remix and style (for HTML)
2. You can also call the PDF or HTML file to be downloaded using 'title'.
3. If you choose HTML you can preview the look and feel below, by changing the style sheet in the text box you can custom the look and feel.
4. If you choose PDF you can choose a cover (in future remixes you will be able to design your own cover)

Title:

Export as:

Select cover page:

Select template:

Your CSS:

body {
	font-family : trebuchet,verdana, sans-serif;
	font-size: 12px; 
	line-height:17px;
}
#content {
	padding:10px;
	position:absolute;
	top:20px;
	left:200px;
	width:670px;
	border-width:4px;
	border-style:solid;
	border-color:#666666;
}
#index {
	 color:  #ff7f00;
	 font-family: trebuchet,sans-serif;
	 font-size: 10px;
	 line-height:11px;
	 position:absolute;
	 top:20px;
	 left :10px;
}

#index UL {
	 width: 155px;
	 list-style-type: None;
	 padding-left: 0px;
	 border: 14px solid #ff7f00;
	 background-color: #ff7f00;
	 margin: 0px 0px 0px 0px;
  }

#index  LI {
	 padding-left: 0px;
	 padding-right: 10px;
	 padding-top: 4px;
	 padding-bottom: 4px;
	 color: #ffffff;
	 margin: 0px 0px 0px 0px;
	 background-color: #ff7f00;
	 border-top: 1px solid #ff7f00;
  }

#index LI:hover {
  background-color: #F99B1C;
}

#index  LI.heading {
	 background-color: #ff7f00;
	 color: #000000;
	 border-top:1px solid #FFE5CC;
	 padding-top: 7px;
	 font-weight: bold;
}

#index  LI.title {
	 border-bottom: 2px solid #FFE5CC;
	 background-color: #ff7f00;
	 color: #FBF4E9;
	 font-weight: bolder;
	 font-size:20px;
	 padding-bottom: 20px;
  }

#index A {
	 text-decoration: none;
	 color:  #FBF4E9;
	 font-weight: bold;
}

hr {
border : none;
background-color : #666666;
color : #000000;
height : 2px;
width:120px;
margin-left:0px;
margin-bottom: 10px; 
margin-top: 10px;
}

blockquote {
}

ul, li {
margin-bottom: 5px; 
margin-top: 0px; 
}

h1 {
font-size: 24px;
font-family : Arial,verdana, sans-serif;
font-weight : Bold;
margin-bottom: 10px; 
margin-top: 0px;
line-height: 32px; 
letter-spacing: -1px; 
}

h2 {
font-size: 18px;
font-family : Arial,verdana, sans-serif;
font-weight : Bold;
margin-bottom: 10px;
margin-top: 15px;
padding-top : 15px;
}

h3 {
font-size: 14px;
font-family : Arial,verdana, sans-serif;
font-weight : Bold;
margin-bottom: 5px; 
}

h4 {
font-size: 1em;
font-family : Arial,verdana, sans-serif;
font-weight : Bold;
margin-bottom: -12px; 
}
pre, span.Code, span.verbatim {
font-size:12px;
line-height:1.5em;
background-color:#FFE5CC;
border: 0px solid #000000;
margin-left : 0.5em;
margin-bottom : 20px;
margin-right : 1em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0.2em;
padding-bottom: 0.2em;
color : black;
white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

api notes :
1. below are the defaults for the style of the text and layout
2. the style of the chapter content cannot yet be changed although we will work on this.
3. more documentation is coming. This is beta (testing) state at the moment.

var _config = { "width":           "835px",
                "height":          "500px",
                "padding":         "3px",
                "color":           "#ffe5cc",
                "indexwidth":      "160px",
                "indexbackground": "#ff7f00",
                "framewidth":      "670px",
                "frameheight":     "500px",
                "skin":            "ajax"};

var _style = { "title":   "color: #ffe5cc;font-size: 20;font-family: Arial,verdana, 
				sans-serif;font-weight: bold;margin-left:20px",
               "frame":   "",
               "index":   "",
               "embed":   "font-size: 10px;font-family: Arial,verdana, sans-serif;
	       			font-weight: bold; line-height:14px",
               "topic":   "font-weight: bold",
               "heading": "font-weight: bold; color:black;font-family: Arial,verdana, 
	       			sans-serif;font-size: 10px;padding-top: 4px;
				padding-bottom: 4px",
               "list":    "list-style-type: none; padding-left: 20px; margin-left: 
	       			0px;margin-top:2px;",
               "link":    "color: #ffe5cc; text-decoration: none; font-weight: bold"};

Use the following to override the defaults an external style sheet.

FLOSSConfig.style = null

An example customisation syntax :

var FLOSSConfig = {'style': {'title': 'color: black; font-size: 20;font-family: 
Arial,verdana, sans-serif;font-weight: bold', 'heading': 'font-weight: bold; 
color:black;font-family: Arial,verdana, sans-serif;font-size: 12','embed':
'font-size: 12px;font-family: Arial,verdana, sans-serif;font-weight: bold'}, 
'config': {'width': '870px', 'height': '500px', 'framewidth': '670px'}, 
'pages': [], 'title': ''};