DEV Community

Make a landing page for your band in 30 minutes with gatsby-theme-musician 🎸

Eka on August 01, 2019

Background I published my first Gatsby theme–which is also my first-ever public installable package–today! 🎉 The Musician Theme aims...

Read full post

Nick Cue • Apr 26 '20

Great Work! I am new with Gatsby. How to connect the music theme with the starter theme? because I have no idea where to go for changing the blue color for LINK and add information in the footer section.

thanks

Eka • Apr 27 '20

You can do that by shadowing the file colors.js github.com/ekafyi/gatsby-theme-mus...

In your site directory, create the file YOUR-SITE-DIR/src/gatsby-theme-musician/gatsby-plugin-theme-ui/colors.js and copy the content from the link above.
Change any value you want there.

If you're not familiar with the concept of "shadowing" in Gatsby, have a look here: gatsbyjs.org/docs/themes/shadowing/

Nick Cue • Apr 28 '20

Thanks! And for for editing the footer ?

Eka • Apr 28 '20

Using the same principle as above, shadow the footer file: github.com/ekafyi/gatsby-theme-mus...

Shadow the footer if you want to (for example) change/remove the copyright/credit line.

IF you just want to change your social links, shadow the config file instead: github.com/ekafyi/gatsby-theme-mus...

Nick Cue • Apr 28 '20

for footer.js, where do i add it?

Nick Cue • Apr 28 '20

when I put my-site/src/gatsby-theme-musician/components/footer.js

I have a error

Eka • Apr 28 '20

The footer component has relative imports, ie. it imports these other components from the theme.

import useSiteMetadata from "../use-site-metadata"
import Social from "./social"

If you don't change those, you get errors because there's no Social component file in your site's dir. So make sure you change the import paths. You can see the example of Applying new props in gatsbyjs.org/docs/themes/shadowing... to figure out the theme import path.

Nick Cue • Apr 28 '20

Thanks, but I have no idea how to solve the problem. What is the path to add?

Nick Cue • Apr 29 '20

I try to add but not working

import useSiteMetadata from "gatsby-theme-musician/theme/src/"
import { Social } from "gatsby-theme-musician/theme/src/components/"

export default props =>
export default props =>

Eka • Apr 29 '20

Try removing the theme and including the filename like in the theme.

// in the theme
import useSiteMetadata from "../use-site-metadata"
import Social from "./social"

// in your site
import useSiteMetadata from "gatsby-theme-musician/src/use-site-metadata";
import { Social } from "gatsby-theme-musician/src/components/social";

Nick Cue • Apr 29 '20

Its not working, but its ok thanks

Nick Cue • May 8 '20

Do you know, how to change or add a favicon ?

rogersaz • Aug 12 '19

I've found how to change the color in the banner go to the file colors.js and change the accent color then to to the file componentStyles.js to change the opacity. If there is a different way I sure would like to know. I'm a little new at this Gatsbyjs.

Eka • Aug 13 '19 • Edited

Yes, that’s correct. What you did is especially useful for making major customizations.

If you only want to change the colours, the Banner component comes with the props: bgOverlay (takes any CSS background property value) and color (text color).

Simply add any of these in content/artist-landing-page.mdx:

<Banner bgOverlay="red" />

<Banner bgOverlay="transparent" />

<Banner bgOverlay="linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%)" />

<Banner bgOverlay="#fff" color="#000" />

Additionally, the Banner component also takes optional children props, which will replace the banner content (band name, tagline, social buttons) with the children.

<Banner bgOverlay="red">

Your own text here

</Banner>

This reminds me I’m way behind at updating the docs, thanks!

rogersaz • Aug 13 '19

tanks I'm glad I was on the right path and takes for the other way on doing the same thing.

Second question to build a drop down menu I thought I would use

title: "Sample" subcategories:
- subtitle: "Samp1" subhref: "#"
- subtitle: "Samp2" subhref: "#"

This code is not working and errored out
ERROR IS = Module Error (from ./node_modules/yaml-loader/index.js):
bad indentation of a mapping entry at line 11, column 9:
subcategories:

rogersaz • Aug 14 '19

I've been looking for a way to add a drop down menu to this theme really clueless on this option? Any help would be great/direction would be great!

Charles Hood • Feb 1 '20

I'd like to see a code example of how the Banner children prop works to replace the band name or tagline.

Charles Hood • Aug 20 '19

I love this template/starter! I'm already using it for a site for a musician friend of mine, thank you. I am running into a weird bug however, the dates for the shows are off by one. So far example, if I edit shows.yml with an event with a date of 2019-09-01, it shows up as Aug 31st.

thomashindsmedia.netlify.com

Rob Brennan • Dec 24 '19

Yeah - it's because the locale strings default ALL date and time values to en-GB instead of the locale of the app. 🧐

I just filed this issue - github.com/ekafyi/gatsby-theme-mus...

Charles Hood • Jan 3 '20

Could this be worked around with shadowing?

gatsbyjs.org/docs/themes/shadowing/

mark l chaves • Feb 18 '20

Shadowing. Hmmm--similar to WordPress' child themes or OOP polymorphism. Nice. Thanks for sharing.

BTW, I visited the repo for this theme. It doesn't look like it's actively supported?

Good luck!

Charles Hood • Feb 19 '20

There’s a fork that’s much more active:

github.com/TheRobBrennan/woatw

mark l chaves • Feb 19 '20 • Edited

Ok. Cool.

BTW, I hope you don't mind. I noticed that in your implementation--the hero isn't responsive on mobile? The theme's example site is though.

Do you know why? Is it a limitation with the theme?

Thanks!

Charles Hood • Dec 24 '19

Yeah I filed this as an issue on the starter over 4 months ago.

github.com/ekafyi/starter-musician...

Yalung Tang • Oct 16 '19 • Edited

Hey! I used you project for my singer/songwriter website, it came handy because I'm about to release my first album. I think I can help after releasing the album, I have a bug or two to report and also suggestions for improvement. GREAT JOB!!!! And thank you for this project! You can see the final result in yalungtang.com (I did not use the banner)

Thiago Braga • Jan 22 '23

Hi @ekafyi, thank you for this theme. It will help a lot. I'm finally installing the theme, but nowadays it becomes a little outdated. So I make two steps to get things work:

rm yarn.lock
NODE_OPTIONS=--openssl-legacy-provider gatsby develop

rogersaz • Aug 12 '19

First off very nice theme I'm looking to change the overlay color on the header banner from "blue" to my theme color where would you find that?

rogersaz • Oct 2 '19

How or what is the best way to add structured data schema to the site I would like to add the calendar to schema?

thanks

Riva Yudha • Aug 1 '19

Bravo, Eka! Looking forward to see what’s coming up next from you.

Jonathan • Oct 14 '19

Is there a way to resize the logotype image? Or any of the images?

rogersaz • Aug 22 '19

Would you know why you can not add a youtube "playlist" it seems you can only add one video?

rogersaz • Feb 18 '20

Quick question when I do a structured-data test using google the @type comes back with "MusicGroup" -- Is there any way of changing that since I not using the template for a "music group"

Nick Cue • Aug 29 '21

Hello! I know it's been a while but I can't deploy the project anymore, I still have an error when clicking on the deploy button.

thanks

Nick Cue • Apr 27 '20

Nice work ! I am new with Gatsby. How to have accesr to overlink color. because I see nothing

Charles Hood • Feb 4 '23

Any plans to update this? (It no longer deploys...)

Charles Hood • Jan 27 '20 • Edited

Putting the Banner below the Container tag makes for an interesting effect.