How to upload content to JoomlaLMS courses correctly
When assisting one of our customers in improving the layout of the learning materials in JoomlaLMS 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 (<p>paragraph</p>), 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 JoomlaLMS 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 JoomlaLMS 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, <p style="font-size:36pt">paragraph</p>,) 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:
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.