[Resolved] Customize Post Container Size?

[Aaron]

How can I customize the post container size? I’m aware there is the masonary, and columns options.. however how can I make the containers for post a custom size instead of using the default sizing?

[Leo]

Try this CSS:

.blog .container.grid-container {
    max-width: 1000px;
}

Not sure how you are adding the CSS but if you are using Tom’s Simple CSS plugin, make sure the code is entered in the global editor.
Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

The above will do the main blog page, you might want to add to it to apply it to archives as well:

.blog .container.grid-container,
.archive .container.grid-container {
    max-width: 1000px;
}

If you’re meaning the single post page, then it would be this:

.single .container.grid-container {
    max-width: 1000px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Aaron]

I tried the code but i think I explained it wrong, I mean I want to customize the Height and width of post instead of selecting small, medium, or large for the sizing options.

[Leo]

If you are talking about the sizing options in Masonry then probably not. I think the height and width of those blocks are automatically calculated depending on the title and content of the post so they fit together like masonry…

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Aaron]

What about for columns ?

[Leo]

What’s the layout you have in mind? An example would be helpful.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Aaron]

I’m trying to get a layout like this http://blog.us.playstation.com

[Tom]

Unfortunately you’re confined to the three sizes in masonry (large, medium, small).

However, you can target those three classes and give them custom sizes:

.masonry .grid-sizer,
.masonry .masonry-post {
	width: 33.333%;
}

.masonry .masonry-post.width4,
.masonry .grid-sizer.width4 {
	width: 66.666%;
}

.masonry .masonry-post.width6,
.masonry .grid-sizer.width6 {
	width: 100%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Aaron]

Worked perfectly, Thanks to both Leo & Tom for your support

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ray]

Hi Tom / Everyone,

I’m having a 30-day personal crash-course learning WP; forgive my ignorance. I have a similar issue with ‘Post’ container. I want to control/indent the ‘date’ and all other attributes that appear within all single posts containers (not pages) without affecting global container settings. Is this possible?

[Leo]

Hi Ray,

Try the following CSS below:

time.entry-date.published, .post-navigation {
    padding-left: 20px;
}

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

That will work, but it’s a little too specific.

Both of these elements are wrapped in an .entry-meta class, so we can do this:

.entry-meta {
   padding-left: 20px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Leo]

Thanks Tom 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts