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...
Collapse
 
biwers profile image
Nick Cue

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

Collapse
 
ekafyi profile image
Eka

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/

Collapse
 
biwers profile image
Nick Cue

Thanks! And for for editing the footer ?

Thread Thread
 
ekafyi profile image
Eka

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

Thread Thread
 
biwers profile image
Nick Cue

for footer.js, where do i add it?

Thread Thread
 
biwers profile image
Nick Cue

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

I have a error

Thread Thread
 
ekafyi profile image
Eka

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.

Thread Thread
 
biwers profile image
Nick Cue

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

Thread Thread
 
biwers profile image
Nick Cue

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 =>

Thread Thread
 
ekafyi profile image
Eka

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";
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
biwers profile image
Nick Cue

Its not working, but its ok thanks

Thread Thread
 
biwers profile image
Nick Cue

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

Collapse
 
rogersaz profile image
rogersaz

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.

Collapse
 
ekafyi profile image
Eka • 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!

Collapse
 
rogersaz profile image
rogersaz

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:

Collapse
 
rogersaz profile image
rogersaz

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!

Collapse
 
charleshood profile image
Charles Hood

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

Collapse
 
charleshood profile image
Charles Hood

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

Collapse
 
therobbrennan profile image
Rob Brennan

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

Collapse
 
charleshood profile image
Charles Hood

Could this be worked around with shadowing?

gatsbyjs.org/docs/themes/shadowing/

Thread Thread
 
marklchaves profile image
mark l chaves

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!

Thread Thread
 
charleshood profile image
Charles Hood

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

github.com/TheRobBrennan/woatw

Thread Thread
 
marklchaves profile image
mark l chaves • 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?

Non responsive hero

Thanks!

Collapse
 
charleshood profile image
Charles Hood

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

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

Collapse
 
yalungtang profile image
Yalung Tang • 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)

Collapse
 
thiagobraga profile image
Thiago Braga

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
Collapse
 
rogersaz profile image
rogersaz

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?

Collapse
 
rogersaz profile image
rogersaz

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

Collapse
 
rivayudha profile image
Riva Yudha

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

Collapse
 
jonathanhelvey profile image
Jonathan

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

Collapse
 
rogersaz profile image
rogersaz

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

Collapse
 
rogersaz profile image
rogersaz

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"

Collapse
 
biwers profile image
Nick Cue

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

Collapse
 
biwers profile image
Nick Cue

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

Collapse
 
charleshood profile image
Charles Hood

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

Collapse
 
charleshood profile image
Charles Hood • Edited

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