{"id":349,"date":"2023-07-19T11:27:16","date_gmt":"2023-07-19T11:27:16","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=349"},"modified":"2023-07-19T11:27:18","modified_gmt":"2023-07-19T11:27:18","slug":"how-to-customize-the-appearance-of-an-open-edx-instance","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/how-to-customize-the-appearance-of-an-open-edx-instance\/","title":{"rendered":"How to customize the appearance of an Open edX instance?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"781\" src=\"https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2023\/07\/image-86-1024x781.png\" alt=\"\" class=\"wp-image-350\" srcset=\"https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2023\/07\/image-86-1024x781.png 1024w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2023\/07\/image-86-300x229.png 300w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2023\/07\/image-86-768x585.png 768w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2023\/07\/image-86-1536x1171.png 1536w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2023\/07\/image-86.png 1952w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>There are two ways to customize the appearance of an Open edX instance:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Change the theme.<\/strong> Open edX comes with a default theme, but you can also install custom themes. Themes control the look and feel of the user interface (UI), including the colors, fonts, and layout.<\/li>\n\n\n\n<li><strong>Modify the CSS.<\/strong> If you want to make more granular changes to the UI, you can modify the CSS files. This is a more advanced option, but it gives you complete control over the look and feel of the UI.<\/li>\n<\/ul>\n\n\n\n<p>Here are the steps on how to change the theme of an Open edX instance:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Enable theming in your Open edX installation.<\/li>\n\n\n\n<li>Download a custom theme from a third-party website or create your own theme.<\/li>\n\n\n\n<li>Copy the theme files to the <code>openedx\/themes<\/code> directory.<\/li>\n\n\n\n<li>Restart your Open edX instance.<\/li>\n<\/ol>\n\n\n\n<p>Once you have changed the theme, you will need to log out and log back in to your Open edX instance to see the changes.<\/p>\n\n\n\n<p>Here are the steps on how to modify the CSS of an Open edX instance:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Find the CSS files that you want to modify.<\/li>\n\n\n\n<li>Open the CSS files in a text editor.<\/li>\n\n\n\n<li>Make the desired changes to the CSS.<\/li>\n\n\n\n<li>Save the CSS files.<\/li>\n\n\n\n<li>Restart your Open edX instance.<\/li>\n<\/ol>\n\n\n\n<p>Once you have modified the CSS, you will need to log out and log back in to your Open edX instance to see the changes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are two ways to customize the appearance of an Open edX instance: Here are the steps on how to<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[609,615,618,611,613,621,399,612,563,619,620],"class_list":["post-349","post","type-post","status-publish","format-standard","hentry","category-openedx","tag-appearance-customization","tag-branding-open-edx","tag-customization-guide","tag-customize-appearance","tag-customizing-open-edx","tag-how-to-customize-the-appearance-of-an-open-edx-instance","tag-open-edx","tag-open-edx-instance","tag-open-edx-platform","tag-theme-customization","tag-user-interface-customization"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=349"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/349\/revisions"}],"predecessor-version":[{"id":351,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/349\/revisions\/351"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}