How to Install OctoberCms Theme

October CMS Theme Installation

A October CMS theme is collection of files like html, css, js (javascript), images and theme configuration files.

These files are useful to show your content on frontend side. If you change html markup of these files your site will look accordingly. theme includs layout html markup files.

Changing your theme changes how your site looks on the front-end,

theme is the Ui/Design what a visitor sees when they browse to your site on the web. There are lot of free October CMS themes in the October CMS theme marketplace https://octobercms.com/themes, Some of them are totally free to use and some more premium themes are paid.

Always its good idea to check out free themes first then if you need more premium themes you can buy and install your premium themes later on.

1. Open Backend

To chagne theme/install theme you need to login to your backend. login user should have proper rights to change/install themes.

You can go to admin panel of site by adding /backend to your root site url. [ in some cases your backend url different if you manually configured it, In most cases its /backend by default ]

https://yoursite.com/backend

it will redirect you to backend module https://yoursite.test/backend/backend/auth/signin that is completely fine

backend_url

Use your backend credentials to login to your backend. on successful login you will be greated with dashboard.

2. Check Installed Themes

Once you successfully login you can go to frontend theme settings by main navigation bar on top

Settings > CMS (section from left side menu ) > Front-end theme

After navigating to this location you can see right side October CMS provides by default demo theme.

theme_settings

if you already installed any themes you can see list fo themes here, to activate one of already installed theme you can click on Activate button to activate that theme.

3. Installing Theme

To install new theme you need to go to Install Theme Tab

Navigate to this setting

Settings > SYSTEM (section from left side menu ) > Update & Plugins

install_plugin

Then you need to click install plugins button from right side.

It will bring you to install products page now by default PLUGINS tab will be selected.

plugin_settings

You need to Click THEMES tab, it will open install them tab with search box from where you can search themes which are available at October CMS Theme Marketplace

install_theme_tab

To get proper theme name and details you can visit https://octobercms.com/themes it will show you theme details and name of theme which you can enter in search box to intall it.

i.e. we are going to install theme called bonjour theme details : https://octobercms.com/theme/rainlab-bonjour

Now search name bonjour in searchbox it will show respective theme, you can click on it or use arrow key to navigate to that theme and press enter

theme_search

It will download and start installing theme to you October CMS website.

theme_install_process

For Power users, You can directly install theme from comman line if you happen to know plugin code for this Bonjour theme its RainLab.Bonjour.

To install plugin directly from terminal you can use below command
php artisan theme:install Rainlab.Bonjour
To activate installed theme directly from terminal you can use below command
php artisan theme:use Rainlab.Bonjour

Once Installation is Complete you need manually Activate theme. You can do it by reading #step 2 instructions.

theme_activate

4. Preview of Installed theme.

Once activated newly installed theme you can preview it by opening your front end, To open front end from backend you just need to click Preview Icon which is left side of your backend user Profile picture.

preview_site

5. Theme Installation Complete

After installing and activating theme you can start editing files of your theme according to your desire and make your site more professional.

theme_files

We will cover how to edit theme files, layout, css in next tutorials.

js interview questions