How to edit the author bio section within blog posts

[fmckeon]

Hi,

I've recently signed up for HubSpot, and I'm trying to modify the default author bio section that displays within each blog post. It currently looks like this - https://snag.gy/7MZ3vb.jpg

I would prefer it to look more like this example - http://designers.hubspot.com/docs/snippets/blog/add-a-styled-blog-author-profile

But, I have no idea how to implement the steps in the last link. The article says...

"Step 1:

Add the following CSS to your Blog Style Sheet"

(Where would I find my "Blog Style Sheet"?)

"Step 2

Add the following HTML Snippet to your Blog Listing Template underneath your blog article content. Typically this is added underneath Topic HTML - see screenshot "

(Where would I find my "Blog Listing Template"?)

The article ends after the last step. Do I then just hit "Save/Update"?

Apologies for the '101'-type questions. Thanks for your help.

[mgrubbs · Accepted solution]

To be fair to you, that tutorial is garbage...

But that's not to say the steps aren't right.

1) Add the following CSS to your Blog Style Sheet

There are lots of places you can add this... you can:

• Just dump it all in the head HTML input field (clicking edit > Edit Head) and wrapping all of that code in <style> </style> tags (be careful there's an extra bracket } at the end... )
• Add it to the template's style-sheet (as suggested) by clicking the link to the .css file from the same pop-up window (in Edit Head) 
• By adding it to a custom HTML module in the template (drag a custom HTML module in and edit it then paste the code wrapped in <style></style> tags again

2) Add the following HTML Snippet to your Blog Listing Template underneath your blog article content. Typically this is added underneath Topic HTML.

This one is pretty spot on, see the screenshot I added for how to find the listing in your blog template:

You're going to have to figure out where to dump the second part of code in your HTML in the listing template though.

Best of luck!

[stefen]

@fmckeon all of your templates are located in the "Designer Manager". I'd suggest taking the HubSpot Design Certificate course before editing anything in the design manager if you're not familiar with CSS or HTML