Hi there,
Iāve set up a new project and added the frontity bootstrap theme to the /packages folder. How do I switch to use this theme as the default?
Thank you
Hi there,
Iāve set up a new project and added the frontity bootstrap theme to the /packages folder. How do I switch to use this theme as the default?
Thank you
Hi @zackrose21,
Welcome to the Community!
Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code
Hi @zackrose21
When you ran npx frontity create
to set up your Frontity project you were offered a choice of two starter themes:
In the frontity.settings.js
file, which can be found in the root of your project, locate the package for the theme that you chose. It is an object in the packages
array and looks like this (assuming youāve selected mars-theme
, twentytwenty-theme
will be slightly different but similar):
{
name: "@frontity/mars-theme",
state: {
theme: {
menu: [
["Home", "/"],
["Nature", "/category/nature/"],
["Travel", "/category/travel/"],
["Japan", "/tag/japan/"],
["About Us", "/about-us/"]
],
featured: {
showOnList: false,
showOnPost: false
}
}
}
}
Remove that object from the array and replace it with a similar object for the theme you want to use:
{
name: "your-theme-name"
}
Other properties in this object will depend on the theme youāre using and may not be the same as the properties for the theme you removed.
Hope this helps.
Thank you,
The key is, I want to use bootstrap in a project, is this possible?
Im a wordpress dev and want to start using it as a headless cms with a react front end, frontity looks like a good solution, Iām not familiar with css in js, can I still use css with frontity/ can i use the boostrap framework?
Thank you
Zack
Hi @zackrose21
Yes, you can use Bootstrap if you wish. Take a look at this repo for an example of including Bootstrap in a Frontity project - in particular look at this file.
You can add any CSS file in a similar way.
However, by adding Bootstrap or other CSS as a Global
style the whole framework will be loaded on your site. This will impact performance. It is worth your while to become familiar with css-in-js. It is far more efficient, loading just the styles it needs on each page view, and I think weāre likely to see it more frequently in the future so it could become a core skill for front-end devs.
Take a look at this page to see the rationale for using css-in-js and to familiarise yourself with the concepts.
Hi @zackrose21
When you say āit killed itā could you provide a bit more detail. What error message did you get (in browser console and/or in terminal)?
Did you have the bootstrap file in the specified location?
I got :
ModuleNotFoundError: Module not found: Error: Canāt resolve ābootstrap/dist/css/bootstrap.min.cssā in ā/Users/Zack/Desktop/frontity-test/packages/mars-theme/src/componentsā
I tried downloading the bootstrap.min.css and putting it in that directory but still no luck?
Also on another note, Iāve hooked up to a dev site that Iāve been working on.
At the moment Iām getting assets rendered to the page but Iām not sure how itās deciding what to output, I think it might just be putting everything it can find out to the page.
How can I customize what I want to output? eg if i want to output certain posts.
Eg if I want to recreate the demo theme with content from my own site.
If I also want to go one step further and bring specific things eg post_thumbnail and things like that / if i wanted to build reusable layouts in an advanced custom fields type of way how can i get started doing that?
This would allow me to replace my current workflow with frontity
Thank you
Hi @zackrose21
Did you update the package.json
file as per line 25 in this file?
Frontity will render everything in the content.rendered
property of the post/page being displayed. If you want to customise what/how things are displayed you will need to create a processor.
In the same way, if ACF is adding content to the page/post content it will be in the content.rendered
property and Frontity will just display it, unless modified by a processor.
It sounds like youāre working on a non-trivial project. To help us answer your questions it would be useful if you could provide a link to a repo so that we can look at your code and clone it for testing if necessary. Thanks.
(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)
Hi @zackrose21
Is projects a custom post type? When I look at the JSON for pages I see that the āprojectsā page has no content:
If itās a CPT you need to configure frontity.settings.js
for the CPT - see here.
It is indeed
Okay thank you will look
(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)
(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)
Hi @zackrose21
Where are you getting the bootstrap theme from?
When you say ābut no luckā could you be more specific - like tell us what the error message youāre getting is. Thanks.
Hi @zackrose21
How did you set up the project?
Try it this way:
git clone https://github.com/frontity-demos/bootstrap-theme-demo.git
cd bootstrap-theme-demo
npm i
Then in packages/bootstrap-theme/src/components/Theme/index.js
comment out line 19:
import ErrorBoundary from '../ErrorBoundary/'
as that will cause an error.
Then run:
npx frontity dev
Let me know how you get on.
Brilliant thatās working
Going to try a full site from scratch with frontity
I see what you mean about css in js it keeps all relevant code in one place
Thank you
Z
Great, good luck. We have this tutorial (text & video) on setting up a Frontity site from scratch, though in a couple of weeks (hopefully) it will be superseded by the new step-by-step tutorial in our docs.
Hi @zackrose21
There are no silly questions!
What is your context for those questions, i.e. what theme - mars-theme, bootstrap-theme, your own custom theme? Answers to styling questions such as those will depend on the theme in use, what React components you have, etcā¦
If you havenāt yet, I suggest you take a little time to follow that tutorial as it will give you an insight into how Frontity works and it also covers CSS-in-JS, and you may then be able to figure out the answers to your questions.
The forthcoming step-by-step tutorial will go into greater depth but weāre not quite ready to publish it yet - hopefully it will go live in the next week or two.
Thank you
Made some progress, now added acf so will experiment as I need to be able to render the output of re-usable blocks on the front end