Change theme

šŸ™‹Get Help
1

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

3

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

5

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.

6

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

7

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.

8

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

10

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?

11

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

12

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.

13

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

14

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:

image
image1114Ɨ884 84.9 KB

If itā€™s a CPT you need to configure frontity.settings.js for the CPT - see here.

15

It is indeed

Okay thank you will look

16

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

17

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

18

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.

20

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.

21

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

22

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:

24

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.

25

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: