Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/waldronmatt/musicwebtemplate

Free website template built for musicians / artists to promote their music and connect to their audience.
https://github.com/waldronmatt/musicwebtemplate

ajax artists css css3 form html html5 javascript jquery jquery-library merch modal modal-plugin music music-player musicians php5 responsive-web-design template video-player

Last synced: about 2 months ago
JSON representation

Free website template built for musicians / artists to promote their music and connect to their audience.

Awesome Lists containing this project

README 

        







Free website template built for musicians / artists to promote their music and connect with their audience. 



## Features



* Customizable hero images and responsive picture modal

* Javascript based music player and YouTube thumbnail generator optimzed for page loading

* Mailing list and contact form with validation and back-end integration

* Additional sections inlcuding an about, merch, news press, and shows section

* Project code meets HTML and CSS W3C validation compliance (excluding the black and white css skin)



## Getting Started



Note: It is recommended you use a local web server set up with php and a mail server for full testing functionality.



To edit the header and nav:

1) Replace with your artist / band name in id "logo"

2) Update the nav links to your own



To edit the home section:



1) Substitute your picture name in class "hero" in style.css

2) Edit your tagline, call-to-action (CTA), and CTA link in the class "home" in index.html



To edit the mailing list:



1) Create your own Google Sheets mailing list by following the tutorial by David McCoy: https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms-b833952cc175

2) Replace your newly created google sheets link via "url" in mailingList.js

3) Substitute your call-to-action and tagline in the index.html



To edit the about section: 



1) Change the social media links to your own

2) Edit class "About" in index.html 



To edit the merch section:



1) Compress your pictures and reduce pixels to optimize load time

2) Copy your pictures to dir /pictures/merch

3) Substitute your picture name in classes ".a, .b, .c", ect... in style.css

4) Substitute your picture name in class "grid" in index.html



To edit the music section:



1) Edit class "Music" in index.html

2) Change the music links to your own

3) Substitute your picture name in class "music-hero" in style.css



To add featured songs:

1) Edit your song using a DAW into a 30 second clip preview to optimize load and streaming time

2) Place the songs in dir /music

3) Edit array var "files" in musPlayer.js 

4) To add a song in the array, use the following format: "Your Song Title.mp3"



To edit the news section:



1) Compress your pictures and reduce pixels to optimize load time

2) Copy your pictures to dir /pictures/blog

3) Substitute your picture name in classes ".a, .b, .c", ect... in style.css

4) Substitute your picture name and blog title in class "grid" in index.html

5) Write your blog post in the blog_(page) html pages.



To edit the press section:



Edit class "Press" in index.html.



To edit the video section:



1) Navigate to the YoutTube video you want featured

2) Copy the text after "v=" in the youtube link

3) Paste the data-id text in class "youtube-player" in class "Video" in index.html 



To edit the shows section:



Edit class "Shows" in index.html.



To edit the pictures section:



1) Compress your pictures to optimize load time

2) Copy your pictures to dir /pictures/gallery

3) Substitute your picture name in classes ".a, .b, .c", ect... in style.css

4) Substitute your picture name in class "grid" in index.html



To edit the contact form:



1) Enter your email address in form.php

2) Customize your response messages in form.php



To edit the footer:

1) Update the footer links to your own

2) Replace with your artist / band name in terms.html



## Customize with Skins!



New black and white theme available now.



1) Rename css/style_black_white.css to css/style_black_white



OR



1) Change the href link in the header to css/style_black_white.css for all html documents



## Built With



* HTML5

* CSS3

* jQuery/JavaScript/AJAX

* PHP5



## Contributing



When contributing to this repository, you may fork and submit a pull request. Add a description of what you are doing and I'll review it.



## Versioning



Version 2.3.0



## Authors



* **Matthew Waldron** - (http://waldronmatthew.com)



## License



This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.



Please abide by the Terms of Use and Website Credits pages.



## Acknowledgments



A HUGE thank you to all developers whom I used MIT licensed code from. They are listed on the "Website Credits" page.