Recent
Categories
View Replies (13)

J4 update problem on Ariana

0
Votes
Undo
  1. MikePritchard
    MikePritchard
  2. Sherlock Holmes
  3. Commercial Templates
  4. Friday, 23 December 2022
  5.  Subscribe via email
Hello,
Loving this template but I am having problems with the Ariana template after updating to J4.

I upgraded the site to J4, then reinstalled the theme and all modules.

I have two installs that are nearly identical.
One still in J3 https://centralcoastbusinessalliance.com/
One in J4 that I just updated https://pritchardhosting.com/ccba

Both running php8.0

I have some custom css both in:
/public_html/templates/j51_ariana/css
and in the template area.
But I broke the link and it didn't fix the problems.

I removed the html folder in the J4 version and reinstalled the template as per a forum post.

I cleared the site cache, browser cache and did a database fix on the backend also. No server caching used.

I opened the modules and saved and closed, also the theme.

I compared all the settings between the two sites, they look identical.

Could I get you to take a look? Was going to send the login info but wasn't sure how to post that privately.
Thanks so much!
Mike
Responses (13)
MikePritchard
MikePritchard
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
That helped. If anyone else is having this problem I'll post the final css changes I had to make to get this to work. It's not perfect but pretty close:

.layerslideshow {overflow: visible;}
.j51_icons {margin: -20px 0;}
#top1_modules.block_holder{width:96%;padding-left:2%;}
#top3_modules.block_holder{width:96%;padding-left:4%;}
#bottom3_modules.block_holder{width:96%;padding-left:2%;}
.base-2{padding: 0 45px 0px;}

@media only screen and (max-width: 598px) {
#top3_modules.block_holder {
width: 94% !important;
padding-left: 7% !important;
}
#top1_modules.block_holder {
width: 93% !important;
padding-left: 4% !important;
}
}
  1. more than a month ago
  2. Commercial Templates
  3. # 1
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Mike

Thank you for detailing.

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

.j51_icons {

    margin: -20px 0;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 2
MikePritchard
MikePritchard
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Attached are the screenshots. At slightly reduced screen width you can see the icons nearly bumping into the edge.
On the other screen shot you can see they are breaking the page width.
But I am not sure what is breaking the page width.
Attachments (2)
ariana-1.jpg ariana-1.jpg
ariana-2.jpg ariana-2.jpg
  1. more than a month ago
  2. Commercial Templates
  3. # 3
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Mike

Checking your J4 site on both Firefox and Chrome, this module is disabling icons in 3 columns. Is this not as expected?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 4
MikePritchard
MikePritchard
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
I am sorry, I wasn't very clear, the icon thing just under:
Leveraging your business & connections
That uses the J51_Icons module

I believe the problem is:
.j51_icons759 .j51_icon {
flex: 0 0 33.333%;
max-width: 33.333%;
}
.j51_icons759 .j51_icon {
padding: 20px 20px;
}

Does that make sense?
  1. more than a month ago
  2. Commercial Templates
  3. # 5
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Mike

Could you please detail for me the issue you are having with the top icon? Are you referring to the social icons in the header?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 6
MikePritchard
MikePritchard
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you for doing that. The image hover thing still doesn't look right. I am no expert, but you have the widths that total 100% then padding on top of that.
So I added this to custom css:
@media only screen and (min-width: 960px) and (max-width: 1280px){
.j51imagehover768 .j51imghvr-item {
width: 30.333% !important;
margin-left:auto;margin-right:auto;
}
.j51imagehover770 .j51imghvr-item {
width: 30.333% !important;
margin-left:auto;margin-right:auto;
}
}

@media only screen and (max-width: 767px){
.j51imagehover768 .j51imghvr-item {width: 49% !important;}
.j51imagehover770 .j51imghvr-item {width: 49% !important;}
.j51_numbers740 .j51_numbers_item {
flex:auto;
max-width:100%;
padding: 20px 0%;
width: 100%;
}
}

and it sort of works.
But am also having the problem with the icon thing at the top also. Same issue. Would you mind taking a look again?
Thanks much.
  1. more than a month ago
  2. Commercial Templates
  3. # 7
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
A new update has been created for the Ariana template which includes this fix.

Thank you

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Mike

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

.layerslideshow {

	overflow: visible;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 9
MikePritchard
MikePritchard
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you very much, I think I can code fixes for the rest of the layout problems lower on the page but still have this issue:
I can't figure out why the nav buttons to the left of the top slider are missing.
Is that because of the slider code?
Thanks much.
  1. more than a month ago
  2. Commercial Templates
  3. # 10
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Mike

Updating the ImageHover module to the latest download appears to have resolved the issue.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 11
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Mike

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue 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. # 12
MikePritchard
MikePritchard
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Still need help but I found a few of the problems. It appears the custom css doesn't load in the correct order but I am working around that.

Some of my custom css doesn't work because of Joomla core changes.

The J51 - ImageHover Gallery doesn't look like it's coded quite right, the 4 column option is set at a width of 25% for each image, because of the added padding that breaks the layout.

I can't figure out why the nav buttons to the left of the top slider are missing.

I haven't worked through all the css, only about half way through the page, but sure seems like it should be closer to the J3 version.I think there is something else wrong.
  1. more than a month ago
  2. Commercial Templates
  3. # 13
  • Page :
  • 1


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

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.