I want to change the color of the headers in a grouped list. For the moment I've got the default theme. I think I have to use something like "$list-header-bg-color" but :
WHERE can I use it ? I tried to write something like :
$list-header-bg-color = '#CCC'
directly at the end of the "sencha-touch.css" file but it doesn't work at all ... Somebody can explain me how does it works ? (with a little example please). Thanks in advance
First you need to install ruby
then install ruby gems
then install compass
then open your application *.scss file (should be in resources/sass/)
after the line
#import 'sencha-touch/default/all';
include your line
$list-header-bg-color = '#CCC'
Note that by default the value of this var is
$list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
Maybe you can change the base-color to have a more "unified" look (depending on what you want to do ...)
then compile your scss file
compass compile
Now your theme should have been compiled to your app.css and your new color is good :)
For more detail check this article I wrote not long ago : sass-for-sencha-touch-2-windows-7
Sencha is using SASS for theming. So that line should go in the sencha-touch.scss file. Then you should compile that file with compass to get a css file. See this videos:
http://vimeo.com/26506883
http://vimeo.com/17879651
slides from presentation http://www.slideshare.net/senchainc/theming-sencha-touch
reference docs http://dev.sencha.com/deploy/touch/docs/theme/
Check this also http://www.sencha.com/blog/sencha-touch-theme-contest-winners-announced/
Related
I have a problem with dialog in drupal 8, and I found a place that make me stuck.
There is a code in this file not work as my expected. Please see the image
I just want to do the simple thing is comment the line out like below:
I can't do this because this is core file. So I want to override this file or this function only.
I trying to use libraries-override but no hope. This is my code, I am newbie so this code may have mistake or wrong.
"capital" is my theme, not module
below is my theme structure:
Please help... I googled this issue for long time.
Better way would be:
libraries-override:
core/drupal.dialog: captial/dialog
I have solved it by myself:
Step 1: clone core js to your theme js like this:
Step 2: modify template library ([your-theme-name].libraries.yml)
Declare core file your need to add to your theme
Step 3: disable core files using your theme info file ([your-theme-name].info.yml) and add your files as library:
That's it :)
Any better idea? please suggest me more.
I want to introduce into my project some code to be highlighted on certain pages (like index.hbs) I've searched for libraries that can do this and found tools like highlight.js, but I was unable to use it in my ember project. Can anyone explain how to import a custom library like highlight.js or can someone give me a recomandation for a tool. I've tried to use this tool: ember-cli-eg-code-highlight, but it is not specified how to use it. Ok I have installed it, pasted the {{highlight-js code=file lang=language hasLineNumbers=hasLineNumbers}} in my index.hbs, but it does not work. Also the ENV.emberHighlightJs: { style: 'arta' };I have no ideea where to put it. Tried to put it inember-cli-build.js but it is not working.
I have found also markdown-code-highlighting. But I am lost at this step: "In your Brocfile you'll need to import the CSS styling you want for the highlighter. " So where exactly is my brocfile in my ember project?
Did you restart ember server ?
You can find example of using ember-cli-eg-code-highlight here: https://github.com/EmberGrep/ember-cli-eg-code-highlight/blob/master/tests/dummy/app/templates/application.hbs
But it looks like addon is buggy. So it worth to check this PR https://github.com/EmberGrep/ember-cli-eg-code-highlight/pull/9
P.S. about brocfile -- now it names as ember-cli-build.js at the root of project
Currently, all my angular material HTML attributes are highlighted in yellow with WebStorm 9 (Mac OS X Yosemite) warning: "Attribute [name] is not allowed here".
How can I teach WS to automatically recognize these attributes as valid? I am aware that I can add each one one-by-one to the list of custom attributes, but was hoping that there would be a better way to do this.
UPDATE:
Just wanted to clarify that this issue applies to Angular Material project, and not the AngularJS itself.
You need to add the angular-material.js file as a Library in WebStorm:
Open Preferences (Mac: Cmd+,, Win/Linux: Ctrl+Alt+S)
Go to Languages & Frameworks > JavaScript > Libraries
Click Add and then press the + icon
Find angular-material.js in your node_modules folder
Add a Name and a version and press Ok
Now you will have completions for all elements and attributes that have an #ngdoc documentation in the angular-material source code.
Usage
Start typing and you will see the completions:
Pressing F1 (Ctrl+Q on Win/Linux) will also show some docs, if available in the source code:
Important note
Not all features are properly documented, the following won't show up (unless you already used them) cause they are defined dynamically in a loop, with no #ngdoc for them:
var API_WITH_VALUES = [ "layout", "flex", "flex-order", "flex-offset", "layout-align" ];
var API_NO_VALUES = [ "show", "hide", "layout-padding", "layout-margin" ];
So for these you'd have to add them as a custom attribute (Alt+Enter > "Add flex to custom html attributes").
Environment
Tested on a Mac OS X 10.11.4 using WebStorm 2016.1.1, but this should work for older versions as well.
I am using PHPStorm, which is a sister Project of WebStorm, but it should work the same way.
You maybe need to add the Library:
File
Settings
Languages & Frameworks
Javascript
Librarys
Add here AngularJS
If this does not work, you can add them manually:
Follow this Steps:
File
Default Settings
Editor
Inspection
HTML
Unknown HTML tag attributes
To the right you will see in Options "Custom HTML tag attributes". Enter here the attributes you want to allow.
I highly recomend you to install the Angular.js plugin:
Go to menu File > Settings (or ctrl + alt + S if you're on Windows);
Select Plugins in the window that'll open;
Click in the Browse Repositories button;
Type AngularJS in the search field. Select the plugin;
Click Install Plugin.
The plugin is incumbed to read #ngdoc annotations present in ngMaterial sources and create documentation for their directives.
It seems to support WebStorm and other IDEs, but I could not find it in the plugin registry while filtering by other IDEs. Maybe it'll work inside WebStorm...
Anyway, this is what you get:
You have also a plugin that helps a lot, check it out. It helps a lot
Angular material v2, Teradata covalent v1, Angular flex layout v1 & Material icon live templates
And with the solution provided by #Alex Ilyaev gives a lot of help.
But its no perfect.
Hope it helps.
Currently I don't think that idea's AngularJS plugin understands angular-materials attribute extensions.
It does understand the directives i.e. control click <md-button ...> and the directive (custom tag) is found.
For now you will have to add the attributes af custom attributes in order to get a "green" page.
I'm using ember-cli-compass-compiler right now, it works well if only compass used, but I also want to use some plugins, such as Susy. I don't know how to require plugins with compass.
I've try to read the source code, founded it has a option object and includes require: sass-CSS-importer by default, but how to override/extend this option? What code should I put in Broccoli.js file?
Thanks for helping.
Finally I figure this out by myself, in case of someone needs help, I put my solution at here:
Open Brocfile.js and find this line:
var app = new EmberApp();
then, change it to:
var app = new EmberApp({
compassOptions: {
require: ['sass-css-importer', 'susy']
}
});
this assumes you want to use Susy as well as me, and of course you can override other options like above.
BTW, if you use sass syntax checker, e.g. syntastic in vim, #import "susy"; will rise an error about load path problem. Before using Ember-CLI, I use a config.rb as compass's configurations, so sass knows about require "susy" is a dependency should be concerned about. But now we no longer have config.rb file anymore, fortunately you can let sass knows required gem(s) by passing -r GEM_NAME to passing the syntax checker. For case of syntastic, you can simply put this line in your .vimrc file:
let g:syntastic_scss_sass_args = "-r sass-css-importer -r susy"
Is there something I can enter in the command line to find out which version I'm running?
Without knowing more about your exact situation, the easiest way is to add the following JavaSscript after you initialize Foundation ($(document).foundation();).
The final product would look like this:
$(document).foundation();
$(document).ready(function(){
alert('Foundation Core Version: ' + Foundation.version);
alert('Foundation DropDown Version:' + Foundation.libs.dropdown.version);
});
The first alert gives you the core version of foundation you are running in foundation.js and foundation.min.js.
If you are not using foundation.min.js, which loads Foundation Core and all JavaScript plugins such as: accordion, dropdown, joyride, tab, and so on, you can use the second alert. It will give you the version of the specified plugin.
You can visit the Foundation Docs on JavaScript Setup to learn more about foundation.min.js and the plugins such as: foundation.accordion.js, foundation.dropdown.js, foundation.joyride.js, foundation.tab.js and so on.
I have only tested the JavaScript on Foundation 5.0.3, but I believe it will work on older versions.
I hope that helps.
search in foundation.js for "version"
window.Foundation = {
name : 'Foundation',
version : '5.3.1',
In your browser's dev tool's console, type "Foundation.version"
For anyone looking at an easy way to do this:
To look up a project's foundation version, look into /bower_components/foundation/bower.json
it should have something similar to:
"homepage": "https://github.com/zurb/bower-foundation", "_release": "5.2.1",
As far as I'm aware there isn't something you can type in to check the version, you can type 'foundation version' but this will likely come back with 1.0.4 which I think is the installer or compass version, it isn't the version of Foundation.
In the foundation.js file, search for 'version'.