Customizing the look of the Dapp

[jvel07]

HI, @liarco. Thanks again for this repository. Hopefully, my project goes well so I can contribute to your wallet~
I am trying to customize the Dapp, but I am new to angular and typescript. I got a few queries, please:

1. How can I add background music (I tried adding via the index.html but it looks awful).
2. Where can I change the font-style? (I am using your pixel-theme.scss), I see an option such as @apply font-mono; where are these rules defined and how can I change/add more? I just find these inside the scss
3. I would like to add Twitter and OpenSea social icons, I could add them on a new <div> after the minting-dapp <div> but they are not aligned and also do not look good.

[liarco]

Hi @jvel07, thank you for your feedback, I wish you the best of luck with your project! :)

Here are some quick tips for you:

1. background music is very hard to add to a webpage (at least if you wanna do it in a proper way). Anyone who says otherwise is probably not concerned about user experience and good web standards, at least as of today. My recommendation is to avoid that for multiple reasons:
   • it's annoying for people that may not expect sounds to be played when they get to the page (that's why most browsers also block autoplay until user explicit interaction)
   • you can use a "player" UI to give people control over playback, but good player libs are not too easy to find and also probably not easy to integrate with your design properly (especially if you don't have much dev experience)
2. we are using Tailwind, you can use one of the available font families, or you can even customize it further
3. you can add them wherever you like, maybe try applying some Tailwind classes to adjust the layout. You can try using flexbox, then justify the items to center

I hope this helps.