I am using Intel XDK to use develop ionic app. I wanted to override the default color variables for ionic. I followed the followings steps exactally:
Writing a Sass Theme
and finally gulp sass command to complile sass.
I got the my desired color for balanced variable, but all the ionic icons are not displaying
I do not know what went wrong.
Yo can use custom CSS elements to overwrite color properties. Use Intel xdk console to inspect the element first then create a custom css for that element.
Related
We are currently migrating a hybrid application from a selfmade framework to ionic 2. In the old app we had multiple sass files that compiled into a singe css file containing different themes that were applied to the app by switching a class on the body (like ".skin-red").
Is there a way to achieve that with the $varaiables map of ionic or will i have to create multiple style files with a custom written task and change the used css file at runtime with js code? (which i'd rather not do)
Follow this User-Selected Style Themes in an Ionic 2 Application tutorial.
Or you can set all colors using ts variable and update color hash code run time.
HTML:
<ion-header>
<ion-toolbar color="primary" [style.background]="headerBackground">
<ion-title>
</ion-title>
</ion-toolbar>
</ion-header>
TS:
public headerBackground = '#ddd';
Should be shared variable.
Following documentation, I downloaded Semantic UI with:
npm install semantic-ui
then, I customised few variables per site, also few on element level, button for example.
This is all well, and I haven't had any problem changing those.
Then in theme.config file, I could specify:
#button: 'mytheme';
to pickup those custom style overrides
For my theme to be separate from Semantic UI core, I crated directory in the following path,
src/themes/mytheme
,and after running gulp build, I expected to have that mytheme exported over to dist/themes/mytheme along with basic and default which were already there. But that was not the case. So to be able to use my new button styles, I had to move manually newly generated button.css from dist/components after that gulp build task.
Am I doing this wrong? How to have all override files in one place like packaged theme? So I could then add <link> declaration after semantic.min.css to use my overrides.
Is there any way to change the menu width without using SASS? (I'm running Windows 8.1, and I can't tell you how much I don't want to install Ruby...)
I can change the width of the menu contents, but the mmslideout moves to the wrong place.
I believe you can override the .mm-menu class in your custom css file for the min-width, max-width properties.
Regarding SASS compilation, i would recommend using Libsass, it's an efficient C/C++ port of the Sass CSS precompiler.
Sassy Studio seems a pretty clean VSIX, and worked for me. (Eventually ;). I'm new to SASS.)
I am using a bootstrap 3 template and have noticed on some that scrolling is not smooth and kind of bumpy. I am not even sure what to look for. This only happens in Chrome. It does NOT happen in Safari or Firefox.
Is this a javascript or css problem? I have never run across this before.
This seems to happen worse in Chrome for mac, but also happens in chrome for windows.
It seems to happen when I make the window smaller and then make it bigger again. If I leave the window the same size, it seems to scroll fine.
Link:
http://demo.phppointofsalestaging.com --> Click Sales then resize the window in Chrome and then scroll down and then up. You will notice it is very bumpy and not smooth
:root { scroll-behavior: auto; }
Add this simple code to your custom CSS file.
"scroll-behavior" declared as "smooth" in bootstrap css/bootstrap.reboot.css.
So we need to overwrite it using our custom css.
The problem is in the jquery.nicescroll plugin that is used with the theme, the function jQuery.fn.scrollTop make the problem, it takes more than 75% from the cpu when run. my solution is :
You are using the jquery.nicescroll plugin version 3.4.0 use the latest version currently version 3.5.0 available.
If not working as expected, downgrade to version 3.2.0 I'm using it with my site without any problem.
Also check that if the hwacceleration in the Configuration parameters of the plugin is set to (default: true).
Update 1:
nicescroll plugin is a solution to have a custom scrollbars compatible with desktop, tablet and phone devices and to override the default scrollbars of the browser " more information her ", "you didn't see the diffrence because the plugin used in your project works when your browser window under 767px" so another solution if you don't need it you can remove the plugin from your files by following this steps:
Delete the plugin file (jquery.nicescroll.js) from your script folder.
Delete the plugin link from all your files.
Delete the plugin function lines (21 to 36), (49 to 66), (149) from (unicorn.js) file.
Update 2:
I made some tweaks for the (unicorn.js), download it from her, then replace your original one.
Hope this will help you.
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.