DEV Community

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

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.