ENFOLD Image Hotspots Tooltip custom Background Color - Support

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts

March 31, 2015 at 5:06 am #420948

There are a few old post on how to customise the hotspot colour – but these were before ENFOLD included this git hub function to add custom colours to the image hot spots

https://gist.github.com/gdometrics/fc5e03a6f05845746a18

Enfold 3.1.2 / WordPress 4.1.1
I am currently able to change the hotspot pulse colour – using Custom Colours.
However the custom colour for background color and Font color do not work.

Background color – remains the same colour as the default tooltip
The Font color – remains the color of the styles set by the text WYSIWYG editor

I only want to change just one hotspot tool tip – pulse, background and font colors

I hope there is a fix for this

March 31, 2015 at 5:36 am #420953

HuxburyQuinn

Participant

the Shortcode is outputting the correct custom colors

DEFAULT EXAMPLE

[av_image_spot tooltip_pos='av-tt-pos-left av-tt-align-bottom' tooltip_width='av-tt-default-width' tooltip_style='main_color av-tooltip-shadow' link='page,149' hotspot_color='' custom_bg='' custom_font='' custom_pulse='' hotspot_pos='48.8,80.4']
<p>Tool tip text here</p>
[/av_image_spot]

CUSTOM COLORS EXAMPLE

[av_image_spot tooltip_pos='av-tt-pos-left av-tt-align-centered' tooltip_width='av-tt-default-width' tooltip_style='main_color' link='manually,http://#url link here' hotspot_color='custom' custom_bg='#00472e' custom_font='#ffffff' custom_pulse='#00472e' hotspot_pos='88.8,86.8']
<p>Tool tip text here</p>
[/av_image_spot]

However the shortcode is not inserting the custom style HTML CSS code for the custom colors in the FONT COLOR or BACKGROUND COLOR

<div class="av-image-hotspot av-perma-tooltip av-display-hotspot" data-avia-tooltip-position="left" data-avia-tooltip-alignment="centered" data-avia-tooltip-class="av-tt-default-width av-tt-pos-left av-tt-align-centered  av-mobile-fallback-active  av-permanent-tooltip-single  main_color av-tt-hotspot" data-avia-tooltip="<h3><a title=&quot; &quot; href=&quot;http://#url link here&quot; target=&quot;_blank&quot;>Download our Product Brochure</a></h3>
" style="top: 88.8%; left: 86.8%; "><a href="http://#url link here" class="av-image-hotspot_inner" style="background-color: #00472e; color: #ffffff;">6</a><div class="av-image-hotspot-pulse" style="background-color:#00472e;"></div><div class="avia-tooltip avia-tt av-tt-default-width av-tt-pos-left av-tt-align-centered av-mobile-fallback-active av-permanent-tooltip-single main_color av-tt-hotspot" style="top: -37px; left: -140px; display: block; opacity: 1;"><div class="inner_tooltip"><h3><a title="" href="http://#url link here" target="_blank">Download our Product Brochure</a></h3></div><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></div></div>

Above we can see that the custom colour has been inserted for the hotspot

<div class="av-image-hotspot-pulse" style="background-color:#00472e;"></div>

But not for the other elements

April 1, 2015 at 4:36 pm #422001

Elliott

Inactive Moderator

Hey!

Are the custom color options for hotspots not working for you? They are working fine on my XAMPP setup. Can you send us a link to your page so we can take a look?

Try completely deleting Enfold from your WordPress theme directory before downloading + uploading a fresh copy from themeforest. Also be sure to deactivate all plugins while testing.