PromoJam - Front End Design Guide
- 1. GO FRONT END DESIGNERS GUIDE (all you need to know about designing with CSS & HTML)
- 2. FRONT END DESIGN GUIDE - DESIGN TAB Basic Design Tab: The first thing to do is download the CSS style sheet file which controls the display of the promotion. You will find this under the area that says “STYLESHEET”. There you will see a link that says: “Right click to download default CSS.” Changes made to the style sheet are reflected on the landing, Twitter and exclusive page as ! they all share the same structure and stylesheet . Once any changes are made to either the style sheet or the content area, click the save button at the bottom then the preview button at the top to see your changes. !
- 3. FRONT END DESIGN GUIDE - DESIGN TAB Classes and IDs can be added to the HTML and CSS. The primary div order and structure you will be working with is listed in the graphic below. 3
- 4. FRONT END DESIGN GUIDE - IMAGES Logo Image: The logo image resides in a div with and ID of #promo-header. The full CSS path is: body> #content > .promo-wrapper. Changes made to the text alignment of the class .promo-wrapper effect the positioning of the logo. Uploading images Images cannot be uploaded into PromoJam however they can be uploaded to a third party image hosting service or anywhere you can obtain a URL for the image. Once you have the URL for the image you can insert into the landing, Twitter and exclusive page content areas with HTML tags. This will allow you to insert images exclusive to each page. Positioning attributes of images can only be controlled through inline styles. 4
- 5. FRONT END DESIGN GUIDE - IMAGES Connect Button: The connect button exists within a class called .connect-button. The full path to which is: body > #content > .promo-wrapper > .promo-main > promo-content layout-center template > .connect- button. The connect-button class is centered by default under the text entered for the landing page content. It can be repositioned either through adding or removing margin to it or it can be positioned absolutely. If positioned absolutely it will be relative to the top left corner of its parent div .promo-content.layout-center. 5
- 6. FRONT END DESIGN GUIDE - IMAGES Tweet Button: The tweet button is positioned automatically below the bottom left corner of the tweet box message area. Background image: The background image is automatically centered as a background image of the body tag. Only one background image can be uploaded which will be used for all pages. 6
- 7. FRONT END DESIGN GUIDE - HTML & CSS Adding html tags and attributes to text entered in the landing, twitter and exclusive page. HTML code can be added to any of the text in the content area for the landing, twitter or exclusive page. Buttons are also provided for easier code insertion. Div classes can also be added. Controlling the positioning of the text on the landing page, twitter page and exclusive page. All the of the content below is inside a div class named .promo-wrapper. This div is positioned relatively and its default width, which can be changed, is set to 720px. The positioning of the text entered on the landing page content, exclusive page content, twitter page content, and tweet box on the twitter page of PromoJam is controlled through a div class called .promo-content.layout-center. The positioning of this div will also affect the positioning of the connect button which resides in this div. 7
- 8. FRONT END DESIGN GUIDE - HTML & CSS The positioning to the left and right can be controlled either through adding margin to the class .promo- content.layout-center or positioning it absolutely. If .promo-content.layout-center is positioned absolutely, it will be relative to the top left corner of its parent div class .promo-main which is positioned relatively. 8
- 9. FRONT END DESIGN GUIDE - HTML & CSS Controlling the width of the text on the landing, twitter and exclusive page. The width of the text box on the landing, Twitter and exclusive page is controlled through a div class named .promo-content. 9
- 10. FRONT END DESIGN GUIDE - HTML & CSS Controlling the positioning of the tweet box The tweet box on the Twitter page resides under any text entered into the twitter content area. It has a class name of .tweet-box. 10
- 11. FRONT END DESIGN GUIDE - HTML & CSS Controlling the positioning of the actions button The actions button position is controlled through a div class called .action-column.layout-center. By default this is positioned in the center of its parent div .promo-main. It can be positioned through margin spacing or by positioning it absolutely. If positioned absolutely it will be from the top left corner of its parent div .promo-main. 11
- 12. FRONT END DESIGN GUIDE - TEXT Text styles All header tags except H5 and H6 use Cufon text replacement. the font displayed for the appropriate tag is shown below. The only property that cannot be changed for those fonts using Cufon is the font face. Properties of the paragraph tag and H6 tag can be controlled by giving them a class name and creating an appropriate class in the style sheet or through inline styles. The positioning of text can be controlled through assigning class names or through inline styles . 12