Bing Template: How to add Recent Activity on home page + edit Recent Activity CSS to match up with design | Community
Skip to main content

Bing Template: How to add Recent Activity on home page + edit Recent Activity CSS to match up with design

  • July 20, 2021
  • 4 replies
  • 0 views
A

I have purchased Bing Template, and found that there is no option of Recent Activity to add it on Home page.

so I have added the code manually on home page

 

but the output is not what I have expected, I want same design of Recent Activity which looks like Promoted Articles (I made some changes in CSS of Promoted Articles as per my design)

The single line of curlybars language code {{recent_articles}} is really pain, didn't get any class, css to work on. Everytime we have to check the Html-Css code in browser > Inspect Element.

This little help will be appreciated, thanks in advance.

      4 replies

      Ifra
      • Ifra
      • July 20, 2021

      Hi Aditya,

      You added on the home_page.hbs

      {{recent_articles}} means Recently Viewed Article

      but

      {{recent_activity}} means Recent Activity

       

      if you want to add recent activity, then remove {{recent_articles}} , and add {{recent_activity}}.

       

      after that,

      add the below CSS at the bottom of your stylesheet:

      h2.recent-activity-header{
      text-align:auto;
      font-size: 1.25rem;
      margin-bottom: 23px;
      }
      .recent-activity-item{
      border-bottom: 0;
      padding: 0;
      flex: 0 0 100%;
      max-width: 100%;
      padding-bottom: .7rem;
      padding-top: .7rem;
      padding-right: 1rem;
      padding-left: 1rem;
      }
      @media (min-width:768px){
      .recent-activity-item{
      flex: 0 0 50%;
      max-width: 50%;

      }
      }
      .recent-activity{
      margin-top:40px
      }
      .recent-activity-item-parent,
      .recent-activity-item-meta{
      display:none;
      }
      .recent-activity-item-link{
      font-size: .9375rem;
      color: #333;
      }
      .recent-activity-list{
      display: flex;
      flex-wrap: wrap;
      margin-right: -1rem;
      margin-left: -1rem;
      }

      .recent-activity-controls a{
      color:#333;
      }

      .recent-activity-item-link::before{
          content: "\f15c";
          font-family: 'Font Awesome 5 Free';
          margin-right: 8px;
          color: #0072ef;
          font-size: 16px;
          vertical-align: middle;
      }

       

      Add this font aweosme library on the document_head.hbs file:

      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ"
      crossorigin="anonymous">

       

      Screenshot for the same:

       

      Output:

       

      If any issue let me know.

       

      Thanks

       

       

       

       

        A
        • Aditya12
        • Author
        • July 20, 2021

        Thank you very much 367066863047 for quick reply. I have replaced the code you have suggested and it worked! Also added the CSS you have posted.

        I wanted the same design for Recent Activity just like Promoted Articles, now using the CSS you have given I will try changing parameters there. If I stuck I will let you know. Thanks again for the quick solution :) 

          Ifra
          • Ifra
          • July 20, 2021

          Okay,

          Keep the only {{recent_activity}} just after the <ul> </ul> tag on homepage, then the alignment issue won't arise as I am seeing in your above screenshot.

           

           

           

          M

          Hi team,

           

          How can we add author image who posted the post in recent activity.

          Terms & ConditionsCookie settingsAccessibility statement