Chamilo

Example procedure for new design

With all the information you've gone through, how would you go ahead now and create a
new design (based on an existing one) with new colors, including new course tool icons, a
new logo and a default image for courses?

This is a checklist of what you will need to do, step by step:

1. Connect to Chamilo
2. Go to Administration -> Platform -> Configuration settings -> Stylesheets
3. Select the name of the style you want to use as a base (this is much easier than
starting a new one from scratch)
4. Click Download 
5. On your computer, unzip the file
. Rename the folder because you will not be able to upload it again under the same
name
7. Enter the folder and edit default.css
. With your browser (Firefox or Chrome), use the developer toolbar and the "Inspect"
feature to locate elements you want to change the colors of
9. Write down the current color code and the color you want to change it to (a good idea
might be to create a table with the match between the old and the new color)
10. Back to default.css, look for the color codes (search for lowercase and uppercase
variants) and replace them everywhere with the new colors, respectively
11. Save default.css
12. In the images/ , add your logo as header-logo.png. This image can be transparent and
has to have a maximum height of 70px. In more recent versions, you can also use an
SVG logo, but this is not covered here
13. In the icons/  folder, create a file called session_default.png  of exactly 400x224
pixels to replace the default image of the courses
14. Still in the icons/  folder, create directories 22  and 64  to prepare for custom course
tool icons
15. You will need the following icons in exactly 64x64 pixels to replace the default tools of
Chamilo: agenda.png , attendance.png , chat.png , course_progress.png ,
dropbox.png , folder_documents.png , forum.png , glossary.png ,

gradebook.png , group.png , info.png , links.png , members.png ,

 notebook.png , quiz.png , scorms.png , survey.png , valves.png , wiki.png ,

works.png 

1 . Because each tool can be disabled and a greyed-out version of the tool icon is shown,
you will also need to add, for each of the previous icons, a greyed-out version with the
same name appended by "_na" (for "not available"): e.g. agenda_na.png . You can do
that in a software like Gimp by using the Image -> Mode -> Greyscale  option then
exporting it with the _na name. If your original icon uses very dark colors, you might
need to increase the brightness of the greyscale version ( Colors ->'Brightness &
Contrast`->Set brightness to +50%)
17. Finally, because those icons (only in the active color version) will be used one the
My Courses  page to notify the user if anything has changed, you also need them in a

22x22 pixels version. To do that, copy all the images (except the _na.png versions)
from 64/ to 22/, then edit each and resize it to 22x22
1 . Exit the stylesheet folder (which you had renamed in step 6)
19. Generate a zip file
20. Go to your Chamilo and upload the new zip file in the New stylesheet file  tab
21. Move back to the Update  tab and select the new stylesheet (you can use the
Preview button so that it doesn't affect all your users immediately)

22. You might need to use CTRL+F5 to refresh some cache memory in your browser, but
that shouldn't be the case

That's it!

Forbidden file extensions

For security reasons, we only allow a number of file extensions to be uploaded:

css
zip
jpeg
jpg
png
gif
ico
 psd
xcf
svg
webp
woff
woff2
md

This list can change. You can find it in the getAllowedFileTypes() function around
https://github.com/chamilo/chamilo-lms/blob/1.11.x/main/admin/settings.lib.php#L2072

If you want to avoid those restrictions, you can also upload the new style through SFTP
directly in app/Resources/public/css/themes/ , but you will need to use the
Cache clean-up  option in the administration page (block System ), otherwise the

stylesheet will not be spread to the final public folder web/css/themes/ .