GO



   FRONT	
  END	
  
DESIGNERS	
  GUIDE
   (all	
  you	
  need	
  to	
  know	
  about	
  
   designing	
  with	
  CSS...
FRONT END DESIGN GUIDE - DESIGN TAB

Basic Design Tab: The first thing to do is download the CSS style sheet file which cont...
FRONT END DESIGN GUIDE - DESIGN TAB


 Classes and IDs can be added to the HTML and CSS.

 The primary div order and struc...
FRONT END DESIGN GUIDE - IMAGES




 Logo Image:
 The logo image resides in a div with and ID of #promo-header. The full C...
FRONT END DESIGN GUIDE - IMAGES

Connect Button:
The connect button exists within a class called .connect-button. The full...
FRONT END DESIGN GUIDE - IMAGES


 Tweet Button:
 The tweet button is positioned automatically below the bottom left corne...
FRONT END DESIGN GUIDE - HTML & CSS

 Adding html tags and attributes to text entered in the landing, twitter and exclusiv...
FRONT END DESIGN GUIDE - HTML & CSS


The positioning to the left and right can be controlled either through adding margin...
FRONT END DESIGN GUIDE - HTML & CSS


Controlling the width of the text on the landing, twitter and exclusive page.
The wi...
FRONT END DESIGN GUIDE - HTML & CSS


Controlling the positioning of the tweet box
The tweet box on the Twitter page resid...
FRONT END DESIGN GUIDE - HTML & CSS

 Controlling the positioning of the actions button
 The actions button position is co...
FRONT END DESIGN GUIDE - TEXT


Text styles
All header tags except H5 and H6 use Cufon text replacement. the font displaye...
Upcoming SlideShare
Loading in …5
×

PromoJam - Front End Design Guide

596 views
536 views

Published on

PromoJam - Front End Design Guide

Published in: Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
596
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

PromoJam - Front End Design Guide

  1. 1. GO FRONT  END   DESIGNERS  GUIDE (all  you  need  to  know  about   designing  with  CSS  &  HTML)  
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×