Forum
- Home
- Forum
- Extensions Support
- Premium Joomla Extensions
- UT Articles Pro Specify order of tag links
Important - Hands Up!
- Please ask using the account with which you made the purchase or download of our products and in its respective category.
- If you bought our products in another market, ask your questions in that market, not here.
* ADD PRODUCT NAME IN START OF SUBJET
UT Articles Pro Specify order of tag links
- P
- panda New Member
- Topic Author 3 months 3 weeks ago #1
Is there a way to change the order of the Tag links? I've been able to customize the display of the front end using various CSS tricks and overrides, but I cannot change the order of the Tags with any overrides. I've tried changing the order of the tags in the Components / Tags, and I've also tried adding them to the UT Articles Pro tag list in the order I want, but that order does not seem to translate to the front end display.
Thank you for your help.
Thank you for your help.
The topic has been locked.
- L
- leoalv Moderator
- 3 months 3 weeks ago #2
The order of the tags is based on the order of the articles. In the module settings, you can change the order of the articles. The default is "Publish Date Descending," to display the most recent first. The module then retrieves the list of articles to display, then retrieves the tags from the list. You can try using one of the article order filters to see if it suits your needs.
If you need to display the most recent articles first and always use the same tags, you can try using flexbox in the filter container and then assign an order using order. If you find this helpful, customize the following CSS to your needs and paste it into your template's custom.css.
And you can continue according to your needs. Use the Element Inspector to identify which group each filter element belongs to.
If you need to display the most recent articles first and always use the same tags, you can try using flexbox in the filter container and then assign an order using order. If you find this helpful, customize the following CSS to your needs and paste it into your template's custom.css.
Code:
.ut-articles-pro .filter-options {display:flex;flex-wrap: wrap;}
.ut-articles-pro .filter-options a[data-group="*"] {order:1;}
.ut-articles-pro .filter-options a[data-group=".Joomla"] {order:2;}
The topic has been locked.
- P
- panda New Member
- Topic Author 3 months 3 weeks ago #3
Thank you for this information. I'll try this out and see if it suits my needs.
The topic has been locked.
- P
- panda New Member
- Topic Author 3 months 3 weeks ago #4
The CSS fix works as expected. I haven't fully implemented this, but did test it with a couple of entries.
I have another issue...
When I first load the page, the vertical spacing is broken. The gap between rows is large. The moment I click on any of the tag links, the vertical gap fixes itself. Since it fixes itself, and my CSS display overrides work properly, I'm not sure why this is happening or what to do about it. Examining the code inspector doesn't give me any clues.
Do you have any ideas about why this is happening?
I have another issue...
This message contains confidential information
When I first load the page, the vertical spacing is broken. The gap between rows is large. The moment I click on any of the tag links, the vertical gap fixes itself. Since it fixes itself, and my CSS display overrides work properly, I'm not sure why this is happening or what to do about it. Examining the code inspector doesn't give me any clues.
Do you have any ideas about why this is happening?
The topic has been locked.
- L
- leoalv Moderator
- 3 months 3 weeks ago #5
Hello.
The filter module uses JavaScript, and this JavaScript runs after rendering, positioning each element. The position is updated with each change (filtering). This is why clicking on a filter reorganizes it.
The spacing issue arises because your site applies the customization CSS after the page loads, which is incorrect. CSS should be applied first unless it's loaded using JavaScript or the module is loaded via Ajax. I see you're using Modules Anywhere. I don't know how this extension works. There's a native way to display modules in an article. There's a button to insert modules from the editor. Try using that. If it doesn't solve your problem or you're forced to use that extension. To solve your problem on our end, you could try overriding the module to runs it only after the page has loaded. This is known as CLS (Cumulative Layout Shift). You can read about it.
Let me know what you decide.
The filter module uses JavaScript, and this JavaScript runs after rendering, positioning each element. The position is updated with each change (filtering). This is why clicking on a filter reorganizes it.
The spacing issue arises because your site applies the customization CSS after the page loads, which is incorrect. CSS should be applied first unless it's loaded using JavaScript or the module is loaded via Ajax. I see you're using Modules Anywhere. I don't know how this extension works. There's a native way to display modules in an article. There's a button to insert modules from the editor. Try using that. If it doesn't solve your problem or you're forced to use that extension. To solve your problem on our end, you could try overriding the module to runs it only after the page has loaded. This is known as CLS (Cumulative Layout Shift). You can read about it.
Let me know what you decide.
The topic has been locked.
- P
- panda New Member
- Topic Author 3 months 2 weeks ago #6
Thanks for the information. Explaining the order in which the JS is applied was the piece of information I needed to fix the problem.
With the template that I'm using (a Gantry 5-based template), I have several places I can add custom CSS code. I was using the most targeted one, which injects the CSS in a module onto a specific page, but apparently the injection onto the page header takes place after your JS loads and runs.
To fix this, I chose a different method which loads the CSS overrides earlier, and that corrected the initial load display.
I will let you know if I have additional questions.
Thanks.
With the template that I'm using (a Gantry 5-based template), I have several places I can add custom CSS code. I was using the most targeted one, which injects the CSS in a module onto a specific page, but apparently the injection onto the page header takes place after your JS loads and runs.
To fix this, I chose a different method which loads the CSS overrides earlier, and that corrected the initial load display.
I will let you know if I have additional questions.
Thanks.
The topic has been locked.
- P
- panda New Member
- Topic Author 1 month 4 weeks ago #7
You can ignore my recent forum post asking about this issue.
I am still having the problem of vertical overlap on first load, then the page fixing itself either on reload or clicking on a filter button.
Here is what I've done to troubleshoot:
- I've disabled/removed all CSS overrides for this page so the module displays with the styling provided.
- For testing, I'm not using either "Modules Anywhere" or "loadmoduleid" to inject the module. Instead, I've created a module position and am pointing this module to that position.
- I've disabled JQueryEasy and JCH Optimize plugins to make sure nothing is impacting the code.
The overlap problem still remains on this page: redwings.starlightinternet.com/our-horses/horses-for-adoption
Do you have any other suggestion I can try?
Thanks.
I am still having the problem of vertical overlap on first load, then the page fixing itself either on reload or clicking on a filter button.
Here is what I've done to troubleshoot:
- I've disabled/removed all CSS overrides for this page so the module displays with the styling provided.
- For testing, I'm not using either "Modules Anywhere" or "loadmoduleid" to inject the module. Instead, I've created a module position and am pointing this module to that position.
- I've disabled JQueryEasy and JCH Optimize plugins to make sure nothing is impacting the code.
The overlap problem still remains on this page: redwings.starlightinternet.com/our-horses/horses-for-adoption
Do you have any other suggestion I can try?
Thanks.
The topic has been locked.
- L
- leoalv Moderator
- 1 month 4 weeks ago #8
Hello.
The other solution is to create an override of the module. This will create copies of the module's template file within your template. There, we can change the code to position the elements when the page is fully loaded.
Regards
The other solution is to create an override of the module. This will create copies of the module's template file within your template. There, we can change the code to position the elements when the page is fully loaded.
Regards
The topic has been locked.
- L
- leoalv Moderator
- 1 month 4 weeks ago #9
Regarding the overlap issue, we will continue to answer you in the other post you created, because we cannot address two topics here.
The topic has been locked.
Secure Payment
Use your cards with Paypal.