Installing Template.

Template Basic Structure

All information within the main content area is nested within a body tag. The general template structure is pretty the same throughout the template. Here is the general structure of main page (index.html).

CSS Files and Structure

These are the css files that are loaded into templates in Head Section. All css files are contains at assets/css folder. In case to change any of these css file just put the required file in /css folder and then link it to the html head section.

Google Web Fonts

By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best. Just replace the web font link from inside of the @import url("font link here") tag.

Remember to change the font into default.css

Javascript Files and Structure

These are the list of Javascript files that are loaded into templates in end of the Body Section. All JS files are contains at /js folder. In case to change any of these JS file just put the required file in /js folder and then link indise the html body section.

custom.js File Structure

This is a js file to activate different animations and functionality of this template

                    /*====== Active Plugins ======
                    1 Slick Slider
                    2 Nav Menu
                    3 Tab 
                    4 Offcanvas
                    5 Back to top
                    =============================*/
                

Template Customization

You can customize this template with your own content. Here are some basic changes you need.

Logo Change

You have to put your logo inside assets/images folder. Just replace the image with your own image and replace the image file name in the code

Theme Color Customizaton

You can change the colors ( Theme color, Background color, Heading text color, Body text color, Button background and text color and Theme sidebar color ) of the template from " css/default.css ". Just replace color code inside the :root directory with your preffered color shade.

                    /* colors */
                    :root {
                        --color-primary: #c9a75c;
                        --color-secondary: #df1b0d;
                        --color-secondary-light: #ff8181;
                        --color-dark: #292929;
                        --color-dark-normal: #414141;
                        --color-dark-light: #6a6a6a;
                        --color-dark-lighter: #b0b0b0;
                        --color-soft-light: #f9f9f9;
                        --color-light: #ffffff;
                        --color-lighter: #f5f5f5;
                        --color-sky: #11b9ed;
                    }
                

Button Customization

For updating Button, You just have to change the class name inside the class attribute. Romox theme include 4 types of buttons

                    
                        ...
                    

                     
                        ... 
                    

                     
                        ...                   
                    

                    
                       ...
                    



                

Section background color customization

Just replace the class name to bg-primary/bg-secondary/bg-soft-light/bg-secondary-light/bg-dark/bg-dark-normal/bg-dark-light/bg-dark-lighter/bg-light/bg-lighter/bg-sky/bg-sky-lite and change the background color of the section as per your preferences.

Changes accent color for pages

Replace the color code with your preffered color inside the CSS :root and update the file.

                   :root {
                        --color-primary: "Color Code Here";
                    }
                

Hero Slider Image Change

Replace the slider images with your preffered images in /images/home-1/banner/ folder. Just replace image file and rename as it before

Replace the slider images with your preffered images in /images/home-2/banner/ folder. Just replace image file and rename as it before

Replace the slider images with your preffered images in /images/background/banner/ folder. Just replace image file and rename as it before

Source and Credit