-
Search Results
-
In reply to: Advanced Layout Editor Template for Posts
Hey Jasmer!
1. You can put a Color Section > Column properly styled (with built-in options and/or custom CSS), try doing that first and once you get something post a link here so we can assist you with custom CSS (if needed).
2. This is something that would need to be custom coded, Enfold includes its own tooltip library, look at js/avia.js (line 39 & 42) to get an idea of how to apply them to specific elements.
Best regards,
JosueIn reply to: Advanced Layout Editor Template for Posts
Hey Jasmer!
Thank you for using Enfold.
1.) Use the column element then add a background to it. Note that you can set a transparent background in the column’s Colors panel.
2.) Is that a tooltip? Try to use the Icon element.
Regards,
IsmaelIn reply to: Google Event Tracking
For anyone experiencing the same issue, I have just gone into the PHP file and re-written the code for the fullwidth button to allow the addition of onClick attributes. Please see below for the full replacement php code for the file “buttons_fullwidth.php” which can be found in wp_content/themes/enfold/config-templatebuilder/avia-shortcodes/
<?php /** * Button * Displays a button that links to any url of your choice */ if ( !class_exists( 'avia_sc_button_full' ) ) { class avia_sc_button_full extends aviaShortcodeTemplate { static $count = 0; /** * Create the config array for the shortcode button */ function shortcode_insert_button() { $this->config['name'] = __('Fullwidth Button', 'avia_framework' ); $this->config['tab'] = __('Content Elements', 'avia_framework' ); $this->config['icon'] = AviaBuilder::$path['imagesURL']."sc-button.png"; $this->config['order'] = 84; $this->config['target'] = 'avia-target-insert'; $this->config['shortcode'] = 'av_button_big'; $this->config['tooltip'] = __('Creates a colored button that stretches across the full width', 'avia_framework' ); $this->config['tinyMCE'] = array('tiny_always'=>true); } /** * Popup Elements * * If this function is defined in a child class the element automatically gets an edit button, that, when pressed * opens a modal window that allows to edit the element properties * * @return void */ function popup_elements() { $this->elements = array( array( "type" => "tab_container", 'nodescription' => true ), array( "type" => "tab", "name" => __("Content" , 'avia_framework'), 'nodescription' => true ), array( "name" => __("Button Title", 'avia_framework' ), "desc" => __("This is the text that appears on your button.", 'avia_framework' ), "id" => "label", "type" => "input", "std" => __("Click me", 'avia_framework' )), array( "name" => __("Additional Description",'avia_framework' ), "desc" => __("Enter an additional description",'avia_framework' ), "id" => "content", "type" => "textarea", "std" => "" ), array( "name" => __("Description position", 'avia_framework' ), "desc" => __("Show the description above or below the title?", 'avia_framework' ), "id" => "description_pos", "type" => "select", "subtype" => array( __('Description above title', 'avia_framework' ) =>'above', __('Description below title', 'avia_framework' ) =>'below', ), "std" => "below"), array( "name" => __("Button Link?", 'avia_framework' ), "desc" => __("Where should your button link to?", 'avia_framework' ), "id" => "link", "type" => "linkpicker", "fetchTMPL" => true, "subtype" => array( __('Set Manually', 'avia_framework' ) =>'manually', __('Single Entry', 'avia_framework' ) =>'single', __('Taxonomy Overview Page', 'avia_framework' )=>'taxonomy', ), "std" => ""), array( "name" => __("onClick Event?", 'avia_framework' ), "desc" => __("onClick=\"ga('send', 'event', 'Category', 'Action', 'Label');\"", 'avia_framework' ), "id" => "link_oc", "type" => "input", "std" => ""), array( "name" => __("Open Link in new Window?", 'avia_framework' ), "desc" => __("Select here if you want to open the linked page in a new window", 'avia_framework' ), "id" => "link_target", "type" => "select", "std" => "", "subtype" => AviaHtmlHelper::linking_options()), array( "name" => __("Button Icon", 'avia_framework' ), "desc" => __("Should an icon be displayed at the left side of the button", 'avia_framework' ), "id" => "icon_select", "type" => "select", "std" => "no", "subtype" => array( __('No Icon', 'avia_framework' ) =>'no', __('Yes, display Icon to the left of the title', 'avia_framework' ) => 'yes-left-icon' , __('Yes, display Icon to the right of the title', 'avia_framework' ) =>'yes-right-icon', )), array( "name" => __("Icon Visibility",'avia_framework' ), "desc" => __("Check to only display icon on hover",'avia_framework' ), "id" => "icon_hover", "type" => "checkbox", "std" => "", "required" => array('icon_select','not_empty_and','no') ), array( "name" => __("Button Icon",'avia_framework' ), "desc" => __("Select an icon for your Button below",'avia_framework' ), "id" => "icon", "type" => "iconfont", "std" => "", "required" => array('icon_select','not_empty_and','no') ), array( "type" => "close_div", 'nodescription' => true ), array( "type" => "tab", "name" => __("Colors",'avia_framework' ), 'nodescription' => true ), array( "name" => __("Font Color", 'avia_framework' ), "desc" => __("Select a custom font color for your Button here", 'avia_framework' ), "id" => "custom_font", "type" => "colorpicker", "std" => "#ffffff", ), array( "name" => __("Background Color", 'avia_framework' ), "desc" => __("Choose a background color for your button here", 'avia_framework' ), "id" => "color", "type" => "select", "std" => "theme-color", "subtype" => array( __('Theme Color', 'avia_framework' )=>'theme-color', __('Theme Color Subtle', 'avia_framework' )=>'theme-color-subtle', __('Blue', 'avia_framework' )=>'blue', __('Red', 'avia_framework' )=>'red', __('Green', 'avia_framework' )=>'green', __('Orange', 'avia_framework' )=>'orange', __('Aqua', 'avia_framework' )=>'aqua', __('Teal', 'avia_framework' )=>'teal', __('Purple', 'avia_framework' )=>'purple', __('Pink', 'avia_framework' )=>'pink', __('Silver', 'avia_framework' )=>'silver', __('Grey', 'avia_framework' )=>'grey', __('Black', 'avia_framework' )=>'black', __('Custom Color', 'avia_framework' )=>'custom', )), array( "name" => __("Custom Background Color", 'avia_framework' ), "desc" => __("Select a custom background color for your Button here", 'avia_framework' ), "id" => "custom_bg", "type" => "colorpicker", "std" => "#444444", "required" => array('color','equals','custom') ), array( "name" => __("Background Hover Color", 'avia_framework' ), "desc" => __("Choose a background hover color for your button here", 'avia_framework' ), "id" => "color_hover", "type" => "select", "std" => "theme-color-subtle", "subtype" => array( __('Theme Color', 'avia_framework' )=>'theme-color', __('Theme Color Subtle', 'avia_framework' )=>'theme-color-subtle', __('Blue', 'avia_framework' )=>'blue', __('Red', 'avia_framework' )=>'red', __('Green', 'avia_framework' )=>'green', __('Orange', 'avia_framework' )=>'orange', __('Aqua', 'avia_framework' )=>'aqua', __('Teal', 'avia_framework' )=>'teal', __('Purple', 'avia_framework' )=>'purple', __('Pink', 'avia_framework' )=>'pink', __('Silver', 'avia_framework' )=>'silver', __('Grey', 'avia_framework' )=>'grey', __('Black', 'avia_framework' )=>'black', __('Custom Color', 'avia_framework' )=>'custom', )), array( "name" => __("Custom Hover Color", 'avia_framework' ), "desc" => __("Select a custom background color for your Button here", 'avia_framework' ), "id" => "custom_bg_hover", "type" => "colorpicker", "std" => "#444444", "required" => array('color_hover','equals','custom') ), array( "type" => "close_div", 'nodescription' => true ), array( "type" => "close_div", 'nodescription' => true ), ); } /** * Editor Element - this function defines the visual appearance of an element on the AviaBuilder Canvas * Most common usage is to define some markup in the $params['innerHtml'] which is then inserted into the drag and drop container * Less often used: $params['data'] to add data attributes, $params['class'] to modify the className * * * @param array $params this array holds the default values for $content and $args. * @return $params the return array usually holds an innerHtml key that holds item specific markup. */ function editor_element($params) { extract(av_backend_icon($params)); // creates $font and $display_char if the icon was passed as param "icon" and the font as "font" $inner = "<div class='avia_button_box avia_hidden_bg_box avia_textblock avia_textblock_style'>"; $inner .= " <div ".$this->class_by_arguments('icon_select, color' ,$params['args']).">"; $inner .= " <span ".$this->class_by_arguments('font' ,$font).">"; $inner .= " <span data-update_with='icon_fakeArg' class='avia_button_icon avia_button_icon_left'>".$display_char."</span>"; $inner .= " </span>"; $inner .= " <span data-update_with='label' class='avia_iconbox_title' >".$params['args']['label']."</span>"; $inner .= " <span ".$this->class_by_arguments('font' ,$font).">"; $inner .= " <span data-update_with='icon_fakeArg' class='avia_button_icon avia_button_icon_right'>".$display_char."</span>"; $inner .= " </span>"; $inner .= " </div>"; $inner .= "</div>"; $params['innerHtml'] = $inner; $params['class'] = ""; return $params; } /** * Frontend Shortcode Handler * * @param array $atts array of attributes * @param string $content text within enclosing form of shortcode element * @param string $shortcodename the shortcode found, when == callback name * @return string $output returns the modified html string */ function shortcode_handler($atts, $content = "", $shortcodename = "", $meta = "") { avia_sc_button_full::$count++; $atts = shortcode_atts(array('label' => 'Click me', 'link' => '', 'link_oc' => '', 'link_target' => '', 'color' => 'theme-color', 'color_hover' => 'theme-color-subtle', 'custom_bg' => '#444444', 'custom_bg_hover' => '#444444', 'custom_font' => '#ffffff', 'position' => 'center', 'icon_select' => 'no', 'icon' => '', 'font' =>'', 'icon_hover' => '', 'description_pos' => '' ), $atts, $this->config['shortcode']); $display_char = av_icon($atts['icon'], $atts['font']); $style = "color:".$atts['custom_font']."; "; $style_hover = ""; if($atts['color'] == "custom") { $style .= "background-color:".$atts['custom_bg']."; "; } if($atts['color_hover'] == "custom") { $style_hover = "style='background-color:".$atts['custom_bg_hover']."; '"; } $extraClass = $atts['icon_hover'] ? "av-icon-on-hover" : ""; $blank = strpos($atts['link_target'], '_blank') !== false ? ' target="_blank" ' : ""; $blank .= strpos($atts['link_target'], 'nofollow') !== false ? ' rel="nofollow" ' : ""; $link = AviaHelper::get_url($atts['link']); $link = $link == "http://" ? "" : $link; $link_oc = $atts['link_oc']; if($style) $style = "style='{$style}'"; $content_html = ""; if($content && $atts['description_pos'] == 'above') { $content_html .= "<div class='av-button-description av-button-description-above'>".ShortcodeHelper::avia_apply_autop(ShortcodeHelper::avia_remove_autop($content) )."</div>"; } if('yes-left-icon' == $atts['icon_select']) $content_html .= "<span class='avia_button_icon avia_button_icon_left ' {$display_char}></span>"; $content_html .= "<span class='avia_iconbox_title' >".$atts['label']."</span>"; if('yes-right-icon' == $atts['icon_select']) $content_html .= "<span class='avia_button_icon avia_button_icon_right' {$display_char}></span>"; if($content && $atts['description_pos'] == 'below') { $content_html .= "<div class='av-button-description av-button-description-below'>".ShortcodeHelper::avia_apply_autop(ShortcodeHelper::avia_remove_autop($content) )."</div>"; } $output = ""; $output .= "<a href='{$link}' {$link_oc} class='avia-button avia-button-fullwidth {$extraClass} ".$this->class_by_arguments('icon_select, color' , $atts, true)."' {$blank} {$style} >"; $output .= $content_html; $output .= "<span class='avia_button_background avia-button avia-button-fullwidth avia-color-".$atts['color_hover']."' {$style_hover}></span>"; $output .= "</a>"; $output = "<div class='avia-button-wrap avia-button-".$atts['position']." ".$meta['el_class']."'>".$output."</div>"; $params['class'] = "main_color av-fullscreen-button avia-no-border-styling ".$meta['el_class']; $params['open_structure'] = false; $id = AviaHelper::save_string($atts['label'],'-'); $params['id'] = !empty($id) ? $id : "av-fullwidth-button-".avia_sc_button_full::$count; $params['custom_markup'] = $meta['custom_markup']; //we dont need a closing structure if the element is the first one or if a previous fullwidth element was displayed before if($meta['index'] == 0) $params['close'] = false; if(!empty($meta['siblings']['prev']['tag']) && in_array($meta['siblings']['prev']['tag'], AviaBuilder::$full_el_no_section )) $params['close'] = false; if(!ShortcodeHelper::is_top_level()) return $output; $button_html = $output; $output = avia_new_section($params); $output .= $button_html; $output .= avia_section_after_element_content( $meta , 'after_fullwidth_button' ); return $output; return $output; } } }Unless Kriesei decide to take this free bit of code development and add it to their next Enfold theme update, this code will be overwritten when the next Enfold update is released. Easiest way around that is to save it in the equivalent location within a child theme.
In reply to: Photo gallery label sticky on tablet
Hey!
then try to add an !important into my code:
@media only screen and (max-width: 989px) and (min-width: 768px) { .avia-tooltip.avia-tt { display: none !important; }}Cheers!
AndyIn reply to: Hide Gallery Captions on Mobile devices
Hi!
Thank you for the info. Please add this in the Quick CSS field:
@media only screen and (max-width: 989px) { .avia-tooltip.avia-tt { display: none !important; visibility: hidden !important; } }Best regards,
IsmaelIn reply to: Hide Gallery Captions on Mobile devices
Hey inMotionGraphics!
Thanks for reaching out to us!
I visited the link you provided and did not see the gallery captions being displayed on mobile nor on desktop views. If you want the gallery captions to only be hidden on mobile devices, try media query CSS. So the code you used, should look something like this:
@media only screen and (max-width: 764px) { .avia-gallery-caption ( display: none !important; } .avia-tooltip.avia-tt { display: none !important; } }Best regards,
JordanHi guys,
Has the class changed recently for the Gallery Captions? Because I’m trying desperately to hide the thumb nail captions on mobile phones, because when the user clicks a thumb nail, the pop up caption is left covering the lightbox image.
I’ve seen many posts and solutions about this issue, but none of them are working on my site.
For now I’m just trying to hide them in general (not only for Mobile) for testing purposes. I’ve tried the following code, both in my child theme style sheet and the quick CSS theme editor and nothing hides the caption boxes:
.avia-gallery-caption ( display: none !Important; } .avia-tooltip.avia-tt { display: none !important; }What am I doing wrong?
You can test the gallery on the home page here:
Here’s a screenshot of the issue:
Thank you.
In reply to: Photo gallery label sticky on tablet
Hi sepruda!
you can turn tooltips off for iPad screen size with this code in Quick CSS field:
@media only screen and (max-width: 989px) and (min-width: 768px) { .avia-tooltip.avia-tt { display: none; }}Regards,
AndyIn reply to: How to get the ajax search form at 100% width
Hi!
Please add this in order to adjust the search bar:
@media only screen and (max-width: 767px) { .avia-search-tooltip { box-shadow: none; top: 50px !important; margin-left: 0; width: 750px; position: absolute; margin-left: -575px; } }Create new css media queries for different screen sizes.
Best regards,
IsmaelHi ich suche für die Umsetzung einer Projektseite (OnePager) die Möglichkeit an der rechten Seite eine Dot-Navigation zu Integrieren.
Das würde zum Beispiel so aussehn: http://bootsnipp.com/snippets/featured/dot-navigation-with-tooltips
Die Tooltips müssen nicht umbedingt mit angezeigt werden. Bekommt man das in Enfold umgesetzt?
Gruß
Christoph
In reply to: Icon Default Inline Style Problem
Hey!
Please add following code to Quick CSS as well
.remove-icon-border .av_icon_caption, .adapt-icon-border .av_icon_caption { font-size: 20px !important; }Can you please elaborate on “tooltip text background” changes you would like to make? A screenshot would help :)
Regards,
YigitIn reply to: Icon Default Inline Style Problem
Thank you for your help, its workng now, I just need now to control the size of the text caption bellow the icon it seems it has fixed size despiste icon size. And i noticed in the tooltip text backgrounf (the black) it has the same whith no mather if its just a word or more text, can i control that ??
Thank you
Hello Sir,
When I set the two location in one Google Map, there have Two Tooltips.
But when I clicked one location (first tooltip is opened), and then click another location (the second tooltip is also opened, but the first one can not automactically close.)May I know how can I display only ONE tooltip at the same time?
Thanks!
In reply to: How to get the ajax search form at 100% width
Hi!
Please add following code to Quick CSS
@media only screen and (max-width: 480px) { .avia-search-tooltip { margin-left: -143px; width: 316px; }}and it should like following – screenshot in private content field
Best regards,
YigitIn reply to: How to get the ajax search form at 100% width
Hi De Groot!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 480px) { .avia-search-tooltip { width: 480px; } #top #searchform>div { max-width: 480px; }}Best regards,
YigitIn reply to: Content looks weird on iPad & iPhone
Hi!
Please add following code to Quick CSS as well
@media only screen and (max-width: 679px) { .av-share-box .avia-related-tooltip.avia-tt { display: none!important; }}Best regards,
YigitIn reply to: Icon Default Inline Style Problem
Also i need to have diferent caption text size in diferente page if possible and how to put one icon next to the other like it was a text and please check on the size ot the tooltip background as its large even if the tooltip text is short.
Thank you very much
Hey!
1. Add this to Quick CSS:
@media only screen and (max-width: 767px) { .avia-tooltip.avia-tt { display: none !important; } }2. Are you using Advanced Layout Builder in those Posts? if so, you’d need to manually create a Heading element for the title.
3. Add this:
.slide-meta{display: none;}Cheers!
JosueIn reply to: Styling disbaled Woocomerce add-to-cart-button
After some trial and error I have the add-to-card-button disabled. The standard woocommerce tooltip will still displayed on hover.
Thanks for your suggestion Vinay!div.single_variation_wrap.woocommerce-variation-add-to-cart button[disabled]:active, button[disabled],
input[type=”button”][disabled]:active,
input[type=”button”][disabled],
input[type=”submit”][disabled]:active,
input[type=”submit”][disabled],
button[disabled]:hover,
input[type=”button”][disabled]:hover,
input[type=”submit”][disabled]:hover
{
pointer-events:hover;
opacity: .3;
}In reply to: Search on mobile devices
Hi basdemos!
Please add following code to functions.php file in Appearance > Editor
add_shortcode('avia_search', 'get_search_form'); function add_custom_tooltip(){ ?> <script> jQuery(window).load(function(){ jQuery('.only-mobile-menu-search a').removeAttr('href'); }); </script> <?php } add_action('wp_footer', 'add_custom_tooltip');and then go to Appearance > Menus and add a new link and add following into navigation label
[avia_search]and then click “Screen options” on the top right side of the screen and check “CSS Classes”. Then edit your search menu item and give it custom CSS class “only-mobile-menu-search” and save. Then add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (min-width: 990px) { .only-mobile-menu-search { display: none !important; }}Regards,
YigitHi,
I would like to have an image with
a) caption (like “Christian Budschedl – Founder of Kriesi.at”)
b) social icons with tooltips when hovering the image
like the image at Kriesi’s About Page here
I tried the “image” from the ALB – but there is nothing for the social icons and tooltips when hovering it.
Could you please point me in the right direction please?Thank you!
Hello!
I am using image captions to display additional information in the lightbox. When you hover over the image in the gallery the tooltip hover displays the full caption HTML. See the screenshot below. Is there a way to prevent the caption from displaying on hover like this?
In reply to: Remove hover caption from gallery
Hi staceylane!
Thank you for using Enfold.
Please add this in the functions.php file:
// remove tooltip add_action('wp_footer', 'ava_remove_tooltip'); function ava_remove_tooltip(){ ?> <script type="text/javascript"> (function($) { $('#top #wrap_all .avia-gallery .avia-gallery-thumb a img').each(function() { $(this).removeAttr('data-avia-tooltip'); }); })(jQuery); </script> <?php }Best regards,
IsmaelHi
I just checked my website this morning and noticed that my social icons not longer display on my landing page. If I reload the page I see them flash then disappear and never display. I see the tooltips for them.
I tested in my staging area as follows:
deactivated all plugins: the problem is still there
swtich theme: that did not help as all I see are shortcodesI have included my staging login credentials so you can have a look.
You can find the website on the staging area here (select the Blog menu option to see the issue):
http://crescendo.staging.wpengine.com/#social (hosted on WPengine)I have left all of the plugins deactivated but reactivated my Enfold theme.
Thanks
LyseIn reply to: Text overlay for images
Hey fairusd!
That exact effect is possible only with a lot of customization for which you may need to hire a freelancer. however there are a few plugins available that help you achieve similar effect if you like to give it a shot here is the link https://wordpress.org/plugins/bubble-tooltip/
Best regards,
Vinay KashyapIn reply to: Make hotspot fallback link on mobile
Hi!
You can modify the config-templatesbulder > avia-shortcodes > image_hotspots.php file. Look for the add_fallback_tooltip function.
Cheers!
IsmaelIn reply to: Mailchimp look
Hi Zaccc,
If you enable debug mode in order to see shortcodes: http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/
You can then copy paste this shortcode to a new page to get the look of that entire page, you can then delete the items you don’t want/need:
[av_fullscreen size='extra_large' animation='fade' autoplay='false' interval='5' control_layout='' scroll_down='aviaTBscroll_down'] [av_fullscreen_slide slide_type='image' id='548' position='center center' video='http://' mobile_image='' video_cover='' title='New spring edition for women and men now available' custom_title_size='40' custom_content_size='18' caption_pos='caption_left' link_apply='button button-two' link='lightbox' link_target='' button_label='Women’s Collection' button_color='theme-color' link1='product_cat,13' link_target1='' button_label2='Men’s Collection' button_color2='dark' link2='product_cat,13' link_target2='' font_color='custom' custom_title='#2c2c2c' custom_content='#818181' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern=''] The new beautiful spring collection, created by star designer Konrad Kries is now available. [/av_fullscreen_slide] [av_fullscreen_slide slide_type='image' id='547' position='top left' video='http://' mobile_image='' video_cover='' title='Start with us into the new season!' custom_title_size='40' custom_content_size='18' caption_pos='caption_right' link_apply='button button-two' link='lightbox' link_target='' button_label='For Women' button_color='theme-color' link1='product_cat,12' link_target1='' button_label2='For Men' button_color2='dark' link2='product_cat,11' link_target2='' font_color='custom' custom_title='#2c2c2c' custom_content='#818181' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern=''] Those are the styles that you need for the next season. Make sure to grab your early bird coupon! [/av_fullscreen_slide] [av_fullscreen_slide slide_type='image' id='549' position='top left' video='http://' mobile_image='' video_cover='' title='Win a shopping trip<br/>with our styling experts' custom_title_size='40' custom_content_size='18' caption_pos='caption_center' link_apply='button' link='lightbox' link_target='' button_label='Sign up now!' button_color='dark' link1='page,76' link_target1='' button_label2='Click me' button_color2='light' link2='manually,http://' link_target2='' font_color='custom' custom_title='#2c2c2c' custom_content='#818181' overlay_enable='aviaTBaviaTBoverlay_enable' overlay_opacity='0.6' overlay_color='#ffffff' overlay_pattern='' overlay_custom_pattern=''] Fancy doing something a little different this autumn? Win this great shopping trip to London! We pay for everything! All expenses including flight and a meal at a gourmet restaurant of your choice will be paid for! [/av_fullscreen_slide] [av_fullscreen_slide slide_type='image' id='551' position='center right' video='' mobile_image='' video_cover='' title='Winter Collection coming soon!' custom_title_size='40' custom_content_size='18' caption_pos='caption_left' link_apply='button' link='lightbox' link_target='' button_label='Yes, notify me!' button_color='dark' link1='manually,#sign-up' link_target1='' button_label2='' button_color2='light' link2='manually,http://' link_target2='' font_color='custom' custom_title='#2c2c2c' custom_content='#818181' overlay_opacity='0.1' overlay_color='' overlay_pattern='' overlay_custom_pattern=''] Want to get notified once the new winter collection by Georgio Adriani is released? [/av_fullscreen_slide] [/av_fullscreen] [av_layout_row border='' min_height='0' color='main_color' mobile='av-flex-cells' id='collections'] [av_cell_one_fourth vertical_align='top' padding='0px' padding_sync='true' background_color='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat'] [av_image src='http://kriesi.at/themes/enfold-shop/files/2015/03/winter-girl-small-495x400.jpg' attachment='551' attachment_size='portfolio' align='center' animation='no-animation' styling='no-styling' hover='av-hover-grow' link='product,66' target='' caption='yes' font_size='' appearance='' overlay_opacity='0.7' overlay_color='#6786a1' overlay_text_color='#ffffff'] NEW WINTER COLLECTION [/av_image] [/av_cell_one_fourth][av_cell_one_fourth vertical_align='top' padding='0px' padding_sync='true' background_color='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat'] [av_image src='http://kriesi.at/themes/enfold-shop/files/2015/03/couple-sitting-495x400.jpg' attachment='546' attachment_size='portfolio' align='center' animation='no-animation' styling='no-styling' hover='av-hover-grow' link='product_cat,15' target='' caption='yes' font_size='' appearance='' overlay_opacity='0.7' overlay_color='#6786a1' overlay_text_color='#ffffff'] LATEST STREET CLOTHES [/av_image] [/av_cell_one_fourth][av_cell_one_fourth vertical_align='top' padding='0px' padding_sync='true' background_color='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat'] [av_image src='http://kriesi.at/themes/enfold-shop/files/2015/03/girls-shopping-desat-495x400.jpg' attachment='549' attachment_size='portfolio' align='center' animation='no-animation' styling='no-styling' hover='av-hover-grow' link='product_cat,12' target='' caption='yes' font_size='' appearance='' overlay_opacity='0.7' overlay_color='#6786a1' overlay_text_color='#ffffff'] FRESH SPORTSWEAR [/av_image] [/av_cell_one_fourth][av_cell_one_fourth vertical_align='top' padding='0px' padding_sync='true' background_color='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat'] [av_image src='http://kriesi.at/themes/enfold-shop/files/2015/03/hipster-girls-working-495x400.jpg' attachment='554' attachment_size='portfolio' align='center' animation='no-animation' styling='no-styling' hover='av-hover-grow' link='product_cat,10' target='' caption='yes' font_size='' appearance='' overlay_opacity='0.7' overlay_color='#6786a1' overlay_text_color='#ffffff'] FUNKY ACCECCOIRS [/av_image] [/av_cell_one_fourth] [/av_layout_row] [av_section min_height='' min_height_px='500px' padding='default' shadow='no-border-styling' bottom_border='no-border-styling' id='' color='alternate_color' custom_bg='' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern=''] [av_heading heading='Recent Top Sellers' tag='h3' style='blockquote modern-quote modern-centered' size='30' subheading_active='' subheading_size='15' padding='10' color='' custom_font=''][/av_heading] [av_productslider columns='4' items='8' offset='0' sort='0' autoplay='yes' interval='5'] [/av_section] [av_layout_row border='' min_height='0' color='alternate_color' mobile='av-flex-cells' id=''] [av_cell_one_half vertical_align='middle' padding='50px' padding_sync='true' background_color='#f8f8f8' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat'] [av_heading tag='h3' padding='10' heading='Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ' color='' style='blockquote modern-quote' custom_font='' size='30' subheading_active='' subheading_size='15' custom_class=''][/av_heading] [av_textblock size='' font_color='' color=''] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. [/av_textblock] [av_productgrid columns='3' items='6' offset='0' sort='0' paginate='no'] [/av_cell_one_half][av_cell_one_half vertical_align='top' padding='0px' padding_sync='true' background_color='#f8f8f8' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat'] [av_image_hotspot src='http://kriesi.at/themes/enfold-shop/files/2015/03/lady-in-blue.jpg' attachment='556' attachment_size='full' animation='fade-in' hotspot_layout='numbered' hotspot_tooltip_display='av-permanent-tooltip' hotspot_mobile='aviaTBhotspot_mobile'] [av_image_spot tooltip_pos='av-tt-pos-left av-tt-align-centered' tooltip_width='av-tt-default-width' tooltip_style='main_color av-tooltip-shadow' link='product,65' hotspot_color='custom' custom_bg='#6786a1' custom_font='#ffffff' custom_pulse='' hotspot_pos='6.5,56.9'] Hairdo by Roger Ramoni [/av_image_spot] [av_image_spot tooltip_pos='av-tt-pos-left av-tt-align-centered' tooltip_width='av-tt-default-width' tooltip_style='main_color av-tooltip-shadow' link='product,257' hotspot_color='custom' custom_bg='#6786a1' custom_font='#ffffff' custom_pulse='' hotspot_pos='19.8,53'] Glasses by Victor Secreni [/av_image_spot] [av_image_spot tooltip_pos='av-tt-pos-left av-tt-align-centered' tooltip_width='av-tt-default-width' tooltip_style='main_color av-tooltip-shadow' link='product,262' hotspot_color='custom' custom_bg='#6786a1' custom_font='#ffffff' custom_pulse='' hotspot_pos='38.9,58.4'] Nail polish by Sandra Sounders [/av_image_spot] [av_image_spot tooltip_pos='av-tt-pos-below av-tt-align-centered' tooltip_width='av-tt-default-width' tooltip_style='main_color av-tooltip-shadow' link='product,495' hotspot_color='' custom_bg='' custom_font='' custom_pulse='' hotspot_pos='70,54.3'] "Red Velvet" Dress by Varia Vereni [/av_image_spot] [/av_image_hotspot] [/av_cell_one_half] [/av_layout_row] [av_section min_height='' min_height_px='500px' padding='large' shadow='no-border-styling' bottom_border='no-border-styling' id='' color='alternate_color' custom_bg='' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern=''] [av_one_half first] [av_icon_box position='left_content' boxed='' icon='ue8b1' font='entypo-fontello' title='Worldwide delivery' link='' linktarget='' linkelement='' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border=''] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. [/av_icon_box] [/av_one_half][av_one_half] [av_icon_box position='left_content' boxed='' icon='ue8e2' font='entypo-fontello' title='Free shipping' link='' linktarget='' linkelement='' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border=''] Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [/av_icon_box] [/av_one_half][av_one_half first] [av_icon_box position='left_content' boxed='' icon='ue824' font='entypo-fontello' title='Secure Payment' link='' linktarget='' linkelement='' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border=''] Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. [/av_icon_box] [/av_one_half][av_one_half] [av_icon_box position='left_content' boxed='' icon='ue8b9' font='entypo-fontello' title='24/7 Support' link='' linktarget='' linkelement='' font_color='' custom_title='' custom_content='' color='' custom_bg='' custom_font='' custom_border=''] enean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus. [/av_icon_box] [/av_one_half] [/av_section] [av_section min_height='' min_height_px='500px' padding='default' shadow='no-shadow' bottom_border='no-border-styling' id='sign-up' color='main_color' custom_bg='' src='http://kriesi.at/themes/enfold-shop/files/2015/03/hipster-girls-working.jpg' attachment='554' attachment_size='full' attach='parallax' position='top center' repeat='stretch' video='' video_ratio='16:9' overlay_enable='aviaTBoverlay_enable' overlay_opacity='0.7' overlay_color='#6786a1' overlay_pattern='' overlay_custom_pattern=''] [av_heading tag='h3' padding='10' heading='Want to stay up to date? Subscribe to our Newsletter!' color='custom-color-heading' style='blockquote modern-quote modern-centered' custom_font='#ffffff' size='30' subheading_active='' subheading_size='15' custom_class=''][/av_heading] [av_one_fifth first] [/av_one_fifth][av_three_fifth] [av_contact email=' (Email address hidden if logged out) ' title='' button='Subscribe' on_send='' sent='Thanks! You will receive an email soon!' link='page,74' subject='' autorespond='' captcha='' hide_labels='aviaTBhide_labels' color='av-custom-form-color av-light-form'] [av_contact_field label='Name' type='text' options='' check='is_empty' width='element_third' multi_select=''][/av_contact_field] [av_contact_field label='E-Mail' type='text' options='' check='is_email' width='element_third' multi_select=''][/av_contact_field] [/av_contact] [/av_three_fifth][av_one_fifth] [/av_one_fifth][/av_section]Cheers!
RikardWe are testing our website with a nice illustration with hotspots – and no one gets that they should navigate with the mouse over the hotspots to see the tooltips! They just scan the image and move on to the next section. We kind of want to avoid writing a dull instruction like “move the mouse over the hotspots”.
So we thought we could try to make one of the hotspot tooltips pop up when the image fades in, and leave the others for mouse over. Is there a possibility to do that?Or does anyone (another user maybe) have experience with this and came up with another creative idea to draw attention to the hotspots?
In reply to: Tooltip font size
Hey!
Please add !important rule as following
.avia-tooltip { font-size: 8px!important; }Cheers!
YigitIn reply to: Tooltip font size
