Forum Replies Created
-
Posts
-
Solved it. The footer was being called after the </div> tag for .container_wrap element, have moved it to before and we’re all good.
Sometimes the simple solution is just staring you in the face so much that you don’t see it. Kriesi Support people – please feel free to delete this entire post!!
I have worked out what was wrong with the menu. The menu sidebar wasn’t scrolling due to it not recognising the length of the content (since it is dynamically created) so it must have thought the page was shorter than the menu, and therefore was sticky. I have now changed the stickiness of the menu to never sticky and it scrolls just fine.
However, the footer and the socket are still appearing full-width, now below rather than behind the menu, but at least the content is now visible. This isn’t such a huge issue, but it is annoying that it’s not consistent with the other pages on the site.
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.
Hi Yigit,
I’m not sure where you’ve got the impression I was talking about a contact form from, but I wasn’t talking about a contact form at all. What I’m talking about is the “Content Element” called “Fullwidth Button” in the Avia Layout Builder.
An example of the buttons I’m trying to add the onClick attribute to can be seen here (i.e. the red buttons on the right-hand side of the page): http://www.rsno.org.uk/season1617/subscribe/
Thanks,
Cat
Doh! Would/Could either of the updates (the WordPress or the Theme) have deleted the widget from the widget area? Still not sure why it would have suddenly disappeared.
Thanks,
Cat
Through trial and error, I’ve managed to solve it on my own. In case others come across a similar problem, I thought I’d post my solution. You need to take the character codes from the map and translate them into an HTML Entity (decimal).
Make a note of your Character Code (get it by hovering over the icon you want in the icon picker), then enter it into the search form at this link: http://www.fileformat.info/info/unicode/char/search.htm?
Click on the result (it will change the code from a format like
ue841intoU+E841) then copy either the HTML Entity (decimal) or HTML Entity (hex) which look a bit like this:& # 5 9 4 5 7 ;or& # x e 8 4 1 ;Then simply put your new HTML Entity (be it decimal or hex) into the bit of your code that was just coming up as a wee rectangle like this:
data-av_icon=' & # 5 9 4 5 7 ; 'and hey presto, you have your icons back.Happy coding.
