Support Center Visit Demo License manager Buy @ envato

Blog Listing Styling

ollibeollibe
in Blog

I'll like to make minor changes to the blog listing.

Please refer to the screenshot: https://ibb.co/Qd6VXN6

1. How do I remove the clock icon?

2. There's a light background grey that I'll like to change. How do I do that?

3. How do I style the read more button?

Comments

  • ollibeollibe

    Another request:

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

  • PhilPhil

    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
  • ollibeollibe

    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!

  • PhilPhil

    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.
    obraz.png
    • 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.

    obraz.png

    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
  • ollibeollibe

    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

  • PhilPhil

    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
  • ollibeollibe

    No worries. It works.

    Thanks for your help!

Sign In or Register to comment.