This is a migrated thread and some comments may be shown as answers.

Not clear on how to use custom theme from themebuilder

5 Answers 747 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
BitShift
Top achievements
Rank 1
Veteran
BitShift asked on 05 Jul 2018, 02:33 PM

Im currently using the bootstrap theme and now looking at using a custom theme based on the bootstrap theme.

Looking over this, im not sure on how to place the output
https://www.telerik.com/kendo-angular-ui/components/styling/theme-builder/

When I download my theme, I have a zip file containing two files, all.css and variables.scss

For example, in the linked instructions above, do I use these paths and put the two files in the zip file into the scss/all folder?

// import configuration from the theme builder
@import 'variables.scss';
// import the base theme
@import '~@progress/kendo-theme-default/scss/all';

Or... since im using the bootstrap theme, I replace the files in @progress\kendo-theme-bootstrap\scss ???

Or, do I create a new folder under node_modules\@progress with the name of my new theme?

 

 

 

 

 

5 Answers, 1 is accepted

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 06 Jul 2018, 06:51 AM
The recommended way of using the ThemeBuilder output is to use the build process of the application:
  1. Import the variable values
  2. Import the base theme (which in this scenario is @progress/kendo-theme-bootstrap)

This boils down to the following code in styles.scss (assuming you are using the Angular CLI defaults):

@import 'variables'; // the variables.scss file, located in the same folder
@import '~@progress/kendo-theme-bootstrap/scss/all'; // fetched from node_modules

Editing files in the node_modules directory is strongly discouraged, as this will cause them to break at the next npm install, or on different machines.

Regards,
Alex Gyoshev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
BitShift
Top achievements
Rank 1
Veteran
answered on 06 Jul 2018, 05:22 PM

So really all I need from the download is the variables.scss , correct?  Now that I have converted my angular app to use scss, I changed my styles.css to styles.scss and added the imports mentioned above.

However, now that Im using scss, I wanted to test a change.  I added a variable override in my variable.scss

Im not seeing any changes however.

$button-bg: #dc3545; //  should show button background as red

 

angular.json

            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/font-awesome/css/font-awesome.css",
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

  "defaultProject": "ClientApp",
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }

 

in ClientApp/src/styles.scss

@import 'variables'; // the variables.scss file, located in the same folder
@import '~@progress/kendo-theme-bootstrap/scss/all'; // fetched from node_modules

in ClientApp/src/variables.css (downloaded from themebuilder, see my variable at the bottom)

$base-theme:Bootstrap;
$skin-name:kendo-dflood-bs4-1;
$accent: #007bff;
$secondary: #e4e7eb;
$info: #17a2b8;
$success: #28a745;
$warning: #ffc107;
$error: #dc3545;
$body-bg: #ffffff;
$body-color: #292b2c;
$component-bg: #ffffff;
$component-color: #292b2c;
$card-cap-bg: #f7f7f9;
$card-cap-color: #292b2c;
$series-a: #0275d8;
$series-b: #5bc0de;
$series-c: #5cb85c;
$series-d: #f0ad4e;
$series-e: #e67d4a;
$series-f: #d9534f;
$button-bg: #dc3545;  //should be red, but I see no impact

 

After these changes , with the app running with ng serve, a compile takes place and I see the browser refresh.  However, the button is unaffected.  Its still blue

 

 

0
BitShift
Top achievements
Rank 1
Veteran
answered on 06 Jul 2018, 05:25 PM

The content that should be affected

 

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <button kendoButton [primary]="true">Browse</button>
</div>

0
BitShift
Top achievements
Rank 1
Veteran
answered on 06 Jul 2018, 05:30 PM
Looks like I need to take off the [primary] input because once I did that, the color changed.
0
Svet
Telerik team
answered on 09 Jul 2018, 12:58 PM
Hi BitShift,

Indeed, the [primary] input property of the kendoButton adds a different class to the button in order to change its appearance and this is why it would not be affected by the $button-bg variable:
https://www.telerik.com/kendo-angular-ui/components/buttons/

Let us know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
BitShift
Top achievements
Rank 1
Veteran
Answers by
Alex Gyoshev
Telerik team
BitShift
Top achievements
Rank 1
Veteran
Svet
Telerik team
Share this question
or