CMS Development

Hannah-par8o
Participant

Need help on two things - 1) Get author image on same line as title 2) Make author image circular

SOLVE

Hi all,

Newb here! Thanks for any/all help. Two things (well, actually three)

 

1) The hubspot default blog has a cool thing where the author's tiny image is next to the date stamp.

I did my best to copy code, but the author's headshot is on the next line: access.par8o.com/healthcare

 

2) At the bottom where the author's bio is, again I tried to copy the hubspot default styling. It left me with what you see above. 

 

3) I'm assuming the blog tabbr thing is antiquated? I found the code / downloaded it from someone's site, but it didn't look right when it was all in place (bullets outside of border, etc).

 

4) I'm not sure why the commenting box is showing up on the blog listings page. I can't see where it's referenced - I don't think we need it there, or at least I'd prefer to have it listed AFTER the summary. Thanks!!!

 

Thank you. I'm not very familiar with CSS, but I'm a quick learner. 🙂

0 Upvotes
1 Accepted solution
DaniellePeters
Solution
Top Contributor

Need help on two things - 1) Get author image on same line as title 2) Make author image circular

SOLVE

Vast-style.css is designed with several macros to make it easier to write code with cross-browser compatible styles. 

 

You should see lines of code that look like this in the tabber styles:

{{ borderradius("4px 4px 0 0") }}

 

However, since the marco was never defined in your stylesheet, you are seeing that error. You can either remove those lines, edit them to be pure css, or add this to the top of the style sheet to define the macro:

{% macro borderradius(value) -%}
    -webkit-border-radius: {{ value }};
    -moz-border-radius: {{ value }};
    -o-border-radius: {{ value }};
    -ms-border-radius: {{ value }};
    border-radius: {{ value }};
{%- endmacro %}

 

Border-radius gives rounded corners to parts of the tabber.

 

To answer your second question, in most cases, I prefer using rich text modules rather than image modules to have better control over images, especially when trying to position images around text.

 

However, I think what might help in the case of your blog posts is removing the margins from around the h3 (the "Written by" header). The result is this:

 

You can make that change by adding this to your stylesheet:

.about-author-sec h3 {
    margin: 0;
}

 

Hope that helps!

View solution in original post

3 Replies 3
DaniellePeters
Top Contributor

Need help on two things - 1) Get author image on same line as title 2) Make author image circular

SOLVE

1. Try adding this CSS to your stylesheet. The HTML markup is all correct, but this associated style is necessary. The id "hubspot-author_data" is on the <p> wrapping the calendar date/author name

#hubspot-author_data {
    float: left;
}

 

2. To get the author picture at the bottom to be the same, you need this CSS

.about-author-sec img {
    border-radius: 50%;
    border: 1px solid #CCC;
    display: block;
}

 

3. The tabber has a bunch of CSS associated with it to make it look as it does on the default blog. This can all be found in vast-style.css which should be in your portal. Lines 875-943 assuming no changes have been made to that stylesheet. It also has some necessary js which you should be able to find in "hubtheme-main.js" or "vast-main.js" depending on how new your portal is.

 

More info on that here: https://knowledge.hubspot.com/themes-user-guide/understanding-a-themes-required-files

There is probably a bunch of code you would want to grab from vast-style.css and hubtheme-main.js

 

4. If you going into your listing template markup, the comment box is coming from this snippet of code

<p class="custom_listing_comments">
  <a href="{{content.absolute_url}}#comments-listing"><i class="fa fa-comment"></i>
  {% set comments_number =  content.comment_list|length %}
  {% if comments_number == 1 %}
    {% set comments_lable = "Comment" %}
  {% else %}
    {% set comments_lable = "Comments" %}
  {% endif %}
  {{ comments_number }} {{ comments_lable }}</a>
</p>
Hannah-par8o
Participant

Need help on two things - 1) Get author image on same line as title 2) Make author image circular

SOLVE

Thank you SO much!

 

errorserrorsThe tabbr part lines changed, but it was clearly marked so I found it no problem. But, I got this error when trying to update my CSS after the copy paste: 

 

One other question for now (haha I'm sure I'll come up with more) - the circle image in the author section is now docked to the top of that module, it seems, instead of centered horizontally with the accompanying text. This is probably been my largest challenge in trying to use the image modules, and usually I switch to using rich text to get images to position the way I would like. Is there any magic you can teach me regarding this?

 

Thank you so much.

 

 

 

 

 

 

0 Upvotes
DaniellePeters
Solution
Top Contributor

Need help on two things - 1) Get author image on same line as title 2) Make author image circular

SOLVE

Vast-style.css is designed with several macros to make it easier to write code with cross-browser compatible styles. 

 

You should see lines of code that look like this in the tabber styles:

{{ borderradius("4px 4px 0 0") }}

 

However, since the marco was never defined in your stylesheet, you are seeing that error. You can either remove those lines, edit them to be pure css, or add this to the top of the style sheet to define the macro:

{% macro borderradius(value) -%}
    -webkit-border-radius: {{ value }};
    -moz-border-radius: {{ value }};
    -o-border-radius: {{ value }};
    -ms-border-radius: {{ value }};
    border-radius: {{ value }};
{%- endmacro %}

 

Border-radius gives rounded corners to parts of the tabber.

 

To answer your second question, in most cases, I prefer using rich text modules rather than image modules to have better control over images, especially when trying to position images around text.

 

However, I think what might help in the case of your blog posts is removing the margins from around the h3 (the "Written by" header). The result is this:

 

You can make that change by adding this to your stylesheet:

.about-author-sec h3 {
    margin: 0;
}

 

Hope that helps!