You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close
Home > Glitch in Bio > Copying a Theme
Copying a Theme
print icon

We've designed Glitch in Bio to be open and extensible, so that community members can share and reuse remixes! If you see a cool remix, you can include its code in your own to achieve the same effect. The parts of the project you import into yours will depend on which bits of the site the creator has edited.

 

Have you already started working on your own Glitch in Bio site?

 

  • If not, the quickest option is to remix the version you like and add your own links.
  • If you have work in your own remix that you want to keep, you can import the theme from the cool project you've seen–read on to learn how to do that.

 

 

Style rules

Most themes will just be defined by a CSS file in the project. The styles are defined in a base sheet styles.css combined with a theme CSS sheet in the public/styles/themes/ folder. In the remix you like, open the source code (by choosing view source from the project page) and navigate to settings.json to see which theme is selected.

 

 

The JSON theme property will tell you the name of the theme currently displayed in the remix, for example in the original default app it's glitch.

 

Once you have the name of the theme, find it in public/styles/layout/ and open it.

 

 

Select everything in the CSS file and copy it to your clipboard.

 

 

Now, do the following:

  1. In your own project, create a new file in public/styles/layout/
  2. Give the file the same name as the one in the project you're copying from (or another name as long as you use .css extension).
  3. Paste the CSS you copied into your new file. 
  4. In your own settings.json, update the theme property to use the filename you added to your project, e.g. portfolio.

 

With any luck your site will now look the same as the one you like!  If not there may be other changes in the project to look for.

 

Additional extensions

  • The styles.css file may also have changes in it
  • The index.html page may have additional layout components or a different layout
  • The partial HTML files in the layout folder may have been added to or edited
  • The settings JSON may have extra properties in it
  • The site config in vite.config.js may have been extended to alter the functionality

 

Hopefully the creator will have provided detail of what they did with their Glitch in Bio remix! Check out the project README and any other information in it for clues.

Got more questions? Check out our Community Forum!
Open 24/7, the forum is where Glitch makers help each other and show off all the rad apps that they have created. It's the friendliest community of coders on the Web!
Feedback
4 out of 6 found this helpful

scroll to top icon