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_Menu.png

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

Top_Row_Icons.png

 

The Icon Sets we'll demonstrate from the top row consist of the following 6 groups: 

1) Text format options to make your text bold or italicized using these 2 Icons: 

Text_Format_Options.png

 

Watch this short video clip to see how you use these WYSIWYG icons:

 

2) Create bullet or numbered lists and tables with this icon set. The 2 on the left with the 3 horizontal lines are for making lists, and the 3rd icon is used to create new tables.

List_and_Table.png

 

Watch and learn how to make bullet and numbered lists with your Tendenci WYSIWYG: 

 

3) Align your text to the left, center, or right side of the page with these WYSIWYG icons:

Align.png

 

Watch this video to learn how to align your text and images left, right, or center on the page:

 

4) Select text and make it either a hyperlink to another web page, or a mailto: address that sends an email using the icons that look like a chain link and a broken chain.

Link_Icons.png

 

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!

Primary Button      Default Button

These look like regular links in the Wysiqyg Editor but will display on your site as Buttons!

 

5) Upload files and images and embed them in your web page using the Media Uploader icon. 

Upload_Media.png

When you click on the icon to attach Media files, the uploader window will pop-up!

  

6) You can upload PDFs by creating a link.

click link screenshot tendenci

pdf upload through Links

 

7) Use the fullscreen icon to pop-up a full screen editor view of the page

full screen icon 

 

8) Click the "Source Code" icon to pop-up a window for editing the HTML version of your page. 

code editor 

This video shows you how the HTML icon gives you access to an html editor:


More Formatting Options

Bottom_Row_Icons.png

 

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.

Dropdown.png

Watch this video clip to see the dropdown format icon in Action! 

 

10) Align Full and Font Color Change Icons: 

Color.png

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:

 

11) Indent and Outdent icons make it easy for you to quickly indent or outdent blocks of content. 

Indent_and_Outdent.png

 

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. 

Undo_Redo.png

Click on the video to see how to use the Undo and Redo icons: 

 

Did this Help File answer your question?  If not - email your question to our support team or visit our Tendenci Forums for more help!

Contact us to upgrade to Tendenci!

Finally, an open source option for associations. Fully functional. 100% customizable.

Give us a call: (281) 497-6567

Sign up for Tendenci

No per user pricing. Unlimited admins.

Demo Now

Still have Questions?

Contact us!

Site Search