• Pi Beta Phi Facebook
  • Pi Beta Phi Twitter
  • Pi Beta Phi YouTube
  • Pi Beta Phi Blog
  • Pi Beta Phi Flickr
  • Pi Beta Phi LinkedIn
  • Pi Beta Phi Pinterest
  • Pi Beta Phi Instagram
Webmaster Resource Center Header

Tips and Tricks

Pi Phi's content management system is easy to use and very customizable, but it can take some time to get the hang of layout and text content design. It can be tricky and doesn't always display the way we want it to, but we've come up with a few tips to help you present your content in a more readable and engaging way.

The Secret HTML Button
If you are skilled in HTML programming and would like to tailor your content using code strings, click the small <> button on the bottom left of the workspace screen when you are editing your content area. The source code for that content block will display. Click the small "pen" button to return to your visual workspace.

What You See is Not Always What You Get
You may spend a lot of time organizing your content, bolding and changing fonts, copying and pasting and tweaking spacing, but the page content never seems to look like it does in the workspace.

That's because your browser displays your content based on its settings, as well as the style settings you've created, and the settings for your particular template. Remember you're designing for your browser, not for the visual workspace. You may have to go through several generations of tweaking to get it to look the way you want — and on a Mac, it might look completely different!

The Edit Menu
Right-clicking on the bubble in the upper left corner of the content box will bring up the Edit Menu. Unless you have made a mistake and would like to use the History button to go back to an earlier-saved workspace, use the Edit button to access your work area. The Edit in Context button is new and has been causing a few bugs.

If you do not have an Edit button option, the page is checked in and not available for edit. This often happens by mistake and requires the page to be checked in by the user who previously opened the page for edits.

Always Publish...Never Save
Using the Save button instead of the Publish button to save your work has caused issues for many webmasters. On some occasions, hours of work has been lost because some have assumed that Save and Publish are essentially the same thing, and have wiped out their saved content by mistake because they used the Save button but noticed that the new work was not displaying, and have tried to start over. For safety's sake, only use the Publish button when editing your content!

Removing Those Pesky Dots
When Pi Phi upgraded to Ektron 8, the work area changed slightly and the CMS now tends to add spaces at times. Little dots now appear in those spaces. According to Ektron, those little dots just represent where an invisible space is, and are nothing to worry about - they will disappear when you publish the page. The spaces, however, will still remain. Most of the dots appear at the beginning of a line or paragraph...simply place your cursor to the left of the first letter of your paragraph or headline and press Backspace to eliminate the dot. When you publish, your text will then be flush to the left without a space.

Adding Photos
It's difficult to place photos within your content area sometimes — they seem to have a mind of their own if you try to place them next to your text or in the center of the screen. If they're too big, the site's graphics may get pushed off to the side. Your page may also take FOREVER to load if you have multiple, large photos.

Keep your photos to a reasonable size. That will decrease loading time and will safely display the page without messing up the layout. A 400 pixels-wide photo is plenty big, even for websites that have wide content areas.

If you snap a 2 MB picture, chances are that the photo will be way too big. Even if you decrease the size of the photo in Ektron, the file size will be huge and the page will load slowly. Use your computer's imaging program or Photoshop to resize them to about 400 pixels before importing them into Ektron.

How to add a Photo:

  1. Open the page to edit.
  2. Put your cursor where you want the photo to appear
  3. To add a new photo, click on the library tab that looks like a book in the tool bar and a new window will open.
  4. Click the add library button
  5. Type the title and then click choose file. You will find the file on your browser. 
  6. Click the add library button. 
  7. The photo will be added to the edit page.
  8. If you right click on the image, you can set image properties including size.

Please note that you cannot copy and paste an image into the editing window. When you publish the page, you will get a blue question mark where the photo is supposed to be.

Choosing Fonts
Each template will publish your content in a predetermined font and size. This enables your website text to look the same on each page. Manually editing the fonts on the page will cause your text to vary from page to page, which is not a best practice. 

If you want to create headers, each template is programmed with predetermined options. In the Paragrah Style drop-down menu, there are four header options to choose from. H1 is the largest in size and H4 is the smallest. Using these will assist with keeping your page headers uniform. 

If you'd like to add a little excitement to your page and feel that the fonts offered by the CMS are too boring, use Photoshop or some other imaging program to create a fancy, colorful title, save it as a jpeg, and import it into your page as you would a photograph! You can import graphics, clip art, etc. to your page as well, just as you can a photo, to add more color and appeal to your site.

Working with Microsoft Word
If you are writing your content in Word, and then copying and pasting into Ektron, the text can carry Microsoft tags that will disrupt the display of your copy, including things that can't be fixed without adjusting the HTLM code or wiping out the entire content area and starting over.

If possible, write your text content directly into Ektron, do not import it. If that is not possible, "wash" your text by first copying from Word into Notepad (PC) or TextEdit (Mac). Next convert it to simple text format (in the TextEdit application on the Mac, simply select all of the text and go to the TextEdit menu to choose Format>Make Plain Text). THEN copy from that application and paste it into Ektron. This will prevent the text from carrying the Microsoft code with it.

The other way to paste text is to use the Paste from Word or Paste Plain Text buttons located on the toolbar. To use the Paste from Word button, click the button and a new window will pop up. Copy your text from Word into the box. Make sure any spacing issues are corrected in that box before clicking the ok button. This is another way to eliminate the Microsoft code from your text, but should keep any text formatting or links that were embedded in the Word file.

The Paste Plain Text button works in the same manner, however the only difference is that it will only paste plain text, not formatted text. This is good when there are no links included in your text.