Compare Revisions

Create Tutorial using the Knowledge Base Popup Tutorial Template

Revision 57145:

Revision 57145 by sabinab on

Revision 57154:

Revision 57154 by sabinab on

Keywords:

Search results summary:

This article describes how to modify the Knowledge Base Slide Tutorial to any content.
This article describes how to modify the Knowledge Base Slide Tutorial to any content.

Content:

This slide deck is built in Webmaker Thimble, essentially a what-you-see-is-what-you-get editor that also will host your make. To begin you need a Webmaker account. # Click [https://webmaker.org/en-US/ here] to make an account if you do not have one already. # Once you have an account copy and paste this make [https://binab.makes.org/thimble/knowledge-base-take-8] in a new browser window. # Click the [https://support.mozilla.org/en-US/kb/remix-button-thimble Remix] button to create your own make. You should now have a window with a text editor full of code on the left and the slides on the right. [[Image:Thimble Window]] There are different types of slides each individual slide is marked with <--! and a note about what kind of slide it is. * Image Slide w/ text - has a main image, text can be above or below * Large Font - All caps, large font * Video/iFrame - Insert a video or iFrame, 370 by 208 pixels is a nice size. * Text Slide - Small text you can use strong tags to create small headers * Text with Header Slide - Use h2 tags to create al caps headers. * List Slides - Numbered (ol) and bullet lists (ul) Cut and paste and edit each slide to fit your criteria. Images: You will need a public folder or source for any images you want to display. I chose [https://www.dropbox.com/login?cont=https%3A//www.dropbox.com/enable_public_folder DropBox] you can use any source, flicker etc. Once your slide deck is complete you will move onto inserting it into the button code and then you can put your button anywhere! In the upper right corner of yout Thimble is a "Publish" button. Click that and follow the instructions to save your make. At the end you will be given a link to copy. Copy the link. With that link on your clipboard then open this Thimble make for the button [https://binab.makes.org/thimble/button] Paste your link over the exisitng one on line 16. You should be able to click the new button in the WYSIWYG window on the right. Change the name of the button to your desired text on line 16 by editing "Become a Tech Writing Ninja". You can now select the code between lines 9 and 42 and paste them wherever you would like your button to appear. Thanks!
This slide deck is built in Webmaker Thimble, essentially a what-you-see-is-what-you-get editor that also will host your make. To begin you need a Webmaker account. # Click [https://webmaker.org/en-US/ here] to make an account if you do not have one already. # Once you have an account copy and paste this make [https://binab.makes.org/thimble/knowledge-base-take-8] in a new browser window. # Click the [https://support.mozilla.org/en-US/kb/remix-button-thimble Remix] button to create your own make. You should now have a window with a text editor full of code on the left and the slides on the right. [[Image:Thimble Window]] There are different types of slides each individual slide is marked with <--! and a note about what kind of slide it is. * Image Slide w/ text - has a main image, text can be above or below * Large Font - All caps, large font * Video/iFrame - Insert a video or iFrame, 370 by 208 pixels is a nice size. * Text Slide - Small text you can use strong tags to create small headers * Text with Header Slide - Use h2 tags to create al caps headers. * List Slides - Numbered (ol) and bullet lists (ul) Cut and paste and edit each slide to fit your criteria. VERY IMPORTANt: Each slide needs a unique id in the opening div tag. The first slide is "cover" leave it as "cover". The rest you can re-name with unique names. Images: You will need a public folder or source for any images you want to display. I chose [https://www.dropbox.com/login?cont=https%3A//www.dropbox.com/enable_public_folder DropBox] you can use any source, flicker etc. Once your slide deck is complete you will move onto inserting it into the button code and then you can put your button anywhere! In the upper right corner of yout Thimble is a "Publish" button. Click that and follow the instructions to save your make. At the end you will be given a link to copy. Copy the link. With that link on your clipboard then open this Thimble make for the button [https://binab.makes.org/thimble/button] Paste your link over the exisitng one on line 16 leaving "_?full#cover" at the end of the link. This will open your slide deck to the first slide when the popup is opened. You should be able to click the new button in the WYSIWYG window on the right. Change the name of the button to your desired text on line 16 by editing "Become a Tech Writing Ninja". You can now select the code between lines 9 and 42 and paste them wherever you would like your button to appear. Thanks!

Back to History