I need to change the color of the titlebar to white color . What is the steps to be done Without using sass. I should be able to do that without theming in sencha touch.
Here is the style which you have to add in your css file.
.x-toolbar-dark {
background-color: white !important;
background-image: none !important;
}
By adding this style, you are simply overriding the sencha titlebar's default styling and now color of titlebar will become white.
NB: I would prefer you to use SASS if possible. Comment here if you need to change your sass file. Thank you.
Related
I'm trying to add a label (title) inside the border of my container. Although there are many implementations of input fields with this feature, I haven't found any for normal containers. Here's a screenshot of what I'm referring to:
I considered adding a background to the text, but since the container's background is different from the background behind it, this won't work as the colors will clash. Does anyone have any ideas on how to achieve this in React Native?
I haven't implemented this in react-native so I can't say if this will work for you, but I have done this in a web app before using a linear-gradient background on the label with a little padding-left and padding-right:
label {
background-image: linear-gradient(transparent 50%, #666 50%);
padding-left: 3px;
padding-right: 3px;
}
The hex value would be the background color of your input.
My CN1 app features a FloatingActionButton. I need to change its background color. My styles are all defined in CSS. So this one is :
FAB {
background-color: #80ccc4;
}
And if I create the FAB like FloatingActionButton.createFAB(FontImage.MATERIAL_POWER_SETTINGS_NEW, "FAB"); it results in a FloatingActionButton with an added "hyphen" on top of it :
On the contrary if I create the FAB without providing a style and then programmatically set the background color like fab.getAllStyles().setBgColor(0x80ccc4); then I get the expected FAB :
So what should I set in the css file to remove this unwanted "hyphen" ?
Any help appreciated!
You are styling FAB and not FloatingActionButton which is the right UIID for that. If you used setUIID that might be problematic on a FAB as the content is set later.
The reason this is happening is a bit of a problem with CSS. We get the background color of the FAB from the RoundBorder but transparency should be 0 for the icon in the center.
Unfortunately in CSS you can't express both a background color and 0 background transparency. I don't think this is solvable in the CSS so I'll add a special case to the FloatingActionButton that should workaround this.
My users are complaining that the change in color for md-buttons on focus is too subtle.
What is the right way to make an adjustment to this for the default color palettes?
Append: I am looking on how to adjust the button styling when the button has focus, not looking for how to create my own theme.
Also, I am using Angular-Material 1, NOT 2
OK, for anyone else looking for this, I found the answer in angular-material.modules.closure.button and angular-material.modules.js.button
.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]):hover {
background-color: '{{primary-600}}'; }
.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]).md-focused {
background-color: '{{primary-600}}'; }
This tells me what I needed, which is that focused buttons get primary-600.
NOW I can customized the theme palletes as recommended in the first comment
I am trying to create a mobile app using angularjs and ionic.iconic default color is white.I need to change my app background color to blue without changing ionic css.so I manually set default color to index.html like
body { background-color:azure !important; }
but still background color is white.how to manage this without changing ionic.css
you can use .scroll-content {
background-color:azure !important;(change background color here)
}
Try overriding pane class in your custom css file.
.pane{
background-color: azure;
}
I'm very new to Aloha (WYSIWYG) Editor and i would like to know how to remove/disable its blue outline then the editing field is on focus.
I've managed to disable the yellow highlight outlines, but couldn't find a way to disable the blue on focus border outline.
Any friendly advice?
Thanks.
This blue outline is made by the "highlighteditables" plugin's CSS src/plugins/common/highlighteditables/css/highlighteditables.css:
.aloha-editable-active, .aloha-editable-active[contenteditable=true]:focus {
outline: #80B5F2 solid 5px !important;
}
Check that when running the inspector in the web browser, selecting the element and disabling this style helps.
Note the ugly programming style with !important :(
Unfortunately, as you can can choose plugins to load you only choose JavaScript, CSS of all the plugins enabled during the build are merged into the aloha.css and are always loaded.
One way to fix it is to build the editor yourself. Basic introduction is described in section "4.3 Customized Builds" of Develop Aloha Editor guide.
As building Aloha yourself requires some effort, you may be interested in quick workaround using the inline style:
outline: none !important;
for the element you have problem with. Note the !important keyword - it is required.