When assisting one of our customers in improving the layout of the learning materials in JoomLMS courses we encountered certain difficulties.
The article was last updated on August 24th 2016.
When assisting one of our customers in improving the layout of the learning materials in JoomLMS courses we encountered certain difficulties.
We had the following task: change the parameters of the used fonts for various elements of content HTML layout - paragraphs, links, headings etc. It was necessary to change size, color, indents, font type and other parameters. Also it was necessary to add images to the course content.
We didn’t have any issues only when adding images…
Let us explain why difficulties occurred in such seemingly simple tasks as changing the font sizes for paragraphs, links’ color etc.
In Joomla! CMS all the parameters of a website layout are located in its template. All the necessary styles are set there (including the global ones) in order for the content to be shown correctly. Global styles are set for paragraphs, headings, links, lists and many other elements. If you set the font size as 12 pts for a paragraph, then all the texts on the site tagged (
paragraph
), will have the font size of 12 pts.
However if the content is added via copying the text from MS Word editor and pasting it to JoomLMS editor (see image 1), then all the design parameters will be copied together with the text –i.e. the font size and type, color etc.
Image 1 JoomLMS editor
Besides the formatting certain service information is added that spoils the HTML code of the content (see image 2). You can view it when the visual editor is disabled.
Image 2 Service information of MS Word in the site content
In our case the customer made a mistake – all the materials were added to the course via simply copying from MS Word (most probably from older software versions). As a result the layout on some pages was broken, global styles weren’t applied to course content, all pages had different font sizes and types. It looked unacceptable.
The styles tables specified in the site template weren’t applied to the course materials as the styles tagged directly as the inline-styles (for example,
paragraph
,) have a higher priority.
In order to apply the necessary styles to the course content it is necessary first of all to clear the content from the extra tags copied from MS Word. You can see a screenshot of JCE editor in image 1 that has tools for code clearing. At the moment it’s one of the best WYSIWYG-editors used in Joomla! CMS.
There are four methods for clearing the content from unnecessary styles and service information of MS Word:
- Use a special tool when pasting the content copied from MS Word – Paste from Word
. Upon clicking on this icon a window will open where you can insert the content copied to the clipboard. The text inserted using this tool will have clear HTML code. This method is suitable at the course creation stage. - Use a special tool when inserting the content – Insert as text
. Upon clicking on this icon a window will also be open where you can insert the content copied to the clipboard. The content inserted using this tool will be cleared from all formatting completely. This will be a simple text. This method is also designed to be used on the course creation stage. If your courses are already created it is possible to use the methods described below. - Clear text formatting using a special tool – Remove formatting
. Using this tool it is possible to remove the formatting from a certain element only (e.g. from a heading), or from the whole text inserted in the editor field. To apply the tool it is necessary to select the text that you need to clear from formatting and click the «Remove formatting» button. - Disable the visual editor and remove the unnecessary tags manually. This method is very time-consuming. When using it at least minimal knowledge of html-tags is required. If you use a visual editor without tools described in points 1-3 on your site there are two variants for you. You can either disable the visual editor and remove the unnecessary tags manually or install JCE editor.
There is another method of clearing a text from unnecessary formatting. This is the so-called double copying. At first you need to copy the content from MS Word to the clipboard. Then you need to paste the text from the clipboard to a text file (you can use the Windows in-built application - Notepad). Then you need to copy the text from Notepad and paste it to Joomla editor. This method doesn’t seem convenient but it can be used as well. When inserting text from MS Word to Notepad the text formatting is removed completely. It works the same as when using the «Insert as text» tool.
We recommend considering how your courses should look like in advance and creating them correctly from scratch. It’s not very difficult to fix the course formatting in order for the layout to be presentable again if you have small courses and there are few. If courses are large as it was in our case then a lot of time will be required to fix the formatting. Using the “Paste from Word” and “Insert as text” tools you can save a significant amount of both time and money.
What to read next?
How to Organize ELearning Content Effectively with JoomLMS
How to Get Students to JoomLMS Classroom?
How to Use LMS Reporting to Improve ELearning Performance
