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.
Related
I am new to Gatsby and React. I have set up a site using LekoArts' gastby-theme cara
I understand that what I create in the theme folder (src/#lekoarts/gatsby-theme-cara) will shadow the files seen in the theme's src folder. Which can be viewed here on github:
https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-cara/src
What I want to do is shadow the "templates/cara.tsx" file, there I am able to affect the size of different sections in the theme.
The issue is that that .tsx file has many other components that need to be imported that I don't want to shadow, how do I import these files that are on the themes directory (without having to shadow them as well)?
Here's a screenshot of the "templates/cara.tsx" file and all it's imports underlined
I have tried shadowing all files that need to be imported, but it got out of hand as they all have their own dependencies that need to be imported as well.
Thanks for your time
For anyone in the future that gets confused by this same thing:
You can access the theme's files using:
import Layout from "#lekoarts/gatsby-theme-cara/src/components/layout"
If you are using a different gatsby-theme check 'gatsby-config.js' look for plugins: [ { resolve: use this path for accessing it's src,
for my theme it gives "#lekoarts/gatsby-theme-cara" so I then add src/components/layout to access the layout component (without having to shadow it locally).
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.
I am trying to customize the theme when using Semantic-UI-React, there are detailed instructions on how to customize themes in Semantic-UI, like we can override variables to change their styles.
But I didn't find any way to customize themes with Semantic-UI-React, since there is no semantic/src/themes and semantic/src/site folders for us to make changes, what comes with Semantic-UI-React is just the default CSS file (the file we import in our index.js file "semantic-ui-css/semantic.min.css").
Is there any way we can customize the theme in Semantic-UI-React? Thanks in advance!
This link may also help in addition to the theming page on the docs site.
https://jsramblings.com/how-to-use-semantic-ui-with-a-custom-theme-in-your-cra-app/
It has a setup script after you run
npm install --save-dev semantic-ui
Yes there is a way to customize themes and create your own
https://react.semantic-ui.com/theming/
Basically just follow instructions from the docs link, install semantic-ui-less, which are not compiled Less files for the Semantic-ui CSS, craco-less which is just a path plugin for CRA configured Webpack so your Less compiler can find files properly without ejecting your CRA, move the files to created folder, modify theme.config, start app and you are ready to customize your own theme, although I didn't find some kind of API for variables on Semantic-ui docs, so I had to browse semantic-ui-less package files for them.
One problem I encountered was that I tried changing the theme for all components in theme.config and it was throwing errors about missing fonts and variables. Don't do this, it's not gonna work, check the Semantic-ui docs about theming, there is a note about it
Themes are per component, so although, for example, material themes are available for menu, button, and site, changing all values to "material" will produce an error for components which are not included in that theme.
https://semantic-ui.com/usage/theming.html#browsing-for-themes
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've just migrated my Drupal 7 live site to a fresh dev site and the default theme is only partially loading. Database, code, and files are fresh copies. Everything (content, links, etc) is good except for the theme.
The theme is listed under Appearance and is correctly set to default. The theme's image loads on the Appearance page, the name and info are loaded from the subtheme's .info file, and the parent theme's css is loading (zurb_foundation).
But the subtheme's custom css, regions, and favicon as defined in the subtheme.info are not loading. It's odd, like half the theme is working and half is not.
Attempted fixes include rebuilding the theme registry, switching themes back and forth, drush cc all, checking directory permissions.
Any clues?
I don't know why it broke, but I know the fix now.
Duplicate the theme folder. Rename the theme's info file. Load this as a new theme. Problem solved.
The contents of the theme directory are exactly the same, but the new name allows it to load correctly.
I know this is an older post, but the same happened to me recently.
The Live-Server used a different PHP Version (5.3.X). Switching to PHP 5.4 solved the problem immediately.