Hide annoying Alt Image Description link/text in Wordpress Attachments details/Media popup - wordpress

I've looked and looked for a solution for this - I want to hide the annoying W3C link from the Media Gallery attachment details page/modal popup in Wordpress 6.1.1.
It's awful Ui - I mean putting an unnecessary active link next to a regularly used field. Really Automattic? screenshot example
This should not be hard, surely? I want it gone because it's in the way and it is terrible UI and i keep clicking it by accident and cursing!
All code out there does not work because of the changes in Wordpress (good luck anyway finding the legendary magic words that reveal the media attachment page name), remove_meta_box - nope, and the various hacks on here and elsewhere all fail - not even CSS like this hides it:
#alt-text-description {
display: none !important;
}
Any ideas?

Related

What effect does this CSS code have on a wordpress website?

I would like to confirm what effect this CSS code has on the homepage of a wordpress website.
.lazy { display: none !important; }
Many thanks for explanations.
I have noticed images in the homepage are being blocked from being displayed which is why im asking this question.
The CSS code itself, prevent any element which has it from being displayed on the screen.
Due to its name, it may be used to enable something called lazyload (you can read about it here).
lazyload is usually used for several reasons:
Remove the pressure of loading many images at first; sometimes images are placed at the end of the page so the client won't see it at the top of the page, with lazy loading trick it. You can prevent those images from being loaded, and force them to load only the moment your client reach them by scrolling or other events so it cause page loading improvements (because the page is now lighter)
For making some visual effects; almost everywhere you need the image to be hidden and after some juggling or some specific events it is shown (like wp-admin and sub-menus, which will be shown if you hold your mouse on or click them)
etc
Recording to the reasons; I guess your kind of codes (which will be handled in client-side and client browser) does not fit the first reason and may be used for the second one because for the first reason it is better (and I guess it must) implemented on server-side. Why? Because in your code, the image is loaded and be will there and just not shown because of the CSS code
This was all I know but if you want a more specific answer you have to say where you saw it in WordPress, in a plugin, wp-admin, template, etc...
Hope the answer becomes handy for you

Buttons become unclickable after certain actions - how to fix it?

1 – I have a search and filter form on my mobile site (480px and below) made with Search and Filter Pro plugin. Here’s the screenshot showing what I mean:
If you click on “Pokaż filtry” filters will appear. The problem is that when you expand it and just click “filtruj” (filter), the “Pokaż filtry” button will stop working – you can click as many times as you want but it won’t expand anymore (it becomes unclickable). Everything will start working again after refresh.
Second problem is very similar to the first one. At 480px and below, when you choose any option and click “filtruj” the whole search form will dissapear. Everything will start working fine again after refresh.
At resolution 960px to 480px there’s a button to show sidebar.
There’s also a Search and Filter form. When you use it, you can’t close the sidebar – the button just stops working (becomes unclickable).
These issues are 100% caused by Search and Filter Pro plugin. When I deactivate it, everything works fine. Most likely it's a conflict with theme.
Here's my site - http://gromocje.pl/
Does anyone have any idea how to fix it? I feel like I tried everything... I've never seen such a issue.
$('.otfm-sp__title').click(function() {
replace with:
$(document).on('click', '.otfm-sp__title', function() {
Reference & more info - stackoverflow.com/a/29674985/2245806

CSS gets messed up after Ajax page load

I have a website in wordpress. I recently download a plugin called Advanced Ajax Page Loader. It refreshes you content when clicked on other page without refreshing the whole site(header, footer). I tried to get my answer from plugins developer and wordpress support forum, but none responded.
I read that if ajax jquery call is used then all scripts should be reloaded again, for that the plugin have a place where I should put those codes. Until that everything works correctly, except one thin. When I go from a category to category, everything works fine, but when I open a single Post it completely screws up all my css for that page, when I refresh it, everything looks fine but then again, if I open one of the big categories with many posts, then that pages css is messed up.
I though that I could somehow refresh whole css by putting some code in the "Reload code" box, but I have no idea how to do that using scripts. English isn't my native language, therefore I'm having difficulty finding my answer on google, I tried, but my vocabulary is limited. How can I do it?
are you adding CSS classes to your elements via Javascript? If so, then the styles you add will only affect those elements which are part of the DOM at that point in time, so you might be experiencing a race condition, that actually happens to work in Chrome and Safari, but not Firefox.
second try to validate your markup and CSS and see if you have any error in your css syntax ?

JQuery Plugin (Hover-Caption) Adding Offset to Images In Internet Explorer (all versions)

I have a Wordpress site that uses a JQuery plugin called Hover-Caption ( https://github.com/coryschires/hover-caption ).
The main page of site: (http://brighidfitzsimons.com) looks good.
However in Internet Explorer 9, a similar page based on Category adds a 282px top offset to the post thumbnail image. (http://brighidfitzsimons.com/category/lifestyle/)
I am new web developer so I am struggling to figure out how to isolate problem. Based on this stackoverflow entry ( How do I get rid of an element's offset using CSS? ) my current train of thought is to add a IE specific CSS sheet to 'reverse' the offset but I can't seem to get at the offending element. Also I'm confused why works on main page but not on category page. If you watch page loading carefully, it initially loads correctly then at the very end the images are moved down. Perhaps this is a clue.
First stackoverflow entry so I hope I have followed correct ettiquete. Please advise if you need me to provide any more information.
Thanks for taking time to read problem.
Regards Simon
It has something to do with the substitutions of the content inside the title, probably some quirk about ie9 which someone else would have more of an idea for me
just so you can take my word for it: http://jsfiddle.net/BXjK3/
the first two i have removed all the greater, lesser and quotes and it works, but I would say the browser does the substitutions before Javascript can see it, and it all goes down-hill
edit: worth mentioning the reason it looks like that is because the text is no longer properly contained, and so the display none is not taking effect on it, pushing all the images down and making it a jumble, due to the way the content is loaded the ie inspection cannot show me how the text is after the javascript, only what was loaded on page load, so i can't give you more help than that

Drupal6: Theming Node Edit pages / Opening within Lightbox

I'm trying to display all node_edit form neatly within a lightbox without any of the excess content I don't want. No sidebars, footer, header, nothing. Just the content. So I created a page-node-edit.tpl.php file.
I have two problems daunting me, but for now I'll only mention the first since its more important.
1) From any drupal page, clicking on the "edit" link for the node doesn't activate the lightbox like it should. Instead it clicks-thru the link as normal.
With jQuery in the header I added a rel attribute for the lightbox to the links, but the box still doesn't activate. I tested the lightbox on a link I hardcoded into the page, and it activated just fine. For elements generated by Drupal, like the node edit link/button the problem seems to be timing.
I think the rel attribute needs to be built with the page, with the link, rather than appended onto it. The catch is, the link lacks an id and class, so I don't see how the hook_alter_link() function can help me.
I'm willing to try anything. Perhaps someone has done this before? Opened a node/edit form within a lightbox.
Any suggestions would be greatly appreciated.
I've seen the Modal Frame API used in a few modules (Node Relationships uses it to do something very similar to what you're doing); might be helpful...
http://drupal.org/project/modalframe

Resources