Transform your Oracle Tutor Documents to Your Corporate Standard

You have all of your company's processes documented in Oracle Tutor, and now you want to get the HTML files to reflect your company's corporate look and feel. How are you going to do this without having an HTML guru to change every HTML page?

The good news is you do not need to be an HTML expert to make minor changes to your documents. All Tutor HTML files are attached to a group of style sheets, so any changes you make to the style sheets will immediately be reflected in all of your HTML documents.

If you want to give it a try, here's what you do (please note that these tips are applicable to release Oracle Tutor 12.2 and greater):

Navigate to your Tutor HTML directory, and copy into a draft folder a representative group of HTML files (don't forget the flowchart image files that are associated with the procedures). You'll also need to copy the following files:

tutor.css
tutor_notabs.css
tutor_scripts.js
tutor_tabs.css
flow_icon.gif
utorEndash.png
tutorBtnPlus.png
tutorBtnMinus.png

Here's the default look to the Oracle Tutor desk manual.

desk_manual_image.gif

Let's say I want to use my company's corporate style in the HTML documents. At Oracle, we use Oracle Red (FF0000), Oracle Black (000000), and Oracle Gray (666666). So I want to incorporate those colors into the Tutor HTML files.

I open tutor.css from the draft folder in a text editor. My preference is to use Notepad, but there are others. Make sure, however, that it is a text editor, and not a word processing program.

I want to change the headings to Oracle Red. The desk manual title is listed as the DMPAGETITLE, so I find that in tutor.css. The style names in the style sheets are descriptive, but sometimes you may have to experiment to find the right style (this is why you're working in a draft folder). I also see a style titled DMIPAGETITLE, which is the desk manual index, so I should change the color in that style to the same code.

dmtitle.gif

I change the color attribute to FF00000, and then I save the document. Now I look at one of the desk manuals in my draft folder.

Thumbnail image for deskmanualchange.gif

I've successfully changed the title of the desk manual, so, now that I have more confidence that I can do this, I start changing other styles. I need to make changes in the tutor_tabs.css file as well, so I open that document. Then I look at one of the procedures.

procred.gif

Oops! All that red is distracting, and the users may not be able to follow their procedures. So I go back to the corporate style guide, and I find some shades of gray that have been approved. I use that, and it is now more readable.

betterproc.gif

It's good enough for a first draft, and I would show it to my colleagues at this point to get their input.

On my next blog, I'll discuss how to change the flowchart colors to match your corporate look and feel.

Have you used the cascading style sheets to change the look of your Tutor documents? If so, let us know what you've done in your post.

Mary R. Keane
Senior Development Manager, Oracle Tutor & UPK Content

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
About

The authors of this blog are members of the UPK product development, management, and marketing teams. On this blog, you'll find UPK news, tips/tricks, upcoming events, and general information on UPK - the easy-to-use, comprehensive content development, deployment, and maintenance platform for increasing project, program, and user productivity.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
16
17
18
19
20
21
23
24
25
26
27
28
29
30
   
       
Today