Stamp Builder. Documentation. v1.0.0

Similar documents
CSS.

Web Structure and Style. MB2030 Section 2 Class 4

Lab 1: Introducing HTML5 and CSS3

HTML HTML5. DOM(Document Object Model) CSS CSS

Introduction to Computer Science Web Development

Chapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21

Cascading Style Sheets Level 2

Chapter 7 BMIS335 Web Design & Development

Taking Fireworks Template and Applying it to Dreamweaver

Session 5. Web Page Generation. Reading & Reference

CSS Module in 2 Parts

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

Website Design (Weekend) By Alabian Solutions Ltd , 2016

Getting Started with CSS Sculptor 3

Introduction to Computer Science Web Development

To illustrate how to set TAG styles the <body> and <h1> tags (for the BODY and the HEADING 1 styles) will be adjusted.

Website Design (Weekday) By Alabian Solutions Ltd , 2016

Santa Tracker. Release Notes Version 1.0

JSN PageBuilder 3 Configuration Manual Introduction

McMaster Brand Standard for Websites

Configuring Hotspots

Copyright IBM Corporation All Rights Reserved.

Session 4. Style Sheets (CSS) Reading & References. A reference containing tables of CSS properties

Deccansoft Software Services

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

Introduction to CSS. Part 1: Simple Text Formatting. Source Files for this Exercise are available on the Course Website DW_CSS intro


INTRODUCTION TO CSS. Topics MODULE 5

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar

Front-End UI: Bootstrap

CSS. Shan-Hung Wu CS, NTHU

Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3

Creating a Job Aid using HTML and CSS

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.

Creating Forms. Starting the Page. another way of applying a template to a page.

TinyMCE Users Guide. This user manual will show you all the basics of the TinyMCE editor.

Diploma in Digital Applications Unit 5: Coding for the Web

AP CS P. Unit 2. Introduction to HTML and CSS

Lab Introduction to Cascading Style Sheets

Unit 10 - Client Side Customisation of Web Pages. Week 5 Lesson 1 CSS - Selectors

Getting your work online. behance.net cargo collective krop coroflot

Purpose of this doc. Most minimal. Start building your own portfolio page!

CS 350 Internet Applications I Name: Exam II (CSS) October 29, 2013

How to lay out a web page with CSS

Cascading Style Sheets (CSS)

Introduction to WEB PROGRAMMING

CSS: Responsive Design, CSS3 and Fallbacks

CSS: The Basics CISC 282 September 20, 2014

Signs of Spring App. Release Notes Version 1.0

Web Designer s Reference

Prepared: 28 th February 2006 Program Version: swmenupro4.2+ for Joomla/Mambo

CS 350 COMPUTER/HUMAN INTERACTION. Lecture 6

Class 9 / Instructor: Ira Epstein

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية

Getting Started with Eric Meyer's CSS Sculptor 1.0

HIERARCHICAL ORGANIZATION

<style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page***

WEBSI TE DESIGNING TRAINING

Dreamweaver: Portfolio Site

CSS: Layout Part 2. clear. CSS for layout and formatting: clear

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1

Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student

VTEM SLIDES INSTRUCTION MANUAL COPYRIGHT DISCLAIMER. Instruction Manual FOR INFO, UPDATES, REQUESTS & CONTACT

COSC 2206 Internet Tools. CSS Cascading Style Sheets

IBM Forms V8.0 Custom Themes IBM Corporation

NAVIGATION INSTRUCTIONS

CSS means Cascading Style Sheets. It is used to style HTML documents.

In the early days of the Web, designers just had the original 91 HTML tags to work with.

Web Development and HTML. Shan-Hung Wu CS, NTHU

yawrap Documentation Release Michal Kaczmarczyk

Introduction to Web Design CSS Reference

Introduction to Web Design CSS Reference

Viostream Upload Widget

IMY 110 Theme 11 HTML Frames

Web Recruitment Module Customisation

Designing the Home Page and Creating Additional Pages

CSS 1: Introduction. Chapter 3

NEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS

CSS worksheet. JMC 105 Drake University

Web Publishing Intermediate 2

limelightplatform.com

2004 WebGUI Users Conference

Markup Language. Made up of elements Elements create a document tree

yawrap Documentation Release Michal Kaczmarczyk

BA. (Hons) Graphics Design

Media-Specific Styles

Web Development & Design Foundations with HTML5, 8 th Edition Instructor Materials Chapter 3 Test Bank

KillTest *KIJGT 3WCNKV[ $GVVGT 5GTXKEG Q&A NZZV ]]] QORRZKYZ IUS =K ULLKX LXKK [VJGZK YKX\OIK LUX UTK _KGX

HTML & CSS November 19, 2014

Hoster: openload.co - Free PLUGIN_DEFECT-Error: 08d a1830b60ab13ddec9a2ff6

Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen

CSS Cascading Style Sheets

Review Question 1. Which tag is used to create a link to another page? 1. <p> 2. <li> 3. <a> 4. <em>

Web Design & Dev. Combo. By Alabian Solutions Ltd , 2016

CSE 154: Web Programming Autumn 2018

INTERNET!!!11!1. Beyond the Mouse A Short Course on Programming. 10b. HTML/CSS or: I m on the. Ronni Grapenthin. November 13, 2011

5 Snowdonia. 94 Web Applications with C#.ASP

Creating HTML files using Notepad

CSC309 Programming on the Web week 3: css, rwd

Transcription:

Stamp Email Builder Documentation http://getemailbuilder.com v1.0.0

THANK YOU FOR PURCHASING OUR EMAIL EDITOR! This documentation covers all main features of the STAMP Self-hosted email editor. If you have any questions beyond the scope of this document, please contact us at support@getemailbuilder.com

INSTALLATION Stamp Email Editor requires a modern browser with full Javascript and HTML5 support. Stamp Email Editor has been tested in and fully supports following browsers: Chrome Firefox Safari Microsoft Edge To install Stamp Editor to the web-page, just add style /stampbuilder/style.css or /stampbuilder/style.min.css to the <head></head> tag. Then create a container for Email Editor, it may be a div-element with some ID. Add /stampbuilder/script.js or /stampbuilder/script.min.js before closing </body> tag. And initialize the editor: $STAMP('#div-container, { ); template: '/stampbuilder/templates/notify/index.html', upload: '/server/upload.php' Example HTML: <!DOCTYPE html> <html> <head> <title>stamp Email Builder</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- stamp editor css --> <link rel="stylesheet" href="/stampbuilder/style.min.css" /> </head> <body> <!-- element --> <div id="stamp-container"></div> <!-- stamp editor js --> <script src="/stampbuilder/script.min.js"></script> <!-- inititalization --> <script> $STAMP('#stamp-container, { template: '/stampbuilder/templates/notify/index.html' ); </script> </body> </html>

SETTINGS Stamp Email Builder has the following settings: Setting Type Description path String Default: '' Specifies the url path to the Stamp Builder directory for connecting iframe styles and other editing tools. template String Default: '' URL path to the current email template. upload autosave code String Boolean Default: false String Boolean Default: false Boolean Default: true URL path to the upload script. The script should return the following JSON response: { "url": "/uploads/uploaded-image.png" URL path to the autosave script. Stamp Builder will send the POST request to this script every time a change is happened in the editor with the following data: template the modified template; html generated HTML code; This setting enable or disable an ability to view the source code of the template. align String Default: 'left' Default text align of the template. basecolors frame Array Default: ['#ffffff','#111113'] Object Default: { 'width': '100%', 'border': 'none', 'backgroundcolor': '#fff', 'margin-left': 'auto', 'margin-right': 'auto' Default colors used in color picker in the editor. Style of the editor s iframe styles Object Styles of the email template.

Setting Examples Code setting: $STAMP('#stamp-container', { template: '/stampbuilder/templates/notify/index.html', code: false ); Styles setting: $ STAMP('#stamp-container', { template: '/stampbuilder/templates/notify/index.html', styles: { 'text': { 'font-family': 'Helvetica, Arial, sans-serif', 'font-size': '14px', 'line-height': '20px', 'color': '#111113', 'link': { 'color': '#2c76ee', 'button-link': { 'font-size': '18px',, 'button': { 'font-size': '15px', 'font-weight': 'bold', 'color': '#ffffff', 'background-color': '#2c76ee' );

API Stamp Email Builder provides set of API methods allowing integrate the script with any backend system. gethtml The method returns the email s template generated HTML code. <button onclick="console.log($stamp('#stamp-container', 'gethtml'));">get HTML</button> To return formatted HTML code, pass the third TRUE parameter: <button onclick="console.log($stamp('#stamp-container', 'gethtml', true));">get HTML</button> gettemplate The method returns the template code with the changes made in the editor. <button onclick="console.log($stamp('#stamp-container', 'gettemplate'));">get Modified Template</button> To return formatted code, pass the third TRUE parameter: <button onclick="console.log($stamp('#stamp-container', 'gettemplate', true));"> Get Modified Template </button> settemplate The method sets a new template in the editor. This method accepts a template code as a third parameter. <button onclick="console.log($stamp('#stamp-container', 'settemplate', 'Template code here'));">set Template</button> getsource The method returns the original template code without any changes. <button onclick="console.log($stamp('#stamp-container', 'getsource'));">get original template</button> To return formatted code, pass the third TRUE parameter: <button onclick="console.log($stamp('#stamp-container', 'getsource', true));">get original template</button>