- This topic has 9 replies, 2 voices, and was last updated 2 years, 4 months ago by
Sebastian.
| Author | Posts |
|---|---|
 sakomicro
December 17, 2021 at 1:31 am
|
Hi! I am having more and more trouble with matching selectors on different pages. Meaning I have changes that unwillingly get applied to different elements on the page. So I allready discovered your page-ID addon which gives an extra level of specificity. But currently I am working on a woocommerce account page and this account page includes so many “subpages” like login, register, order details, adresses, lost password etc. So all elements on those subpages get the same page ID when trying to add a specific selector with MT. Now when I am for example on the lost password page I can not find any “unique” identifier on a high level to then be sure that all my changes on these lost password page really only affect those elements. To be even more specific: When I change the only Button on that page: Buttons on the adress page of the my account page also get those changes applied. How can I make sure that I am really adressing only the elements I see and not any others that are currently hidden? Thanks! Sascha |
 Sebastian
December 17, 2021 at 9:58 am
|
Hey Sascha, Looking a the site you recently gave me access to, I can see that the password reset form has a class on it: woocommerce-ResetPassword So you could prepend your selectors with that class e.g.
A general tip – once you’ve selected an element, search the CSS suggestions in the top toolbar. That contains the full list of suggestions. So on the reset password page, clear the default suggestion and start typing “reset”. The list will be filtered to include only selectors that match e.g.
This method should hopefully work for the login, register, order details, addresses etc. If there are no uniquely identifying classes on the other pages, we would need a way to add some classes. But it may not come to that. Cheers, |
|
sakomicro
December 17, 2021 at 10:24 am
|
Hi! Thanks for your answers and ideas! Yes. Its this page. And I tried to use .woocommerce-ResetPassword to make the selector unique or at least only for the current view. Unfortunatly adding this “selector snippet” to the existing selector did render it unusable. I checked all sorts of ways to integrate it, double checked the “spelling” but to no avail. And this “Existing-Unique-for-this-view-and-higher-level”-Selector is a rare thing on those pages. Meaning the solution “Use an existing unique higher level selector and add it to the selector you want to make unique to the view.” is not working often enough to actually stay with it. So I definitly need an easy way to add a unique selector to an existing element. And not by using elementors easy to do “add selector to widget” function, because many of the elements I am using within woocommerce are not accessable with elementor. Many of them do not even have an “official” template at all. Is there a way? If so I hope its not “Use a hook helper to find the source file and then dig into the woocommerce sourcefiles and manually add a selector to that tiny module file that woocommerce uses dynamically on those 20 page-types” 🙂 |
|
Sebastian
December 17, 2021 at 11:36 am
|
Hey, I’m curious why that .woocommerce-ResetPassword selector didn’t work. Could you send me a link to the page and explain exactly which button you are trying to style? Perhaps I made some incorrect assumptions before. Cheers, |
|
sakomicro
December 17, 2021 at 12:24 pm
|
Hi! In that specific case I want to adjust a textblock. Not a button. So the rather specific .woocommerce-ResetPassword can not be used as it is probably to low in level to affect the textblock selector. Here you see which textblock I am trying to give a big right padding and that I can not give it a higher specificity by the extra selector: And here you see that many other elements are affected by the padding change with the selector how it is now: |
|
Sebastian
December 17, 2021 at 2:40 pm
|
Hey, It looks like the paragraph is also inside the form, so you can make use of the existing classes, you just need a different selector to what you tried. In the screenshot you tried this:
But what you needed was this:
Or even just this would work:
When you are creating custom selectors, you need to ensure that the space-separated pieces match up to the structure of the HTML. “.elementor-element-7f666826” and “form” are not inside ” .woocommerce-ResetPassword”. The first is a container above, and second is the element that has that class. So “form.woocommerce-ResetPassword” is valid. But “.woocommerce-ResetPassword form” is not valid. I hope that helps! Cheers, |
|
sakomicro
December 20, 2021 at 6:48 pm
|
Hi! Answering to your last mail here: You are right. I now got used to looking in the list of selectors available in that topbar and it actually is quite effective! One thing about this topbar though: When I first click on a new selector from the list it is not directly applied. I need to reopen the list and click again. Then it always gets applied. Is this normal? |
|
Sebastian
December 21, 2021 at 3:47 pm
|
Oh I’m glad you’re finding that feature to be useful. But no, that isn’t normal behaviour. It should apply first time. I wasn’t able to replicate that on my testing site. Does it happen on the site you recently gave me access too? If so, could you extend me access for a few more days? Thanks, |
|
sakomicro
December 21, 2021 at 6:24 pm
|
Yes It´s that site and I extended the access. |
|
Sebastian
December 22, 2021 at 6:55 pm
|
Thanks! This should now be fixed in version 7.0.8.5. Please let me know if not. Cheers, |
