Customization

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

Sass

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 xPider, 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.

If you are gonna use the SCSS version then 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">
                                    
                                

How to include a typeface?

Add or change xPider typography with the following instructions.

With SASS

  1. Add your font stylesheet into the <head> before all other stylesheets. Like:
                                                
                                                <!-- google fonts -->
                                                <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.

                                            
                                                    $font-primary:                                                              "Poppins", sans-serif;
                                                    $font-secondary:                                                            "Noto Serif", serif;
                                                    $font-body:                                                                 "Poppins", sans-serif;
                                                    
                                            
                                          

With CSS

  1. Add your font stylesheet into the <head> before all other stylesheets. Like:
                                                
                                                <!-- google fonts -->
                                                <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 font-family from <body>, <heading> and <.blockquote> tag with yours.
                                            
                                                    body {
                                                        font-family: "Poppins", sans-serif, "Aileron", sans-serif;
                                                      }
                                                      h1,
                                                      h2,
                                                      h3,
                                                      h4,
                                                      h5,
                                                      h6 {
                                                        font-family: "Poppins", sans-serif;
                                                      }
                                                      
                                                      
                                                      .blockquote {
                                                        font-family: "Noto Serif", serif;
                                                      }
                                            
                                          

How to update colors?

There are three options you have to update the colors.

  1. Applying template demo colors

    Simply add any of below classes to the <body> tag.

                                            
                                                <body class="theme-green" 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 xPider template options page


    .theme-green
    .theme-violet
    .theme-firoza
    .theme-red
    .theme-orange

    .gradient-1
    .gradient-2
    .gradient-3
    .gradient-4
    .gradient-5
    .gradient-6
  2. Applying your own colors using from SCSS

    open scss/5-user/_colors.scss files and update your color from the variable list.

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

                                            
                                                $color-primary:                                                             #2f5bea;
                                            
                                            
  3. Applying your own colors from CSS

    Open css/custom.css files and simply replace the color codes of background, color, box-shadow, border-color properties with yours.

                                            
                                                .border-primary, .hr--blod, .btn--color-primary, .btn--color-dark.btn-text-hover:hover, .btn--outline:hover, .btn--outline-thick:hover, .btn-text-hover:hover {
                                                    border-color: #2f5bea;
                                                  }