Customization

Learn how to create your own style without changing the theme’s core files so you can take advantage of future updates.

Get attention

For SCSS user:

It's highly recommended that all the customized styles to be stored only within the 5-user folder from the scss folder so you can update this theme anytime with no effort. When you update SpaceMax, make sure you backup your 5-user folder, that may contain styles you have created already.


scss/5-user folder and its files are dedicated for custom edit and additions.

And please delete the CSS <link rel="stylesheet" href="css/custom.css"> from <head> of HTML or delete all codes from css/custom.css file. This file is for css user and It might conflict with your scss color and font updates since the custom.css is placed bottom of the app.css. 


                                    
                                            <!-- Your CSS -->
                                            <link rel="stylesheet" href="css/custom.css">

For CSS user:

It's highly recommended that all the customized styles to be stored only within the custom.css file which is located css folder so you can update this theme anytime with no effort. When you update SpaceMax, make sure you backup your custom.css file, that may contain styles you have created already.

How to include a typeface?

Add or change SpaceMax typography with the following instructions.


Applying from SCSS


  1. Add your font stylesheet into the <head> before all other stylesheets. Like:

    HTML Code example:

                                                
                                            <!-- fonts and icons -->
                                            <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">

  2. Open scss/5-user/_typography.scss files and update your typeface from the variable list.

    SCSS Code example:

                                            
                                                // fonts family
                                                // =============================================================
                                                $font-heading: 'SFUI', sans-serif;
                                                $font-body: 'SFUI', sans-serif;

Check the color page to know how typography works with different background color.

Check the typography page to see more examples and class reference.

Applying from CSS


  1. Add your font stylesheet into the <head> before all other stylesheets. Like:

    HTML Code example:

                                                
                                            <!-- fonts and icons -->
                                            <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">

  2. Open css/custom.css files and simply replace the value of font family property.

    CSS Code example:

                                            
                                            /**! ----- font family init ---- **/
                                            h1,
                                            h2,
                                            h3,
                                            h4,
                                            h5,
                                            h6 {
                                              font-weight: 400;
                                              font-family: "SFUI", sans-serif;
                                            }
                                            
                                            p {
                                              font-weight: 400;
                                              font-family: "SFUI", sans-serif;
                                            }

How to update colors?

There are three way you can update the template colors.

  1. Using template pre-defined colors

    SpaceMax comes with 16 pre-defined color and it is super easy to use. Simply add any of below classes to the <body> tag.


    Code example:

                                            
                                            <body class="theme-blue" data-spy="scroll" data-target="#navbar-nav">
    Class Reference

    You can apply either solid color or gradient color at a time. Gradient and Solid color won't work at the same time.

    More information avilable in the template options page

    .theme-royal-blue
    .theme-blue
    .theme-amethyst
    .theme-roman
    .theme-amaranth
    .theme-orange
    .theme-green
    .theme-fern
    .theme-gradient-1
    .theme-gradient-2
    .theme-gradient-3
    .theme-gradient-4
    .theme-gradient-5
    .theme-gradient-6
    .theme-gradient-7
    .theme-gradient-8

  2. Applying your own colors using from SCSS

    First delete our pre-defined theme class from the the <body> tag. Such as: theme-royal-blue.

    Now open scss/5-user/_colors.scss files, find the desire variable and update the value with your one.

    For example, if you need to change the primary color, all you need to do is replace $color-primary color value/code/variable with your own color value/code/variable.


    SCSS Code example:

                                            
                                            $color-primary: $color-blue;

  3. Applying your own colors from CSS

    First delete our pre-defined theme class from the the <body> tag. Such as: theme-royal-blue.

    Now open css/custom.css files and simply replace the value background, color, fill, border-color properties.


    CSS Code example:

                                            
                                            /**! ----- Theme Common colors (Also Used as extend in SCSS ) ---- **/
                                            mark,
                                            ins,
                                            .bg-color--primary,
                                            [class*="bg-color--primary-opacity-"]::before,
                                            .btn-bg--primary,
                                            .btn-bg--primary--05::after,
                                            .btn-hover--primary:hover,
                                            .card-hover--bg--primary-shadow.focused,
                                            .card-hover--bg--primary-shadow:hover,
                                            .preloader .blobs .blob-center,
                                            .preloader .blob,
                                            .form--v8:after,
                                            .ico-progress--v2 .ico-progress__stages:after,
                                            .decor,
                                            .carosuel-triangle:hover,
                                            .carosuel-slider--v6 .slick-dots .slick-active button,
                                            .label-bg--light--200::before,
                                            .pagination .page-item.active .page-link,
                                            .sticky .card,
                                            .sticky .article__thumbnail-image::before,
                                            .widget_calendar tbody a,
                                            .post-navigation .meta-nav::before,
                                            .navbar-sticky--moved-up.sticky-bg-color--primary,
                                            .roadmap--v4 .roadmap-item--current .timeline-line:before{
                                                background: #3965f4;
                                            }

                                            .color--primary,
                                            .card--v2 .card.focused .card__title,
                                            .card--v2 .card:hover .card__title,
                                            a.list-group-item:hover,
                                            a.list-group-item.active,
                                            a.list-group-item:focus,
                                            .text-hover--primary:hover,
                                            .section--dark .text-hover--primary:hover,
                                            .section--darkblue .text-hover--primary:hover,
                                            .icon-rounded-color--gray i:hover,
                                            .carosuel-arrow,
                                            .carosuel-cursor--dark i:hover,
                                            .dropdown-module__item:focus,
                                            .dropdown-module__item:hover,
                                            .dropdown-module--dark .dropdown-module__item:focus,
                                            .dropdown-module--dark .dropdown-module__item:hover,
                                            .label-bg--primary,
                                            .pagination .page-item:not(.active) .page-link,
                                            .breadcrumb--v1 .breadcrumb,
                                            .breadcrumb--v1 .breadcrumb a,
                                            .blog-details .article-content a,
                                            .blog-details .comment-content a,
                                            .article-author__name:hover,
                                            .article__title h2:hover,
                                            .blog-details .entry-header .entry-author .url:hover,
                                            .blog-details .entry-meta .post-categories a,
                                            .blog-sidebar .widget-title,
                                            .blog-sidebar .widget li a:hover,
                                            .blog-sidebar .widget li a:focus,
                                            .blog-sidebar .widget li a:hover i,
                                            .blog-sidebar .widget li a:focus i,
                                            .blog-sidebar .widget_tag_cloud ul li a:hover,
                                            .blog-sidebar .widget_nav .menu li .current_page_item>a,
                                            .blog-sidebar .widget_nav .menu li .current-menu-item>a,
                                            .widget_calendar tfoot a,
                                            .widget_rss .widget-title .rsswidget,
                                            .post-navigation .meta-nav,
                                            .post-navigation .post-title:hover,
                                            .tags-links a,
                                            .comments-area .comment-reply-link,
                                            .dropdown-item:focus,
                                            .dropdown-item:hover,
                                            .dropdown-item.active,
                                            .dropdown-item:active,
                                            .footer.section--light a:hover,
                                            .sidebar-nav .sidebar-nav .navigation .nav-item.active>.nav-link,
                                            .sidebar-nav .sidebar-nav .navigation .nav-item:hover>.nav-link,
                                            .documentation .color-primary,
                                            .documentation div.code-toolbar>.toolbar a:hover{
                                                color: #3965f4;
                                            }

                                            .fill--primary rect,
                                            .fill--primary path,
                                            .fill--primary polygon,
                                            .fill--primary circle{
                                                fill: #3965f4;
                                            }

                                            .btn-border--color--primary,
                                            .btn-hover--primary.btn-border--color--dark:hover,
                                            .btn-hover--primary.btn-border--color--light:hover,
                                            .icon-rounded-color--primary,
                                            .icon-rounded-color--gray i:hover,
                                            .carosuel-arrow{
                                                border-color: #3965f4;
                                            }

Check the color page to see more examples and class reference.