Stay Informed

CIRES | Education and Outreach

made with by CIRES IT

WYSIWIG

WYSIWIG

 

WYSI-WHAT? 

W.Y.S.I.W.I.G.  ('Wiz-E-wig') : 'What you see is what you get'

The Wysiwig is the set of tools that allow you to edit text online just like you would in a word processor like Microsoft Word. The main difference is that our Wysiwig ( CIRES WYSIWIG ) comes with some great tools directly baked in to make your editing easy and powerful.

In this section we will go over the following uses:

 


CIRES WYSIWIG / SOURCE CODE

You have the option to edit your content using the CIRES WYSIWIG or with plain ol' HTML. You can change between the two by changing the TEXT FORMAT just below the editing window. 

NOTE THAT CONTENT WON'T ALWAYS LOOK 1:1 as it will after you save and view outside of edit-mode.

The first few items on the toolbar from left to right will be immediately familiar if you have used other text editors. Bold, Italics, Alignment, quotes, bulleted lists, numbered lists. But let's focus on adding LINKS.

 


ADDING / REMOVING LINKS

Highlight the text you wish to link and select the LINK button. The link pop-up will display which walks you through adding internal, external, email and even anchor links. 

There are plenty of options in this pop-up, feel free to play around and get the link to work the way you want

To take the link off of an item highlight it and press the 'un-link' button and the link and all attributes will be taken off.

 


 

ADDING AN IMAGE

Adding an image is as simple as hitting the media button - the one that is in color that has the picture of a mountain with another behind it. After pressing the media button you will have a pop-up that gives you a few options:

The most common option will be to UPLOAD directly from the pop-up but you can also import from the web or from already uploaded content from the media Lirbary.
  • Upload - upload an image from your local machine
  • Web - upload an image from an URL 
  • Library - browse and select an already uploaded image from this sites Media Library

For this tutorial we will upload the photo. After choosing your file and submitting you will have the option to change the alt-text as well as the image format. The image format dictates how your image will display - in this example we will choose 'Full-width', which spans across the full width of the text area.

 


CAPTIONS

Often times you will want to add captions to your images, to do so is nearly as simple as creating a link in our previous tutorial. After you have uploaded your image into the body of the WYSIWIG type your caption text and then highlight both the caption text and the image you want it to be contained with.

 

After the caption STYLE places all the code around the objects - if you're every curious check out what these styles are doing in the source code.

That's it! You now have an image that has a perfectly styled caption.  Do note that you can add links within these captions simply by highlighting the caption text and creating a link as normal.

 

 


 

STYLES

The CIRES WYSIWIG has some great styles built right in here are examples of the basic styles so you can see how they all work together. To apply any style select the text or content you wish to apply the style to, after selected browse the STYLES dropdown and then select the STYLE you want. 


H2 : Header Two
H3 : Header Three
H4 : Header Four
H5 : Header Five
H6 : Header Six

Thin : Thin text

Tall,Thin : Tall, Thin Text

Intro Text: Intro Paragraph Text

Label Default

Label Primary

Label Success

Label Warning

Label Warning

Well