My target is to change header's font size for one single panel.
I tried to read http://docs.sencha.com/extjs/4.2.1/#!/guide/theming, but all what I found was theming the whole applications, theming all-the-panels-in-the-project and overriding config options in "Theme JS Overrides", but no CSS variables overriding for single component.
Is there any way to achieve it without fussing with this SASS for whole project?
Just add a class to the panel, then create a rule to match:
new Ext.panel.Panel({
cls: 'foo',
renderTo: document.body,
title: 'X'
});
.foo .x-header-text {
font-size: 24px;
}
Related
In Vaadin 23, how to increase or decrease the width of the drawer area of a Vaadin App Layout component?
In your global style sheet, for example frontend/themes/mytheme/styles.css (this assumes you have a custom theme annotation defined #Theme("mytheme")), add the following:
vaadin-app-layout::part(drawer) {
width: 300px;
}
This is slightly simpler than the solution that Tarek suggested (which also works just fine).
You will need to style the internals of the app-layout component.
If the project is using the custom-theme mechanism, then create a file called vaadin-app-layout.css under the directory frontend/themes/<Your-Theme-Name>/components. In that file, you can, say, increase the width of the AppLayout drawer like so:
:host {
--vaadin-app-layout-drawer-offset-size: 400px;
}
[part="drawer"] {
width: var(--vaadin-app-layout-drawer-offset-size);
}
NOTE: if you are not using the custom-theme mechanism, then you will need to add the aforementioned styling in a CSS file that is imported using the #CssImport annotation. For example, you can create a file called vaadin-app-layout.css under the project frontend directory, and then import it from java using the following annotation:
#CssImport(value = "vaadin-app-layout.css", themeFor = "vaadin-app-layout")
I need to change background color for this css code
.mat-toolbar.mat-primary {
background
: #d12626;
color: #fff;
}
.mat-toolbar.mat-primary {
background: #d12626;
color: #fff;
}
I need to change the background for the above code. How to do that
I tried
[ngStyle]=' .mat-toolbar.mat-primary {
background: #d12626;
color: #fff;
}
'
But not working Then i got another suggestion from stackoverflow
[style.font-size]="fontSize+'px'" this code is working for 'font-size' but not woking for my need code this is my need [style.mat-toolbar.mat-primary.background]='#d12626'; but not working
I used this
.mat-toolbar.mat-primary {
background: #d12626;
color: #fff;
}
code inside CSS code and it is working but I need to change the color dynamically.
I also need to update his colors
primaryColor
primaryLightColor
primaryDarkColor
secondaryColor
secondaryLightColor
secondaryDarkColor
primaryTextColor
secondaryTextColor
dont set the material color as primary or secondary then you can use ngStyle like this
<mat-toolbar [ngStyle]="{background:bgColor , color:'#fff'}">
<mat-toolbar-row>
<span>Main Toolbar</span>
</mat-toolbar-row>
</mat-toolbar>
bgColor is just a component property, when you don't set the color property the component don't have any class so it 's easy to change the style
demo 🚀
Dynamic styles
You should make the CSS properties as camelcase, for the font-size should be like this [style.fontSize.px]. You check other solutions from how-to-apply-dynamic-styles?.
Override styles
We can do so using by combining the :host with the ::ng-deep selector and most probably using for overriding Material styles:
:host ::ng-deep h2 {
color: red;
}
Custom theme for Angular Material
You can change a set of colors that will be applied to the Angular Material components.
https://material.angular.io/guide/theming
Without hack, it's not possible to change on the fly the colors of you angular application because the way to style your application using Angular Material is to use theming (that is described here https://material.angular.io/guide/theming) and your theming scss files will be compiled to css at build time.
I think the only hack to change colors of your app on the fly is to identify the hex color that you want to change (for primary, secondary, etc...) and you rewrite your style tag in your document using serch / replace.
But keep in mind that Angular Material is not designed to let user change theme and colors because they provide palette and hue that have been designed to provide good contrast and best practice regarding UX. That's why the solution I give you is really a hack.
the matrial dynamic color will be possible if the main set by css variable instaid of static hex values ,someone already publish a library to solve this by overwrite the main color to be used by css variables.
1️⃣ install angular-material-css-vars library
npm i angular-material-css-vars -S
2️⃣ import MaterialCssVarsModule on app module
#NgModule({
imports: [
...
MaterialCssVarsModule.forRoot(),
],
...
})
export class AppModule {}
3️⃣ use this service 👉 MaterialCssVarsService to change angular material main color like primary ,secondary, warm...
export class component {
constructor(public materialCssVarsService: MaterialCssVarsService) {
const hex = "#3f51b5"; // set default color color
this.materialCssVarsService.setPrimaryColor(hex);
}
setPrimaryColor(color: string) {
this.materialCssVarsService.setPrimaryColor(color);
}
}
you need to remove any existing #import '~#angular/material/theming'; from your main stylesheet file.
👉 demo 🧙♂️
you may check this question create angular material theme with css variables for more help
I'm trying to style the title of the title label in a Spark Window Application. I think if I can find the correct CSS selector I can set it but I haven't been able to find it.
WindowedApplication {
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");
}
WindowedApplication > TitleBar {
fontSize: 24; /* this doesn't work */
}
Here is more info on the Spark Window Application,
http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd8.html
Update:
It looks like the styles are defined inline in MacTitleBarSkin. So even if I could style them using CSS there is nothing more specific than inline styles. I tried to remove the styles in the MacTitleBarSkin but they don't seem to be removing. PS I'm using Flex 4.14RC.
The title from the WindowedApplication itself can not be changed programmatically. It is based on the OS settings.
If you do want to customize it, you will have to customize the complete application container (including close/maximize/minimize buttons).
You can achieve this by setting <systemChrome></systemChrome> to "none" in your application descriptor.
It looks like this will work but you have to copy the skins into your project and then remove the styles on the titleText label in MacTitleBarSkin:
windowChrome|MacTitleBarSkin s|Group s|Label#titleText {
fontSize: 12;
color: red;
}
See this post on how to import skins into your project.
I'm using Simple Dialog 2:
I have the dialog box below:
$('<div>').simpledialog2({
mode: 'button',
themeHeader: 'b',
headerText: 'Confirm',
headerClose: true,
buttonPrompt: message,
buttons : {
'OK': {
click: function () {
$.mobile.changePage(url, {changeHash: false});
}
},
'Cancel': {
click: function () {
},
icon: "delete",
theme: "c"
}
}
})
Screenshot:
I want to text-align the message to left and have some space from left and right side of the button. How can I achieve it?
Thanks.
you can use Firebug or another developer tool to examine the CSS to manipulate...
see docu
Overriding themes
The themes are meant as a solid starting point, but are meant to be
customized. Since everything is controlled by CSS, it's easy to use a
web inspector tool to identify the style properties you want to
modify. The set of of theme classes (global) and semantic structural
classes (widget-specific) added to elements provide a rich set of
possible selectors against which to target style overrides. We
recommend adding an external stylesheet to the head, placed after the
structure and theme stylesheet references, that contain all your style
overrides. This allows you to easily update to newer versions of the
library because overrides are kept separate from the library code.
Why I can't apply my CSS Class to hello?
{name: "hello", content: "Hello From Enyo",className:"myClass",ontap: "helloTap"},
Enyo 2.0 changed the way you specify classes for your components. You should no longer specify styles or classes in your kind definitions. If you need to do so you can use 'classes' instead of 'className'.
The recommended way is to call addClasses (was addClass in Enyo 1.0) inside your create function. To add styles directly, call addStyles.
You can still "cheat" with the old style, just use classes instead of className
From the documentation I've read you seem to be doing it correctly.
http://enyowiki.com/
(scroll to the bottom)
developer.Palm
I've tried the same thing and I can't get it to work using an external style sheet.
You can always do the style in enyo with the style keyword.
style:"background-color:blue;height: 50px; width: 30px;"
But this definitely is not good if you want to have multiple objects with the same style.
Good question, hopefully someone will find an answer.
........................................
While writing this I tried testing out some other options. I used the .addClass("css-class")
function after creating a kind(http://enyojs.com/api/#enyo.Control::addClass). See the code below:
enyo.kind({
name: "Menu",
kind: "Control",
components: [
{name: "back", tag:"div"}
]
});
var menu = new Menu();
menu.addClass("box");
menu.write();
My css is then in an external style sheet:
.box{
background-color:red;
width: 520px;
height: 600px;
margin:auto;
margin-top:75px;
}
Hope that helps. If you find a better way please share it.