# 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 6. 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 8. 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` 16. 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 18. 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 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/`. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.chamilo.org/1.11.x/developer-guide/theming_through_css/example_procedure_for_new_design.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.