Hello,
Would you kindly be able to get back to me on this issue?

Thanks

Hi Mai

1. To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.newsitem:not(.tns-slide-active) figure {

    box-shadow: none;

}

2. To amend try also adding the following to your Custom CSS field...

.article-info dd .icon-calendar {

    display: inline;

}

Ciaran

Hi Ciaran,

Thank you for the reply.

The first code just removed the shadow box but did not solve the navigation icon issue. It still looks as two white squares not (< > as in the demo.

The second code did show the calendar icon but did not have the primary color and the word "Published" is still there. I would appreciate having a code to make it exactly as in the demo template. Please refer to the 3rd and 5th attachments I previously sent as an example.

Thanks,

Hi Mai

The "published" string can be edited / left blank via your Joomla language overrides (System -> Language Overrides). Here is a Joomla 3 tutorial however the same principal allis to Joomla 4... https://www.inmotionhosting.com/support/edu/joomla/joomla-3/overrides/

On which URL do you have the issue with the white squares? On which browser are you having this issue? We are currently unable to replicate.

Ciaran

Hi Ciaran,

Followed the language override instructions and worked... THANK YOU SO MUCH Ciaran, every day I learn something new from you ... I really appreciate it!

Would you please guide me on how to change the calendar icon color here as well?

As for the white squares, I'm having this issue on Safari. I checked Chrome and I found it the same as on your site (without white squares) but if the background is white the transition icons < > do not show as they are already colored white.
Maybe also on safari they are already there but within the white squares, so they do not show.

Can I change their colors at least, I think this will solve the issue.

Another request, how can I remove the shadowed rectangle under the date? see attachment.

Hi Mai

Happy to help

Regarding the calendar icon color, to amend try adding the following to the Custom CSS field of your templates parameters (edit to taste)...

.published .icon-calendar {

    color: #569d2a;

}

Regarding the prev and next buttons try also adding the following...

.j51news-prev, 

.j51news-next {

    background: #62a946;

    padding: 4px;

    margin: 2px;

}

Ciaran

Thank you Ciaran!

The first code worked like magic. Thank you.
The second code worked perfectly on Chrome but Safari is not responding to the code. It's strange how browsers behave differently!

What makes it more puzzling, I have installed the J51_Rotate module and I'm using it on the same template; the prev. next. icons are visible correctly on both Chrome and Safari While the J51_News module acts differently!
You can check that on the Home page. https://www.afmssc.com/index.php

Thank you for the update.

I have amended the module override, removing the button type attribute from these icons which I am hoping will resolve this issue?

Ciaran

Thank you Ciaran, BRILLIANT support as usual!

All good now