Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Add css class to frontend edit link?

Featured Lock Resolved Issue
Due to the way I've styled the header on some of my Page Builder pages, it sits overtop the "Edit with SP Page Builder" link and renders it invisible on the front end. I've managed to make the template (Hydrogen on Gantry 5) editor button display by using CSS and z-index, but the Page Builder edit link has no class, so I don't know how to make it show up. Is this fixable, or can it be moved somewhere else?
header disabled.png
header enabled - editor button displays.png

Attachments (2)

  • header disabled.png
    header disabled.png 24.9 KB
  • header enabled - editor button displays.png
    header enabled - editor button displays.png 24.7 KB

20 Answers

Pavel

One week ago #Permalink

You have selected an inappropriate selector. Take a closer look at all the options.


There are only two attributes in the link itself. "target=_blank" and the URL. I obviously can't use the target attribute. If there's no way to use the URL, then this won't work.

By all options, I meant selectors options from W3schools

a[href*="/component/sppagebuilder"] {
color: red;
}

c8c07ca456.jpg

Attachments (1)

  • c8c07ca456.jpg
    c8c07ca456.jpg 191.6 KB

Pavel

2 weeks ago #Permalink
I think you can use a composite selector from parent classes to refer to this link. Use the browser code inspector to research

Lisa K

2 weeks ago #Permalink
As far as I can tell there is no parent class that would work, hence my question about adding a class. The only parent class is for the entire section, which would obviously not work.

Lisa K

One week ago #Permalink
Bump - I really need to get this resolved. How is it possible that the edit link can't be moved/adjusted so that it actually displays? Right now it's completely invisible and unclickable.

Lisa K

One week ago #Permalink
I have written some CSS that works to display the link, however it can only be applied directly into the element via the dev console right now, because there is no assigned class. Obviously, this won't work for anyone who needs to edit the site and doesn't know how to add styles on the fly.


element.style {
position: relative;
z-index: 99;
background-color: #fff;
padding: 1rem;
float: right;
margin: 10px;
}

Paul Frankowski - Staff

One week ago #Permalink
You have at least two way to solve it:
1) Customize SPPB code, only one file has to be edited
2) Wait for the update. I asked our developer to add an extra class name for this edit link.

----
Quick Question:
you have shown us edit link from Page | Article | Module ??

Lisa K

One week ago #Permalink
Thank you - if you let me know which file to edit, I can do that as a temporary fix until the component has been updated with this feature.

Paul Frankowski - Staff

One week ago #Permalink
Please answer to my question (above, bolded)

Lisa K

One week ago #Permalink
This is the front-end edit link in a Joomla article. New screenshot shows the link with the styles above applied.

Attachments (1)

  • 6ecf84d9-fa02-4f0d-b5af-2b405960bf20.png
    6ecf84d9-fa02-4f0d-b5af-2b405960bf20.png 8.9 KB

Paul Frankowski - Staff

One week ago #Permalink
Thanks, in Helix Ultimate based templates for Articles this button has unique class already
.article-details .article-can-edit a { }


class.jpg

Attachments (1)

  • class.jpg
    class.jpg 102.6 KB

Paul Frankowski - Staff

One week ago #Permalink
so if you use Gantry, maybe check source code as I did to show you - it has to be something similar around.

Lisa K

One week ago #Permalink
There is no parent class in Gantry, I believe I've said that twice in this thread already. Screenshot attached to demonstrate.The .item-page class is the parent div, and that covers the entire page contents.

Attachments (1)

  • 6ecf84d9-fa02-4f0d-b5af-2b405960bf20.png
    6ecf84d9-fa02-4f0d-b5af-2b405960bf20.png 8.9 KB

Paul Frankowski - Staff

One week ago #Permalink
Yes, I remember. But I wanted to show you difference only.
Anyway, I added your wish to wish-list.

Lisa K

One week ago #Permalink
Attached the wrong screenshot - see this one for the underlying page structure. Gantry places their edit icon within its own independent div, I was able to give that a style definition so it shows up.

Attachments (1)

  • 8c2fd5ba-3978-4354-848a-152124f28d2d.png
    8c2fd5ba-3978-4354-848a-152124f28d2d.png 153.2 KB

Pavel

One week ago #Permalink
You can try using attribute selector https://www.w3schools.com/css/css_attribute_selectors.asp

Lisa K

One week ago #Permalink
You can try using attribute selector https://www.w3schools.com/css/css_attribute_selectors.asp


I haven't seen this option before, but it doesn't seem to be working, possibly because the only attribute to select is dynamic? This is the code I tried that isn't working:


.item-page a[href~="sppagebuilder"] {
position: relative;
z-index: 99;
background-color: #fff;
padding: 1rem;
float: right;
margin: 10px;}


What internal file needs to be edited that generates the edit link? I'm happy to make this change temporarily so the page builder can be accessed from the front-end.

Pavel

One week ago #Permalink
You can try using attribute selector https://www.w3schools.com/css/css_attribute_selectors.asp


I haven't seen this option before, but it doesn't seem to be working, possibly because the only attribute to select is dynamic? This is the code I tried that isn't working:


.item-page a[href~="sppagebuilder"] {
position: relative;
z-index: 99;
background-color: #fff;
padding: 1rem;
float: right;
margin: 10px;}

.


You have selected an inappropriate selector. Take a closer look at all the options.

Lisa K

One week ago #Permalink

You have selected an inappropriate selector. Take a closer look at all the options.


There are only two attributes in the link itself. "target=_blank" and the URL. I obviously can't use the target attribute. If there's no way to use the URL, then this won't work.

Lisa K

One week ago #Permalink
Thank you! That worked and now the edit link is visible on all of the front-end pages.


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

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 127
Sifat

Sifat

Total Accepted Answers: 83
Toufiq

Toufiq

Total Accepted Answers: 71
Pavel

Pavel

Total Accepted Answers: 6
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 5

114

Templates

293313

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us