The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> How to hide a part of a screen?
Stefan197203
post Mar 1 2020, 06:27 AM
Post #1


Newbie
*

Group: Members
Posts: 14
Joined: 1-March 20
Member No.: 27,214



Hi! I hope this is very easy for someone who is familiar with some coding!

A plugin displays a screen, and I would like to remove a part of it.
I have attached the inspect-element of that part.

As I am not a specialist I have no preference on where the solution is made : CSS, HTML, PHP.
Preferably as easy as possible. I know where to add CSS (genericly for the site, in Elementor. I can't add it on the page itself), I am able to modify functions.php. HTML I guess it can be added to the functions.php?!

Hope someone can give it a quick-look and help. Thanks a million!!
Wr, Stefan


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 1 2020, 06:59 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(Stefan197203 @ Mar 1 2020, 12:27 PM) *

A plugin displays a screen, and I would like to remove a part of it.
I have attached the inspect-element of that part.

Not sure what you mean with "screen"? The highlighted HTML seems to be of an ordinary text link.

QUOTE
As I am not a specialist I have no preference on where the solution is made : CSS, HTML, PHP.

If you just want to hide the link, CSS "display: none" or "visibility: hidden" might be used. But you need to make sure no other HTML element with the same CLASS name is affected, so perhaps it's safest to give the link a unique ID and use as selector in the style sheet. If that's not possible, maybe it's still possible to target only that link in some other way with CSS selectors, can't say from the code example.

QUOTE
HTML I guess it can be added to the functions.php?!

Maybe, depends on what the PHP script contains. I guess you could always let the PHP scripts create a bit of javascript, which in turn could remove the link.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 1 2020, 11:07 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



A plugin? What plugin?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Stefan197203
post Mar 1 2020, 11:31 AM
Post #4


Newbie
*

Group: Members
Posts: 14
Joined: 1-March 20
Member No.: 27,214



QUOTE(pandy @ Mar 1 2020, 11:07 AM) *

A plugin? What plugin?


It's "Translatepress" for WordPress
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Stefan197203
post Mar 1 2020, 11:42 AM
Post #5


Newbie
*

Group: Members
Posts: 14
Joined: 1-March 20
Member No.: 27,214



QUOTE(Christian J @ Mar 1 2020, 06:59 AM) *

QUOTE(Stefan197203 @ Mar 1 2020, 12:27 PM) *

A plugin displays a screen, and I would like to remove a part of it.
I have attached the inspect-element of that part.

Not sure what you mean with "screen"? The highlighted HTML seems to be of an ordinary text link.
-> Stefan: I mean : it shows something on the screen. I did the inspect-element on a button. It is sufficient to only remove the button, but a bit better to remove that whole part of the screen. The objects/classes in the screenshot are all (the whole or) part of that screen-part. The higher in the screenshot, the more it is the name of the whole part of the screen (which I want to remove).

QUOTE
As I am not a specialist I have no preference on where the solution is made : CSS, HTML, PHP.

If you just want to hide the link, CSS "display: none" or "visibility: hidden" might be used. But you need to make sure no other HTML element with the same CLASS name is affected, so perhaps it's safest to give the link a unique ID and use as selector in the style sheet. If that's not possible, maybe it's still possible to target only that link in some other way with CSS selectors, can't say from the code example.
-> Stefan: Thanks. I tried CSS "display: none" but it didn't have an effect. My knowledge on this is limited, so maybe the following doesn't make sense: I added the CSS to the site, so not to the page. I can't add it to the page, as it comes from the plugin, which I did not make.
Ideally the coding is done somewhere where it is not impacted by software updates.


QUOTE
HTML I guess it can be added to the functions.php?!

Maybe, depends on what the PHP script contains. I guess you could always let the PHP scripts create a bit of javascript, which in turn could remove the link.

-> Stefan: I wish I knew how to do! Can you help, using the objectnames/classes as mentioned in the screenshot.
Thanks!!

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 1 2020, 12:16 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



You could try the following CSS:

CODE
#trp-upsell-section .button-primary {display: none;}

but if there are more buttons in the DIV with the ID "trp-upsell-section" then all of them will disappear, and we'll have to try something more complicated.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 1 2020, 12:55 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



But surely it isn't the link that should be hidden? unsure.gif

I don't know how the TranslatePress thing works, but it provides translations of the site to different languages. So I understand even less what this screen is and why part of the translation should be hidden but not the original...

https://translatepress.com/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Stefan197203
post Mar 1 2020, 01:13 PM
Post #8


Newbie
*

Group: Members
Posts: 14
Joined: 1-March 20
Member No.: 27,214



QUOTE(Christian J @ Mar 1 2020, 12:16 PM) *

You could try the following CSS:

CODE
#trp-upsell-section .button-primary {display: none;}

but if there are more buttons in the DIV with the ID "trp-upsell-section" then all of them will disappear, and we'll have to try something more complicated.

-> Stefan: Thanks a lot for the suggestion. Unfortunately, it didn't have the desired effect.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Stefan197203
post Mar 1 2020, 01:17 PM
Post #9


Newbie
*

Group: Members
Posts: 14
Joined: 1-March 20
Member No.: 27,214



QUOTE(pandy @ Mar 1 2020, 12:55 PM) *

But surely it isn't the link that should be hidden? unsure.gif

I don't know how the TranslatePress thing works, but it provides translations of the site to different languages. So I understand even less what this screen is and why part of the translation should be hidden but not the original...

https://translatepress.com/

-> Stefan: I prefer to not show the part of the screen, or button only. But if that is not possible, changing the link is a (less preferred) solution.
The part I want to hide is not part of the translations, just some extra info and a button. I don't want the users to get confused and click further.
I hope we can somehow hide that part of the screen, without knowing how TranslatePress works. Thanks for your effort to clarify and resolve!!


This post has been edited by Stefan197203: Mar 1 2020, 01:22 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 1 2020, 01:45 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



But we don't know what this plugin produces. Is the "screen" you talk about the translation in a popup? And does it open when that link is clicked? If so you can't do it since the page is on another domain. You can't manipulate pages on other domains.

If you want to hide the link, why have it there in the first place? Just remove it.

It would be a whole lot easier if you linked to your page so we could see what it's all about.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Stefan197203
post Mar 1 2020, 03:35 PM
Post #11


Newbie
*

Group: Members
Posts: 14
Joined: 1-March 20
Member No.: 27,214



QUOTE(pandy @ Mar 1 2020, 01:45 PM) *

But we don't know what this plugin produces. Is the "screen" you talk about the translation in a popup? And does it open when that link is clicked? If so you can't do it since the page is on another domain. You can't manipulate pages on other domains.

If you want to hide the link, why have it there in the first place? Just remove it.

It would be a whole lot easier if you linked to your page so we could see what it's all about.

-> Stefan: Thanks a lot for asking, and sorry for the aspects unclear. Here my responses and login details:
- The screen is not a popup
- The link in the screenshot would be opened when the button get's clicked. This button (or better the area around it) is to be removed. So the link is not really important in this context.
- The area I would like to remove is the left-under part (from Fonctions de traduction supplémentaires) of https://aqqii.com/w2/?trp-edit-translation=true
So it is part of the domain under my control (aqqii.com and I have this extra WordPress installation on aqqii.com/w2
- The button (incl. the link) are placed by the plugin. I need the functionality (which is the left-upper part and the right part.

If you would prefer to see it, feel free to watch it here:
https://aqqii.com/w2/wp-admin
Userid : Toview
Password : Toview12345!

I hope this is clear and thanks a lot!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 2 2020, 04:46 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



OK. That takes us to your admin area. But where do we see the actual problem? That plugin in action.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Stefan197203
post Mar 3 2020, 05:39 AM
Post #13


Newbie
*

Group: Members
Posts: 14
Joined: 1-March 20
Member No.: 27,214



Hi Pandy, thanks for looking into this! After you are logged into the admin area, go to this link : https://aqqii.com/w2/?trp-edit-translation=true
The area I would like to remove is the left-under part (from Fonctions de traduction supplémentaires)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 3 2020, 10:56 AM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Is this part of the HTML available to you to edit?

CODE
<p><span style="background: rgb(245, 251, 157) none repeat scroll 0% 0%;">Soutenu par de vraies personnes</span></p>
<p><a class="button-primary" target="_blank" href="https://translatepress.com/pricing/?utm_source=wpbackend&amp;utm_medium=clientsite&amp;utm_content=tpeditor&amp;utm_campaign=tpfree">En savoir plus</a></p>


If so I guess making those two Ps display: none should do it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Stefan197203
post Mar 3 2020, 11:04 AM
Post #15


Newbie
*

Group: Members
Posts: 14
Joined: 1-March 20
Member No.: 27,214



Unfortunately, the code comes from the plugin, which i can't change (or it would be overwritten in a next update of the standard software).
The page is completely coming from the plugin. I was hoping some code in functions.php or so....
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 3 2020, 11:30 AM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



That part is injected by JS. I see now that basically the whole page is JS. So maybe there's a JS solution. But that's Christian's forte.

Or I think it's possible to get to those Ps with one of the child selectors. I don't have time to look into it right now though as I'm not fluent when it comes to those, but I can do so later if Christian doesn't beat me to it. Off for a night on the town. happy.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Stefan197203
post Mar 3 2020, 11:40 AM
Post #17


Newbie
*

Group: Members
Posts: 14
Joined: 1-March 20
Member No.: 27,214



Thanks Pandy!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 3 2020, 06:00 PM
Post #18


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Actually, it isn't hard at all. I didn't realize those are the only paras in that DIV.

This should do it.

CODE
#trp-upsell-section > p    { display: none }


It's fragile though. If they change their script and output it may break. If for example there are more Ps in #trp-upsell-section those will also be hidden. If they change the Ps to DIVs the text will be visible again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Stefan197203
post Mar 4 2020, 02:07 AM
Post #19


Newbie
*

Group: Members
Posts: 14
Joined: 1-March 20
Member No.: 27,214



Thanks. I added this as CSS-code to the site (as I didn't define this page, I can't add it there), but unfortunately it didn't have the effect :-(
Thanks again for this new thought!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 4 2020, 09:59 AM
Post #20


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Then there's something different in the real page. It works with the page you showed us.





Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 03:17 AM