Return to previous page

Hide Image (File) Title? - by khoavo - on WordPress WooCommerce support

This topic has 12 replies, 3 voices, and was last updated 9 years ago ago by khoavo

khoavo

Participant

April 8, 2015 at 09:07

Hi there,

Could you give me the Custom CSS to “HIDE” the file title of an image when the mouse cursor hovers over it? I don’t want my image file title to show.

Also, if I may add, for the SINGLE IMAGE option in Visual Composer, how can I make the display image more attractive with fancy borders? For example, I like how an image appears when it’s display in the Light Box, where you have the nice semi-transparent frame around it, etc.

The Single Image Feature looks too simple for me, I wan it to look fancy 🙂 Thanks.

#55515 Copied

11 Answers
Eva Kemp

Support staff

April 8, 2015 at 09:11
Hello,

Add this code in footer.php before </body> tag to remove image title:
```
<script type="text/javascript">
jQuery('document').ready(function($){
$('[title]').removeAttr('title');
});
</script>
```
Please provide us with a page link where single image is displayed and specify how you want to modify it.

Thank you.
Regards,
Eva Kemp.
#55517 Copied
khoavo

Participant

April 8, 2015 at 09:27

Thanks for the Custom CSS to hide the image title.

1) When I add codes to footer.php and also to shortcodes.php, does that mean these files will be overwritten if I do a Theme Update? I know whatever goes inside my Custom.css will remain. Just making sure, so let me know.

2) I’ve include the page links in the Private Content box.I want the two images in the Single Image Page to appear with the semi-transparent frame. Go to my Example Home Page link and click on the Quick View on one of the images under Feature Products. See how when the image pops up in Light Box, you see a nice stylish frame? Thanks.

Please, contact administrator
for this information.

#55524 Copied

khoavo

Participant

April 8, 2015 at 10:59

Hey, I just noticed the script you provided earlier also hides the Title Attribute on my Menu Items. I ONLY WANT THE TITLE HIDDEN FOR THE IMAGES, NOT FOR THE MENU ITEM also.

Let me know know if it’s possible to exclude the Title Attribute from being hidden. Thanks.

#55565 Copied

Brian Johnson

Member

April 8, 2015 at 13:09

You may try to change (‘[title]’) to (‘.wpb_single_image img’) within script.

With best regards
Brian Johnson

#55606 Copied
Eva Kemp

Support staff

April 8, 2015 at 13:24
Hello,

1. The file will be overwritten after theme update, so you can create a child theme and copy that file in there.
Also you can try this solution:
http://webplantmedia.com/starter-themes/wordpresscanvas/how-to-remove-all-image-titles-when-hovering-over-pictures-in-site/

2. Add this code in custom.css file:
```
.wpb_single_image img {
    border: 10px solid #E5E5E5 !important;
}
```
How to create custom.css you can watch in this tutorial (it’s for Legenda theme but the process is the same).

Regards,
Eva Kemp.
#55624 Copied
khoavo

Participant

April 8, 2015 at 17:55

Copy & Paste the entire PHP script file to the Child Theme? Or just the part of the script that was changed? And should I copy & paste everything I’ve inserted into Custom.css over to the Child Theme as well? In case the custom.css file gets overwritten during Theme Update.

Thanks.

#55731 Copied
Eva Kemp

Support staff

April 8, 2015 at 18:05
Hello,

You need add this code in footer.php file, custom.css:
```
<script type="text/javascript">
jQuery('document').ready(function($){
	$('img').parent('a[title]').removeAttr('title');
});
</script>
```
This code should be added to custom.css of the parent theme or style.css of the child theme:
```
.wpb_single_image img {
    border: 10px solid #E5E5E5 !important;
}
```
Regards,
Eva Kemp.
#55736 Copied
khoavo

Participant

April 8, 2015 at 18:13

It didn’t work. The Title seems to appear after I insert those codes into Footer.php and custom.css.

I was also trying to understand, to avoid these files from being overwritten during a Theme Update, do I copy & paste the entire PHP and/or custom.css scripts over to the main CHILD THEME? or just sections of the sections? Thanks

#55739 Copied

khoavo

Participant

April 8, 2015 at 18:15

The border script didn’t work either. The single image remains borderless.

#55740 Copied

khoavo

Participant

April 8, 2015 at 18:17

Okay, now the border works…that’s weird. I refreshed it several times. Okay, now I just need to tackle the Title appearing issue. Thanks.

#55741 Copied

khoavo

Participant

April 8, 2015 at 18:32

Okay, I didn’t a little tweaking not he script, so the Single Image Title issue has been resolved.WHAT ABOUT FOR PRODUCTS THUMBNAIL IMAGES? I placed the cursor over it and the Title for the Product Image appears. I like to hide the Title for these as well.

Here’s the final script that I used in footer.php to hide Single Image Title only:

<script type=”text/javascript”>
jQuery(‘document’).ready(function($){
$(‘.wpb_single_image img’).removeAttr(‘title’);
});
</script>

#55745 Copied
Viewing 12 results - 1 through 12 (of 12 total)