Themes & Styling

Quark: How to change number of columns shown in blog item list

Started by Jose 5 years ago · 3 replies · 1578 views

5 years ago

Hello,
I looked for this in the forum with no luck. Is it possible to configure Quark theme via frontmatter or site.yaml or quark.yaml, to display 3 or 4 summaries per row, instead of 2 summaries like it display by default? I already set show_sidebar: false since I do not need the side bar and without sidebar I have more horizontal space for more summaries per row. Or Do I need to make strong changes to the blog related templates? If so, is there a tutorial on how to accomplish this task?

By the way, with no sidebar, Quark theme displays only one huge summary per row 🤔
Thanks in advance for any advice.
Regards

last edited 08/25/21 by Jose

pamtbaau

Grav Forum Moderators Legend First Post Conversation Starter Well Liked 3129 posts

5 years ago Solution

@joejac, Bricklayer uses a div with class bricklayer-column-sizer to determine the width of the columns. The width of bricklayer-column-sizer can be set to 100% for 1 column, 50% for 2 columns, or 33.33333% for 3 columns, etc.

The css can be set in '/user/themes/quark/css/bricklayer.css' and defaults to:

CSS

.bricklayer-column-sizer {
    width: 100%;
    display: none;
}

@media screen and (min-width: 640px) {
    .bricklayer-column-sizer {
        width: 100%;
    }
}

@media screen and (min-width: 980px) {
    .bricklayer-column-sizer {
        width: 50%;
    }
}

/*@media screen and (min-width: 1200px) {*/
    /*.bricklayer-column-sizer {*/
        /*width: 33.33333%;*/
    /*}*/
/*}*/

Off course, changes should be made in your custom or inherited theme instead of Quark itself.

Beware, that columns may not always have equal width when a brick in a column has content that does not allow it to shrink to the desired 33.3333%.

Here you can find more information on bricklayer-column-sizer and its options.

last edited 08/25/21 by pamtbaau

5 years ago

Thanks a lot @pamtbaau ! It works perfect in Quark theme but not in my inherited theme. Now I have to debug what I did wrong with my inherited theme.
3 Summaries on 1200px|689x413

@pamtbaau I appreciate a lot your great help! 🙏 👏 :1st_place_medal:
Best regards

5 years ago

The problem in my inherited theme was caused when replacing Hero image with LightSlider Banner, I had a wrong line of code, the solution is described in this post.
/forum/themes-styling/css-in-frontmatter-in-mache-theme-works-but-no-in-quark-theme-t8045?u=joejac
Regards

Topic	Replies	Views	Activity
Grav 2 + Admin2: custom page blueprint fields not showing in Admin Themes & Styling · by Pedro M, 2 months ago	4	229	2 months ago
Change page background colour Themes & Styling · by Ian, 2 months ago	3	119	2 months ago
Customizing Blog Post Layout Using "Summary Size and Separator" Themes & Styling · by Norbert, 2 years ago	11	484	3 months ago
Fork of the Knowledge Base theme Themes & Styling · by Lukáš Findeis, 3 months ago	0	73	3 months ago
Oxygen theme not working right Themes & Styling · by Sebadamus, 4 months ago	5	152	3 months ago

Suggested topics