K2 templates

I'm currently creating some categories in K2 and want to use a different layout to the default one that comes with the Technews theme.

It seems that the "default" override template means I can't change any column display settings for categories, am I missing something or the theme almost hard coded to only display the one pre-set category layout?

Is there another layout you can provide that will let me display items in a grid format, similar to if I was using the layout in the "What's New" module on the front page?

Hi

Yes, template is forcing a use of one column only. It's how designer intended. You can get rid of this by rempaving an override to this component in template's /html/com_k2/ or create a new subtemplate, bu adding a new folder to same directory.

Thanks for the confirmation, do you have any 2 column K2 templates I could use as having looked at the code it looks a bit beyond what I'm able to customise...

Hi

Just tell me the url to the page I'll be able to see this 1 column layout and I'll try provide a code to change it into 2 columns.

At present it's only on my localhost as I've not been given the funds for web hosting yet. I'm using the quickstart package so my version of the site layout wise is basically identical to the Technews demo site e.g.

https://demo.gavick.com/joomla3/technew ... hp/reviews

So basically that in 2 columns would be perfect

Hi

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

.blog-page .item-list .item-list-row {
    display: block;
    float: left;
    margin: 0 0 80px;
    table-layout: inherit;
    width: 50%;
}

.blog-page .item-list .item-list-row:nth-child(2n+3) {
    clear: both;
}

@media only screen and (max-width:1300px) {
.blog-page .item-list .item-view .item-image {
    display: block;
    margin: 0;
    overflow: hidden;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.blog-page .item-list .item-view .item-image + .item-content {
    display: block;
    padding: 35px 15px 60px;
    width: 100%;
}

.blog-page .item-list .item-view .item-image + .item-content .item-footer {
    left: 0;
}

.item-content img, header img, #k2Container img {
    height: auto;
    margin: 0 auto;
    max-width: 100%;
}

.k2FeedIcon {
    clear: both;
    float: none !important;
}
}

@media only screen and (max-width:767px) {
.blog-page .item-list .item-list-row {
    width: 100px;
}
}


Thanks for this @Teitbite, does exactly what I'm looking for

Do you know of any way to apply this styling for one particular category? I know I can do overrides on specific elements in some areas e.g. blocks and menu items but not tried it on a category listing before.
Edit: just found it, page class on menu item for the category in question, gotta love Joomla

One additional thing, is there a way to add an override so the category displays in 2 columns for desktop view but reverts to single column once it goes into mobile responsive view?

Hi

Bottom part of the style I gave You is changing layout to one column when watched on screen smaller than 767px (mobile phones).

Unfortunately the mobile phone styling doesn't seem to be picking up, goes into two very small columns when tested. Just did an inspect with Chrome Developer Tools and spotted this seems to overriding from the original CSS...

Code: Select all

media="(max-width: 640px)"
.blog-page .item-list .item-view .item-image, .blog-page .item-list .item-view .item-content {
    display: block;
    padding: 20px 0 !important;
    width: 100% !important;
}

Unfortunately the mobile phone styling doesn't seem to be picking up, goes into two very small columns when tested. Just did an inspect with Chrome Developer Tools and spotted this seems to overriding from the original CSS...

Code: Select all

media="(max-width: 640px)"
.blog-page .item-list .item-view .item-image, .blog-page .item-list .item-view .item-content {
    display: block;
    padding: 20px 0 !important;
    width: 100% !important;
}

is it copied from some developer tool? Because if it's from code than syntax is not correct. Please tell me the url to the page where I'll be able to see it.