Styles Page

EXAMPLE OF HEADER AND BODY TEXT:

Header 3 – Verdana 24px #262626

Header 4 – Verdana 16px #0eafc4

Body Text-Verdana 11px #262626 Line spacing 18pt

 

EXAMPLE OF TEXT AND LINKS:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et risus turpis. Aliquam at auctor magna. Nam consectetur hendrerit mauris ut sagittis. Vivamus in ipsum orci, in blandit odio. link text is underlined and 0eafc4, interdum ut viverra elementum, lacinia ut erat. Etiam vitae orci non mi suscipit suscipit ac a nulla. Etiam scelerisque nulla vitae velit sollicitudin facilisis. Cras molestie eleifend egestas. Phasellus pulvinar elit et augue mollis euismod.  

 

EXAMPLE OF TEXT WRAP PADDING FOR IMAGE LEFT ALIGNED:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et risus turpis. Aliquam at auctor magna. Nam consectetur hendrerit mauris ut sagittis. Vivamus in ipsum orci, in blandit odio. Curabitur augue urna, interdum ut viverra elementum, lacinia ut erat. Etiam vitae orci non mi suscipit suscipit ac a nulla. Etiam scelerisque nulla vitae velit sollicitudin facilisis. Cras molestie eleifend egestas. Phasellus pulvinar elit et augue mollis euismod. Nullam se orci non mi suscipit suscipit ac a nulla. Etiam scelerisque nulla vitae velit sollicitudin facilisis. Cras molestie eleifend egestas. Phasellus pulvinar elit et augue mollis euismod. Nullam sed turpis eleifend egestas. Phasellus pulvinar elit et augue mollis euismod. Nullam sed turpis.

 

EXAMPLE OF TEXT WRAP PADDING FOR IMAGE RIGHT ALIGNED:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et risus turpis. Aliquam at auctor magna. Nam consectetur hendrerit mauris ut sagittis. Vivamus in ipsum orci, in blandit odio. Curabitur augue urna, interdum ut viverra elementum, lacinia ut erat. Etiam vitae orci non mi suscipit suscipit ac a nulla. Etiam scelerisque nulla vitae velit sollicitudin facilisis. Cras molestie eleifend egestas. Phasellus pulvinar elit et augue mollis euismod. Nullam se orci non mi suscipit suscipit ac a nulla. Etiam scelerisque nulla vitae velit sollicitudin facilisis. Cras molestie eleifend egestas. Phasellus pulvinar elit et augue mollis euismod. Nullam sed turpis eleifend egestas. Phasellus pulvinar elit et augue mollis euismod. Nullam sed turpis.

 

EXAMPLE OF A BLOCK QUOTE:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et risus turpis. Aliquam at auctor magna. Nam consectetur hendrerit mauris ut sagittis. Vivamus in ipsum orci, in blandit odio. Curabitur augue urna, interdum ut viverra elementum, lacinia ut erat. Etiam vitae orci non mi suscipit suscipit ac a nulla. Etiam scelerisque nulla vitae velit sollicitudin facilisis. Cras molestie eleifend egestas. Phasellus pulvinar elit et augue mollis euismod. Nullam sed turpis.

 

EXAMPLE OF A UNORDERED LIST:

  • Unordered List Item Number One
  • Unordered List Item Number Two
  • Unordered List Item Number Three
  • Unordered List Item Number Four
  • Unordered List Item Number Five

 

EXAMPLE OF A ORDERED LIST:

  1. Ordered List Item Number One
  2. Ordered List Item Number Two
  3. Ordered List Item Number Three
  4. Ordered List Item Number Four
  5. Ordered List Item Number Five

 

EXAMPLE OF HOW TO EMBED YOUTUBE VIDEO:

(copy and paste the following, and replace the youtube URL with your video URL)

[youtube=http://www.youtube.com/watch?v=xXXXXXxx_x]    

 

EXAMPLE OF HOW TO CREATE A FORM FOR AN EVENT IN GOOGLE DOCS

(this is important to add the google doc items in the correct order so the input fields will match up with the code below)

1. First thing you want to do is change the “Untitled form” to the name of the event.

2. Next, the first two fields are already populated for you, so you just need to add the question titles.  The first Question Title will be “Name”, and the second Question Title will be “Email”.

3. Next, you will go to the top left of the screen and click, “Add Item”, and choose “Text”, once it adds the items field below, just add the question title, which will be “Phone”.

4. Next, you will go back to the top left of the screen and click, “Add Item”, and choose “Multiple Choice”.  Once it adds the items field below, just add the question title, which will be “Have you taken the Journey course?”.  In addition, for this field you will just have to fill in the two option types, for ‘Yes’ and ‘No’.  So where it has “Option 1″, type “Yes”, and hit enter, and it should then display “Option 2″, and you can type “No”.  Click “Done”.

5. The last item you will need to add is the textarea, so you will go to the top left of the screen and click, “Add Item”, and choose “Paragraph text”, and once it adds the items field below, just add the question title, which will be “Questions and comments”.

6. Now, that all of your form items are created, you can go to the top right of the window and click “Save”.

7. In order to get the google docs form key, which will be used when adding the form code to the event, you should see an option at the bottom of your screen that looks similar to:

You can view the published form here: https://spreadsheets.google.com/a/blueoceanideas.net/spreadsheet/embeddedform?formkey=dDk2Z2d3Q05WQXRpdGNJWU9kY0s1VGc6MQ

All you need to copy is the text that is highlighted red, which is the form key.  

 

EXAMPLE OF HOW TO ADD A FORM TO AN EVENT

(copy and paste the following while in the HTML tab of the WYSIWYG Editor, and replace the google docs form key in bold with the newly created google docs form key for that particular event)

<div class="event-form">
<h1>Sign Up to Volunteer</h1>
<form action="https://spreadsheets.google.com/spreadsheet/formResponse?formkey=dHJydHhlMnNjbk1kZzBXeGRjTWlKQUE6MQ&amp;ifq" method="POST">
<div class="l-text">
<input id="entry_0" name="entry.0.single" type="text" value="Name" /></div><br class="clear" />
<div class="l-text"><input id="entry_1" name="entry.1.single" type="text" value="Email" /></div><br class="clear" />
<div class="l-text"><input id="entry_2" name="entry.2.single" type="text" value="Phone" /></div><br class="clear" />
<div class="r-radio">Have you taken the Journey course?<br class="clear" />
<input id="entry.3.group" name="entry.3.group" type="radio" value="Yes" /><h5>Yes</h5><input id="entry.3.group" name="entry.3.group" type="radio" value="No" /><h5>No</h5></div><br class="clear" />
<div class="r-textarea"><textarea id="entry_4" name="entry.4.single">Questions, or comments?</textarea></div>
<br class="clear" />
<input class="form-btn" style="float: right;" name="submit" type="submit" value="submit" />
</form></div>