JA Megafilter issues

saguaros

JA Megafilter uses some mockup of Bootstrap while the current Joomla template on your site seems not use Bootstrap so there is issue with style there. Could you check with template provider if their template supports Bootstrap 3?

For the translation, which text you can't translate? I will help you.

mlehr

See printscreen. Where a number is, I cannot translate.

I will ask the template builder about bootstrap 3.

mlehr

They say about Bootstrap: "No, not directly because Joomla itself does not support it."

So how can I solve the styling problems?

saguaros

mlehr

I guess their template still supports old Bootstrap 2, it's a pity as Joomla 4 is coming and it's built with Bootstrap 4.

For the style, let me check if I can help.

mlehr

saguaros
Please advise about the translations issues I send to you (post 9) and the styling issues (post 10 + 11 and before). Without solving these problems I cannot use the JA megafilter properly...

saguaros

mlehr

I tried to add some custom scss into the file: /templates/g5_helium/scss/custom.scss

but I did not see the changes on frontend, I'm not familiar with this gantry template, do I need to recompile scss too?

I want to ask you first as I don't know if recompile scss will affect any part of your site.

mlehr

The website is in developement mode, so all changes you make to the sccs file should be immediately visible. This file works well, unless I want to adjust things in the JA mega filter.
Can you try again?

saguaros

mlehr

I clear browser's cache but don't see my change in 'custom.scss' file. My code will help to show the title of custom field and the value side by side.

saguaros

mlehr

You can see it in 'custom.scss' file, does template support custom css?

mlehr

saguaros
Yes it supports custom css! All my other custom css work fine, but not css of GA Megafilter...pleae advise.

Translations? i am waiting for your reply on this...

mlehr

I found out that you had put the code in custom.css instead of custom.scss. I have now adjusted that and one of the styling issues has now been resolved.

Still remains the styling issue that you see on the print screen at the red arrow. Can you give me the css code to resolve this? Then I will put it myself in the right file.

And do you also let me know about the translations? See my previous posts about this and the large print screen with all items that are not translated.

saguaros

mlehr

It due to the space which is not enough to show all per row like that.

You can use this custom css:

.products-toolbar #limiter_chzn {
  width: 100px !important;
}

saguaros

For the translation, you can find the language constants here: /language/en-GB/en-GB.com_jamegafilter.ini

For example:

COM_JAMEGAFILTER_SORT_BY="Sort By"

You open the associated language file on your site: /language/xx-XX/xx-XX.com_jamegafilter.ini (xx is your language code)

COM_JAMEGAFILTER_SORT_BY="your desired text here"

mlehr

Thanks!
Finally 2 other questions:
1. When sorting, "Position" now also appears (see the red arrow). I don't see this sorting option in the JAMega filter component. How can I get rid of "Position"?
2. I just want to give the red-brown button next to the red arrow the color white. The button may retain that color on all other pages. Which css code can I use for this?

saguaros

mlehr

1 - In the Filter Config, you can see a column called 'Use to sort': https://prnt.sc/ql4bk5 where you can decide which field will be used to sort, check that position field on your filter and disable it.

2 - You can use this custom css to change the text for the pagination to white:

.products-toolbar .pagination > li a,
.products-toolbar .pagination > li span {
	color: #fff !important;
}

mlehr

I have checked both the base fields and the custom fields at the backend, but "position" is not listed at all. Where does this sort option come from? And how can I disable it?
Thanks, this is clear.

saguaros

mlehr

My bad, it's default value of the filter toolbar. You can try way:

1 - Set another field as default value to sort: I just tried to change to: Afstand (km's) field: https://prnt.sc/qllv5s you can set to another field as you wish.

2 - Use this css to hide the position:

.toolbar-top .chzn-container .chzn-results li:first-child {
    display: none;
}

Index filter again and access: https://www.wandelroutes.online/index.php/wandelroute-zoeken

mlehr

Thanx!