Blog Listing Styling

Comments

• ollibe

  December 2020

  Another request:

  How do I control the height and width of the bigger teaser image: https://ibb.co/ZTCNmYX
• Phil

  December 2020

  Hello,

  1,2) To remove the clock icon and change this background color you will have to use Custom CSS Code and put it in Betheme -> Theme options -> Custom CSS & JS -> CSS. If you need help with it, let me know, but I will need a link to your website.

  3) Can you explain to me greater how would you like to customize it, please?

  4) Sadly, there is no option to control the height and width of this image because it is generated automaticly.

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• ollibe

  January 2021

  Hi Phil, Thanks for the advice. I'll explain item 2 and 3 below along with the other questions: Also, I'll send the link privately.

  https://ibb.co/C7MMqwg

  1. How to remove the grey shadow within the blog image?

  2. How do I shift the author name and date below the blog title?

  3. How do I remove the light grey background in the blog posting?

  4. How to remove this category field from the individual blog listing page?

  5. For the button, I'll like to style it to our default button. Refer to screenshot. (item 3 in the previous post)

  
  

  Thanks!
• Phil

  January 2021

  1) There are two options to remove that shadow.

  • go to Betheme -> Theme options -> Global -> General, and in the Image Frame section, from the Style dropdown menu, select something else, then Slide bottom.

  

  • it can be removed with Custom CSS Code

  2) Unfortunately, there is no setting to achieve that. You would have to modify the theme files, but we do not provide support with that.

  3) Please, put the following Custom CSS Code in Betheme -> Theme options -> Custom CSS & JS -> CSS.

  .post-item .post-desc .post-footer{
     background: none!important;
  }
  

  4) Please, go to Betheme -> Theme options -> Blog, Portfolio & Shop -> Blog, and uncheck the Categories & Tags.

  

  5) Try to use the following Custom CSS Code.

  .post-item .post-desc .post-footer .post-more {
     color: #fff!important;
   padding-right: 15px !important;
  }
  .post-item .post-desc .post-footer .post-links{
     background: #f88a3b!important;
   border-radius: 7px!important;
  }
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• ollibe

  January 2021

  Thanks Phil for the guidance! It works for 1, 3 and 4.

  For item 2, are you able to share which file that I would need to modify?

  For pt 5, how can I remove the icon beside the read more and also increase the height of the button? I'll like to make it look like the "get started" button

  
  

  On our /news/ site, one of the blog post (the last post) is using the blog post type as link. Is there a way that the "read me button" to link to external links? https://ibb.co/BT2MF7P
• Phil

  January 2021

  2) Sorry, but I cannot tell which file contain this information. You must find it by yourself.

  5) Please, also add the following CSS Code.

  .post-item .post-desc .post-footer .post-links i{
    display: none!important;
  }
  

  6) Changing the last post read more button will need modifications in theme files too.

  
  

  Best regards

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• ollibe

  January 2021

  No worries. It works.

  Thanks for your help!