Shared Graphics Files
We've made four sets of blank buttons suitable for headlines on your pages. Zip archives of these button sets can be downloaded by pressing below
This link expires on 9/24/24. After that date, send requests for copies to Max Griffin 🏳️🌈   .
All images are © copyright 2023 by Max Griffin and are distributed under the provisions of the
Creative Commons CC-BY-NC License   
which permits free use of the material in any medium or format for noncommercial purposes only, and only so long as attribution is given to the creator (for example, in text area of your WDC image file).
The buttons are available in the twelve basic colors in four sets:
 Rounded buttons with a lighter tint
Rounded buttons with no tint or shade
Rounded buttons with darker shade
Art brush strokes in a lighter tint
The Buttons. ▼
How to use these files ▼
These are BLANK buttons--no text in them.
You will need third party software to add your text to these files.
There are at least two online services that do this for free.
https://onlinepngtools.com/add-text-to-png
https://products.aspose.app/drawing/en/text-on-image/png
The first of these is reliable and free, but the free version limits you to five uses a day. The second is free and unlimited, but I've had inconsistent results with it. The second is easier (when it works), and the first is more fully-featured.
You can also use Paint (installed on all Windows systems) to add labels, but I've found the above websites easier to use. With Paint, it's hard to place your text where you want it, and once you click on the frame, you can't change the text OR its position--you can only delete the text and start over. In our case, that's usually preceded by shouting our compliments about the helpful design of the program.
Of course, if you have access to Photoshop or Corel Draw, that's the way to go, but in that case you don't need these images.
The buttons are larger than you will probably want to use, but are sized so it's easier to insert text. Font size should be roughly half the height of the button. Once you've put your text on the button, you can use {image:####-NN%} in your document to scale them. Recommended scaling is 50%.
Example Pages ▼
Here are a few pages we've designed using the techniques and ideas discussed here.
Sample Contest Template ▼
we've created a sample template file for contests using some of the techniques in " Ideas on Page Design" . This sample template is fully customizable, and is complete with a set of buttons based on a short scan of those used in existing contests. The template is just a container file into which you can insert your own contest logo and information.
I've created a second set of more artistic-looking buttons with a brushstroke background and font, so there are now two versions of this. Here's what they look like:
These templates are based on the one used in
The template uses dropnotes as a navigational device. While you could just type your text for each button between the {dropnote} and {/dropnote} tags for that button, I recommned instead that you place that information in a static item. You can then use an {insert:#######} tag to insert the text into the template. This makes it easier to edit (and debug) the WritingML.
Note that {insert:#######} only works with static items and web pages. Also, the inserted text does not appear to "preserve spacing" no matter how you've set that option in your static items. Finally, while nested dropnotes are generally not permitted, if you use {insert:#######} with this template, the inserted static item may have dropnotes even though it is called from within a dropnote.
Feel free to use or modify this template as you see fit. If you use or modify it, please retain the copyright notice in the code below.
The code for each of these templates follows. To use it, copy it to your own file.
Code for standard generic contest ▼
{hide}
############## CODING NOTES 8/6/2023 ##############
This file must be customized for your contest.
Where it says ### <CONTENT> goes on the next line ### you have two options.
use an {insert:#########} to insert the number of a static item that has the content
OR type the content directly into this file, starting on the "next line" as indicated.
We strongly recommend that you place your content in separate static items and use the first method.
The countdown information at the end must also be customized or can just be hidden if you don't want to use it.
Additional buttons are available:
{image:2301606-50%} RULES
{image:2301604-50%} PROMPT (singular)
{image:2301709-50%} RESOURCES
{image:2301598-50%} BENEFICIARIES
Buttons are scaled at 50% to fit three across the page. Buttons scaled to 80% fit two to a line.
If you want to use differently sized buttons, you will need to change both the scaling and the arrangement of the buttons.
These buttons are CENTERED. The text underneath each button will also be CENTERED unless you surround it with
{left} TEXT HERE {/left}
############## END CODING NOTES ##############
{/hide}
{center}{image:2301610} {hide} ### PUT YOUR HEADER HERE ### {/hide}{/center}
{c:green}{i}{b}{size:4}Place a short introduction to your contest here.{/size}{/b}{/i}{/c}
{center}
{dropnote:"{image:2301607-50%}"} {hide} ### The Basics go on the next line ### {/hide}
{left} BASICS TEXT HERE {/left}
{/dropnote}{dropnote:"{image:2301605-50%}"} {hide} ### Prompts go on the next line ### {/hide}
{left} PROMPTS TEXT HERE {/left}
{/dropnote}{dropnote:"{image:2301600-50%}"} {hide} ### Guidelines go on the next line ### {/hide}
{left} GUIDELINES TEXT HERE {/left}
{/dropnote}
{dropnote:"{image:2301603-50%}"} {hide} ### Prizes go on the next line ### {/hide}
{left} PRIZES TEXT HERE {/left}
{/dropnote}{dropnote:"{image:2301601-50%}"} {hide} ### How to Enter goes on the next line ### {/hide}
{left} HOW TO ENTER TEXT HERE {/left}
{/dropnote}{dropnote:"{image:2301608-50%}"} {hide} ### What to Enter goes on the next line ### {/hide}
{left} WHAT TO ENTER TEXT HERE {/left}
{/dropnote}
{dropnote:"{image:2301602-50%}"} {hide} ### Past Winners### {/hide}
{left} PAST WINNERS TEXT HERE {/left}
{/dropnote}{dropnote:"{image:2301599-50%}"} {hide} ### Donors ### {/hide}
{left} DONORS TEXT HERE {/left}
{/dropnote}{dropnote:"{image:2301597-50%}"} {hide} ### Judging ### {/hide}
{left} JUDGING TEXT HERE {/left}
{/dropnote}
{/center}
{hide}
############## COUNTDOWN NOTES ##############
CONTEST COUNTDOWN
CUSTOMIZE WITH INFORMATION APPROPRIATE FOR YOUR CONTEST.
AS WRITTEN THE COUNTDOWN DOES THE FOLLOWING
places a limit of TEN in entries
Gives a closing date of August 7, 2023
Specifies a countdown ending date of 8/7/2022 0800, i.e, 8AM WDC time, August 7, 2023
Note that the date appears TWICE, once in the text and a second time in the countdown function.
Currently shows seven entries, three open slots, both in text and in symbols
############## END COUNTDOWN NOTES ##############
{/hide}
{center}
{center}{b}{u}{s:30}{/u}{/b}{/center} {hide} ### draws a line 30 spaces long ### {/hide}
Contest open for entries until we receive ten stories or {b}8:00AM August 7, 2023{/b}, whichever happens first.
Assuming we don't close early, the contest closes in {b}{c:red}{code:countdown('8/7/2023 0800')}{/c}{/b}
{b}Seven {/b}entries so far. {b}Three {/b} positions available.
{e:X}{e:x}{e:x}{e:x}{e:x}{e:x}{e:x}{e:notepady}{e:notepady}{e:notepady}
{center}{b}{u}{s:30}{/u}{/b}{/center}
Questions or comments about the contest?
please contact {hide} ### Your name here ### {/hide}
{/center}
{center}{b}{u}{s:30}{/u}{/b}{/center}
Code for brushstroke Generic Contest ▼
NOTE: the Standard Generic Contest has centered menu items and inserts additional code to align the corresponding text to the left. The Brushstroke Generic Contest does NOT have centered buttons and so needs no additional alignment code. If you want centered buttons, change this code accordingly, using the Generic Contest as a guide.
{hide}
############## CODING NOTES 8/4/2024 ##############
This file must be customized for your contest.
Where it says ### <CONTENT> goes on the next line ### you have two options.
use an {insert:#########} to insert the number of a static item that has the content
OR type the content directly into this file, starting on the "next line" as indicated.
We strongly recommend that you place your content in separate static items and use the first method.
The countdown information at the end must also be customized or can just be hidden if you don't want to use it.
Additional buttons are available:
{image:2301606-50%} RULES
{image:2301604-50%} PROMPT (singular)
Buttons are scaled at 80% to fit two across the page.
If you want to use the differently sized buttons you will need to change both the scaling and the arrangement of the buttons.
############## END CODING NOTES ##############
{/hide}
{center}{image:2301610} {hide} ### PUT YOUR HEADER HERE ### {/hide}{/center}
{c:indigo}{i}{b}{size:4}Place a short introduction to your contest here.{/size}{/b}{/i}{/c}
{dropnote:"{image:2301637-80%}"} {hide} ### The Basics go on the next line ### {/hide}
{/dropnote}{dropnote:"{image:2301626-80%}"} {hide} ### Guidelines go on the next line ### {/hide}
{/dropnote}
{dropnote:"{image:2301635-80%}"} {hide} ### Prompts go on the next line ### {/hide}
{/dropnote}{dropnote:"{image:2301628-80%}"} {hide} ### Beneficiareis go on the next line ### {/hide}
{/dropnote}{dropnote:"{image:2301638-80%}"} {hide} ### What to Enter goes on the next line ### {/hide}
{/dropnote}{dropnote:"{image:2301629-80%}"} {hide} ### How to Enter goes on the next line ### {/hide}
{/dropnote}
{dropnote:"{image:2301633-80%}"} {hide} ### Prizes go on the next line ### {/hide}
{/dropnote}{dropnote:"{image:2301632-80%}"} {hide} ### Past Winners### {/hide}
{/dropnote}
{dropnote:"{image:2301706-80%}"} {hide} ### Donors ### {/hide}
{/dropnote}{dropnote:"{image:2301631-80%}"} {hide} ### Resources ### {/hide}
{/dropnote}
{hide}
############## COUNTDOWN NOTES ##############
CONTEST COUNTDOWN
CUSTOMIZE WITH INFORMATION APPROPRIATE FOR YOUR CONTEST.
AS WRITTEN THE COUNTDOWN DOES THE FOLLOWING
places a limit of TEN in entries
Gives a closing date of August 7, 2023
Specifies a countdown ending date of 8/7/2022 0800, i.e, 8AM WDC time, August 7, 2023
Note that the date appears TWICE, once in the text and a second time in the countdown function.
Currently shows seven entries, three open slots, both in text and in symbols
############## END COUNTDOWN NOTES ##############
{/hide}
{center}
{center}{b}{u}{s:30}{/u}{/b}{/center} {hide} ### draws a line 30 spaces long ### {/hide}
Contest open for entries until we receive ten stories or {b}8:00AM August 7, 2023{/b}, whichever happens first.
Assuming we don't close early, the contest closes in {b}{c:red}{code:countdown('8/7/2023 0800')}{/c}{/b}
{b}Seven {/b}entries so far. {b}Three {/b} positions available.
{e:X}{e:x}{e:x}{e:x}{e:x}{e:x}{e:x}{e:notepady}{e:notepady}{e:notepady}
{center}{b}{u}{s:30}{/u}{/b}{/center}
Questions or comments about the contest?
please contact {hide} ### Your name here ### {/hide}
{/center}
{center}{b}{u}{s:30}{/u}{/b}{/center}
How to rearrange the buttons in these templates ▼
WritingML is what is called a markup language. This means you enter snippets of code into your text which, when displayed, results in a formatted text. This is different from a WYSIWYG (what you see is what you get) editor like Word. The downside is that Word is better described as what you see is all you get. Word has lots of features, but you're pretty much stuck with what the wizards at Microsoft think you need.
Anyway, WritingML is a markup language, and you're probably familiar with using markup to format your documents. Even if you're not, you can rearrange the buttons in these template files. Below I've outlined hyper-detailed steps on how to do this. Please don't be offended by the detail, and please be aware that there are some reasons for it. In particular, dropnotes add an order of complexity to your markup. The more complex your markup, the nastier it is to find and correct mistakes. One reason for the detail is that we've had some experience with the ways things can go amiss when you want to rearrange the buttons. Based on this experience, we've suggested some extra steps, like first arranging the buttons so the appear in one column.
Anyway, with that prelude, there is one important step you need to do BEFORE attempting to rearrange the buttons.
Make a BACKUP of the file, so if something goes wrong you can recover. To make a backup, display the page you want to edit, and open it with the full screen editor. Select the contents, press <CONTROL> C to make a copy of the contents in your paste buffer. Now open a new, blank document with your word processor or notepad. In the new document, press <CONTROL> V, which will copy the contents of your paste buffer into this new file. If something goes wrong in editing your contest, you can simply reverse this process to replace the contents of your contest file with the contents from this backup.
You've got your backup done, right? No? Then do it now, before you read any further. It's inevitable something will go wrong and you'll be sorry you don't have a backup.
Ok, we'll trust that you've really and truly backed up your file, so here is how to rearrange the buttons.
Step 1. Write down the order in which you want the buttons to appear.
Step 2. Open your file with the full screen editor and look for all the places where you see {/dropnote}{dropnote:} together, one one line, with no linefeed or or space between them.
Step 3. Insert a linefeed (carriage return) between the {/dropnote} and the {dropnote:}
 { If you save the file now and then display it, you will see all the buttons in a single column.
When the {/dropnote}{dropnote:} are together with no linefeed, your browser will try to display the two buttons on the same line.
Step 4. The code for the buttons is now arranged in groups of three, with each group representing one button. This makes them easier to rearrange in your desired order.
Carefully highlight a group of three that you want to move and press <CONTROL> X.
This erases the group of three, but saves it to your paste buffer (so it's not gone until you press another <CONTROL> X or <CONTROL> C.
Position the cursor where you want this button to appear on your list and press ENTER to be sure you start a new line.
Press <CONTROL> V to copy the group of three that you just deleted with the < CONTROL> XRepeat this process until the groups-of-three are in the order you want.
STEP 6. Save the file and view it. You should see the buttons in the desired order in one long column.
If it doesn't display properly or they are in the wrong order, try editing the file to fix your mistake.
Most often the error is that one or more of your copy steps missed an open open { or a close }.
If all else fails, recover the original file from your backup and start over.
If the file displays the buttons correctly and in the proper order, you're ready to put groups of buttons a single line.
To do this, edit the file in the full screen editor.
Find the {/dropnote} that ENDS the LAST dropnote on what you want to be your FIRST LINE.
Position the cursor at the end of that line and press <DELETE> until the {dropnote:"} that STARTS the the NEXT line of buttons is on the same line as the {{/dropnote}.
Be careful to NOT delete a { or } at this point. If you've done it right, you'll see {/dropnote}{/dropnote:"}} on the same line.
Be careful to not split the text inside the double quotes of the {dropnote:"} tag. If you're extra careful, save and display the file to be sure this step worked.
Step 9. Repeat steps 7 and 8 until the buttons are grouped and in the order you desire.
| 
View Portfolio
Visit Notebook
Send Gift Points
Awards
Badges
Send Email
Community Newsfeed
General Discussion
Sponsored Items
Book of Trinkets
Static Items
Books
Groups
Interactive Stories
Audio
Campfire Creatives
Community Notes
Crossword Puzzles
Documents
Folders
Images
In & Outs
Madlibs
Photo Albums
Polls
Product Reviews
Quizzes
Survey Forms
Web Pages
Word Searches
