I am new to sencha touch.
How do we change the background color of a button to white? I have a button with two images in each corner. I want the button to be plain white.
I tried using css like this:
.quest {
background: url(../images/quest.jpg) no-repeat left,
url(../images/rightarrow.jpg) no-repeat right;
background-color: white;
border: none;
border-color:white;
padding-left: 50px;
text-align: left;
}
My button is here:
{
xtype: 'button',
text: '<div class="quest">Info</div>',
labelWidth: '100%',
name: '',
handler: function() {
}
}
My button has grey borders (Grey default button color in sencha) with white color in mid. How do i make it completely white? Please help.
I have even tried:
style: "background-color: white"
Using 'cls' attribute solved my problem.
{
xtype: 'button',
cls: 'btn',
text: '<div class="person">People</div>',
labelWidth: '100%',
},
In my app.css define
.btn
{
background-color: white !important;
background-image: none;
}
We have to redefine both background-color and background-image properties so that the default sencha-touch.css properties are overridden. Thank you Thiem Nguyen for your help.
This should render your desired button :)
config: {
ui: 'plain',
text: 'Your Text',
style: 'background-color:white;'
}
Just like Thiem Nguyen said, this will work
{
xtype:'button',
text:'text',
ui:'plain',
style:'background-color:white'
}
Related
Creating an EXT js file:
Add border to header and body of tabpanel.
I have tried adding below stuff in .scss file, but did not work.
*.scss
.maintabpanel1 {
.x-tab-bar-plain { border:1px solid red !important;
}
.x-tab-bar-top+.x-panel-body, .x-panel.x-tabpanel-child {
border: 1px solid green !important;`enter code here`
}
You need to provide cls and bodyCls to your tabpanel.
An cls optional extra CSS class that will be added to this component's Element. The value can be a string, a list of strings separated by spaces, or an array of strings. This can be useful for adding customized styles to the component or any of its children using standard CSS rules.
A bodyCls class, space-delimited string of classes, or array of classes to be applied to the panel's body element.
In this gitlab-repo, I have created a demo using ExtJS6.2. I hope this will help/guide you to achieve your requirements.
screenshot from my local.
CODE SNIPPET
Ext.define('GeoLocation.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
cls: 'x-geo-tab',
bodyCls: 'x-geo-tab-body',
controller: 'main',
titleRotation: 0,
tabRotation: 0,
activeTab: 0,
items: [{
title: 'Tab 1',
html: 'it is tab 1'
}, {
title: 'Tab 2',
html: 'it is tab 2'
}, {
title: 'Tab 3',
html: 'it is tab 3'
}]
});
CSS part
.x-geo-tab {
.x-tab-bar-default {
background-color: #ece2e2;
border: 2px solid red !important;
padding: 5px;
.x-tab-bar-strip-default {
background-color: red;
height: 2px !important;
}
}
.x-geo-tab-body {
border: 2px solid green !important;
padding: 10px;
}
}
I have toastr success and error messages shown in my application. I changes the colors of the background and the font color. I want to change the icon colors shown in the messages. I have searched everywhere for this but I can't find a way to change the fill color of the icon or at least changing the icon. Below is a screenshot of success message
Below is for the error message,
I want to change the icons shown in these messages of change the filling color of the icons. The code in js file,
.success(function(data) {
toastr.success('Successfully Build ', 'Congratulations!', {
closeButton: true
});
}).error(function(err) {
toastr.error('Cant Build', 'Error', {
closeButton: true
});
In css,
#toast-container > .toast-success {
background-image: none;
background-color: #e9e9e9;
color: black;
}
#toast-container > .toast-error {
background-image: none;
background-color: #e9e9e9;
color: red;
}
Toaster uses background PNG images (24x24 pixels) for the icon so your best option is simply to replace them with a colored version you prepared beforehand.
Let's say you prepare a 'black checkmark' PNG of the same size, then the CSS will be:
#toast-container>.toast-success {
background-image: url(<insert here the url pointing to your new PNG>)!important;
}
Now as to creating the icon in the color you want, check flaticon.com (or other similar sites). You should be able to find royalty-free icons and download them of the size and color you want.
Try to use this sample code to have crimson heart
style.css
#toast-container > .toast-success:before {
content: "\f004";
color: crimson;
}
I know this is an old question, but I found a better solution (without re-writing the existing toastr templates icons).
If you don't want to change the current icon of 'toastr-success' but want to create new "templates" with different icons - you can use this pass a specific icon class in the JS:
toastr.info("Click To Open", "more text",{iconClass:"toast-custom"});
And then just set the CSS of "toast-custom":
/* this will set the toastr icon */
#toast-container > .toast-custom {
content: "\f00C";
}
/* this will set the toastr style */
.toast-custom {
background-color: purple;
}
I hope this will help!
CSS
#toast-container > .toast {
background-image: none !important;
}
#toast-container > .toast:before {
position: relative;
font-size: 24px;
line-height: 18px;
float: left;
margin-left: -1em;
color: #FFF;
padding-right: 0.5em;
margin-right: 0.5em;
}
#toast-container .toast{
background-color: #1b75bc !important;
}
#toast-container> .fa-check , .toast {
background-color: #328b17 !important;
}
#toast-container> .fa-trash , .toast {
background-color: #590619 !important;
}
.toast-message{
font-family: Calibri;
}
JS
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "3000",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "300",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut",
iconClasses: {
error: 'fas fa-trash',
info: 'fa fa-info',
success: 'fas fa-check',
warning: 'something',
},
};
enter image description here
I have a extjs tab panel created as following:
menuTabs = Ext.create('Ext.tab.Panel', {
border: 0,
region: 'center',
cls: 'mainTabPanel',
items: [
{
title: 'Tab 1',
html: 'Tab 1 Details'
},
{
title: 'Tab 2',
html: 'Tab 2 Details'
}
]
});
Now I want to style the panel for changing:
background of tab bar
button background
body background.
Can someone help me with this?
The first and the last are easy:
/* 1. background of tab bar */
.mainTabPanel .x-tab-bar-default-top {
background: green;
}
/* 3. body background.*/
.mainTabPanel .x-panel-body-default {
background: pink;
}
The button part is harder because you have borders, shadows, different states (active, hover,...) => I've only tested it in Chrome this won't work in < IE9 and haven't tested it in other browsers. You need to check every browser and make sure it works and maybe add browser dependent css for buttons.
/* 2. button background */
.mainTabPanel .x-tab-default {
background: yellow;
border: none;
box-shadow: none;
}
.mainTabPanel .x-tab-default.x-tab-default-active {
background: purple;
border: none;
box-shadow: none;
}
http://jsfiddle.net/Vandeplas/hsELW/1/
I'm using Exjts 4 and i want to change the button text color. Here is my code:
{
xtype: 'button',
text: 'My Button',
style:{
color: 'red'
}
}
In case someone needs it. I do not know if it's a dirty solution but it works
{
xtype: 'button',
text: '<div style="color: red">My Button</div>',
}
Davor Zubak shed light on a solution although it failed in my complex application. I achieved what I want by this:
Button's cls: 'myButton'
In my css file, define:
.myButton .x-btn-inner {
color: red;
font-family: Georgia;
font-size: large;
font-weight: bold;
}
This way it only overrides the ExtJS theme for the particular buttons who have 'myButton' cls.
There is some strange behavior in Extjs 4.2.0, but there is an override possible. Give your button a class using cls:'yourClassName' property and then in CSS make a full path to span holding the text, like so: .yourClassName div a span. Also give your css property a !important value to successfuly override base class.
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
},
cls: 'foo'
});
and in css simply:
.foo div a span
{
color:#ff0000 !important;
}
Here is a example.
I want to display only an icon on the Ext JS 4.1.1 button (no text). I want the width of button be be a little longer than the icon width. When displayed, the icon is always left aligned. I want it to be centered in the button.
I am unable to achieve the above using either the alignTo method or the background-position in CSS.
The icon is 32x32px png file.
Ext JS code:
var topToolBar = Ext.create('Ext.toolbar.Toolbar', {
width: '100%',
items: [{
iconCls: 'home32',
width: 60,
iconAlign: 'center',
scale: 'large'
}]});
var master = Ext.create('Ext.panel.Panel', {
layout: 'anchor',
anchor: '100% 100%',
renderTo: Ext.getBody(),
tbar: [topToolBar]
});
CSS Code:
.home32
{
background-position: center center;
background-image: url( images/32/home.png ) !important;
}
Don't forget after all Ext Js is plain css-html. Try the old time classic way.
Button definition
xtype:'button',
iconCls:'contactIcon80',
iconAlign:'top',
width:120,
height:100,
html:'<span class="bigBtn">Damn you hayate/span>'
Button Icon Class
.contactIcon80 {
background-image: url(../images/calendar80.png) !important;
width:80px!important;
height:80px!important;
margin-right: auto !important;
margin-left: auto !important;
}
Html span class (this is for placing the Text if you have in the correct position )
And with this way you can use bigger button icon size not just only 16x16 - 24x24 - 32x32
.bigBtn {
position: absolute;
bottom: 4px !important;
}