Adjust post & page title's font

  • hajanuary · Member ·

    Hello!

    I have difficulty adjusting the posts & pages’ font, I want to reduce the space between the title letters and adjust the font size.

    Look forward to hearing from you soon.

    Many thanks!

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

  • hajanuary · Member ·

    Thank you,

    In the meantime, I have found a way for the above issue. Now I’m working on reducing the space between the featured image and the text group (date, title…).

    Please let me know if there is a solution for that.

    Many thanks!

  • hajanuary · Member ·

    I also mean the space between the post title and its excerpt.

  • lelandf · Theme Author ·

    reducing the space between the featured image and the text group (date, title…)

    Try this Custom CSS.

    body .masonry .entry-body {
    padding-top: 30px;
}

    Note that the initial value is 46px, so in the above example I subtracted by 16px.

    I also mean the space between the post title and its excerpt.

    Have you already figured this one out? I see the following Custom CSS on the site which affects the space between the post title and its excerpt:

    .entry-title {
    margin-bottom: -15px;
}

    Let me know if you have any other questions.

    Best regards,
    Leland

  • hajanuary · Member ·

    Many thanks Leland!

    The custom CSS you shared works well on my page.

    There’s no big problem left at the homepage, the only one I’m wondering about is whether or not we could adjust the space between the post title and its excerpt in a page (which I created by inserting Patterns > Blog > Recent Posts).

    Take this page as an example: https://hajanuary.com/english-edition/

  • lelandf · Theme Author ·

    Ah, I see what you mean.

    Try this:

    body.single .wp-block-newspack-blocks-homepage-articles .entry-title,
    body.page .wp-block-newspack-blocks-homepage-articles .entry-title {
    padding-bottom: 0;
    }

    Best regards,
    Leland

  • hajanuary · Member ·

    Perfect, that works like a charm!

    Thanks a lot, Leland!

  • hajanuary · Member ·

    Ah, very last things:

    1. Can we adjust the space between the featured image and it’s text group?

    2. The space between a post/page title and the date in a single page still quite an issue, I tried some custom CSS but they didn’t really work here. Please help with this.
    (example: https://hajanuary.com/2018/01/20/test-1/)

  • lelandf · Theme Author ·

    1. Can we adjust the space between the featured image and it’s text group?

    I’m sure we can, although I’m not certain what you mean on this question. It sounds similar to something addressed earlier in the thread.

    I guess you are talking about something else? Can you provide an example URL so I can get a better idea as to what you are referring to?

    2. The space between a post/page title and the date in a single page

    Try this:

    .single .entry-title, body.page .entry-title {
  padding-bottom: 1em;
}

    Best regards,
    Leland

  • hajanuary · Member ·

    1. Oh I’m sorry, I meant the section featured content slider on the front page.

    2. It worked. Thank you!

  • lelandf · Theme Author ·

    1. Oh I’m sorry, I meant the section featured content slider on the front page.

    No worries. Got it. Try this CSS:

    body .slider .entry-body {
  padding-top: 40px;
}

    Original value is 83px so in the above example it is being reduced by approximately half.

    Best regards,
    Leland

  • hajanuary · Member ·

    Your suggestion works perfectly.
    I’m done with my issues, many thanks again for your kind and prompt supports!

    Kind regards,

  • lelandf · Theme Author ·

    many thanks again for your kind and prompt supports!

    You’re very welcome. I’ll go ahead and mark this topic as resolved.

    If you have any other questions feel free to let me know (either in a new topic or in a reply to this one, does not matter to me, whichever you prefer) and I’ll take a look.

    Best regards,
    Leland

  • hajanuary · Member ·

    Hello Leland again,

    I’m trying to create a Full-Width Post but it doesn’t work (https://hajanuary.com/2020/11/01/forms-of-nothing/),
    it seems that Full-Width template only displays when it comes to a Page (https://hajanuary.com/about/).

    Can we fix this by CSS?

    Thanks in advance,

  • hajanuary · Member ·

    It’s good now, thank you.

  • lelandf · Theme Author ·

    Okay, thank you for the update.

    Best regards,
    Leland

  • hajanuary · Member ·

    Hello Leland,

    I’m definitely gonna need your help this time with some CSS adjustments for the Front Page:

    1. Can we downsize the maximum display size of the Featured Images on Slider?

    2. How to add Category to the Recent Posts?

    3. Can we limit the number of the posts displayed in Recent Posts and add “Load more posts” button also?

    Many thanks in advance for your help.
    Kind regards,

  • lelandf · Theme Author ·

    1. Can we downsize the maximum display size of the Featured Images on Slider?

    Yes, try this:

    .slide .post-thumbnail-link {
  max-width: 400px;
}

    2. How to add Category to the Recent Posts?

    I am not sure what you mean by this. All published posts in any category should display there automatically in accordance with WordPress’s default functionality.

    Can you please clarify?

    3. Can we limit the number of the posts displayed in Recent Posts

    This will be done in your WordPress Reading Settings. See here for more details: https://wordpress.com/support/settings/reading-settings/

    Adjust the “Blog pages show at most” value.

    add “Load more posts” button also?

    See this guide, under the “Disabling Infinite Scroll” heading: https://wordpress.com/support/infinite-scroll/

    Since both aspects of question #3 are general WordPress.com concerns (i.e. not specific to a theme), WordPress.com support will be best-equipped to further assist if needed. https://wordpress.com/support/live-chat/

    Best of luck and I will await your clarification to question #2.

  • hajanuary · Member ·

    Thanks Leland,

    For question 2, I mean for the Recent Posts displaying on the front page are now including Date, Title, and Except in the text group, and I would like to add these posts’ Categories to the text group also.

    I check the setting for Related Posts in my WordPress Reading Settings as you suggested, in which there a tick box for ‘Show context (category or tag)’, however, the categories are still not showing up on the front page’s Recent posts.

    I hope this is something that could be adjusted.

    Many thanks,

  • lelandf · Theme Author ·

    I check the setting for Related Posts in my WordPress Reading Settings as you suggested

    Just to clarify, “Related Posts” is a feature of WordPress.com and is unrelated to the Spatial theme’s “Recent Posts” section. More info about that can be found here: https://wordpress.com/support/related-posts/

    It looks like the settings were reflected where the “Related Posts” display on your site, like on this page: https://hajanuary.com/2020/11/10/up-in-the-air/

    I only suggested visiting the Reading Settings to adjust the “Blog pages show at most” value.

    I would like to add these posts’ Categories to the text group also.

    I’m afraid the Spatial theme was not designed to display anything except the post thumbnail, title, date, and excerpt in the Recent Post sections.

    This was a design decision to keep this component minimal in appearance. The categories and tags can display on the single post template though.

    A sample can be seen on the Spatial demo site here: https://spatialdemo.wordpress.com/2016/10/17/mauris-vel-purus-quis-turpis-mattis-3/

    Since the theme did not design this feature, do you have any suggestions on how the category should appear?

    It can sort of be managed with CSS although it can be a bit difficult to manage with a lot of categories. Since you don’t have many categories by my count, maybe this wouldn’t be the case for your site.

    I wrote up this CSS based on the categories I saw on your site as an example:

    /* Consistent spacing no matter the category */
.masonry .category-photography .posted-on::after,
.masonry .category-article .posted-on::after,
.masonry .category-poetry .posted-on::after {
  padding-left: 10px;
}

.masonry .category-photography .posted-on::after {
  content: "Photography";
}

.masonry .category-article .posted-on::after {
  content: "Article";
}

.masonry .category-poetry .posted-on::after {
  content: "Poetry";
}

    Unfortunately, with CSS, you cannot “create a link” (to the category archive or elsewhere).

    Although in the case of your site’s categories, at least with this there is some visual cue as to what type of content it is, before your website readers click through.

    Hope this helps.

    Best regards,
    Leland

1 2
  • The topic ‘Adjust post & page title's font’ is closed to new replies.