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
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.
I wanted to play with all different types of styling methods in GatsbyJS. In my project, I have three types of implementing stylings, global CSS, CSS Modules and CSS-in-JS(styled-component). Everything works as expected. But, when I build the project with gatsby build and open one of the index.html where I did CSS-in-js I see that there is a CSS file in data-href tag inside. When I open it, It contains all the CSS stylings of my project. But I didn't even import it to the component where I did CSS-in-js. Why would something like this happen? Why stylings from module.css are being referred inside this file.
A quick note: Since I do not have enough reputations, I cannot create new relevant tags related to ORY Editor. I'm not sure whether this question will reach the right people.
While using react-page currently, we can get a HTML string output by using:
ReactDOMServer.renderToString(
<HTMLRenderer state={editorValue} plugins={plugins} />
)
However, this exports the HTML tags with pre-defined "class" names, which are then styled using the CSS files imported in the code.
I'm trying to implement something, where I use react-page/ORY on a web-page. Export the HTML, and render this is a mobile app, using react-native. CSS files cannot used in mobile app development.
Now there is no easy solution to when it comes to CSS files of react-page/ORY, because all the CSS files are distributed all along the node-modules in separate folders.
I even tried:
- putting a bunch of these CSS files in a single folder,
- creating a .html file, and importing these CSS files in that .html file,
- opening this .html file now on browser clearly shows CSS files weren't applied, maybe because of distributed nature of CSS files.
So, any ideas on getting inline-styled HTML as export from react-page/ORY?
I'm trying to find a solution to this problem:
I'm using a template with different css includes based on page, ex:
Login uses login.css
Home uses home.css
If I load both css the login page is broken, because styles are overwritten by home.css
So I need to load or require login.css if the route or the component is Login and the other one when is Home.
If I load both webpack builds a global css with both files, and everything is broken...
I tried to require the css in componentDidMount, but I think that is not the way :)
Thanks in advance
It sounds like both these styles are quite specific to the pages, so why not simply namespace them?
Within your templates, have a .login/.home class, and use this as the namespace within the css. If you're using sass, this is as simple as wrapping all the sass in the class. Otherwise, you can go through and add the class to the beginning of all the elements/clases.
First of all, you shouldn't have any problems if you use different css classes for your views and just style the elements based on those classes.
The best way to load css in react is to do it by components, if you got a component login.jsx, in your styles folder (or whatever folder you're using to hold your styles) create a sass partial _login.scss and add the css selectors and styles for that given component, and do that for every component in your react application.
Then you just include those partials into a main.scss file and that's the file you want to load into your react app.
Here's an example of a main.scss file with some sass partials.
#import 'base/variables';
#import 'base/defaults';
#import 'components/login';
#import 'components/home';
That's a good and clean way to work with styles in react, of course you will need to configure your webpack in order to get sass to work in your application.
Take a look at this and this for more info.
This is a more generic approach to combine CSS files, without depending on technologies like SASS or reactjs.
I assume, if you combine the two CSS files, you are using Grunt or similar tool, to automate that task. So automatically updating the CSS files should be OK for you, even though they are from an external source and you want to use updated versions without making manual changes.
I also assume, you are using classes to style your pages, so there are no tag based styles in your CSS. Because you cannot rename the tags in the CSS file without braking it or make larger changes to your code.
If my assumptions are true, you could use something like grunt-css-prefix. It can add prefixes to your CSS classes for the login page, like in this snippet.
Original CSS file content:
.foo,
.bar,
h1 {
display: none;
}
CSS file content after running the Grunt script:
.login-foo,
.login-bar,
h1 {
display: none;
}
Just use the login-foo like class names in your Login-HTML and you are good to go.
For more details on how to use grunt-css-prefix, please have a look at https://www.npmjs.com/package/grunt-css-prefix.
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.