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