Guide to Customization

[fazilkhan]

Could we have a guide to customizing the .hbs template files? CSS and HTML edits, I believe, need to be formatted differently in handlebars so a guide for that would be helpful.

[jsoma]

Great idea! Can you (or anyone) give me a checklist of a few things you'd like to customize just so we can have somewhere to start?

In the meantime, I can point you to the Handlebars site.

[biancapallaro]

I was going to ask the same question. I couldn't customize it using CSS and HTML. Now I understand it’s because we need to understand Handlebars. A possible checklist: -the email link as a button -include a photo/gif for each project -change the size and font of the letters

[fazilkhan]

Yeah, it mostly has to do with customizing the CSS such as changing the color, size, font, etc. of text. I would also want to have the ability to add elements to the template like photos as @biancapallaro mentioned, or adding social media buttons and perhaps a banner image on the page if needed.

[jsoma]

For CSS/styling, you have a few options! If it's the google doc version, you should be able to edit default.css. You can also add manual <style> tags inside of the handlebars - for an example, take a look at sample-page.html.

If you want to really change up the homepage - special kinds of buttons for email, etc - you could always just hardcode them instead of making them pull from data.yaml. Otherwise since it's a template it's going to be using the same thing for each of the links (see data.yaml details below).

For adding photos/etc for the homepage, take a look at customizing the data.yaml. You could add a new field for each page that you can use as the src for an image. You'll need to put the images in the static folder so they'll be copied over to the final site.

[fazilkhan]

Thank you!!!