Search
Other Tabs & Accordions questions
Forum

Frontend button not working

Didier's Avatar 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?


Confidential information:
(hidden)
Peter van Westen's Avatar Peter van Westen ADMIN
Please try the latest development version from:
regularlabs.com/development-releases
Please post a rating at the Joomla! Extensions Directory
Didier's Avatar 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's Avatar Peter van Westen ADMIN
The formatting seems to be down to the template. Can you test with the core Joomla template?
Please post a rating at the Joomla! Extensions Directory
Didier's Avatar 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's Avatar Peter van Westen ADMIN
That seems to be a Joomla bug.
Please post a rating at the Joomla! Extensions Directory
Didier's Avatar 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's Avatar Peter van Westen ADMIN
Please try the latest development version from:
regularlabs.com/development-releases
Please post a rating at the Joomla! Extensions Directory
Didier's Avatar 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's Avatar 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.
Please post a rating at the Joomla! Extensions Directory
Didier's Avatar Didier
OK Peter, got it, you can't have everything in life. Thanks again for the support!
Peter van Westen's Avatar 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.
[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's Avatar Didier
Thanks Peter, I'll give it a try!
Didier's Avatar 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's Avatar Peter van Westen ADMIN
Correct.
Please post a rating at the Joomla! Extensions Directory
Didier's Avatar 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's Avatar Peter van Westen ADMIN
Exactly.
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