Recent
Categories
View Replies (8)

Amelia and J51_news module

  1. Bug
0
Votes
Undo
  1. Hammur
    Hammur
  2. Sherlock Holmes
  3. Commercial Templates
  4. Wednesday, 26 August 2020
  5.  Subscribe via email
Hi Ciaran,

It seems that the latest version 3.0.10 of the J51_news module doesn't quite work with the Amelia template out of the box?

The version that shipped with Amelia was 3.0.0 and had basic settings, no layout/hover feature as shown in the Amelia demo where the news module has a bottom-border on the image and a icon-link hover feature which looks very nice.
Don't know if this is maybe related to following topic Amelia and J51 News module: Image link not working ?

So I tried updating the J51_news module to latest 3.0.10 as I assumed the demo page had to be using a newer version.
But the icons with v.3.0.10 don't display correctly in the Amelia template, see attached image and url to my test side using the demo installer.

An additional, however a bit minor thing, is that the content-text font on the demo page and my installed one isn't quite the same.
On the demo page the content-text seems to be inheriting "font-weight: 400" from the body CSS, while on e.g. on my demo installer it uses "font-weight: 300" as set by the p CSS. The font difference can also be seen on the attached 1st image vs. 2nd image.
The higher font-weight setting looks a bit nicer and clearer so would be nice to have it similar. Not sure if this maybe is some setting configured different on the demo page than the demo installer?
Attachments (1)
J51_Amelia - News Module.png J51_Amelia - News Module.png
References
  1. https://test.konsult.fo/amelia/index.php
Responses (8)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine these issues further. For our reference please paste a link to this post in your email.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Hammur
Hammur
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

My development side is unfortunately local, but the issue is the same on my test side using the demo installer, where I also made the screenshots, that came with the template, so I've sent you access to it instead.
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

It appears our Amelia template includes a Joomla override for the News module CSS which is effecting the styling of the module update. To disable this override, delete the following folder and its contents from your template.. templates/j51_amelia/css/mod_j51news.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Hammur
Hammur
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

Ah, that I hadn't noticed. Disabling/deleting that override folder fixes the issue with the icons and the hover function.

However some style issues are still present compared to your Amelia demo page as compared to my test side with the demo installer.
Most of these issues I can manage fix myself by adding custom CSS, but ideally I'd like avoid doing too many CSS overrides.
See attached image.

General:

  1. Text font weight: Your demo page seems to use font-weight: 400 as compared to font-weight: 300 on the demo installer. Can't really figure out why.
    2. The paragraph css is p { font-weight: 300;}, but yet your demo page displays it as if it was p {font-weight: 400;}?

J51_news module:
Using the news module v.3.0.10 that I've Downloaded from "Profile > Extension downloads". I think your demo page might be using a different or modified version?

  1. No bottom border on image.
    2. It seems to be there in the CSS, but it doesn't show, seems to be missing the "border-bottom: 5px solid;"?
  2. Article info (date) style is different.
  3. Figure caption/intro description padding is also different.

For these J51_news issues, are you maybe able to share the version you are using on you demo page?

  1. Additionally, the "Carousel" layout option doesn't seem to work? If I select this option in the module layout settings, the module just disappears.
    2. I'm intending to use the news module as a Carousel, where it will display 3 news and then there is pagination to see additional/older news.
Attachments (1)
J51_Amelia - News Module1.png J51_Amelia - News Module1.png
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you for detailing.

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

p {

    font-weight: 400;

}

.j51news figcaption {

    padding: 20px 0;

}

.j51news .newsimg {

    border-bottom-width: 4px;

    border-bottom-style: solid;

}

.j51news-meta {

    font-size: .75rem;

}


Unfortunately at present, the News module does not including pagination. As pagination spans across multiple pages, it can only be applied to component based extensions.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Hammur
Hammur
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

That works great as an easy fix, however I had to change the class ".j51news .newsimg" to ".j51news-image" as the previous class seemed to override the border-bottom-color and was thus just black.

About the "Carousel" and the pagination, I was maybe not very clear. By pagination I meant arrows to scroll or slide to previous news.
Example like it is on your Natelie demo page

The issue with the news module not displaying when selecting the "Carousel" seems to be fixed now too, or at least it shows.
What changes did you make to fix this so I might apply it to my local development site?

The only way I at the moment can see previous "news" is to select "Autoplay transition" to "Yes", it then autoplays.
But missing the arrows so a users can control this themself.

EDIT: The arrow buttons where there, they were just white like the background was and such were camouflaged.
I added CSS: j.51news-nav svg {fill: inherit;} so they got a dark colour and were visible to the user.
Attachments (1)
j51_news_carousel.png j51_news_carousel.png
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

We have just updated the Amelia template, hopefully resolving all issues you have brought to light. Bundled extensions have been updated to the latest versions and amendments made to the template to ensure full compatibility.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Hammur
Hammur
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

I was just about to reply when you wrote.

Cheers for the template update, updating the template and the j51_news module solved the issue with the 'carousel' option not showing any articles.
However the custom css amendment in your post #5 still seems to be necessary in order to mimic how the news module is shown on your demo page.

I did by the way just figure out that you had made a template override of the mod_j51news and the file default.php for my test site which had fixed the 'carousel' issue there.

Apparently the only different seemed to be this line (161) that was creating the issue:


	<div id="j51news<?php echo $j51_moduleid; ?>" class="j51news_inside<?php if($layout_type == 'carousel') { ?> owl-carousel<?php } ?>">
which had been changed to the following where the string "owl-carousel" was removed which fixed it. 


	<div id="j51news<?php echo $j51_moduleid; ?>" class="j51news_inside<?php if($layout_type == 'carousel') { ?> <?php } ?>">

Thanks for the support.

Marius
  1. more than a month ago
  2. Commercial Templates
  3. # 8
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!