Customization

Take advantage of the aConic admin past, current and future updates, by learning how to create your own content without changing the core styles of aConic admin.

Logo Settings

The Logo can be found in the Header .side-nav .logo-icon-bg


    <div class="logo-icon-bg">
        <img src="../assets/img/logo.svg" alt="">
    </div>

Image & Favicon Settings

Image Settings
aConic admin download package does not contain images which are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace placeholder image url with your image url like img/yourimage.jpg


    <img src="image path" alt="image alt text">

Favicon Settings
To change the favicon image of your site, you need to load a new ICO / PNG / SVG image in a site root or to point out a new address of the image.


    <!-- favicon -->
    <link rel="shortcut icon" href="assets/img/icon.svg">>

How to include a typeface?

Add or change aConic admin typography with the following instructions.

With SASS

1. Use the $font-family-base attribute as our typographic base applied to the in _custom.scss file to change the current font family variable with yours.


    $font-family-base:'Roboto', sans-serif;

2. Add your font stylesheet into the _custom.scss at the bottom of all code. Like:


    //import robot google fonts
    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

With css

1. Simply replace the font family font-family from <body> in style.css tag with yours.


    body {
        font-family: 'Roboto', sans-serif;
      }

2. Add your font stylesheet into the style.css Like:


    //import robot google fonts
    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

To change the font, first go to Google fonts, choose your desired font and use the generated code.

If you have a need to use custom fonts, Remove above section completely and visit Self Hosted Fonts

SASS

Utilize our source SASS files to take advantage of variables, mixins, and more.

Whenever possible, avoid modifying aConic admin core files. For SASS, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it.

Customizing SASS

To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your styles with these files scss/:

_user.scss - Create a new style in here.

Heads up! Custom files along with Bootstrap core CSS files will be generated into the style.css file.

Variable defaults

Copy and paste variables as needed and modify their values.

You will find the complete list of aConic admin variables in scss/_custom.scss.

Here's an example that changes the color of the template in the scss/_custom.scss file when importing and compiling aConic admin via npm:


    // Your variable overrides
    $primary: #084298;

Getting Started

Credits

aConic Admin Documentation - v1.0

Notes