Neat Thingsto do in

Digication

TABLE OF CONTENTSHyperlinking Text… Pg. 1Embedding Video… Pg. 2Tab Design… Pg. 3Copying Your Portfolio… Pg. 3Picture Orientation… Pg. 4Documents as PDFs… Pg. 5Moving Pages and Sections… Pg. 6Personalized URL… Pg. 6Banner and Size… Pg. 7More about CSS… Pg. 7Custom Navigation Bar… Pg. 8

Jacob Fuerst, DePaul University

The ability to hyperlink text within a Digication page is one powerful way to make a page easier to navigate, and allows the creator to “guide” the viewer throughout the

portfolio in a manner of his or her choosing. Otherwise, the viewer may unknowingly progress through the portfolio’s tabs in the “wrong order.”

Highlighting the text you wish to hyperlink and then retyping that text as you want it to appear (in the hypertext window) will do this successfully on your page.

1

You can also embed videos directly from the Internet into your Digication page. First, “edit” a specific module to see this screen:

Then click this button

Select “Media From Web”

Choose the source you are taking the embedded code from (Brightcove, YouTube, Flickr, and many more)

Finally, paste the embedded code in. If it’s a video from YouTube, you should be taking the embedded code under “share” and then “Embed.”

Now your video will be visible and ready to play right in your Digication page, like the one on the left. This saves you from having an ugly web link in the middle of a Digication module. It means you don’t have to open another window to show the video as well.

2

Changing the design of the tabs (their color, font, border, etc) at the top of your portfolio will make your portfolio ten times less cookie-cutter and unoriginal. Instead of looking like a template Digication page, your page will now look like its own, unique website like this:

However, editing the format of your portfolio requires some knowledge of CSS coding. Oftentimes, one wrong move while coding your page will render the whole thing unrecognizable and “broken.” Occasionally, this causes content to go missing – permanently. (Digication is a fickle beast.) A helpful way around this is to make a

copy of your original Digication portfolio before you attempt to write any code. Do this by clicking “Portfolio tools” and then “Make a Copy.” This will replicate your portfolio as it stands, which can then be deleted at any time. Having a back-up ensures that any coding you may do will not permanently erase your work.

3

Inserting pictures within your text fluidly, like below, is another great way to make your Digication modules look professional. Instead of having text, a picture beneath it, then more text, this allows the module to read like a magazine or newspaper article – like something more professional. When adding a picture, selecting the “left,” “center” or “right” orientation will put the picture where you want it. It will be inserted exactly where your cursor is; in the example below, the cursor would’ve been selected (or “ready to type”) between “American” and “households.”

4

Digication does not make it easy to format text within a module and makes it nearly impossible to double space your text. A great way to work around this is to insert a document into your portfolio as a PDF (a picture, basically). An easy way to do this is to use the free site Scribd. First make an account on www.scribd.com; then, using the “Upload” tab, choose and upload the document you wish to make into a PDF. Then, go to “My Content,” choose your uploaded file, and click “Embed.” Copy that code.

Now, in Digication under “Edit mode,” follow the same instructions as you would to insert a video directly from YouTube (by choosing “Insert Media”). This time, however, choose “Scribd” from the dropdown menu and insert the code from scribd.com into the “Embed” box. Now, your actual file is visible as an image within your module, exactly as it appeared in Microsoft Word. Insert as many pages as necessary.

5

You may find that you made pages or entire sections that you wish to reorder – and you can! Oftentimes, this feature goes unnoticed. Click the “Add/Edit” tab next to

sections to move any of your sections, and the same tab next to pages to move pages. Hold your cursor over the tabs and move them manually by clicking and dragging. Be careful when reorganizing pages, though – Digication has been known to glitch and delete pages (with content on them) if they are not carefully placed in their destination slot. Refer to the section on copying your portfolio to protect against this.

Changing the destination URL of your Digication page is also made easy within Digication! Clicking “Portfolio Tools” in the upper right corner and then “Settings” will take you right to it.

Clicking “Edit” will allow you to change the address of everything after “…digication.com.” Personalize your link just like any other website, and avoid having to sign into the often-slow Digication site to view your page by searching your URL manually.

6

In portfolio settings under “Choose A Theme” you can also change the top banner of your portfolio page. However, it is recommended that your banner be no more than 780 pixels wide and 200 pixels tall. One way to easily crop a photo to this size is by using Microsoft’s PowerPoint. Inserting the picture you wish to use into a blank PowerPoint slide makes it easy to crop the picture to banner size. Likewise, using software like PhotoShop will allow you to actually see the dimensions of your banner (so that you can ensure it is around 780x200 pixels). Once the picture is the size you want, click “Customize” in the picture below and go to “header” to upload the banner.

Customizing the CSS code in your digication page can cause structural problems to your portfolio, as mentioned before. Remember that clicking the “Reset” button next to the Custom CSS box will only reset your CSS code to before your last save – it will not reset the code to its initial state. This is nice because you can avoid having to recode everything because of one mistake. However, to reset your code completely, highlight

EVERYTHING (all the code in the box) and delete it. Save, press “Reset,” and voilà - your CSS is like new.

For more on customizing the CSS in your digication page, see http://condor.depaul.edu/writing/pdf/DigicationCustomCSSGuide.pdf

7

You can customize nearly every element of your portfolio using the aforementioned CSS coding. Adding rounded, colored borders to your top navigation bar (the “sections”) requires you to copy a piece of code into the CSS window.

First, find the #module_topnav part of your code.

Highlight starting with #module and ending with #f7f7f7, including the } before “.navigation”

Replace the highlighted code by pasting this in:

#module_topnav{ border: 0px none #ccc}.navigation_topnav {background-color: #FF0000;border: 2px solid #FF0000;border-radius: 10px;-moz-border-radius: 10px;}.navigation_topnav { background-color:#FF0000;}Your CSS window should now look like this.

Saving your page and viewing it in published mode will show you your new navigation bar, which should be red (FF0000) with rounded corners. To change the border color, paste in the six character code for your desired color in border: 2px solid #_ _ _ _ _ _;

To change the color of the inside of the navigation bar itself, change the code in the second background-color:#_ _ _ _ _ _;

8

9