Goran-Blog Page and Page Titles

  • Unknown's avatar
    kassary · Member ·

    Hello. Thank you for your time supporting the community.

    My questions:
    1. is there a way to limit the posts on the Blog page? instead of the infinite scroll?

    2. is there a way to align the page titles to the left or at least to the bottom of the featured image?

    3. On the front page, I would like to align the words and the button a little lower.

    Thanks and that is for now, I am still building it.

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

  • Unknown's avatar
    hallluke · Member ·

    Here’s how to turn off infinite scroll, it also describes how to set the number of posts shown on your blog and archive pages.

    This will left-align your page titles:

    body.page .hero .page-title {
  text-align: left;
}

    And here’s how to move the hero box and button slightly lower. It’s set for two different screen widths (because that’s what the regular theme code does). You can change the values for top and bottom padding but the total sum should remain the same i.e. if you add 20px to the top make sure you subtract 20px from the bottom.

    @media screen and (min-width: 1230px) {
  body.home #content .hero {
    padding: 413px 0 116px!important;
  }
}
@media screen and (min-width: 1020px) {
  body.home #content .hero {
    padding: 291px 0 94px!important;
  }
}

    Your site is set to private so the code I’ve posted is based on the Goran demo site.

  • Unknown's avatar
    kassary · Member ·

    Thank you. Yes it’s Goran theme.
    It worked.

    In addition to left and Right- how can I move the page title down?

    The hero and button code worked but it seems like the picture behind gets affected by the code?
    I will uncheck the privacy so you can look it up.

    Thank you !!

  • Unknown's avatar
    hallluke · Member ·

    You should be able to use the same code as the last example I posted but change both places it has body.home and switch it for body.page instead.

    Let me know when your site is public and I’ll look to see if there’s anything else that might be causing the issues. The code will affect the height of the image behind it. I’m basing it on the demo site, if your images are different proportions you’ll need to use different padding values.

  • Unknown's avatar
    kassary · Member ·

    It is public now.
    Thanks for the code. It works, but it also affects the pics.
    Please check it out and let me know if the issue are the images.
    Thank you !

  • Unknown's avatar
    hallluke · Member ·

    OK, I see the issue. It’s just that you’re using a taller image than in the demo. Try adjusting the padding sizes upwards like so:

    @media screen and (min-width: 1020px) {
  body.home #content .hero {
    padding: 338px 0 94px!important;
  }
}
@media screen and (min-width: 1230px) {
  body.home #content .hero {
    padding: 429px 0 116px!important;
  }
}
  • Unknown's avatar
    kassary · Member ·

    great !
    Thank you very much !

  • The topic ‘Goran-Blog Page and Page Titles’ is closed to new replies.