View site in English, Español, or Français
The fair-trade ticketing company.
Sign Me Up!  |  Log In
 
Find An Event Create Your Event Help
 
HTML Examples [Brown Paper Tickets Demo Test Event]
Brown Paper Tickets
Seattle, WA
Share this event:




PLEASE NOTE

You must first remove the *ASTERISKS* from the HTML code for it to format properly



CHANGING FONT SIZES


Header 1

<*h1>Header 1<*/h1>

Header 2

<*h2>Header 2<*/h2>

Header 3

<*h3>Header 3<*/h3>

TEXT MODIFIERS


bold <*b>bold<*/b>
italic <*i>italics<*/i>
underline <*u>underline<*/u>
link <*a href="URL for link">link text<*/a>
;;;;  You can also use this to change font color, but the link won't lead anywhere so it may look a little funky.

Example:

Header 1


This is a "Header 1 with a link around it, so it makes the header stand out. But if they click the header, it's just going to take them back to the event page again.



Links to a website
<*a href="URL for link">website<*/a>
brownpapertickets.com


Links that create an email
You can also make links extra awesome. You can make it a link so that when you click it, it creates an e-mail to a specified e-mail address:

<*a href="mailto:emailaddress@domain.com">email me!<*/a>
email me!

Open the link in a new window
You can also make it so that it opens the link in a new window, instead of in that same tab:

<*a href="URL" target="_blank">new window!<*/a>
new window!

Blockquote
You can also do blockquote text, which will indent entire sections of text. The HTML for it looks like this:

<*blockquote>text<*/blockquote>
This is good if you do a header and want to indent the text beneath it. Here's an example:

National Radio Day (in Header 2)


"Seattle-area radio lovers, listeners, indie producers and stations, save the date for National Radio Day, August 20. Coordinated by our Doer, Sabrina Roach, the flagship event for the first coast-to-coast celebration will happen right downtown.

Radio enthusiasts are welcome to stop by, view an interactive 6-foot-tall radio tower installation and see a youth-run pop-up radio station"


EMBEDDING



IMAGES
Images: <*img src="image url">
You can upload images in places like tinypic, or imageshack. Worth noting is that imgur and tinypic don't require accounts, but imageshack does.

We recommend a maximum width of 300 pixels for ideal viewing on our standard and mobile sites.

Image embed!


GIFS work too!


FORMATTING
You can also do fancy stuff like rounding the edges of an image! This is a little more advanced, so if you don't feel comfortable doing it, I totally understand! However it is worth noting that not only can you round the images, but you could also turn something icon-sized into a circle.

<*img src="IMAGE URL" style="border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px;">

The border radius parts are how many pixels in that you want to round those edges. Right now they're set to 15, so it'll look something like this:



You can also make it so that if you want an image, you can have the text wrap around it!

"I'm excited to announce that with Brown Paper Tickets help, we've been able to collect and send merchandise to a burgeoning roller derby league in Lebanon Roller Derby Beirut (RDB). We now have new tools in place to collect more supplies and raise funds so this league can continue.

The funds will be used to purchase new gear for RDB. I'm proud to be a part of this initiative. However, none of it would have been possible without Elisabeth Wolffhechel, aka LOL of the A-team out of Copenhagen, Denmark." - Bob Noxious

The coding is basically the exact same as a regular image. The one above has the rounded edges, but for a basic image with text alignment it looks like this:

<*img src="IMG URL" align="right">

The "align" is how the image will align. So in this case I have the image to the right and the text to the left.


Make an image a Hyperlink!

In order to make this work, you need to:

1. Upload the image to one of the hosting sites listed above (TinyPic recommended).

2. Once you get the image URL, copy it in its entirety and then remove:
    a. everything before the end of img src=
   
    b. everything after the ">" after "by TinyPic"

Image and video hosting by TinyPic

3. Once these have been removed, copy and paste what remains of the image URL in the HTML tag
   
IMAGE HYPERLINK CODE: <*a href="website URL"><*img src="image URL"*>

Image and video hosting by TinyPic

Then, insert the website URL and presto! Image hyperlink.

Image and video hosting by TinyPic

Alt Text for the Visually Impaired
If you want to do something really cool, you can also assist the visually impaired by editing the "alt text". Alt text is a word or phrase that is inserted as an attribute in an HTML document to explain or describe the nature and contents of an image.

Image and video hosting by TinyPic

This can be edited to assist the visually impaired by explaining the image when using a Screen Reader. For this image, we inserted the phrase, "Assorted Kitchen Tools Image"

Image and video hosting by TinyPic

So the text "Assorted Kitchen Tools Image" can be read out loud through a Screen Reader Tool.

Assorted Kitchen Tools Image/


VIDEOS


You can also embed things from websites like YouTube and Bandcamp! They all should have pre-determined embedding options.

YouTube:
Go to the video, and click "Share" then Embed.

Image and video hosting by TinyPic

Copy the and Paste Embed code:

Image and video hosting by TinyPic

Which looks like this when embedded:




Bandcamp:

When you go to an artists page, you'll want to click on the individual song from a tracklist. From there you'll be able to embed a song:

Image and video hosting by TinyPic

Next, click "Embed this video"

Image and video hosting by TinyPic

Pick one of the layout options, and copy and paste the provided link.

Image and video hosting by TinyPic

It will look like this when embedded using the first embed option:





OTHER STUFF!


You can also do lists. You can have it so that it has bullet points next to them, or if you want a numbered list.

Unordered List:

<*ul>
<*li> list item 1
<*li> list item 2
<*li> list item 3
<*li> list item 4
<*/ul>

UL stands for "unordered list", and "LI" is for each new list item. It looks like this:


  • list 1
  • list 2
  • list 3
  • list 4


Ordered List:

<*ol>
<*li> list item 1
<*li> list item 2
<*li> list item 3
<*li> list item 4
<*/ol>

Same info as above except OL is an "ordered list".

Looks like this:


  1. list 1
  2. list 2
  3. list 3
  4. list 4



Line Spacing

To use double height line spacing within a paragraph, add the following to your paragraph tag:

style="line-height:2.0"

The final tags would look something like this (without the asterisks!):

<*p style="line-height:2.0"> Searching for untold stories and fresh perspectives? Look no further. From April 21 until April 23, the Cinema Les 7 Parnassiens in Paris will host the 12th edition of ECU. Highlights include 73 films from 28 countries, 3 workshops with industry professionals, and for the first time this year, a round table of female directors (28 were selected to be part of this years festival). The European Independent Film Festival has made a name for itself and has become a reference for indie filmmakers throughout the world.<*/p>

To achieve this result:

Searching for untold stories and fresh perspectives? Look no further. From April 21 until April 23, the Cinema Les 7 Parnassiens in Paris will host the 12th edition of ECU. Highlights include 73 films from 28 countries, 3 workshops with industry professionals, and for the first time this year, a round table of female directors (28 were selected to be part of this years festival). The European Independent Film Festival has made a name for itself and has become a reference for indie filmmakers throughout the world.



*Other values such as 1.5, 2.5, 3 etc can be used to achieve different line spacing.
Saturday Jan 31, 2099 12:00 AM - Saturday Jan 31, 2099 12:00 PM | Free

Location

Brown Paper Tickets (View)
220 Nickerson St
Seattle, WA 98109
United States


Categories

None

Contact

Remind Me

Outlook/iCal/Sunbird

Google Calendar

Email me days before.

Contact us
Email
support@brownpapertickets.com
24/7 Customer Service
1-800-838-3006 US, Canada, Puerto Rico
Resources
Careers
Developers
Help
Ticket Buyers
Track Your Order
Browse Events
Locations
Event Producers
Create an Event
Pricing
Services
Buy Pre-Printed Tickets
The Venue List
Find out about local events
Get daily or weekly email notifications of new and discounted events in your neighborhood.
Sign up for local events
Connect with us
Follow us on Facebook
Follow us on Twitter
Follow us on Instagram
Watch us on YouTube
Read our blog
Get to know us
Use of this service is subject to the Terms of Usage, Privacy Policy, and Cookie Policy of Brown Paper Tickets. All rights reserved. © 2000-2019 Mobile EN ES FR