Simpler blog index page layout

Support
#1

Hi,
I was wondering if there is a way to use another stack’s blog index page layout with my current stack
or
even better a way to simplify the blog layout without rewriting the whole php template?
Can I do this easily if i upgrade to X pro?

The reason I’m asking is, I"m trying to make my news (blog category page) look like more like this blog https://www.clarfeld.com/perspectives-blog-summary/ . And I was wondering if there is an easy way to do this that already exists in X .

I tried shrinking the photos with this code but its not working but really my goal is to make my blog index page look more link this blog https://www.clarfeld.com/perspectives-blog-summary/
so i would need to shrink the photos and align left and align the text boxes to be next to the photos

/* shrink photos blog/
.single-post .entry-featured {
max-width: 300px; /Adjust this value accordingly/
margin: 3% auto 0;
}

thanks

#2

Hi @designbabe,

The styling for each stack is unique and is exclusive for each stack so this is not possible.

Pro currently does not have a functionality where you can customize the blog page. If you want to further customize the blog page, you will have to write some CSS code or override the PHP file for the blog page template through the child theme.

This is possible by adding some custom CSS on the site.

Firstly, set the blog page Style setting to Standard in X > Theme Options > Blog.

Then add this code in X > Theme Options > CSS:

.blog article {
    display: flex;
    flex-wrap: wrap;
}

.blog article .entry-featured {
    flex: 0 0 20%;
}

.blog article .entry-wrap {
    flex: 0 0 80%;
    border-radius: 0;
    box-shadow: none;
    padding: 20px;
    background-color: transparent;
}

Please note the the code about will display the size of the featured image small and the post content beside it.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps you get started.

#3

thanks for your reply and information.
I tried the css and it doesn’t seem to working. I changed the blog setting to be standard and I tired with “full width” and “use global content” and neither seem to have to change on the news page.
Any thoughts?

#4

Hi @designbabe,

I think there is a misunderstanding here.
I can see you have added it correctly. But then your blog page points here: http://blog.bramshillinves.staging.wpengine.com/blog which is not loading and says cannot be reach. Is that in hubspot?
If the change you intend are for this one: http://bramshillinves.staging.wpengine.com/category/news/ we might need to change previews CSS suggestion to this:

.category-news article {
    display: flex;
    flex-wrap: wrap;
}

.category-news article .entry-featured {
    flex: 0 0 20%;
}

.category-news article .entry-wrap {
    flex: 0 0 80%;
    border-radius: 0;
    box-shadow: none;
    padding: 20px;
    background-color: transparent;
}

For other design adjustment, the following might help:

#5

HI Lely
yes, sorry for confusion, i thought i had added the the page link in secure note, i should have been more clear about which page, since i had said blog yes i meant news category of blog.

I tried adding the new CSS and I see how its should work but it doesn’t seem to be having an effect. I checked in new inconigito window no luck.
any thoughts?

#6

Hi @designbabe,

I have logged in and checked your site and none of the CSS code is working because there are codes in the CSS area that are incorrect which is causing a CSS syntax error:

Please clean up your CSS codes so avoid issues. Please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

So far, the CSS issues that I could see are:

There is a missing closing } in the code above.

These are not CSS codes. Kindly get rid of them.

Hope this helps.

#7

HI Jade
thanks for feedback and help, I did as noted and its working now mostly except now i had had a weird shadow box around the photos and I CSS-ed that out but still have a line below the photos

do you know where to remove that?
thanks

#8

Hello @designbabe,

The line were coming from the border bottom style. Please add this code as well to remove the lines.

.has-post-thumbnail .entry-featured {
    border-bottom: none;
}

Please let us know if this works out for you.

#9

hi
i git that working and cleaned up a bit but also wanted to hide the excerpt and i added this

.entry-content excerpt {
display:none;
}


and it doesnt seem to be working, i searched the forum and other user did the same and it works i’m so i’m confused on why its not working,
thoughts?

#10

Hello @designbabe,

The code is incorrect.
Use this one instead:

.entry-content.excerpt {
  display:none;
}

If you need anything else we can help you with, don’t hesitate to open another thread.

#11

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