I am using KendoUI web widgets in my enterprise app. I need to create/customize a Theme as our corporate branding. After reading the docs, I realized that there is a tool called ThemeBuilder for this purpose available here http://demos.kendoui.com/themebuilder/web.html
Now I need to understand the logic behind the color options this tool (ThemeBuilder) shows me. All the Themes are based on 4 primary colors as shown in the selection options. However, when i try to modify/customize any theme, I found that there are more to it? How the ThemeBuilder is calculating all other colors besides the 4 Theme colors?
If I need to create my own corporate theme with 4 primary colors, how do I pick rest of the colors as shown in ThemeBuilder?
On the second note, ThemeBuilder can generate css and less. Is there a way to generate Scss as we are using scss in our organization?
Does Telerik provide scss version of their source styles. I know they provide css and less in their source directory. But converting them to scss looks like a nightmare to me!
Appreciate your help.
Sam
I have to manually convert less into scss.
I have variablized their stuff make it compatible with org's themes and colors.
Related
I recently started using github fast pages for a school project. I decided I wanted to implement dark mode into my website and after some research was able to implement it pretty easily:
https://srcb.in/FxkcahIMIU - dark-mode.scss file
To implement it into the theme of the Jekyll website, all I had to do was import it:
/*----- ADD YOUR STYLES BELOW -------*/
#import "minima/dark-mode";
into custom-styles.scss
The full file paths for these are _sass/minima/dark-mode.scss, _sass/minima.custom-styles.scss.
While the dark mode works fine, I want to make it possible to toggle dark mode on and off with a switch. Creating this on another website wouldn't be an issue, as I can just use javascript to toggle elements. However, since dark mode is implemented through an import statement in a separate file. I'm not sure how I'd go about this. Is there a way I can use javascript to toggle the import statement? Or maybe create a new import when its switched back to light mode? Thanks in advance!
We have a DNN9 platform for our Business2Business website. It has basic look of reports however we wanted to show some advance look to reports and charts so that we are planning to integrate metronic theme in DNN9. I tried multiple ways to do it but failed. kindly help regarding this for the same.
Not sure what you have tried but we succeeded in displaying reports module data using Mandeeps Porto css and boostrap classes.
We achieved this using the xsl stylesheet option in reports module settings.
If the theme resources are part of your portal skin on the page that the reports module resides then xsl elements will display fine. If not part of the portal theme, you can either declare the resource in page setting header or in the xsl stylesheet itself.
Hope this helps
I am looking at the Theme Guide
It informs me that there are several prebuilt themes available:
#import '#angular/material/prebuilt-themes/deeppurple-amber.css'; is one.
Where do these themes come from?
My problem stems from trying to create my own theme. If for example, I follow the excellent angular-ngrx-material-starter black-theme.scss, then I appear to not define enough colours. My mat-select is unstyled.
I need to add one of the prebuilt themes above in order to get a full theme, but now I have purples in my theme and a general miss match of colours which I don't want. Clearly I am missing the full range of colours in my theme.
I feel that if I could see the "source" of a pre-built theme, I might have some idea how to make my own.
Would anyone be able to shine a light on this for me?
Shot Answer
Answer for you if your angular project is using scss. The colours are surely there if you are using a default palate from the angular material module like the example you gave above. You probably just did not add the overlay themes. Mat-select is an overlay
In your main
main.scss
#import '../node_modules/#angular/material/theming';
$anms-black-primary: mat-palette($mat-grey, 700, 300, 900);
$anms-black-accent: mat-palette($mat-blue-grey, 400);
$anms-black-warn: mat-palette($mat-red, 500);
$anms-black-theme: mat-dark-theme(
$anms-black-primary,
$anms-black-accent,
$anms-black-warn
);
#include angular-material-theme($anms-black-theme);
.whatever-theme {
#include angular-material-theme($anms-black-theme);
}
app.component.ts
export class AppComponent {
constructor(overlayContainer: OverlayContainer) {
overlayContainer.getContainerElement().classList.add('whatever-theme');
}
}
Prebuilt themes are just generated by compiling the scss file. Most of theme variables and functions are in node_modules/#angular/material/_theme.scss
Example
$(npm bin)/node-sass $FILE > $DEST_PATH/$BASENAME.css
Long Answer
To understand themes in angular you got to have a basic understanding of scss which is the default way to generate themes in angular.
https://sass-lang.com/guide
To have a good example of scss styling in a proper angular project will be the material docs repo. https://github.com/angular/material.angular.io.
In node_modules/#angular/material/_theming.scss you can see how the theme variable are defined and define custom themes on your own.
A good answer for creating custom themes.
How can I use custom theme palettes in Angular?
We're doing a proof of concept test on Apache NiFi. The font for the layout screen looks like it's about 10 pt, which is way too small
I can zoom the screen to 140%, but that makes everything bigger, and a lot less useful
How Do I simply change the font used?
To change the font-size for particular areas of Apache NiFi you can simply update the appropriate css files found in:
nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/
Then rebuild and restart the application. Most of the time you can tell by the file names where the styles are applied within the application but you can also use your browsers developer tools to inspect the styles of any particular element in the UI and determine the precise file you will need to edit.
i use helix for my website. but any font that I insert to it via #font-face not work correctly and text in the screen has some sharp region.
demo: link to site
note: texts in header and body have two different font.
I guess that this happen because of helix setting. Is it true?
please help me for create a website with smooth text
You have a native feature inside the template for assign multiple fonts to your website.
Go to Extensions > Templates > Your Helix Template > Tab Typography
From here you can add a different font for the body, headings, navigation or enable a custom font for css selectors. This feature works well with Google Fonts.
Here you can find more information: Typography Settings.