These sites use a What You See Is What You Get (WYSIWYG) rich text editor that mimics some of the features found in programs such as Office Word, Pages, etc.
This manual is provided to help you navigate through the site and to edit pages using the editor.
**Please note. We do not recommend copying and pasting directly from another rich text editor into the editor.
Go to https://labs.dgsom.ucla.edu/edit
**You can change your password after logging in.
Once logged in, you will remain logged in until you either logout or you close your browser.
To logout go to https://labs.dgsom.ucla.edu/edit/logout
Once logged in, navigate to the page you would like to edit:
To edit a page, navigate to that page and look for the links labeled “Edit” and “Revisions.”
1. After logging in, navigate to the page that you would like to edit.
2. If the page is editable, then you should see a link about 1/3rd of the page down labeled "Edit". Click on this button.
3. This will open the editor. Please note that the section and description fields are usually empty.
4. Edit the page using the editor. *For advanced users, you can edit the html directly by clicking on
5. We highly recommend creating your document in the editor and not in another word processor. If you do create the document in another word processor then please convert the document to a .txt file and do a copy from that document. You will lose all formatting and will need to reformat the document using the editor. This is why we recommend editing the document in the editor first. Please see "Why doesn't my page look like it did in Word (or another rich text editor)?" below to see what happens to when copying from a word document.
6. You must click on the button labeled "OK" before your changes will take effect.
Please visit the ckeditor quick reference page. This page will reference more buttons than what comes standard with your editor.
Many functions in CKEditor have their equivalent keyboard shortcuts. This is one of the reasons why working with the editor is simple and efficient.
The list below contains available keyboard shortcuts grouped by problem areas.
Click on the button that says "Revisions"
This page will list all the versions that were published. Your most recent changes will be listed at the top.
Use the radial selection under the column labeled "Live Revision" to select the version of the page that was still working.
Contact pbabin@mednet.ucla.edu for additional assistance updating the page.
1. After submitting an edit, you can view the previous versions of a page by clicking on the button/link labeled “Revisions.”
2. All previously published versions of the page will be displayed on this page.
3. The magnifying glass shows what the page will look like if that particular version is selected to be live.
4. Clicking on the link labeled “diff” will show the differences between the version displayed and the one previous. A red strike-through represents a deletion. A blue-highlight represents additions.
5. The column labeled “Live Revision” shows which version is currently being displayed on the website. You can revert to a previous revision by selecting the radial of any previous version.
6. The trashcan allows you to delete any version submitted. We highly recommend that you do not use this feature! By deleting a version, the version is no longer available for a user to return to.
You can get more information about CKEditor by clicking the purple "?" button.
You can contact Paul Babin either through email at pbabin@mednet.ucla.edu or by calling (310) 206-4444.
Bootstrap is an open source toolkit for developing responsive, mobile-first projects with HTML, CSS, and JS. It allows developers and editors to quickly prototype, develop and edit sites with a common framework. You can learn more about it by going to http://getbootstrap.com.
Bootstrap was born from two developers at Twitter to promote consistency across internal tools. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only.
The short answer is yes. The longer answer is that we've added components to our editor that attempts to make editing bootstrap components easier.
The site you are working on includes an editor called CKEditor. It is a powerful What-You-See-Is-What-You-Get (WISIWYG) editor. You are already familiar with a popular WIYSIWYG suite called Office. Microsoft Word, Power Point and Outlook are all examples of extremely sophisticated software programs that have become integrated in our lives. We've added an Outlook skin to CKEditor to help you with editing your pages.
CKEditor is great at making quick edits. You might find a typo on a page that you need to correct, that is a quick edit. Need to add a new paragraph to a page. Copy and paste straight out of word and your task is done. You might need to move a picture from the left side of a page to the right side . . . this is where the WYSIWYG editor becomes what I see is not what I am getting!!!!!!
Don't get frustrated. We are here to help when you come across structural edits that might seem overwhelming. However, we encourage you to learn more about HTML development and you will soon find yourself a guru. I'm willing to bet that when you first learned Word it didn't come naturally! I can remember tapping the "space bar" five times to indent a paragraph when I first started. It wasn't until someone pointed out that I could hit the 'tab' key to auto indent that I learned that Office had some tricks up its sleeves. A course in high school taught me that I could change the margin sized, dictate where I wanted my tab stops and that I could do ordered and unordered lists.
The rest of this guide/questions will provide a brief overview of some of the concepts of your website and editing tricks that will have you being a guru in no time.
Many web pages are based on a grid-view, which means that the page is divided into columns. Using a grid-view is helpful when designing web pages as it makes it easier to place elements on the page.
When I first started developing in '98 everything needed to be put into tables. I don't want to go into how much of a headache this was. You defined heights - widths - nested tables within tables... now you just put things into rows and columns!
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
Vist the bootstrap website for a more detailed explanation of the grid system.
Here is a visual of the grid system.
span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
span 4 | span 4 | span 4 | |||||||||
span 4 | span 8 | ||||||||||
span 6 | span 6 | ||||||||||
span 12 |
This table summarizes how the Bootstrap grid system works across multiple devices.
Extra small devices
Phones (<768px) |
Small devices
Tablets (>=768px) |
Medium devices
Desktops (>=992px) |
Large devices
Desktops (>=1200px) |
|
---|---|---|---|---|
Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
Container width | None (auto) | 750px | 970px | 1170px |
Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
Number of columns | 12 | 12 | 12 | 12 |
Column width | Auto | ~62px | ~81px | ~97px |
Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
Nestable | Yes | Yes | Yes | Yes |
Offsets | Yes | Yes | Yes | Yes |
Column ordering | Yes | Yes | Yes | Yes |
The above example and table can be found at w3schools.
There are two ways that you can manipulate bootstrap elements on your site.
The functions include:
"Bootstrap label" allows the user to create a label by altering its title, color, and style.
You can also add a label using the source code.
There are six different colors:
Wrap what you want to be in a label with with a span.
<span class="label label-primary">This is what I want to wrap in a label.</span>
This is what you will get.
This is what I want to wrap in a label
If you want to change the color from blue to red, change the second class.
<span class="label label-danger">This is what I want to wrap in a label.</span>
This is what you will get.
This is what I want to wrap in a label
"Bootstrap icon" allows the user to insert an icon and alter its size and color.
You can also add icons using the source code.
Bootstrap has over 250 icons built into it. The icons are graciously provided by Jan Kovarik. More information can be found at Glyphicons.com. You can find a full list of available icons here.
The basic structure for any icon is as follows:
<span class="glypicon my-selected-glyphicon"></span>
Replace my-selected-glyphicon in the line above to display the icon of your choice and then add this code to the source code.
Pro tip: You can add icons to buttons. Also do not add anything in the span. This is one of the rare occassions where it is ok to have an empty tag.
"Bootstrap Button" allows the user to create a button by altering its title, color, size, style, and by adding a link.
"Bootstrap alert" provides four alert options from which the user selects and inserts.
"Bootstrap row at cursor" allows that user to create rows and columns by selecting the column type and the amount of rows and columns.
"Show blocks" allows the user to see the rows and columns that were created.
Rows and columns can be moved (up, down, right, or left) by using the functions "Move row up", "Move row down", "Move column right", "Move column left".
The "Maximize" function allows the user to view a larger range of their editing screen and content.
HTML allows you to create a list with automatic numbering.
Publications are usually separated by year. However, the count for each list restarts at 1 if you just create a new list for each year.
<h5>Year 1</h5>
<ol>
<li>Publication 1</li>
<li>Publication 2</li>
<li>Publication 3</li>
<li>Publication 4</li>
<li>Publication 5</li>
</ol>
<h5>Year 2</h5>
<ol>
<li>Publication 6</li>
<li>Publication 7</li>
<li>Publication 8</li>
<li>Publication 9</li>
<li>Publication 10</li>
</ol>
To create an ordered list that includes multiple lists with a running count (i.e. title, new grouping, break in the page> - usually you will append each ordered list with a start attribute
However, this means that you will need to modify and manually keep track of the start numbers whenever you add a new list item or publication
We have a means of allowing you to creat a running tally of publications on a page with multiple lists: however, you will have to edit the source code
<div class = "pubCounter">
<h5>Year 1</h5>
<ol>
<li>Publication 1</li>
<li>Publication 2</li>
<li>Publication 3</li>
<li>Publication 4</li>
<li>Publication 5</li>
</ol>
<h5>Year 2</h5>
<ol><
<li>Publication 6</li>
<li>Publication 7</li>
<li>Publication 8</li>
<li>Publication 9</li>
<li>Publication 10</li>
</ol>
</div>
Parallax scrolling: The background content (i.e., an image) is moved at a different speed than the foreground content while scrolling
The parallax scrolling effect is made possible by using the class parallax-bg
.
The default parallax has the height of 150px with DGSOM image positioned approximately centered.
The position varies by browser calculation and it is recommended that user sets a position.
Other default images are:
DGSOM
Geffen 1
Geffen 2
Geffen 3
To change the image, the image must be uploaded in the file-storage. Upload the image to /labname/files/images.
The path needs to be relative. Copy and paste the image URL to the class data-background
(e.g., data-background="/labname/files/images/imagename.jpg").
To position the image, use data-position="xpx ypx"
. Imagine the image is placed on an xy-plane, but with reversed y-axis (negative on top, positive on bottom)
(tip: if you read CSS documentation on background position, only pixel calculations work)
Replace x and y with numbers. Since the image is approximately centered by default, x should always be 0.
To raise the image, use negative y in pixels (e.g., data-position="0 -250px").
To lower the image, use positive y in pixels (e.g., data-position="0 250px" as shown above).
If the image is positioned beyond its bounds, gray background will show
By default, the height of the image is 150px. The user can override by specifying the data-size
.
To display larger area of the image, increase the pixels. Too display smaller area of the image, decrease the pixels.
With all classes combined,
If your parallax scrolling is longer than the image that you uploaded, resulting the gray background to show, add the property data-background-repeat
in the div. This will repeat your background image.
To set a parallax header, add both parallax-bg
and parallax-header
in the same div. Without the parallax-header
as a class, a white space bar will appear under the navigation
Adding the class container
centers the h1 (heading).
Replace container with container-fluid
for a full width container with padding to the right and the left
Due to the parallax effect, all content is flushed left with the browser window if no styles are added. The use needs to define containers for each element of the site.
Any CSS styles can be added inline for any element including alignment, background colors, background images, drop-shadows, etc.
Please refer to W3Schools for CSS attributes.
(tip: do not use this example in your code as it may break the design. We recommend using bootstrap classes to center-text, pull to the right or left-- text-center
, text-left
, text-right
.
Use this area to add tips and notes for editing.