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. 🙂
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:
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
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.
Need help on two things - 1) Get author image on same line as title 2) Make author image circular
SOLVE
Thank you SO much!
errorsThe 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?
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: