Change theme

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.

Thank you @mburridge will have another go with a project shortly :rocket:

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. :man_shrugging:

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 :call_me_hand:

Thank you

Z

Great, good luck. :four_leaf_clover: 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. :crossed_fingers:

Hi @zackrose21

There are no silly questions! :smile:

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

:grin: