Categories display issue

dmozi313

when i click on shop on the top menu, it should display the categories. but they not organised, as you see there is spaces in there which shouldnt be.

any solution please?

Thanks

saguaros

When I click the 'Shop' item, it shows normally now:

Did you get it solved?

dmozi313

saguaros

Thanks for your reply, i just added photo to one of the categories and solved itself, however under other categories its still same issue. please see below

saguaros

Could you share the URL of that page?

dmozi313

hi
thanks for your reply, here are the url

https://dmozi.com.au/index.php/shop/hdmi-display-ports/results,1-0

https://dmozi.com.au/index.php/shop/networking/sfp-qsfp-cables

Thanks

saguaros

dmozi313 It looks fine at my end:

dmozi313

saguaros
oh, great, not sure why, it keeps changing, see the one below please

https://dmozi.com.au/index.php/networking/results,1-0?clearCart=0

saguaros

It due to the isotope layout on this page, in which if there is an item with shorter space (height in this case, the item in next row will fulfill into that space). I added this custom css to fix this for you:

.category-view.isotope-layout .item.isotope-item {
    min-height: 186px!important;
}

dmozi313

Thanks for your great support 🙂

just to check something for the future, where should this code be added, i might use the same template for another site I'm working on.

Thanks

saguaros

With custom css code, you should add into this file: /templates/ja_megastore/css/custom.css (Create this file if it doesn't exist)

dmozi313

saguaros
thanks for reply, so if the file doesn't exist just create it and add this code with nothing else right?

and if exist just add it to the end of the file?

please correct me if I'm wrong.

Thanks 🙂

dmozi313

Hi again
on more thing, in the category pages i need to adjust the display as per image

the category name should up on the top and the line under the name, the the category to be displayed under the line.
could you please kindly assist with that?

because displaying the name on the bottom of the page doesn't make sense.

Thanks 🙂

dominic

Hi dmozi313,
Yes, if the file doesn't exist create it and add the CSS code with nothing else right.
and if it exists add it to the end of the file.

About the title of the Categories that you provided in the screenshot, I have checked and this is the section to show the products list of the categories.
I see that the HDMI & DISPLAY PORTS do not the products. I have some solutions to help you resolve this issue.

1/ I have created the ‎/templates/ja_megastore/html/com_virtuemart/category/default-2.php file for the categories layout, you can select this layout here:

I have hidden the product list and moved the title into before sub-categories.

2/ If you want to show the product list, you can add the Title or some description here:

And open the templates/ja_megastore/html/com_virtuemart/category/default.php line 24 to remove this code:
<h1><?php echo vmText::_($this->category->category_name); ?></h1>

dmozi313

dominic

Thanks for your support, have checked the site, i can see by choosing Default 2 template, it moves to title up, but there is something is missed the line should be under the title not above 🙂

Thanks

dominic

Hi dmozi313,
You can add the following CSS code to the templates/ja-templates/local/css/custom.css file.

.category_title.has-boder-top h1 {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 20px;
    border-bottom: 2px solid #ff5a00;
}

dmozi313

dominic

Thanks, will try it later today, will let you know if there is any issue.

Thanks again 🙂

dmozi313

hi
i created the file custom.css as it didnt exist, but it didnt change anything, i have attached the css file for you

custom.zip

302B

Thanks 🙂

dominic

Hi dmozi313,
With the T3 framework, you need to create the custom.css file here:
‎/templates/ja_megastore/css/custom.css
I have helped you resolve this issue.

dmozi313

dominic
Thanks for your reply, i located the file as you directed me in "templates/ja-templates/local/css/custom.css", that's why it didn't work , my bad

just one more thing please

Thanks so much for your help 🙂

dominic

Hi dmozi313,
I have used the CSS code to change only the categories using the default-2 layout. If you want to change all categories titles, you can use the following CSS code:
.category_title h1 { border-top: 0; padding-top: 0; padding-bottom: 20px; border-bottom: 2px solid #ff5a00; }

dmozi313

dominic

Thanks for your reply, I added the code to the custom.css, but it didnt work, please see the custom.css attached

custom.zip

317B

Thanks