I am trying to create a button with custom icon aligned to the left.
I have placed the icon inside
"App\touch\resources\images\" folder.
I have used the icon config of the button to specify the path of the icon.
On doing so, the icon is displayed on the screen but it is not fully shown.
Kindly provide me suggestions to include custom icons rather than sencha default icons.
{
xtype:'button',
itemId: 'btnHome',
height: 50,
icon: './touch/resources/images/Home_Icon.png',
ui: 'plain' ,
html: "Home"
}
You can also use a css class for defining images for buttons.
custom.css // css class
.mail-icon{background-image:url('../images/mail.png')!important;width:48px!important; height:48px!important; background-repeat:no-repeat; background-position:center center;}
source code
{
xtype: 'button',
id: 'btnMail',
itemId: 'btnMail',
ui: 'action',
icon: 'true',
iconCls: 'mail-icon'
},
In the above code i define a css class called mail-icon in custom.css file. And used this css class as iconcls for the button.
Touch 2.2 or later now uses vector based fonts for defining new custom icons. I've recently created this new app that will help you to prepare an icons and corresponding SCCS file for your Sencha Touch apps. This has also been tested with Sencha Architect projects.
The README explains the steps for creating icons at the Ico Moon web site and using the tool to convert Ico Moon project files into SCSS for use in Sencha Touch.
https://github.com/tohagan/sencha-ico-moon
Do inspect the button and change the width and height, for me the following css class fix this.
.x-button .x-button-icon {
width: 2.5em;
height: 2.5em;
}
when I inspected it the width and height were 1.5em.
Related
In the project, we used angular material and created a theme for it. Everything is defined globaly (src/styles/theme.scss and theme file is imported to src/styles.scss) so that changes are available everywhere.
Unfortunately, there is a race because the inputs are displayed correctly only after refreshing the page.
how I style the components:
mat-form-field {
.mat-form-field-flex {
border: 1px solid $form-border--color;
}
...
}
I would like to fix an issue I have on my website. I would like to have the safe bottom area the same color than the tab bar when scrolling, instead of the body background. What would you suggest me to do?
.header {
position: fixed;
bottom: 0;
right: 0;
left: 0;
height: 64px;
background-color: var(--black-3);
z-index: 9;
}
First screen
Second screen
Safari changing the tab/status bar color dynamically is a new feature of Safari 15. The release also adds support for the theme-color meta tag for customizing the color. From the release notes:
Added support for the theme-color meta tag to change the tab bar background and over-scroll area in macOS and iPadOS, and the status bar in iOS.
You have to put the <meta name="theme-color" content="#xxxxxx"> tag to your web page to use a specific color instead of the automatically picked one. Unfortunately this also means you can’t use your CSS variable for it but have to define the colour value in at least two places now.
Keep in mind that this also sets the top bar color for Chrome Android and the tab bar is at top in macOS and iPadOS Safari, so the effect may not be expected. The meta tag supports media queries in media attribute (see the release notes link) and changing the content attribute’s value using javascript should work as expected though (demonstrated in the Apple Developers video in references).
Note that content attribute accepts a CSS <color>. This means that the following is possible:
window.addEventListener("load", (event) => {
document.querySelector("meta[name=theme-color]").content =
window.getComputedStyle(document.querySelector(".header"))
.getPropertyValue("background-color");
});
I don’t have a device with Safari 15 beta available to test with, but I suppose you could also add the element dynamically. It works with Chrome Android at least:
window.addEventListener("load", (event) => {
let meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = window.getComputedStyle(document.querySelector(".header"))
.getPropertyValue("background-color");
document.head.appendChild(meta);
});
Resources:
MDN: Standard metadata names: theme-color
CSS-Tricks: Meta Theme Color and Trickery
Apple Developers: Design for Safari 15 (theme-color is featured in the first part of the video. It also has information about using the safe area environment variables for content floating at bottom.
Edit: Added the javascript examples
I need a little help! I have created an TinyMCE Editor (in admin only) button which appears in editor toolbar fine and functioning properly. Right now the button says “Live Chat”, what I want to replace with a dashicon or a font awesome icon.
I have the following code in my plugin.js file:
ed.addButton('livechat', {
text: 'Live Chat',
icon: 'dashicons dashicons-admin-links',
tooltip: 'Live Chat',
cmd: 'livechatButtonCmd',
});
Instead of showing a dashicon, it is showing a small empty rectangle :(
What is the correct way of doing this please?
I have just created new ASP.NET MVC 5 application which uses by default Bootstrap 3.0. Please tell me why all glyphs icons which I use and action links are blue. You can see this in attached image. I didn't change anything in bootstap.css or any other .css file. Shouldn't it be black by default? How to repair this?
The glyphicons are probably inside of some link tags styled with a blue color and since the glyphicons are simply normal text (just a different font), they inherit the color of their parent element.
If you want them to be black everywhere you could add some css like:
.glyphicon {
color: #000;
}
I'm learning about the Framework Icons in jQuery UI.
<span class="ui-icon ui-icon-circle-minus"></span>
produces an icon of a minus sign inside a circle.
Using the ThemeRoller Firefox Bookmarklet, I was able to change the color of the icon to red (to make it look like a delete button).
Q: How can I make one jQueryUI icon be red and another one another color?
<span class="ui-icon ui-icon-circle-plus"></span>
I'd like to make this one green.
Use the ui-state-... classes to change the state of the element with the icon. You'll need to design your theme so that items in different states (highlight,hover,active,error,default) have different colors.
<span class="ui-icon ui-icon-circle-plus ui-state-highlight"></span>
I would recommend against using the states this way (just to change colors, that is). I'd use the states semantically and let the icons render as needed to be consistent with the state. If I specifically needed red/green icons, I'd generate those icons specifically as images and simply use them directly instead of trying to design the theme to get different color choices just for those icons.
For what it's worth, I think the FamFamFam Silk icons integrate pretty well with jQuery UI.
You can't do this, at least not in the context of ThemeRoller. Themeroller uses one sprite image for this...a large image that contains all the Icons.
You can make another theme, same it's spritemap image to your images folder, and go into your jQuery UI CSS and change the .ui-icon-circle-plus background-image property.
It should look like this:
.ui-icon-circle-plus { background-position: 0 -192px; }
It would need to look something like this:
.ui-icon-circle-plus {
background-image: url(RedIcons.png);
background-position: 0 -192px;
}
You can look at the .ui-icon styles for the image it's currently using.