Customizing the Author Page

Highlighted
Occasional Contributor

I have been working on a client's HubSpot Blog. They have a listing page, blog pages and the option to view an author's bio. The information on the author's bio page was good, but it needed some styling (the author image was full width so it was very large and their info was below the image). I thought I would find a page template but there wasn't one. After much searching (interestingly enough, there wasn't any information about styling or changing information on an Author's Bio Page). For this current job, thankfully it only needed some styling changes. While doing some other design modifications, I went into the Design Manager, and accessed the style sheet for this client's pages. I found the section for the Blog Author Page styles. It didn't take too long and the results are much better than what they originally were.

Here's one of the author pages with the new styling: http://blog.j2interactive.com/author/jen-carter

 

All of the content on the Author Bio Page has individual styles for each of the content types:

.hs-author-profile {}
.hs-author-profile h2.hs-author-name {}
.hs-author-profile .hs-author-bio {}
.hs-author-profile .hs-author-avatar {}
.hs-author-profile .hs-author-avatar img {}
h3.hs-author-listing-header {}

 

Hopefully this information will help others who want a custom look to their Author Bio Pages.

 

5 Replies 5
Top Contributor

Thanks for posting this @csbeck!

 

It definitely will help me with something I'm working on.

 

I like what you didn't with the layout of the example page - great stuff!


Samantha Alford
Did my post solve the issue? If so, please accept it as a solution!
Reply
0 Upvotes
Top Contributor

You can edit the layout that the page is pulling from. It will be in your listing [edit: blog listing] template.

In the HubL, you will find something like

{% if blog_author %}
...
{% endif %}

Edit layout/structure changes there!

Top Contributor
{% if blog_author %}
$('body').addClass('blog-author-page');
{% endif %}

This adds a class for your body in all author pages. And you can specifically author page using the specific class. Hope it makes things easier for you.

Occasional Contributor

Where would you place this code?

Reply
0 Upvotes
Occasional Contributor

Update:  You can place this code directly in hubl markup, the script tag is necessary.

 {% if blog_author %}
             <script>
            $('body').addClass('blog-author-page');
            </script> 
{% endif %}

 

Reply
0 Upvotes