Blog post featured image and About Author Block

  • chambyteblog · Member ·

    Hi,

    I have just switched to using the Venture theme and plan to stay with it. I have a few queries however;

    I’ve gone through all 13 pages on this Venture Theme forum and all I’ve seen so far on the forum is how to remove the author/post date under the post title which doesn’t bother me.

    1) What I’m looking for is to find a way of hiding the ‘About Author’ block below the full post on the post page.

    I understand the themes characteristics is a default featured image header on blog post titles on the post page:
    2) Is it possible four that Tobermory completely removed so there’s no background on the blog posts title?

    Site: https://chambyte.com/

    Any help would be greatly appreciated. Thanks in advance.

    The blog I need help with is: (visible only to logged in users)

  • tarasdashkevych · Theme Author ·

    Hello,
    Thank you for using the Venture theme!

    “What I’m looking for is to find a way of hiding the ‘About Author’ block below the full post on the post page.”
    – To hide the author section below the post content, please use this custom CSS:

    
.single .author-container {
  display: none;
}

    —

    “Is it possible four that Tobermory completely removed so there’s no background on the blog posts title?”
    – If the featured image is not set, the page header will have a gray background color. You can remove it by using this custom CSS:

    
#primary-header {
  background: none;
}

    Here is a short documentation on how to add a custom CSS at WordPress.com: https://en.support.wordpress.com/custom-design/editing-css/

    Please let me know if you have any additional questions.

    Thank you,
    Taras

  • chambyteblog · Member ·

    Hi Taras,

    Many thanks for taking the time to help.

    Both css codes work and did the job..

    On Mobile however, removing the featured image background leaves a huge gap between the post title and the site title, anyway to reduce that gap? Works perfect on the web version.

    – Is it possible to perhaps have a line below blog posts to separate the posts and related posts/share buttons below the blog posts?

    – Is it also possible to control the font sizes (post titles & body) granularly other than the default WordPress Normal, Large, Huge etc

    Thanks again for your help.

  • tarasdashkevych · Theme Author ·

    You are very welcome!

    “On Mobile however, removing the featured image background leaves a huge gap between the post title and the site title, anyway to reduce that gap? Works perfect on the web version.”
    – The reason why there is a gap is because the page header is designed to display a background image in this section. Since your page header does not display any background, it creates this white space. You can use this custom CSS to remove it in mobile views:

    
@media only screen and (max-width:500px) {
  #primary-header .primary-hentry-inner {
    padding-top: 30px;
    padding-bottom: 0;
  }
}

    Note, we are planning to refactor this section in the future releases to improve performance and accessibility, so this custom CSS might not work once this update will be released. You can always open a new thread in this forum and I will be glad to provide you a solution.

    —

    “Is it possible to perhaps have a line below blog posts to separate the posts and related posts/share buttons below the blog posts?”
    – Sure! Please add this custom CSS:

    
.single #jp-relatedposts {
  border-top: 1px solid #e2e2e4;
  padding-top: 35px;
}

    —

    “Is it also possible to control the font sizes (post titles & body) granularly other than the default WordPress Normal, Large, Huge etc”
    – By default, WordPress does not provide option for custom font sizes but it’s possible to accomplish with a simple custom CSS.

    Font size of the body:

    
body {
  font-size: 18px;
}

    Font size of the post/page title in single views:

    
#primary-header .entry-title {
  font-size: 32px;
}

    Let me know if you have any additional questions.

    Thank you,
    Taras

  • chambyteblog · Member ·

    Hi Taras,

    Thank you so very much for your helpful advice and guidance. It’s very much appreciated. All of them work. Great job.

    The CSS to increase font size of the body makes the text in Quotes almost twice bigger on desktop web, (works fine on mobile), perhaps that’s the default design on the theme quote style? Will be great to be able to alter the Quote text size in a way it retains the same sizing both on mobile and web.

    Looking forward to the future improvements on performance and accessibility.

    Whilst on that topic, anyway to have dark/light mode enabled? I have a few custom css codes I got from other wordpress users who implemented them on their sites but doesn’t fully function with this theme. If i was to post those CSS code snippets here, will you be able to help modify them to work with the Venture theme?

    Thanks again for all your unwavering help and support.

  • tarasdashkevych · Theme Author ·

    Not a problem. I am glad I was able to help!

    “Will be great to be able to alter the Quote text size in a way it retains the same sizing both on mobile and web.”
    – You can use this custom CSS to set a custom font size for quotes:

    
blockquote {
  font-size: 18px;
}

    —

    “Whilst on that topic, anyway to have dark/light mode enabled?”
    – Such option is not available in the theme or/and WordPress by default.

    —

    “I have a few custom css codes I got from other wordpress users who implemented them on their sites but doesn’t fully function with this theme.”
    – Each theme is different and comes with its own structure. This is the reason why your custom CSS does not work.

    You can open a new thread in this forum, so we can work on a custom CSS. Let me know in which sections you want to change the color.

    Thank you,
    Taras

  • chambyteblog · Member ·

    Thank you.

    On Mobile however, removing the featured image background leaves a huge gap between the post title and the site title, anyway to reduce that gap? Works perfect on the web version.”
    – The reason why there is a gap is because the page header is designed to display a background image in this section. Since your page header does not display any background, it creates this white space. You can use this custom CSS to remove it in mobile views:


    @media     only screen and (max-width:500px) {
    #primary-header .primary-hentry-inner {
    padding-top: 30px;
    padding-bottom: 0;
    }
    }

    Great solution.

    Can similar be done to also reduce the gap between the post title and first line paragraph/item on the main body of the blog post on the Post page? (seems to beok on mobile view but not web view)

    Thanks for your continues help

  • tarasdashkevych · Theme Author ·

    Hello,

    Could you please also add this custom CSS:

    
#primary-header .primary-hentry-inner {
  padding-bottom: 0;
  margin-bottom: 20px;
}

    Also, we can update our previous CSS to this one:

    
@media only screen and (max-width:500px) {
  #primary-header .primary-hentry-inner {
    padding-top: 30px;
  }
}

    Hope this helps. Let me know if you have any additional questions.

    Thank you,
    Taras

  • chambyteblog · Member ·

    Hi Taras.

    If a quote doesn’t have a citation it leaves that gap between the quoted text and bottom of the quote line indicator to the left of the quote. Can this be reduced/removed if it recognises there’s no citation added to that part of the quote?

    The last observation and change and that’s the blogging customisation side of things done, I think (Next up: building the homepage to fully utilise the great feature set of the theme).

    You have been incredibly helpful. I appreciate that very much. Thank you.

  • tarasdashkevych · Theme Author ·

    “If a quote doesn’t have a citation it leaves that gap between the quoted text and bottom of the quote line indicator to the left of the quote.”
    – Are you referring to this: https://snipboard.io/E9VHTs.jpg? If yes then it’s the theme issue. It will be fixed in the next theme release.

    —

    “Next up: building the homepage to fully utilise the great feature set of the theme”
     – If you’ll have any questions, feel free to open a new thread in this forum. I am here to help.

    —

    “You have been incredibly helpful. I appreciate that very much. Thank you.”
    – Not a problem! I am glad I was able to help :)

    Thank you,
    Taras

  • chambyteblog · Member ·

    “If a quote doesn’t have a citation it leaves that gap between the quoted text and bottom of the quote line indicator to the left of the quote.”

    – Are you referring to this: https://snipboard.io/E9VHTs.jpg? If yes then it’s the theme issue. It will be fixed in the next theme release.

    Hi Taras, yes that is exactly what I was referring to. Not a big deal, just an observation but glad you are aware of it and a fix will be coming.

    Thank for all you do.

  • tarasdashkevych · Theme Author ·

    I just want to let you know that we’ve already started to refactor the page header section and hope to release an update by the end of this week. So, some CSS for the page header might work after the release. On the other hand, the theme will have better performance and accessibility in this section.

    Thanks,
    Taras

  • chambyteblog · Member ·

    Hi Taras,

    Thanks for the update. Hopefully everything goes smoothly with the refactoring.

    Looking forward to it.

  • chambyteblog · Member ·

    I just want to let you know that we’ve already started to refactor the page header section and hope to release an update by the end of this week. So, some CSS for the page header might work after the release. On the other hand, the theme will have better performance and accessibility in this section.

    Hi,

    I’ve noticed the blog post title on the blog page now doesn’t show at all. Also the the post page seems to shift upwards and hiding under the site banner area.

    Any help to rectify this issue will be greatly appreciated. Thanks

  • chambyteblog · Member · 
    #primary-header {
  height: 14em;
}

    I’ve just noticed the above code is what causing the issue. It was set yo 0em which pushed the blog post title up high to the blog banner. I’ve changed it to 14 to lower it but the gap between the blog post title on the post page and the banner is too high when viewing on mobile. I guess this is to do with the themes header/post title image feature.

  • tarasdashkevych · Theme Author ·

    Hi,

    You can use this custom CSS to reduce the space between page header and page content: 

    
#primary-header {
  margin-bottom: 0;
}

    “… it but the gap between the blog post title on the post page and the banner is too high when viewing on mobile.”
    – Please use this custom CSS to change the height of the page header in mobile views:

    
@media (max-width: 767px) {
  #primary-header {
    height: auto;
    padding-top: 15px;
  }
}

    Let me know if you have any additional questions.

    Thank you,
    Taras

  • chambyteblog · Member ·

    That sorts out the issue. Thanks.

    You previously provided a code to alter the post title on the post page in single view, below:

    Font size of the post/page title in single views:

    #primary-header .entry-title {
    font-size: 32px;
    }

    Is it possible to have one to alter the post title on the main blog page as well?

    Thanks

  • tarasdashkevych · Theme Author ·

    “Is it possible to have one to alter the post title on the main blog page as well?”

    – Sure. Please use this custom CSS:

    
.hfeed .hentry .entry-title {
  font-size: 21px;
}

    Thank you,
    Taras

  • chambyteblog · Member ·

    Thank you, Taras. Much appreciated.

  • tarasdashkevych · Theme Author ·

    You are very welcome! If you’ll have any other questions, feel free to open a new thread in this forum and I will be happy to help :)

    Best,
    Taras

  • The topic ‘Blog post featured image and About Author Block’ is closed to new replies.