News layout

Hello,
I would like to change the layout of my newspage.


It’s now in a pinterest style and I would like it to be something like the attached example:

How can I change this? And where can I find documentation of the theme X with all the possibilities for the layout?

Thanks in advance!
Hidde

Hello Hidde,

Please go to X > Theme Options > Blog then set the Layout to Standard.

Hope this helps.

Hi,
Thanks, this helps a little bit. Is there a way to have small photos on the left instead of the huge full with photo’s? More like the example I sent you?
And is there a way to have the date shown?
Thanks,
hidde

Hi Hidde,

Thanks for writing in again!

The layout you are looking for need CSS customization. I will give some CSS you can try this adding in Theme Option -> CSS. I can’t assure you about the 100% look of the example layout as it completely depends on the content and layout of the parent theme.

Please add this CSS

body.blog .entry-featured {
max-width: 200px;
float: left;
margin-right: 30px;
}
@media (max-width: 767px) {
body.blog .entry-featured {
max-width: 100% !important;
float: none;
margin-right: 0px;
}
}

Please use square size image to make the layout more similar to the screenshot you shared.

To active date in the post please go to X-> Theme option -> Blog and active the meta-option.

Hope this helps!

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

1 Like

Hi,
Thanks for your answers!
I tried the date option, but that doesn’t work. Is there a way to have the date just under or above the heading?
And is there a possibility to have an extra column (for subscribing a newsletter) at the right of the page as shown in the screenshot I send you?
thanks a lot!!
Hidde

Hi Hidde,

Is it a customized page? The structures seems off, please provide your admin login credentials in the secure note and I’ll check.

As for subscription form, I think you could do that by enabling the sidebar of your page and add a widget, email forms or ConvertPlus. You can enable the sidebar by switching to Content-Sidebar layout in Theme Options > Layout and Design instead of Fullwidth.

Thanks!

Hi,
Thanks for checking, I put the login at the secure note.

Hidde

Hi again,

Thank you for providing the credentials. I checked your site and the post meta was set to display: none in your Global CSS (see screenshot)

I went ahead and added the following code in your Global CSS to fix the issue:

.blog .entry-header .p-meta>span {
    display: inline-block;
}

Thanks!

Hi,
I’m sorry but I have to re-open this post, it is still not working.

In the blog settings I switched the meta to ‘off’, otherwise I get a date in the streamer at all blog posts.

I would like a date ONLY at the posts at this page: https://www.privacyopschool.nl/nieuws/
How can I do that? I tried it by adding the css at that page:
.blog .entry-header .p-meta>span {
display: inline-block;
}
But that doesn’t work.
Can you help me?
Thanks!
Hidde

Hello Hidde,

Please enable the Post Meta then add this CSS code to the Global CSS so that the date will only be displayed on the news page:

.entry-header .p-meta > span,
.blog .entry-header .p-meta > span:nth-child(2):after,
.single-post .p-meta {
    display: none;
}

.blog .entry-header .p-meta > span:nth-child(2) {
    display: inline-block;
}

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.