Blog layout design issue

[Nalwi]

Hi! I would like some assistance in creating blog for my website.
This is my previous website that I have previously created using the X theme, and I would like to do the same for my current page.

But my current blog page looks like this; the web page title is being cut off by the header, and it’s the same for all the other pages. How would I be able to have all the pages top margin/border start after the bottom of the header, instead of being cut off. And how do I create a blog page like the previous image? I will attach all the cre

[tristup]

Hi @Nalwi,

Thanks for reaching us.

The difference between your old site and the new site is the old site has the blog page set from Settings > Reading > Post Page, so it is showing all the posts on the page.
Whereas the page referred to as blog page has not been set through the settings, so it is not showing the blog post into it.

I suggest you to set the Static Post Page fro Settings > Reading > Post Page and check whether the posts are coming or not.
And the number column can be selected from Theme Options > Blog.

Regarding the margin/border, you can set the top margin to the first section of the individual pages, or you can add a margin to the content element using the entry-content class.
Please copy the following code and paste it in Theme Options > CSS

.entry-content {
    margin-top:100px !important;
}

To modify it further you can check this resource to learn more.

In the near future, you don’t need to use CSS because you can create your single post design using Layout Builder.
Please find the July status report here: https://theme.co/content/status-report-june-02-2020

Remember that the suggestion in the above-mentioned thread will work if copied as it is and doesn’t conflict with any existing code.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Thanks

[Nalwi]

Hi @tristup,

Thanks for your reply. I have made all the changes that you have recommended, and adding the css code only made changes to the home page, and the other pages, including the blog page are the same - The blog page header text is still cut off at the top by the site header. Could you please advise how I can make it look like the old site blog page as shown in the image attached in the previous post. I’d like for the main blog page to look exactly like the old site blog page, this also includes the width as well as I don’t want it to appear in full width (currently it appears in full width); I’d like for the width to appear as the width on my old site and have that fixed.

[friech]

Hi Nalwi,

To resolve the titles that are being overlapped with the header, please add this to your Theme Options > CSS

.blog .x-main.full {
	margin-top: 6em;
}

However, I’ll tell you what is the main difference on your old blog page and new blog page, your old blog page or should I say the old site is using the Integrity stack, while the new site is using the Icon stack.

You can easily configure the Site Width and Site Max Width under Theme Options > Layout and Design

But since you’re using two different stacks (Integrity and Icon), those blog pages won’t look the same, even if you configure the Site Width and Site Max Width and the Theme Options > Blog in the same way.

If you want your new blog site to look the same as the old one, then you need to switch to Integrity stack (see under Theme Options > Stack), be warned though that this will affect your entire site look and feel.

Hope this shed some lights,
Cheers!

[Nalwi]

Hi @friech

Thanks for your reply. I’d like to stick with the current stack that I am using at the moment (icon). I would like to know how I can get a list view for the blog page. And how can I change the blog image thumbnail size to small or medium?

[friech]

Hi Nalwi,

There are only two options on the blog style (see Theme Options > Blog > Style), the Masonry style which you currently have where you can have 2 or 3 columns option. And the Standard style which is basically one column.

Regretfully, there are not many options when it comes to the current styling of the blog page on our theme, at least not yet, until we release the new Layout Builder feature. You can read more about that here.

The alternative option is to design your posts grid using the Essential Grid.

Essential Grid WordPress Plugin - Introduction
Essential Grid Basics Part 1: Grid Source
Essential Grid Basics Part 2: Layout Options
Essential Grid Basics Part 3: Media Source
Essential Grid Basics Part 4: Item Skin Editor

Hope it helps,
Cheers!

[Nalwi]

Hi @friech
Yes, the standard style works well for me as the blog posts are displayed in a single column. But the blog images on the blog page are too large, and I’d like to be able to adjust the size for this to a small or medium sized image. Could you please let me know how I could do this?

[tristup]

Hi @Nalwi,

Regretfully, currently there no such option to change the featured image size.
In the near future, you can have full control over blog layouts, posts, and index pages using Layout Builder.
More details about the Layout Builder was posted in our June Status Report here: https://theme.co/content/status-report-june-02-2020

Thanks

[Nalwi]

Hi @tristup and @friech

Thanks for your reply. I had changed the stack to integrity as @friech had suggested and it all looks great now. I had also added the css that Friech gave and that worked great too. However, there is still an issue on the blog posts page itself as the header is cutting the top of the content on those blog posts, as seen in the screenshot. Could you please let me know how I can resolve this or what css code to use?

[tristup]

Hi @Nalwi,

It seems that SiteOrigin CSS plugin has been used to add custom CSS to your website. And the value specified for margin-top is 50px.
To increase the gap between the header bar and content you need to increase that value in custom CSS.
To modify it further you can check this resource to learn more or you to contact the Plugin Support for further modification.

Please remember that we don’t support any issues related to the Third Party plugin or custom codes and issues due to the custom codes.

Thanks

[Nalwi]

That worked perfectly, thank you very much! Could you please delete/hide the screenshots that we have shared in this thread? Thanks

[friech]

You’re welcome Nalwi, I have now removed all the screenshots of your site on this thread.

Cheers!