In my project there is a requirement to create custom theme. The base color of the components is very light(almost white). The issue is the icons appearing on the header of panels/windows(close, maximize) are almost invisible. What are the sass variables I need to declare so that the images used for these panels and windows are darker(in contrast to white)? And in which scss file do I need to include them?
You will need to replace those images, in ExtJS 5 you can find them at:
YourProjectFolder/ext/packages/your-theme/resources/images/tools/
There you will have two files, tools-sprites.png and tool-sprites-dark.png
You can replace them there if you are using the standard theme or you can save the new image in your custom theme folder path.
Notice that for this to work properly with all browsers, you will have to rebuild your theme using sencha command.
Related
I'm new to Gatsby and I started a project using a starter, Gatsby-starter-ghost. The starter comes with the Casper theme, and now I want to replace Casper with a new theme or build a custom theme.
I can't figure out how to replace Casper or even find where it is in the project folders. There is a lot of documentation available on Gatsby themes and starters but I can barely find any documentation for gatsby-starter-ghost. I've dug through the node_modules and src folders and can't even find where the Casper theme is located. If I install a new theme with npm and put the plugin in the gatsby-config file it breaks my project and I get GraphQL errors galore. I've read that themes should usually be in the content folder, but my content folder contains nothing but two empty folders.
Here is my project structure:
How do I replace the theme in the gatsby-ghost-starter?
Gatsby Themes use a concept called 'shadowing'. You can replace any of the default files for the theme by placing a file with the same path and name in your content folder. This is probably why your folder doesn't have any theme files, the starter is just using all the defaults.
That said, looking at gatsby-starter-ghost, it doesn't look like it's using a Gatsby Theme at all, so shadowing doesn't apply.
If you look at gatsby-starter-ghost/src/components/common/, it has various files which define the components that are being used. Most notably, Layout.js is setting out the base structure for every page, and imports a CSS file from ../../styles/app.css.
This CSS, those common components, as well as the various template files in src/templates are what is defining the HTML structure of the pages, and the CSS that those use. If you adjust those, you should be able to change the design to suit your needs.
Start by looking at app.css and adjusting it a bit, see how far that takes you. But you may need to update the components if you want to introduce new classes or change the HTML structure.
In my Extjs app I have kept custom.css file in the resources folder of the root for testing and in the build- resources folder. And add the css path to two both index.html files(test and build). But whenever I make it to convert to build production, index.html file overwrites and custom.css file finds missing. Somewhat problematic it is. I know that this is because I add this file externally. But Is there any permanent solutions to fix this, without violating the Extjs app structure ??
You can add your custom styles via scss. There are several articles around the web about styling your ExtJS app.
http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html
http://www.rallydev.com/community/engineering/guide-custom-themes-extjs-4 [dead link]
If you only want to add your single custom css file - which i do not recommend - you can do things like that:
Include an existing CSS file in custom extjs theme
http://www.sencha.com/forum/showthread.php?270694-How-to-include-custom-components-CSS-in-build-CSS
I'm using Ext JS and Sencha CMD and want to experiment with a few themes.
Also I have read that the theme for an app can be changed in app.js(using theme property) and sencha.cfg(using app.theme property) and then run sencha app build.
I would like to know,
Why are this configurations in two different files?
And Which is the correct way of doing this?
In ExtJS 5, the correct way to specify your application's theme is via the app.json file, as described in the documentation.
The sencha.cfg method also works, but is there to support migration from older versions of ExtJS.
Both are corrects ways to define the theme. However, it's better to have the theme defined in app.json. You'll anyway have a theme default defined in sencha.cfg -
app.theme=ext-theme-classic
What you define in app.json as
"theme": "my-theme"
will override what is defined in sencha.cfg
Refer the doc for clarity - http://docs.sencha.com/cmd/5.x/microloader.html
I have to create a custom stylesheet for my ExtJS application. I have created it using sencha command and by modifying Package/MyCustomTheme/sass/etc/all.scss file. It has changed the base colors etc of the application and panels. When I am including a combobox on my page, it does not seem to have any style applied to it. What variables I need to include in the .scss file for combobox? What is the correct way to change the style of all the components used in the application?
If you have a custom theme, built with secha app build, and then you add a new component that needs extra css rules, you have to rebuild your app before the css for that component gets included in the css of your custom theme.
I'm not sure if I'm clear:
Build your app with custom theme with sencha app build
Include a new component class (Ext.form.field.ComboBox in your case).
Now the css file of your custom theme will miss the combobox css rules.
Rebuild your app with sencha app build
Your css theme files are now complete and everything's OK.
I want to have neptune toolbar on classic themed ExtJS website.
Is this thing possible ? If so , How ?
You could create a custom theme derived from a classic theme and you could copy the toolbar styles to your custom theme folder.
sencha generate theme my-custom-theme
Then, on your project's config file found on project folder/.sencha/app/sencha.cfg, edit/add the following:
app.theme=my-custom-theme
#app.theme=ext-theme-classic
I assume you have generated your project through Sencha CMD. Copy the toolbar styles found on packages/ext-theme-neptune/sass/var/toolbar and/or packages/ext-theme-neptune/sass/src/toolbar to your custom theme.