How to customize production File?

Customizing Rivor production file is very straight-forward. It can be done by modifying the HTML, CSS, and JavaScript code within production folder files. To customize those files, first, open it using any code editor. Then, change the desird file accordingly.

How to customize development File?

customize partials

All the page data are added through partials. these partails will be found at src/partials folder. The base partials are added in this folder.

In src/partials/header.htm file you can add site title, favicon, css link and all the meta datas from here.
In src/partials/footer.htm file Here all the script tags are added.

On the other hand, In it there is another folder named components where alll the components are added. Got to any components such as src/partials/components/hero.htm file and customize them as per your need to customize the hero section for home page V1.

SASS Files

All the sass related files are added in the src/scss folder. Rivor is build in using Tailwind css. All the classes are genrated using tailwind classes as well as our customized tailwind classes. You can customized them in these files:

All the utility classes such as typographies, badges, container etc are in the _utilities.scss file.
All buttons are styled in _button.scss file.
We have used some common style. They will be customized in the _common.scss file.
all custom animation styles and marquee stles is in the _mixins.scss file.
We have use Satoshi and Instrumental serif fonts. We can customize them in the _typography.scss file..
Some style are added in the html tag as per tailwind documentation. you can also custoize them if you want there.

Images

To change any images go to the src/images folder and change images.

Scripts

All the written javascripts are in the src/js/script.js file. feel free to customize it if you want.
For change a tab content in the career details page, change the value from career-tab.js.

Create a page

In the src folder create a .html file giving any name. Remember the tname of the file will be the route name also. Now import partial from the src/partials/ folder. You must have to import src/partials/header.htm and src/partials/footer.htm. Between these two file you will have to add other partials. An example is given below: Suppose you have created a page naming blog.html now follow the below patterns to add the partials in it


@@include('header.htm')

@@include('components/navbar.htm', {'page': 'blog'})

<main class="lg:mb-[600px] relative z-10 bg-backgroundBody dark:bg-dark">
@@include('components/page-header.htm', {
  badgeTitle:'Blog',
  title:'What we got to say',
  description:"These alternatives can add a different tone or emphasis depending on how you want <br> to introduce your creative team. Let me know if you'd like any specific adjustments!"
})

@@include('components/blog-posts-v5.htm')

@@include('components/cta.htm')
</main>

@@include('components/footer.htm')

@@include('footer.htm')

To customize page hero section data. These are some parameters, you can change tp edit page hero data in the blog page.

badgeTitle:'Blog',
title:'What we got to say',
description:"These alternatives can add a different tone or emphasis depending on how you want <br> to introduce your creative team. Let me know if you'd like any specific adjustments!"

Others files data can be changed from the corresponding .htm file. If you nead any help, feel free to contact us (opens in a new tab) for any querry.

Get Started Development Process