What's on this page?
The majority of Tendenci's content description or body fields have what we call a "WYSIWYG" menu consisting of icons like the one you'll see in the screenshot below:
WYSIWYG --> "What You See Is What You Get", pronounced "wiz-ee-wig"
This help file is intended to describe what each of the icons does so you can use the WYSIWYG (aka Rich Text Editor menu) to format your website's pages so the text and images look professional and are easy to read.
Tendenci uses the open source software called TinyMCE, which is one of the most widely used WYSIWYG editors, and so you'll probably see these icons as options in other web applications besides your Tendenci site. Our intent with this guide is to help you familiarize yourself with the icons so you'll know how to use them on any Internet application you run into.
Defining the Icons with Examples
We've split the WYSIWYG menu icons into sections below, with screenshots and then examples of different formatting options for text, graphics, and hyperlinks available for you to use. There are some short videos for some of the examples that demonstrate using the WYSIWYG options to show you how they work in action.
We'll start with the top row of icons and work from left to right, then drop to the second row and again, go left to right.
The Top Icons
1) Text format options to make your text bold or italicized using these 2 Icons:
Watch this short video clip to see how you use these WYSIWYG icons:
Watch and learn how to make bullet and numbered lists with your Tendenci WYSIWYG:
Watch this video to learn how to align your text and images left, right, or center on the page:
Create Hyperlinks and Email Address Links inside Your Pages:
Update: In T7 2017 sites, we added a new feature for creating buttons. When adding a link, use classes to create a "Primary Button" or "Default Button" that is defined in your website's theme!
These look like regular links in the Wysiqyg Editor but will display on your site as Buttons!
When you click on the icon to attach Media files, the uploader window will pop-up!
This video shows you how the HTML icon gives you access to an html editor:
9) The dropdown menu with options including Format and Paragraph let's you select text and change it's formatting. You would use this icon for formatting different blocks of content on your page such as your headers (H1, H2, H3...) for section titles, as well as other, custom formatting options like paragraph text and addresses. This tells accessibility readers and search engine crawlers key details about the importance of each block of text so it can identify chapter headings and keywords better.
Watch this video clip to see the dropdown format icon in Action!
The Align Full icon will "stretch" the selected content across the full width of the page. You'll use the Color Change icon to select and change font colors within your content.
Here's a video that shows you how the Align Full and Font Color Change icons work:
Here's a demonstration of the Indent and Outdent icons:
12) The final pair of icons on the WYSIWYG are the Undo and Redo buttons. These buttons allow you to undo the last change you made, or redo a change after you use the "undo" icon. These icons will become highlighted when they're available for using, and will "fade" or dim if you don't have anything you can Undo or Redo.
Click on the video to see how to use the Undo and Redo icons: