Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ General Web Design _ How to hide a part of a screen?
Posted by: Stefan197203 Mar 1 2020, 06:27 AM
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)
Posted by: Christian J Mar 1 2020, 06:59 AM
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.
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.
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.
Posted by: pandy Mar 1 2020, 11:07 AM
A plugin? What plugin?
Posted by: Stefan197203 Mar 1 2020, 11:31 AM
A plugin? What plugin?
It's "Translatepress" for WordPress
Posted by: Stefan197203 Mar 1 2020, 11:42 AM
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).
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.
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!!
Posted by: Christian J Mar 1 2020, 12:16 PM
You could try the following CSS:
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.
Posted by: pandy Mar 1 2020, 12:55 PM
But surely it isn't the link that should be hidden? 
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/
Posted by: Stefan197203 Mar 1 2020, 01:13 PM
You could try the following CSS:
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.
Posted by: Stefan197203 Mar 1 2020, 01:17 PM
But surely it isn't the link that should be hidden?
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!!
Posted by: 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.
Posted by: Stefan197203 Mar 1 2020, 03:35 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!!
Posted by: pandy Mar 2 2020, 04:46 PM
OK. That takes us to your admin area. But where do we see the actual problem? That plugin in action.
Posted by: Stefan197203 Mar 3 2020, 05:39 AM
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)
Posted by: pandy Mar 3 2020, 10:56 AM
Is this part of the HTML available to you to edit?
<p><a class="button-primary" target="_blank" href="https://translatepress.com/pricing/?utm_source=wpbackend&utm_medium=clientsite&utm_content=tpeditor&utm_campaign=tpfree">En savoir plus</a></p>
If so I guess making those two Ps display: none should do it.
Posted by: Stefan197203 Mar 3 2020, 11:04 AM
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....
Posted by: pandy Mar 3 2020, 11:30 AM
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. 
Posted by: Stefan197203 Mar 3 2020, 11:40 AM
Thanks Pandy!!
Posted by: pandy Mar 3 2020, 06:00 PM
Actually, it isn't hard at all. I didn't realize those are the only paras in that DIV.
This should do it.
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.
Posted by: Stefan197203 Mar 4 2020, 02:07 AM
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!
Posted by: pandy Mar 4 2020, 09:59 AM
Then there's something different in the real page. It works with the page you showed us.
Attached thumbnail(s)
Posted by: Stefan197203 Mar 4 2020, 10:49 AM
The screenshot seems from my own site. You have access, so I wonder where you implemented the solution.
- When I click the link, it still shows the button : https://aqqii.com/w2/?trp-edit-translation=true Did you remove the solution?
- The button is just below your screenshot, so I can't see the result.
Where did you incorporate the code?
Thousand thanks!!
Stefan
Posted by: pandy Mar 4 2020, 11:04 AM
I just viewed source, saved it locally and added my CSS snip.
Look at the scroll bar. I've scrolled the page to the bottom. There's nothing below.
Posted by: Christian J Mar 4 2020, 03:23 PM
I just viewed source, saved it locally and added my CSS snip.
Did you include any javascript? Maybe they change the HTML somehow.
Posted by: pandy Mar 4 2020, 04:10 PM
I didn't change anything more than that I added a style block and slapped on a base href. The page looked the same as online before I added the CSS snip. Almost everything is CSS. So without JS there wouldn't be much to look at.
Posted by: pandy Mar 4 2020, 04:17 PM
The screenshot seems from my own site. You have access, so I wonder where you implemented the solution.
- When I click the link, it still shows the button : https://aqqii.com/w2/?trp-edit-translation=true Did you remove the solution?
- The button is just below your screenshot, so I can't see the result.
Where did you incorporate the code?
Thousand thanks!!
Stefan
Ah! I get it. You thought I had changed your page? No, I don't want to mess with your stuff on the server. You need to add the CSS yourself.
Posted by: Stefan197203 Mar 5 2020, 05:30 AM
Great! One last bit, before the solution works. How to activate this CSS to the page (as the page is delivered by the plugin, so we can't add it, without the code being removed with every update of the plugin).
E.g. in header.php or functions.php something like:
If this page (https://aqqii.com/w2/?trp-edit-translation=true) then run this CSS
Thanks thanks thanks!
Posted by: pandy Mar 5 2020, 06:03 AM
The WHOLE page? Isn't the plugin embedded in a page, even if it's pretty much empty before the JS does it thing?
If you have a page and the link to the plugin JS is in the page, all you need is to put the CSS either in a style block in head or in a external linked style sheet.
Posted by: Stefan197203 Mar 5 2020, 10:45 AM
Plugins are installed on WordPress, not on a page.
So the page is not defined in the WordPress installation, but the whole page comes from the plugin.
Therefor it's impossible to add CSS to the page, as normal.
I can however modify header.php, functions.php and so on. They are not overwritten by a plugin-update, nor by a WordPress update.
Any resolution? Thanks for taking it this far!!
Posted by: pandy Mar 5 2020, 10:46 PM
Well, then I'm out of ideas. I don't know if it's possible to manipulate a page with something serverside without actually touching the page. Christian?
Posted by: pandy Mar 6 2020, 12:14 AM
But... It's impossible for them to create a page on your server from their server, that simply can't be done, so I took a look at what that TranslatePress really is. You have uploaded a bunch of files on your server. One (or several) of them must contain the skeleton for the page we see. I think I found it.
Take a look at translate-manager.php in the folder partials.
At line 65 or thereabout you have this.
}
?>
<title>TranslatePress</title>
</head>
<body>
<div id="trp-editor-container">
<trp-editor
ref='trp_editor'
trp_settings='<?php echo ...
From <title> and a few lines forward there's plain HTML, no PHP. Try putting the style block just after TITLE. Just be careful not to change anything before the PHP closing tag (?>) above TITLE or after the next PHP block starts. Make a backup of translate-manager.php first, so you can easily replace the file on the server if things after all screw up.
}
?>
<title>TranslatePress</title>
<style type="text/css">
#trp-upsell-section > p { display: none }
</style>
</head>
<body>
Fingers crossed!
Posted by: Christian J Mar 6 2020, 07:17 AM
I can however modify header.php, functions.php and so on.
I suppose you could let header.php create the HTML for linking or embedding a stylesheet.
Posted by: Christian J Mar 6 2020, 07:20 AM
I don't know if it's possible to manipulate a page with something serverside without actually touching the page. Christian?
A PHP script can include files from another server, but I don't know if Wordpress' PHP scripts actually do that.
Posted by: pandy Mar 6 2020, 09:00 AM
No, I meant if you can manipulate a specific page on the same server without embedding PHP in the same page.
Like if instead of loading the TranslatePress thing directly when a link is clicked, the link leads to a script that does something to the TP document before it's loaded and then sends it to the browser.
Posted by: Christian J Mar 6 2020, 05:46 PM
I have no idea what you mean.
Posted by: pandy Mar 9 2020, 07:50 AM
OK.
Stefan197203, have you tried to edit translate-manager.php yet? I'm curious.
Posted by: Stefan197203 Apr 15 2020, 07:43 AM
OK.
Stefan197203, have you tried to edit translate-manager.php yet? I'm curious.
Hi Pandy, sorry I was some time unavailable but now found your suggestion and implemented it. It worked smooth, the button is removed!
Thanks a million, you are excellent!!
Posted by: pandy Apr 17 2020, 03:40 PM
Good to know. 
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)