Search the forum...
Type to search...
Other Tabs & Accordions questions
Didier
Didier
Hi Peter
I bought Tabs & Accordions Pro 😊
I'm not sure if this is a bug or my mistake, so I'll post it here.
Using Tabs & Accordions in the frontend doesn't work, not on my site under development and not on a new, almost empty site.
The button is visible in the editor, both TinyMCE and JCE and I can use it but the Tabs & Accordions code is not inserted in the article.
Even if I log in as a superuser in the frontend, this goes wrong, so probably not rights related. The frontend “Articles Anywhere” button works fine, so probably not filter related either.
In the backend everything works as expected.
The Tabs & Accordions popup window on the frontend of the site under development differs strongly from the backend and the almost blank site, see attachments.
It doesn't matter if I remove all user.css code and use the default or a stripped-down version of the edit.php form. I've already searched and tried a lot, without success.
Any idea what I'm doing wrong?
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Please try the latest development version from:
regularlabs.com/development-releases
Didier
Didier
Tried on the 2 sties Peter: Tabs & Accordions code is now correctly inserted into the article, so that seems OK with the new version.
Formatting of the Tabs & Accordions popup (on the development site) is still not OK.
Didier.
Peter van Westen
ADMIN
Peter van Westen
ADMIN
The formatting seems to be down to the template. Can you test with the core Joomla template?
Didier
Didier
I use the core Cassiopeia template, albeit a child template as recommended.
Just tested this and apparently that's the reason: with the mother template the popup is OK, not with a child template.
Peter van Westen
ADMIN
Peter van Westen
ADMIN
That seems to be a Joomla bug.
Didier
Didier
Hi Peter
Yes, even on a blank site, the use of a new and otherwise empty child template makes that the Tabs & Accordions popup in the frontend edit screen is not rendered properly.
Maybe you find a workaround?
Child templates are safe very useful to have different layouts within the same site, is often recommended and also widely used I think.
What else can I do?
Didier.
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Please try the latest development version from:
regularlabs.com/development-releases
Didier
Didier
Tried and both problems seem to be solved Peter, thanks!
I assume there will be a release version in the next few days?
Can I come back here to an earlier question about how I can define and use my own colors? This makes the layout of websites more harmonious, consistent colors everywhere!
I more or less manage to get the desired colors by changing theme-neutral.css, whether or not via user.css. But that is very cumbersome, there must be a more convenient method, but I can’t find it.
Can you give me an example of how I can create and use a "user" tab and text color, including the colors of the pseudo classes?
Thanks a lot again.
Didier.
Peter van Westen
ADMIN
Peter van Westen
ADMIN
You can use the templates custom css to create your own colors.
Or indeed override the theme styling via the templates overrides.
You can check out the CSS and SCSS files that come with Tabs & Accordions to get the syntax right for the CSS selectors.
You can also do this with custom class names and just add that class in the {tab} tags: class="my_class".
There is no ready-to-use styling GUI in Tabs & Accordions. So if you want/need a color selector and stuff like that, then I guess Tabs & Accordions is not the solution for you.
If you want to customize the styling of Tabs & Accordions, you need to use CSS and have the knowhow on how to do that.
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Here is an example for color="cyan".
This is for both the tabs and accordions. And includes the styling for the different positions for the tabs (top, bottom, left, right). And for the 'Color Panels' option.
So you could stip out the stuff you don't need.
Didier
Didier
Hi Peter
Just a remark, maybe useful:
I just updated Articles Anywhere and Tabs & Accordions and both updates displayed the same fixed issues message, see below.
Didier.
Articles Anywhere has been successfully updated to v13.0.5PRO
Latest changes since v13.0.4:
v13.0.5 [14-Mar-2023]
# J4 Fixes issue with editor button not working on the frontend (in some cases)
# J4 Fixes issue with formatting issues in frontend editor button popup on some templates
Tabs & Accordions has been successfully updated to v1.1.3PRO
Latest changes since v1.1.3:
v1.1.3 [14-Mar-2023]
# Fixes issue with editor button not working on the frontend (in some cases)
# Fixes issue with formatting issues in frontend editor button popup on some templates
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Correct.
Didier
Didier
Just for your information Peter, to close this ticket.
The easiest way I found to change the colors of tabs & accordions is via an override, as you indicate yourself under "Custom Styling". Is the least work and the safest.
Principle: copy the desired theme css files to the template and simply replace the desired colors there.
Example in my case, child template "cassiopeia_home" of the standard Cassiopeia template:
Create folder media/templates/site/cassiopeia_home/css/tabsaccordions
Make a local copy of the original files:
theme-accent-lines.css
theme-accent-lines.min.css
And in those local files replace #18a047 everywhere with #329932 (green color)
Upload the modified theme files to the newly created folder: media/templates/site/cassiopeia_home/css/tabsaccordions
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Exactly.
Forum
Frontend button not working
Didier
Didier
I bought Tabs & Accordions Pro 😊
I'm not sure if this is a bug or my mistake, so I'll post it here.
Using Tabs & Accordions in the frontend doesn't work, not on my site under development and not on a new, almost empty site.
The button is visible in the editor, both TinyMCE and JCE and I can use it but the Tabs & Accordions code is not inserted in the article.
Even if I log in as a superuser in the frontend, this goes wrong, so probably not rights related. The frontend “Articles Anywhere” button works fine, so probably not filter related either.
In the backend everything works as expected.
The Tabs & Accordions popup window on the frontend of the site under development differs strongly from the backend and the almost blank site, see attachments.
It doesn't matter if I remove all user.css code and use the default or a stripped-down version of the edit.php form. I've already searched and tried a lot, without success.
Any idea what I'm doing wrong?
Confidential information:
(hidden)
Peter van Westen
ADMIN
Peter van Westen
ADMIN
regularlabs.com/development-releases
Please post a rating at the
Joomla! Extensions Directory
Didier
Didier
Formatting of the Tabs & Accordions popup (on the development site) is still not OK.
Didier.
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Please post a rating at the
Joomla! Extensions Directory
Didier
Didier
Just tested this and apparently that's the reason: with the mother template the popup is OK, not with a child template.
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Please post a rating at the
Joomla! Extensions Directory
Didier
Didier
Yes, even on a blank site, the use of a new and otherwise empty child template makes that the Tabs & Accordions popup in the frontend edit screen is not rendered properly.
Maybe you find a workaround?
Child templates are safe very useful to have different layouts within the same site, is often recommended and also widely used I think.
What else can I do?
Didier.
Peter van Westen
ADMIN
Peter van Westen
ADMIN
regularlabs.com/development-releases
Please post a rating at the
Joomla! Extensions Directory
Didier
Didier
I assume there will be a release version in the next few days?
Can I come back here to an earlier question about how I can define and use my own colors? This makes the layout of websites more harmonious, consistent colors everywhere!
I more or less manage to get the desired colors by changing theme-neutral.css, whether or not via user.css. But that is very cumbersome, there must be a more convenient method, but I can’t find it.
Can you give me an example of how I can create and use a "user" tab and text color, including the colors of the pseudo classes?
Thanks a lot again.
Didier.
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Or indeed override the theme styling via the templates overrides.
You can check out the CSS and SCSS files that come with Tabs & Accordions to get the syntax right for the CSS selectors.
You can also do this with custom class names and just add that class in the {tab} tags: class="my_class".
There is no ready-to-use styling GUI in Tabs & Accordions. So if you want/need a color selector and stuff like that, then I guess Tabs & Accordions is not the solution for you.
If you want to customize the styling of Tabs & Accordions, you need to use CSS and have the knowhow on how to do that.
Please post a rating at the
Joomla! Extensions Directory
Peter van Westen
ADMIN
Peter van Westen
ADMIN
This is for both the tabs and accordions. And includes the styling for the different positions for the tabs (top, bottom, left, right). And for the 'Color Panels' option.
So you could stip out the stuff you don't need.
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]),
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]):hover,
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=tabs] > [data-rlta-element=button-list] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]),
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=tabs] > [data-rlta-element=button-list] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]):hover {
background-color: cyan;
border-color: cyan;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]) > [data-rlta-element=heading],
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]):hover > [data-rlta-element=heading],
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=tabs] > [data-rlta-element=button-list] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]) > [data-rlta-element=heading],
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=tabs] > [data-rlta-element=button-list] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]):hover > [data-rlta-element=heading] {
color: black;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-positioning=top][data-rlta-type=tabs] > [data-rlta-element=button-list] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]),
[data-rlta-element=container][data-rlta-state=ready][data-rlta-positioning=top][data-rlta-type=tabs] > [data-rlta-element=button-list] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]):hover {
border-bottom-color: cyan;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-positioning=bottom][data-rlta-type=tabs] > [data-rlta-element=button-list] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]),
[data-rlta-element=container][data-rlta-state=ready][data-rlta-positioning=bottom][data-rlta-type=tabs] > [data-rlta-element=button-list] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]):hover {
border-top-color: cyan;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-positioning=left][data-rlta-type=tabs] > [data-rlta-element=button-list] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]),
[data-rlta-element=container][data-rlta-state=ready][data-rlta-positioning=left][data-rlta-type=tabs] > [data-rlta-element=button-list] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]):hover {
border-right-color: cyan;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-positioning=right][data-rlta-type=tabs] > [data-rlta-element=button-list] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]),
[data-rlta-element=container][data-rlta-state=ready][data-rlta-positioning=right][data-rlta-type=tabs] > [data-rlta-element=button-list] > [data-rlta-element=button][data-rlta-color=cyan]:not([data-rlta-state=closed]):hover {
border-left-color: cyan;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions] > [data-rlta-element=panel][data-rlta-color=cyan],
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=tabs] > [data-rlta-element=panels] > [data-rlta-element=panel][data-rlta-color=cyan] {
border-color: cyan;
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-color-panels=true][data-rlta-type=accordions] > [data-rlta-element=panel][data-rlta-color=cyan],
[data-rlta-element=container][data-rlta-state=ready][data-rlta-color-panels=true][data-rlta-type=tabs] > [data-rlta-element=panels] > [data-rlta-element=panel][data-rlta-color=cyan] {
background-color: cyan;
color: black;
}
Please post a rating at the
Joomla! Extensions Directory
Didier
Didier
Just a remark, maybe useful:
I just updated Articles Anywhere and Tabs & Accordions and both updates displayed the same fixed issues message, see below.
Didier.
Articles Anywhere has been successfully updated to v13.0.5PRO
Latest changes since v13.0.4:
v13.0.5 [14-Mar-2023]
# J4 Fixes issue with editor button not working on the frontend (in some cases)
# J4 Fixes issue with formatting issues in frontend editor button popup on some templates
Tabs & Accordions has been successfully updated to v1.1.3PRO
Latest changes since v1.1.3:
v1.1.3 [14-Mar-2023]
# Fixes issue with editor button not working on the frontend (in some cases)
# Fixes issue with formatting issues in frontend editor button popup on some templates
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Please post a rating at the
Joomla! Extensions Directory
Didier
Didier
The easiest way I found to change the colors of tabs & accordions is via an override, as you indicate yourself under "Custom Styling". Is the least work and the safest.
Principle: copy the desired theme css files to the template and simply replace the desired colors there.
Example in my case, child template "cassiopeia_home" of the standard Cassiopeia template:
Create folder media/templates/site/cassiopeia_home/css/tabsaccordions
Make a local copy of the original files:
theme-accent-lines.css
theme-accent-lines.min.css
And in those local files replace #18a047 everywhere with #329932 (green color)
Upload the modified theme files to the newly created folder: media/templates/site/cassiopeia_home/css/tabsaccordions
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Please post a rating at the
Joomla! Extensions Directory
You can only post on the extension support forum if you have an active subscription and you
log in
Buy a Pro subscription
Buy a Pro subscription