Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

3-column content on blog page with Quark theme?

theme

Solved by pamtbaau View solution

Started by Marco Cevoli 8 years ago · 3 replies · 3503 views

8 years ago

Hi,

How do you control the number of columns in Quark blog list pages?

So far, I've tried by:

changing the grid size in Quark theme options > no difference
changing the bricklayer.css, class bricklayer-column-sizer > no difference
changing the class of the div with item id, still no luck

columns class appears only in the layout.html.twig file, but I don't see any part of the code that might have an impact on this, so I suspect it is somehow coded in the bricklayer.js. However, the <div> with class bricklayer-column-sizer looks empty, so I don't really know what to do.

Any ideas or suggestions?
TIA

last edited 08/10/18

pamtbaau

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

8 years ago Solution

@marcocevoli

Add the following to your favourite file where you tweak Quark's style:

CSS

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

I recognise your quest....

First I was looking at the different templates to find where the columns were generated. Nope not here...
Noticed the script bricklayer added by 'blog.html.twig', which appeared to generate/manipulate the columns. Minified code only...
Inspecting the css for div 'bricklayer-column-sizer', I noticed the 'width: 50%'. Changed that in 'custom.css' and it worked.
Searched on repo of Quark on github, but not code for bricklayer either...
Googled for bricklayer.js and found the Quick Start.

Ahh... now I understand...

last edited 08/11/18 by pamtbaau

8 years ago

I followed the same quest and got to your same point.
Your suggestion did the trick. What I don't understand, however, is:
how can the bricklayer-column-sizer class have any effect, if it refers to an empty <div> (see previous image)?

pamtbaau

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

8 years ago

I haven't looked at the internals of 'bricklayer.js' but my guess is:

it looks for the width of .bricklayer
it looks for the width of .bricklayer-column-sizer
it divides the two and you have the number of columns.
it divides the number of blog items by the number of columns and knows how many items should be put in each column.

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

Suggested topics