CMS Development

Juan_Marin
Participant

Changing layout and format

SOLVE

Hi There!!

 

I am trying to change the layout of a simple Blog Listing page, but I am not being successful ( btw, I am not a programmer, so I am sure that is the reason )

 

The situation:

  • See picture below to my blog post ( link here )
  • I am trying to show the "[Más...]" after the "..." at the end of the truncated text, so that I save two lines of text 
  • I am trying to reduce the font size of the "Tiempo de Lectura: 6 mins" ( reading time: 6 mins )
  • I am trying to reduce the spacing between the two lines where the tags are showing. As you can see they are almos one line apart

The Code Picture ( text at the end of the post 😞

Screenshot 2020-06-13 at 18.20.39.png

 

Apologies for such basic questions...but I have been working on this for the last 6 hours and have not been able to make any progress.

 

THANKS!!

 

_____________

 

<div class="blog_content_area">
<p>{{content.post_list_content|truncatehtml(120, '...', false)}}</p>
{% if content_group.show_summary_in_listing %}
<a class="more-link" href="{{ content.absolute_url }}"><font color="F54F32">[Más...]</font></a>
{% endif %}
</div>
<div class="blog--tag-author-coloumn">
<div class="topic">
Tiempo de lectura: {{ content.post_body|wordcount|divide(250) }} mins <!-- TIEMPO DE LECTURA -->
{% if content.topic_list %}
<p id="hubspot-topic_data">
<a>TAGS:</a>
{% for topic in content.topic_list %}
<!-- <i class="fa fa-tags" aria-hidden="true"></i> ICONO QUE NO SALÍA LO HE ELIMINADO -->
<a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</p>
{% endif %}
</div>
</div>

0 Upvotes
2 Accepted solutions
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Changing layout and format

SOLVE

Hi @Juan_Marin ,

You can achieve all this with CSS. Just paste the following into your stylesheet :

/** Display inline so that the summary and more link are on the same line **/
.blog_content_area p,
.clear-blog-listing .blog_content_area a {
    display: inline;
}

/** Change font size of time to read text **/
.blog--tag-author-coloumn .topic {
    font-size: 15px;
}

/** Change the line height of the topics so that there's less space between lines **/
#hubspot-topic_data {
    line-height: 21px;
}


OR you could paste it in a <style> block at the top of your blog listing code

<style>
    /** Display inline so that the summary and more link are on the same line **/
    .blog_content_area p,
    .clear-blog-listing .blog_content_area a {
        display: inline;
    }

    /** Change font size of time to read text **/
    .blog--tag-author-coloumn .topic {
        font-size: 15px;
    }

   /** Change the line height of the topics so that there's less space between lines **/
    #hubspot-topic_data {
        line-height: 21px;
    }
</style>

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

View solution in original post

Juan_Marin
Solution
Participant

Changing layout and format

SOLVE

AWESOME!!! Thanks

View solution in original post

0 Upvotes
2 Replies 2
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Changing layout and format

SOLVE

Hi @Juan_Marin ,

You can achieve all this with CSS. Just paste the following into your stylesheet :

/** Display inline so that the summary and more link are on the same line **/
.blog_content_area p,
.clear-blog-listing .blog_content_area a {
    display: inline;
}

/** Change font size of time to read text **/
.blog--tag-author-coloumn .topic {
    font-size: 15px;
}

/** Change the line height of the topics so that there's less space between lines **/
#hubspot-topic_data {
    line-height: 21px;
}


OR you could paste it in a <style> block at the top of your blog listing code

<style>
    /** Display inline so that the summary and more link are on the same line **/
    .blog_content_area p,
    .clear-blog-listing .blog_content_area a {
        display: inline;
    }

    /** Change font size of time to read text **/
    .blog--tag-author-coloumn .topic {
        font-size: 15px;
    }

   /** Change the line height of the topics so that there's less space between lines **/
    #hubspot-topic_data {
        line-height: 21px;
    }
</style>

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
Juan_Marin
Solution
Participant

Changing layout and format

SOLVE

AWESOME!!! Thanks

0 Upvotes