-
Search Results
-
Topic: Custom image float style CSS
Hi there,
I’m trying to create a custom class for an image container so it floats up above a widget box (sort of like the icon content box).
.avia-image-container.avia-align-center .avia-image-container-inner {
background: #ffffff none repeat scroll 0 0;
display: inline-block;
margin: -68px auto 0;
vertical-align: bottom;
}After updating the margin, I was able to get the image to float up above the border like I want it too.
However I only want it applied to a specific custom CSS as noted inI set a custom class (float-icon-box) for the middle site search box on my homepage. Modified the Quick CSS, and it the image container doesn’t float up like it should.
.float-icon-box {
display: inline-block;
margin: -68px auto 0;
vertical-align: bottom;
}Any suggestions?
In reply to: Add new Element to ALB
hello,
i have create a Titeloben.php in shortcodes folder in my child-theme. I attached the php file. What must i change so that the shortcode is working and its a new element. this is the content:
<?php /** * COLUMNS * Shortcode which creates columns for better content separation */ // Don't load directly if ( !defined('ABSPATH') ) { die('-1'); } if ( !class_exists( 'avia_sc_titeloben' ) ) { class avia_sc_titeloben extends aviaShortcodeTemplate{ static $section_count = 0; static $add_to_closing = ""; static $close_overlay = ""; /** * Create the config array for the shortcode button */ function shortcode_insert_button() { $this->config['name'] = __('TitelOben', 'avia_framework' ); $this->config['icon'] = AviaBuilder::$path['imagesURL']."sc-titeloben.png"; $this->config['tab'] = __('Layout Elements', 'avia_framework' ); $this->config['order'] = 20; $this->config['shortcode'] = 'titeloben'; $this->config['html_renderer'] = false; $this->config['tinyMCE'] = array('disable' => "true"); $this->config['tooltip'] = __('Creates a section with unique background image and colors', 'avia_framework' ); $this->config['drag-level'] = 1; $this->config['drop-level'] = 1; } /** * 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($params); $name = $this->config['shortcode']; $data['shortcodehandler'] = $this->config['shortcode']; $data['modal_title'] = $this->config['name']; $data['modal_ajax_hook'] = $this->config['shortcode']; $data['dragdrop-level'] = $this->config['drag-level']; $data['allowed-shortcodes'] = $this->config['shortcode']; if(!empty($this->config['modal_on_load'])) { $data['modal_on_load'] = $this->config['modal_on_load']; } $dataString = AviaHelper::create_data_string($data); $output = "<div class='avia_layout_section avia_pop_class avia-no-visual-updates ".$name." av_drag' ".$dataString.">"; $output .= " <div class='avia_sorthandle menu-item-handle'>"; $output .= " <span class='avia-element-title'>".$this->config['name']."</span>"; //$output .= " <a class='avia-new-target' href='#new-target' title='".__('Move Section','avia_framework' )."'>+</a>"; $output .= " <a class='avia-delete' href='#delete' title='".__('Delete Section','avia_framework' )."'>x</a>"; if(!empty($this->config['popup_editor'])) { $output .= " <a class='avia-edit-element' href='#edit-element' title='".__('Edit Section','avia_framework' )."'>edit</a>"; } $output .= "<a class='avia-save-element' href='#save-element' title='".__('Save Element as Template','avia_framework' )."'>+</a>"; $output .= " <a class='avia-clone' href='#clone' title='".__('Clone Section','avia_framework' )."' >".__('Clone Section','avia_framework' )."</a></div>"; $output .= " <div class='avia_inner_shortcode avia_connect_sort av_drop' data-dragdrop-level='".$this->config['drop-level']."'>"; $output .= "<textarea data-name='text-shortcode' cols='20' rows='4'>".ShortcodeHelper::create_shortcode_by_array($name, $content, $args)."</textarea>"; if($content) { $content = $this->builder->do_shortcode_backend($content); } $output .= $content; $output .= "</div></div>"; return $output; } /** * 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() { global $avia_config; $this->elements = array( array( "type" => "tab_container", 'nodescription' => true ), array( "type" => "tab", "name" => __("Section Layout",'avia_framework' ), 'nodescription' => true ), array( "name" => __("Section Minimum Height",'avia_framework' ), "id" => "min_height", "desc" => __("Define a minimum height for the section. Content within the section will be centered vertically within the section",'avia_framework' ), "type" => "select", "std" => "", "subtype" => array( __('No minimum height, use content within section to define Section height','avia_framework' ) =>'', __('At least 100% of Browser Window height','avia_framework' )=>'100', __('At least 75% of Browser Window height','avia_framework' ) =>'75', __('At least 50% of Browser Window height','avia_framework' ) =>'50', __('At least 25% of Browser Window height','avia_framework' ) =>'25', __('Custom height in pixel','avia_framework' ) =>'custom', ) ), array( "name" => __("Section custom height", 'avia_framework' ), "desc" => __("Define a minimum height for the section. Use a pixel value. eg: 500px", 'avia_framework' ) , "id" => "min_height_px", "required"=> array('min_height','equals','custom'), "std" => "500px", "type" => "input"), array( "name" => __("Section Padding",'avia_framework' ), "id" => "padding", "desc" => __("Define the sections top and bottom padding",'avia_framework' ), "type" => "select", "std" => "default", "subtype" => array( __('No Padding','avia_framework' ) =>'no-padding', __('Small Padding','avia_framework' ) =>'small', __('Default Padding','avia_framework' ) =>'default', __('Large Padding','avia_framework' ) =>'large', __('Huge Padding','avia_framework' ) =>'huge', ) ), /* array( "name" => __("Section Top Border Styling",'avia_framework' ), "id" => "shadow", "desc" => __("Chose a border styling for the top of your section",'avia_framework' ), "type" => "select", "std" => "no-shadow", "subtype" => array( __('Display simple top border','avia_framework' ) =>'no-shadow', __('Display a small styling shadow at the top of the section','avia_framework' ) =>'shadow', __('No border styling','avia_framework' ) =>'no-border-styling', ) ), array( "name" => __("Section Bottom Border Styling",'avia_framework' ), "id" => "bottom_border", "desc" => __("Chose a border styling for the bottom of your section",'avia_framework' ), "type" => "select", "std" => "no-border-styling", "subtype" => array( __('No border styling','avia_framework' ) =>'no-border-styling', __('Display a small arrow that points down to the next section','avia_framework' ) =>'border-extra-arrow-down', ) ), array( "name" => __("Display a scroll down arrow", 'avia_framework' ), "desc" => __("Check if you want to show a button at the bottom of the section that takes the user to the next section by scrolling down", 'avia_framework' ) , "id" => "scroll_down", "std" => "", "type" => "checkbox"), */ array( "name" => __("For Developers: Section ID", 'avia_framework' ), "desc" => __("Apply a custom ID Attribute to the section, so you can apply a unique style via CSS. This option is also helpful if you want to use anchor links to scroll to a sections when a link is clicked", 'avia_framework' )."<br/><br/>". __("Use with caution and make sure to only use allowed characters. No special characters can be used.", 'avia_framework' ), "id" => "id", "type" => "input", "std" => ""), array( "type" => "close_div", 'nodescription' => true ), array( "type" => "tab", "name" => __("Section Background" , 'avia_framework'), 'nodescription' => true ), /* array( "name" => __("Section Colors",'avia_framework' ), "id" => "color", "desc" => __("The section will use the color scheme you select. Color schemes are defined on your styling page",'avia_framework' ) . '<br/><a target="_blank" href="'.admin_url('admin.php?page=avia#goto_styling').'">'.__("(Show Styling Page)",'avia_framework' )."</a>", "type" => "select", "std" => "main_color", "subtype" => array_flip($avia_config['color_sets']) ), */ array( "name" => __("Custom Background Color", 'avia_framework' ), "desc" => __("Select a custom background color for your Section here. Leave empty if you want to use the background color of the color scheme defined above", 'avia_framework' ), "id" => "custom_bg", "type" => "colorpicker", "std" => "", ), array( "name" => __("Custom Background Image",'avia_framework' ), "desc" => __("Either upload a new, or choose an existing image from your media library. Leave empty if you want to use the background image of the color scheme defined above",'avia_framework' ), "id" => "src", "type" => "image", "title" => __("Insert Image",'avia_framework' ), "button" => __("Insert",'avia_framework' ), "std" => ""), array( "name" => __("Custom Logo",'avia_framework' ), "desc" => __("Either upload a new, or choose an existing image from your media library. Leave empty if you want to use the background image of the color scheme defined above",'avia_framework' ), "id" => "srclogo", "type" => "image", "title" => __("Insert Image",'avia_framework' ), "button" => __("Insert",'avia_framework' ), "std" => ""), array( "name" => __("Background Attachment",'avia_framework' ), "desc" => __("Background can either scroll with the page, be fixed or scroll with a parallax motion", 'avia_framework' ), "id" => "attach", "type" => "select", "std" => "scroll", "required" => array('src','not',''), "subtype" => array( __('Parallax','avia_framework' ) =>'parallax' ) ), array( "name" => __("Background Image Position",'avia_framework' ), "id" => "position", "type" => "select", "std" => "top left", "required" => array('src','not',''), "subtype" => array( __('Top Left','avia_framework' ) =>'top left', __('Top Center','avia_framework' ) =>'top center', __('Top Right','avia_framework' ) =>'top right', __('Bottom Left','avia_framework' ) =>'bottom left', __('Bottom Center','avia_framework' ) =>'bottom center', __('Bottom Right','avia_framework' ) =>'bottom right', __('Center Left','avia_framework' ) =>'center left', __('Center Center','avia_framework' ) =>'center center', __('Center Right','avia_framework' ) =>'center right' ) ), /* array( "name" => __("Background Repeat",'avia_framework' ), "id" => "repeat", "type" => "select", "std" => "no-repeat", "required" => array('src','not',''), "subtype" => array( __('No Repeat','avia_framework' ) =>'no-repeat', __('Repeat','avia_framework' ) =>'repeat', __('Tile Horizontally','avia_framework' ) =>'repeat-x', __('Tile Vertically','avia_framework' ) =>'repeat-y', __('Stretch to fit (stretches image to cover the element)','avia_framework' ) =>'stretch', __('Scale to fit (scales image so the whole image is always visible)','avia_framework' ) =>'contain' ) ), */ array( "name" => __("Background Video", 'avia_framework' ), "desc" => __('You can also place a video as background for your section. Enter the URL to the Video. Currently supported are Youtube, Vimeo and direct linking of web-video files (mp4, webm, ogv)', 'avia_framework' ) .'<br/><br/>'. __('Working examples Youtube & Vimeo:', 'avia_framework' ).'<br/> <strong>http://vimeo.com/1084537</strong><br/> <strong>http://www.youtube.com/watch?v=5guMumPFBag</strong><br/><br/>', "id" => "video", "std" => "", "type" => "input"), array( "name" => __("Video Aspect Ratio", 'avia_framework' ), "desc" => __("In order to calculate the correct height and width for the video slide you need to enter a aspect ratio (width:height). usually: 16:9 or 4:3.", 'avia_framework' )."<br/>".__("If left empty 16:9 will be used", 'avia_framework' ) , "id" => "video_ratio", "required"=> array('video','not',''), "std" => "16:9", "type" => "input"), array( "name" => __("Hide video on Mobile Devices?", 'avia_framework' ), "desc" => __("You can chose to hide the video entirely on Mobile devices and instead display the Section Background image", 'avia_framework' )."<br/><small>".__("Most mobile devices can't autoplay videos to prevent bandwidth problems for the user", 'avia_framework' ) ."</small>" , "id" => "video_mobile_disabled", "required"=> array('video','not',''), "std" => "", "type" => "checkbox"), array( "type" => "close_div", 'nodescription' => true ), array( "type" => "tab", "name" => __("Section Background Overlay" , 'avia_framework'), 'nodescription' => true ), array( "name" => __("Enable Overlay?", 'avia_framework' ), "desc" => __("Check if you want to display a transparent color and/or pattern overlay above your section background image/video", 'avia_framework' ), "id" => "overlay_enable", "std" => "", "type" => "checkbox"), array( "name" => __("Overlay Opacity",'avia_framework' ), "desc" => __("Set the opacity of your overlay: 0.1 is barely visible, 1.0 is opaque ", 'avia_framework' ), "id" => "overlay_opacity", "type" => "select", "std" => "0.5", "required" => array('overlay_enable','not',''), "subtype" => array( __('0.1','avia_framework' )=>'0.1', __('0.2','avia_framework' )=>'0.2', __('0.3','avia_framework' )=>'0.3', __('0.4','avia_framework' )=>'0.4', __('0.5','avia_framework' )=>'0.5', __('0.6','avia_framework' )=>'0.6', __('0.7','avia_framework' )=>'0.7', __('0.8','avia_framework' )=>'0.8', __('0.9','avia_framework' )=>'0.9', __('1.0','avia_framework' )=>'1', ) ), array( "name" => __("Overlay Color", 'avia_framework' ), "desc" => __("Select a custom color for your overlay here. Leave empty if you want no color overlay", 'avia_framework' ), "id" => "overlay_color", "type" => "colorpicker", "required" => array('overlay_enable','not',''), "std" => "", ), array( "required" => array('overlay_enable','not',''), "id" => "overlay_pattern", "name" => __("Background Image", 'avia_framework'), "desc" => __("Select an existing or upload a new background image", 'avia_framework'), "type" => "select", "subtype" => array(__('No Background Image', 'avia_framework')=>'',__('Upload custom image', 'avia_framework')=>'custom'), "std" => "", "folder" => "images/background-images/", "folderlabel" => "", "group" => "Select predefined pattern", "exclude" => array('fullsize-', 'gradient') ), array( "name" => __("Custom Pattern",'avia_framework' ), "desc" => __("Upload your own seamless pattern",'avia_framework' ), "id" => "overlay_custom_pattern", "type" => "image", "fetch" => "url", "secondary_img"=>true, "required" => array('overlay_pattern','equals','custom'), "title" => __("Insert Pattern",'avia_framework' ), "button" => __("Insert",'avia_framework' ), "std" => ""), array( "type" => "close_div", 'nodescription' => true ), array( "type" => "close_div", 'nodescription' => true ), ); } /** * 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 = "") { global $avia_config; avia_sc_titeloben::$section_count ++; $atts = shortcode_atts(array( 'src' => '', 'position' => 'top left', 'repeat' => 'no-repeat', 'attach' => 'scroll', 'color' => 'main_color', 'custom_bg' => '', 'padding'=>'default' , 'shadow'=>'shadow', 'id'=>'', 'min_height' => '', 'min_height_px' => '', 'video' => '', 'video_ratio'=>'16:9', 'video_mobile_disabled'=>'', 'custom_markup' => '', 'attachment' => '', 'attachment_size' => '', 'bottom_border' => '', 'overlay_enable' => '', 'overlay_opacity' => '', 'overlay_color' => '', 'overlay_pattern' => '', 'overlay_custom_pattern' => '', 'scroll_down' => '' ), $atts, $this->config['shortcode']); extract($atts); $output = ""; $class = "avia-section ".$color." avia-section-".$padding." avia-".$shadow; $background = ""; $params['id'] = !empty($id) ? AviaHelper::save_string($id,'-') :"av_section_".avia_sc_titeloben::$section_count; $params['custom_markup'] = $meta['custom_markup']; $params['attach'] = ""; if(!empty($attachment) && !empty($attachment_size)) { $attachment_entry = get_post( $attachment ); if(!empty($attachment_entry)) { if(!empty($attachment_size)) { $src = wp_get_attachment_image_src($attachment_entry->ID, $attachment_size); $src = !empty($src[0]) ? $src[0] : ""; } } } else { $attachment = false; } if($custom_bg != "") { $background .= "background-color: {$custom_bg}; "; } /*set background image*/ if($src != "") { if($repeat == 'stretch') { $background .= "background-repeat: no-repeat; "; $class .= " avia-full-stretch"; } else if($repeat == "contain") { $background .= "background-repeat: no-repeat; "; $class .= " avia-full-contain"; } else { $background .= "background-repeat: {$repeat}; "; } $background .= "background-image: url({$src}); "; $background .= $attach == 'parallax' ? "background-attachment: scroll; " : "background-attachment: {$attach}; "; $background .= "background-position: {$position}; "; if($attach == 'parallax') { $attachment_class = ""; if($repeat == 'stretch' || $repeat == 'no-repeat' ){ $attachment_class .= " avia-full-stretch"; } if($repeat == 'contain' ){ $attachment_class .= " avia-full-contain"; } $class .= " av-parallax-section"; $speed = apply_filters('avf_parallax_speed', "0.3", $params['id']); $params['attach'] .= "<div class='av-parallax' data-avia-parallax-ratio='{$speed}' >"; $params['attach'] .= "<div class='av-parallax-inner {$color} {$attachment_class}' style = '{$background}' >"; $params['attach'] .= "</div>"; $params['attach'] .= "</div>"; $background = ""; } $params['data'] = "data-section-bg-repeat='{$repeat}'"; } else { $attach = "scroll"; } if($custom_bg != "") { $background .= "background-color: {$custom_bg}; "; } if($background) $background = "style = '{$background}'"; /*check/create overlay*/ $overlay = ""; $pre_wrap = "<div class='av-section-color-overlay-wrap'>" ; if(!empty($overlay_enable)) { $overlay_src = ""; $overlay = "opacity: {$overlay_opacity}; "; if(!empty($overlay_color)) $overlay .= "background-color: {$overlay_color}; "; if(!empty($overlay_pattern)) { if($overlay_pattern == "custom") { $overlay_src = $overlay_custom_pattern; } else { $overlay_src = str_replace('{{AVIA_BASE_URL}}', AVIA_BASE_URL, $overlay_pattern); } } if(!empty($overlay_src)) $overlay .= "background-image: url({$overlay_src}); background-repeat: repeat;"; $overlay = "<div class='av-section-color-overlay' style='{$overlay}'></div>"; $class .= " av-section-color-overlay-active"; $params['attach'] .= $pre_wrap . $overlay; } if(!empty($scroll_down)) { if(!$overlay) { $params['attach'] .= $pre_wrap; } $params['attach'] .= "<a href='#next-section' title='' class='scroll-down-link' ". av_icon_string( 'scrolldown' ). "></a>"; } $class .= " avia-bg-style-".$attach; $params['class'] = $class." ".$meta['el_class']; $params['bg'] = $background; $params['min_height'] = $min_height; $params['min_height_px'] = $min_height_px; $params['video'] = $video; $params['video_ratio'] = $video_ratio; $params['video_mobile_disabled'] = $video_mobile_disabled; if(isset($meta['index'])) { if($meta['index'] == 0) { $params['main_container'] = true; } if($meta['index'] == 0 || (isset($meta['siblings']['prev']['tag']) && in_array($meta['siblings']['prev']['tag'], AviaBuilder::$full_el_no_section ))) { $params['close'] = false; } } $avia_config['layout_container'] = "section"; $output .= avia_new_section($params); $output .= ShortcodeHelper::avia_remove_autop($content,true) ; /*set extra arrow element*/ if(strpos($bottom_border, 'border-extra') !== false) { $backgroundEl = ""; $backgroundElColor = !empty($custom_bg) ? $custom_bg : $avia_config['backend_colors']['color_set'][$color]['bg']; if($backgroundElColor) $backgroundEl = " style='background-color:{$backgroundElColor};' "; avia_sc_titeloben::$add_to_closing = "<div class='av-extra-border-element {$bottom_border}'><div class='av-extra-border-outer'><div class='av-extra-border-inner' {$backgroundEl}></div></div></div>"; } else { avia_sc_titeloben::$add_to_closing = ""; } //next section needs an extra closing tag if overlay with wrapper was added: if($overlay || !empty($scroll_down)) { avia_sc_titeloben::$close_overlay = "</div>"; } else { avia_sc_titeloben::$close_overlay = ""; } //if the next tag is a section dont create a new section from this shortcode if(!empty($meta['siblings']['next']['tag']) && in_array($meta['siblings']['next']['tag'], AviaBuilder::$full_el)) { $skipSecond = true; } //if there is no next element dont create a new section. if we got a sidebar always create a next section at the bottom if(empty($meta['siblings']['next']['tag']) && !avia_has_sidebar()) { $skipSecond = true; } if(empty($skipSecond)) { $new_params['id'] = "after_section_".( avia_sc_titeloben::$section_count ); $output .= avia_new_section($new_params); } unset($avia_config['layout_container']); return $output; } } } if(!function_exists('avia_new_section')) { function avia_new_section($params = array()) { global $avia_section_markup, $avia_config; $defaults = array( 'class'=>'main_color', 'bg'=>'', 'close'=>true, 'open'=>true, 'open_structure' => true, 'open_color_wrap' => true, 'data'=>'', "style"=>'', 'id' => "", 'main_container' => false, 'min_height' => '', 'min_height_px' => '', 'video' => '', 'video_ratio' => '16:9', 'video_mobile_disabled' => '', 'attach' => "", 'before_new' => "", 'custom_markup' => '' ); $defaults = array_merge($defaults, $params); extract($defaults); $post_class = ""; $output = ""; $bg_slider = ""; $container_style = ""; if($id) $id = "id='{$id}'"; //close old content structure. only necessary when previous element was a section. other fullwidth elements dont need this if($close) { $cm = avia_section_close_markup(); $output .= "</div></div>{$cm}</div>".avia_sc_titeloben::$add_to_closing.avia_sc_titeloben::$close_overlay."</div>"; } //start new if($open) { if(function_exists('avia_get_the_id')) $post_class = "post-entry-".avia_get_the_id(); if($open_color_wrap) { if(!empty($min_height)) { $class .= " av-minimum-height av-minimum-height-".$min_height; if($min_height == 'custom' && $min_height_px != "") { $min_height_px = (int)$min_height_px; $container_style = "style='height:{$min_height_px}px'"; } } if(!empty($video)) { $slide = array( 'shortcode' => 'av_slideshow', 'content' => '', 'attr' => array( 'id'=>'', 'video'=>$video , 'slide_type' => 'video', 'video_mute' => true, 'video_loop' => true, 'video_ratio' => $video_ratio, 'video_controls' => 'disabled', 'video_section_bg' => true, 'video_format'=> '', 'video_mobile' =>'', 'video_mobile_disabled'=> $video_mobile_disabled ) ); $bg_slider = new avia_slideshow( array('content' => array($slide) ) ); $bg_slider->set_extra_class('av-section-video-bg'); $class .= " av-section-with-video-bg"; $class .= !empty($video_mobile_disabled) ? " av-section-mobile-video-disabled" : ""; $data .= " data-section-video-ratio='{$video_ratio}'"; } $output .= $before_new; if($class == "main_color") $class .= " av_default_container_wrap"; $output .= "<div {$id} class='{$class} container_wrap ".avia_layout_class( 'main' , false )."' {$bg} {$data} {$style}>"; $output .= !empty($bg_slider) ? $bg_slider->html() : ""; $output .= $attach; $output .= apply_filters('avf_section_container_add','',$defaults); } //this applies only for sections. other fullwidth elements dont need the container for centering if($open_structure) { if(!empty($main_container)) { $markup = 'main '.avia_markup_helper(array('context' =>'content','echo'=>false, 'custom_markup'=>$custom_markup)); $avia_section_markup = 'main'; } else { $markup = "div"; } $output .= "<div class='container' {$container_style}>"; $output .= "<{$markup} class='template-page content ".avia_layout_class( 'content' , false )." units'>"; $output .= "<div class='post-entry post-entry-type-page {$post_class}'>"; $output .= "<div class='entry-content-wrapper clearfix'>"; } } return $output; } } if(!function_exists('avia_section_close_markup')) { function avia_section_close_markup() { global $avia_section_markup, $avia_config; if(!empty($avia_section_markup)) { $avia_section_markup = false; $close_markup = "</main><!-- close content main element -->"; } else { $close_markup = "</div><!-- close content main div -->"; } return $close_markup; } } if(!function_exists('avia_section_after_element_content')) { function avia_section_after_element_content($meta, $second_id = "", $skipSecond = false, $extra = "") { $output = "</div>"; //close section $output .= $extra; //if the next tag is a section dont create a new section from this shortcode if(!empty($meta['siblings']['next']['tag']) && in_array($meta['siblings']['next']['tag'], AviaBuilder::$full_el )){ $skipSecond = true; } //if there is no next element dont create a new section. if(empty($meta['siblings']['next']['tag'])) { $skipSecond = true; } if(empty($skipSecond)) { $output .= avia_new_section(array('close'=>false, 'id' => $second_id)); } return $output; } }Hi guys,
so it seems like that something part of the below css:
/*Scroll-Down-Icon – Start*/
@-webkit-keyframes ani-mouse {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
@-moz-keyframes ani-mouse {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
@keyframes ani-mouse {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
.scroll-btn {
display: block;
position: absolute;
left: 0;
right: 0;
top: 92%;
text-align: center;
}.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
color: #ffffff;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
opacity: 0.8;
filter: alpha(opacity=80);
}
.scroll-btn .mouse {
position: relative;
display: block;
width: 24px;
height: 34px;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid white;
border-radius: 23px;
}
.scroll-btn .mouse > * {
position: absolute;
display: block;
top: 29%;
left: 50%;
width: 4px;
height: 8px;
margin: -4px 0 0 -2px;
background: white;
border-radius: 50%;
-webkit-animation: ani-mouse 2.5s linear infinite;
-moz-animation: ani-mouse 2.5s linear infinite;
animation: ani-mouse 2.5s linear infinite;/*Scroll-Down-Icon – End*/
is causing an issue with the below css for the footer background colour:
/*Footer – Start*/
#footer .flex_column.av_one_third {
background: #f4f4f4 !important;
}#footer .flex_column.av_one_third:nth-child(2) {
background: #f9f9f9 !important;
}#footer .flex_column.av_one_third:nth-child(3) {
background: #f4f4f4 !important;
}/*Footer – End*/
as well as:
/*Portfolio – Start*/
#top .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title {
font-size: 35px;
}.av-inner-masonry-content:hover {
background-color: rgba(54, 212, 46,.6)!important;
}/*Portfolio – End*/
as well as:
/*Back to top link – Start*/
#scroll-top-link {
display: none!important;
}/*Back to top link – End*/
Can you think of a solution?
Thanks
There is a downward animated arrow on a slider located on the demo website http://kriesi.at/themes/enfold-shop/. I wanted to know what slider were you using on this demo site and where I can add the animated arrow that allows you to automatically scroll to the next section of the site. How do I apply it? I can’t find the option. Thank you.
In reply to: Header logo image not clickable
Hi Vinay
Thank you for your reply. With the css you provided, It looks perfect in small screen. I tried resizing the browser it looks greatbut it still looks like this in iphone. see this screenshot.
and also the text is not clickable, no links , no hover style.
This is all the css used in quick css to get this header widget right. May be it is a bit too much :) May be it needs a bit of clean up. Your help would be highly appreciated.
/* header widget for LARGE screen*/ #header .widget { font-size: 34px; line-height: 40px; position: absolute; right: 50px; top: 0; z-index: 100; height: 100%; margin: 0; padding: 0; text-align: right; } @media only screen and (min-width: 767px) { #header .widget{ max-width: 1210px; left: 0; right: 0; margin: 0 auto; } } #header.header-scrolled .widget{ font-size: 23px; line-height: 30px; } #header .widget .textwidget, #text-2{ display: table; width: 100%; height: 100%; float: right; z-index: -999 !important; } #header .widget .textwidget .custom-text{ display: table-cell; vertical-align: middle; } #header .custom-text .icon{ font-size: 42px; } #header.header-scrolled .custom-text .icon{ font-size: 32px; } #header .custom-text .icon span{ float: none; display: inline-block; margin-left: 0; margin-right: 9px; } #header .widget .custom-text p, #header .widget .custom-text a{ font-weight: bold; color: black; margin: 0; } /* header widget anchor text hover, it affects social icons too*/ #header .widget .custom-text a:hover{ color: green; } /* header widget for MEDIUM screen*/ @media screen and (max-width: 989px) and (min-width: 767px) { #header .widget { font-size: 26px; } #header .custom-text .icon{ font-size: 40px; } } /* header widget for SMALL screen*/ @media screen and (max-width: 767px){ #header .widget { font-size: 14px; line-height: 24px; right: 100px; padding: 0; } #header .custom-text .icon{ font-size: 26px; } .responsive .logo, .responsive .logo a { height: 200px !important; } .responsive .logo img{ height: 180px !important; } } /* .content { padding-top: 10px; padding-bottom: 10px; } */ .main_menu { left: 0px; right: auto; height: 0px; display: none; } .special_amp { font-family: inherit; font-style: normal; font-size: inherit; line-height: inherit; font-weight: bold; color: inherit!important; } /*footer image media query*/ @media screen and (max-width: 720px) { .textwidget img.avia_image { margin-right: 100px; } } #text-2 { right: 100px !important; margin-right: 0px !important; } /*reduce color box top padding*/ .content { padding-top: 10px; padding-bottom: 10px; } /* added */ #header .widget .textwidget, #text-2 { display: table; width: 35%; height: 100%; float: right; display: inline-flex; padding: 45px 0px 0px 0px; } #header.header-scrolled#header .widget .textwidget, #text-2 { display: table; width: 35%; height: 100%; float: right; display: inline-flex; padding: 10px 0px 0px 0px; margin-left: 100px; } @media screen and (max-width: 1900px) and (min-width: 989px) { #text-2 { right: 40px !important; margin-right: 0px !important; } } @media only screen and (max-width: 766px) and (min-width: 480px){ #text-2 { right: 100px !important; margin-right: 0px !important; } } @media screen and (max-width: 767px){ #header .widget { font-size: 14px; line-height: 24px; right: 130px; padding: 0; } #header .custom-text .icon{ font-size: 26px; } .responsive .logo img{ height: 140px !important; } } @media screen and (max-width: 480px) { .responsive .logo img { height: 90px !important; } .responsive #top #wrap_all .container { width: 99%!important; max-width: 99%!important;}}I’m trying to add a guarantee seal to the right of my menu options on my menu.
I’ve followed the instructions here:
The image is showing up, but it’s not automatically shrinking/ resizing like the rest of the header when someone scrolls. Is there a way to remedy this?
In reply to: Header Changes on A Single Page
Hi Ismael,
Yes, I am aware of that. That is not the problem. Please see my original message above. The logo resizes automatically, it was was just for test to see what it would look like.
However, we need to have a larger sized logo so that it would be more visible. It will obviously not be 1041x902px but it does need to be slightly larger than the other one 185x67px. And because of it’s square shape and the fact that it needs to be larger that the other one 185x67px it would not fit in the current space. Can you please help with the 3 issues I mentioned in my original message:”
Hi,I would like to have a different logo and link on a single page. I added this code in functions.php which seems to work:
add_filter(‘avf_logo’,’av_change_logo’);
function av_change_logo($logo)
{
if(is_page(72344)) {
$logo = “http://www.vuelio.com/uk/wp-content/uploads/2016/06/2016-Blog-Awards-Trophy-Design.png”;
}
return $logo;
}add_filter(‘avf_logo_link’,’av_change_logo_link’);
function av_change_logo_link($link)
{
if(is_page(72344)){
$link = “http://www.vuelio.com/uk/blog-awards/”;
}
return $link;
}However the logo on this specific page is larger than the logo on the rest of the site and square shaped so I would like to increase the height of the header containing the logo and the main menu (only on this page) while also keeping the main menu centered vertically within this new space.
This square shaped logo also doesn’t look good when scrolling down with the sticky header active. Is it possible to deactivate the sticky header on this page alone?
Finally, on the same one page, is it possible to deactivate the top bar containing the secondary menu?
I hope you will be able to help with the 3 issues above.
Thanks,
Flavius
“In reply to: Mega menu with a long list of sub-items
Hi,
Here you go this code will make the long menus scroll Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top #header ul:first-child >li > ul { overflow: auto!important; max-height: calc(100vh - 200px); } /*-----------------------------------------*/ /* Custom scrollbar */ /*-----------------------------------------*/ ::-webkit-scrollbar { width: 6px;} ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } #header .widget:hover::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 56px rgba(0,0,0,0.9)!important; } #header .widget:hover::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 56px rgba(0,0,0,0.85)!important; } #header .widget:hover ::-webkit-scrollbar-track { background-color: rgba(0,0,0,.085)!important; box-shadow: inset 1px 0 50px rgba(0,0,0,.61)!important; }Best regards,
VinayIn reply to: Mobile Full width submenu with overflow and scroll
Hi,
Again, what i’m trying to fix is to get the submenu to stick to the top of the screen when users scroll through the page.
Fixed or sticky elements are not fully supported on mobile devices and the script that enables this on desktop view is not going to work properly on touch devices. Unfortunately, we won’t be able to help you with this. Please hire a freelance developer or contact codeable: http://kriesi.at/contact
If you want to test it, edit the css > shortcodes.css file, look for this css code around line 4405 then remove it:
.responsive #top .av-submenu-container{top: auto !important; position: relative !important; height:auto; }This will enable the sticky submenu on mobile but there will be an issue with its position.
Best regards,
IsmaelIn reply to: Mobile Full width submenu with overflow and scroll
Hi,
The fullwidth submenu is not sticky on mobile phones.
That is the default behaviour of the full width submenu because “fixed” positioned elements are not handled consistently on mobile devices. If you want to make it scrollable, add this in the Quick CSS field:
@media only screen and (max-width: 767px) { #top .av-submenu-container ul { white-space: nowrap; overflow-x: auto; } }Remove this css code:
@media only screen and (max-width: 480px) @media only screen and (max-width: 580px) .av-submenu-container ul { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; position: fixed!important; }It’s a bit counter intuitive though because there is no indicator that it is scrollable. Please enable the button in the “Mobile Menu Display” settings.
Best regards,
IsmaelHello. Please see the previous communication here. I was advised to open another thread.
I tried the recommend CSS. The issue persists and is worse in terms of positioning. Please see this image for desirables. .
On scroll the header background should/does change to a solid, so I’m not sure why the theme would automatically change this styling, starting with mobile phone queries.
Thank you,
Ryanhi andy
ich logge mich in das backend ein
dann wähle ich seiten aus
dann die seite die ich bearbeiten will
dann bin ich in der bearbeitsungsmaske / advanced layout builder drin
dann ändere ich einen inhakt, text oder bid
hinterher scrolle ich hoch und speichere
der letzte inhalt, das bild mit mit den dankenden mitarbeitern ist nach dem speichern nichtmehr da
es werden die inhalte nur bis ca. zur hälfe angezeigtdie screenshots zeigen die einzelnen steps.
eine vermutung, kann es sein, dass dies mit dem automtishen speichern zu tun hat?bitte um hilfe. wir haben wirklich probleme mit der seite.
danke
In reply to: Main Menu – Drop down menu height
Thanks.
I have removed this code now:
.main_menu .menu ul {
height: 500px;
overflow: hidden;
overflow-y: auto;
}Now my “About” menu is fine but my languages menu can’t be scrolled.
Thanks
Hi,
I added the following custom CSS to my theme:
.main_menu .menu ul {
height: 500px;
overflow: hidden;
overflow-y: auto;
}I did this because my languages menu is long and without this added CSS it is not scrollable and users cannot select languages at the bottom of the list like Chinese & Thai.
However I don’t want my About menu to be 500px tall as it is currently because of this CSS.
Is there a way to make my Languages menu scrollable without also forcing all menus to be 500px tall?
Thanks
Is there a feature available in Enfold theme that will allow full screen images to appear one after the other as the user scrolls downward? See jetsmarter.com as an example please. Thank you!
In reply to: Tables on smartphon
hi rikard,
this is not possible because it is huge work and not possible for me… any automatically change to make tables scrollable on smartphones?
kr dirk
In reply to: Mobile Full width submenu with overflow and scroll
Hi Vinay,
thank you, but it doesn’t seem to work.
could it be conflicting with my other css for sub menu?
here’s all the css currently active on my site@media only screen and (max-width: 580px) { .av-submenu-container ul { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }} ::-webkit-scrollbar { display: none; } @media only screen and (max-width: 767px) { .responsive #top #wrap_all #header { position: fixed!important; }}Hello,
I am wanting to have a several paragraphs show on the page but only when you scroll down to that part/section of the page, any section above this would always be shown.
I was initially thinking of using the accordion but do not know if it can automatically open on scroll to.
Can you suggest another method?
Thanks.
In reply to: Ajax Floating Contact Form
I finally came up with the following pieces of codes and put in in code block. it worked perfectly except for the mobile version:
1) The contact form distance from the top of the page is set for desktop and don’t know how to adjust it in mobile version so whole contact form can be seen in mobile version
2) the contact form goes behind texts and pictures.
Can you solve those issues for me?
Thanks.
Code Block #1
<!-- include Google hosted jQuery Library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var _scroll = true, _timer = false, _floatbox = $("#contact_form"), _floatbox_opener = $(".contact-opener") ; _floatbox.css("right", "-300px"); //initial contact form position //Contact form Opener button _floatbox_opener.click(function(){ if (_floatbox.hasClass('visiable')){ _floatbox.animate({"right":"-300px"}, {duration: 300}).removeClass('visiable'); }else{ _floatbox.animate({"right":"0px"}, {duration: 300}).addClass('visiable'); } }); //Effect on Scroll $(window).scroll(function(){ if(_scroll){ _floatbox.animate({"top": "130px"},{duration: 300}); _scroll = false; } if(_timer !== false){ clearTimeout(_timer); } _timer = setTimeout(function(){_scroll = true; _floatbox.animate({"top": "110px"},{easing: "linear"}, {duration: 500});}, 400); }); //reset previously set border colors and hide all message on .keyup() $("#contact_form input[required=true], #contact_form textarea[required=true]").keyup(function() { $(this).css('border-color',''); $("#result").slideUp(); }); }); </script>Code Block #2
<!-- contact form start --> <div class="floating-form" id="contact_form"> <div class="contact-opener">Open Contact Form</div> <div class="floating-form-heading">Request Information</div> <div id="contact_results"></div> <div id="contact_body"> [av_contact email=' (Email address hidden if logged out) ' title='' button='Submit' on_send='' sent='Your message has been sent!' link='manually,http://' subject='' autorespond='' captcha='active' hide_labels='aviaTBhide_labels' form_align='' color=''] [av_contact_field label='Name' type='text' options='' multi_select='' check='is_empty' width=''][/av_contact_field] [av_contact_field label='Last Name' type='text' options='' check='is_empty' width=''][/av_contact_field] [av_contact_field label='E-Mail' type='text' options='' multi_select='' check='is_email' width=''][/av_contact_field] [av_contact_field label='phone' type='text' options='' check='is_phone' width=''][/av_contact_field] [av_contact_field label='Your Available Cash Is:' type='select' options=', $200.000-$500.000, $500.000-1.000.000,' check='is_empty' width=''][/av_contact_field] [av_contact_field label='Your Approx. Networth is:' type='select' options=',$00000,0000' check='is_empty' width=''][/av_contact_field] [av_contact_field label='What is your timeline to invest?' type='select' options=',60 days, 90 days, 120 days, over 120 days' check='' width=''][/av_contact_field] [/av_contact] </div> </div> <!-- contact form end -->Code Block #3
/* floating box style */ .floating-form { max-width: 300px; padding: 30px 30px 10px 30px; font: 13px Roboto; background: #F9F9F9; border: 1px solid #ddd; right: 10px; z-index: 1000; position: fixed; box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06); -moz-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06); -webkit-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06); } .contact-opener { position: absolute; left: -88px; transform: rotate(-90deg); top: 80px; z-index: 1000; background-color: #a01818; padding: 9px; color: #ffffff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.43); cursor: pointer; border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06); -moz-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06); -webkit-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06); }.floating-form-heading{
font-weight: bold;
color: Black;
font-family: Roboto;
border-bottom: 2px solid #ddd;
margin-bottom: 10px;
font-size: 22px;
padding-bottom: 3px;
}Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 1600px) { .responsive .avia_scrollable_table { width: 100%; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }}Best regards,
VinayHello,
First of all thanks for your endurance.
It is not about one specific element, it is about scrolling down in general.
When scrolling down I want to make sure that the top of for example the color-section about us is at least once shown at the top of my screen.
Let’s make an example, imagine:
The absolute top of my page is height 1000px. The absolute bottom (bottom of footer) is height 0px. On my Screen I can show 100px. When now a color section begins at height 500px and ends at height 400px and the screen shows from height 395 to 495, there is 5px of another Color-Section shown. This is what annoys me, so I would like that view then to be Auto-corrected to show from height 500px to 400px, so that the whole color section is shown, without any other color-section.Do you understand now?
Thank You!
GerkeThe problem is not about the height. The Problem is about the Scrolling. When Scrolling down the page, I would like to make sure, that the top of some color sections always is at top of the window when scrolling down.
So this: https://www.dropbox.com/s/wa06lu4dn06dbla/scrolling_problem.PNG?dl=0
should automatically be corrected to this: https://www.dropbox.com/s/r8mdq6usolzje1f/How_it_should_be.PNG?dl=0So again, yes the color sections do have the correct height, but I would like to make sure that when scrolling down the page the top of a (specific) color section always at least once is at top of the window, so that the whole color Section is at least once shown in fullscreen.
Do you understand what I mean?
Thank you for help,
GerkeIn reply to: full screen slider with transparent menu
Hi mind,
The easiest way to find out how that page was layed out would be to import the whole page by shortcode, you can do so by activating debug mode: http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/. Then add the following shortcode to the shortcode field in a new page:
[av_fullscreen size='extra_large' animation='fade' autoplay='true' interval='7' scroll_down='aviaTBscroll_down'] [av_fullscreen_slide slide_type='image' id='2553' attachment=',' position='top left' video='http://' mobile_image='' video_cover='' title='This is a page with transparent header' caption_pos='caption_left caption_left_framed caption_framed' link_apply='button' link='lightbox' link_target='' button_label='Show me' button_color='light' link1='#next-section' link_target1='' button_label2='Click me' button_color2='light' link2='http://' link_target2='' video_controls='' video_mute='' video_loop='' video_autoplay=''] Once the user scrolls down the header color will change [/av_fullscreen_slide] [av_fullscreen_slide slide_type='image' id='2552' attachment=',' position='top left' video='http://' mobile_image='' video_cover='' title='Another caption' caption_pos='caption_right caption_right_framed caption_framed' link_apply='button button-two' link='lightbox' link_target='' button_label='Show me' button_color='light' link1='#next-section' link_target1='' button_label2='Learn more' button_color2='light' link2='#next-section' link_target2='' video_controls='' video_mute='' video_loop='' video_autoplay=''] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque pe. [/av_fullscreen_slide] [/av_fullscreen] [av_one_fourth first] [av_icon_box icon='59' position='left' title='Free Support'] Aenean commodo ligula eget dolor. Lorem <strong>ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque<strong> </strong>Aenean massa. [/av_icon_box] [/av_one_fourth] [av_one_fourth] [av_icon_box icon='2' position='left' title='Mobile Ready'] Cum sociis <strong>natoque</strong>. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [/av_icon_box] [/av_one_fourth] [av_one_fourth] [av_icon_box icon='125' position='left' title='Updates'] Cum sociis natoque <strong>sadfsadfas </strong>Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [/av_icon_box] [/av_one_fourth] [av_one_fourth] [av_icon_box icon='36' position='left' title='SEO Optimized'] Aenean commodo ligula eget dolor. <strong>Aenean massa</strong>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [/av_icon_box] [/av_one_fourth] [av_section color='main_color' custom_bg='' src='http://kriesi.at/themes/enfold/files/2013/10/woman-flinging-long-hair-1500x1000.jpg' attachment='2576' attach='parallax' position='top left' repeat='no-repeat' video='' video_ratio='16:9' min_height='75' padding='default' shadow='no-shadow' id=''] [av_one_third first] [av_icon_box icon='ue806' font='entypo-fontello' position='top' title='Mobile Ready' link='' linktarget='' linkelement=''] Cum sociis <strong>natoque</strong>. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [/av_icon_box] [/av_one_third][av_one_third] [av_icon_box icon='ue836' font='entypo-fontello' position='top' title='SEO Optimized' link='' linktarget='' linkelement=''] Aenean commodo ligula egconsectetueret dolor sit amlor. <strong>Aenean massa</strong>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [/av_icon_box] [/av_one_third][av_one_third] [av_icon_box icon='ue842' font='entypo-fontello' position='top' title='Free Support' link='' linktarget='' linkelement=''] Aenean commodo ligula eget dolor. Lorem <strong>ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque<strong> </strong>Aenean massa. [/av_icon_box] [/av_one_third] [/av_section] [av_section color='main_color' custom_bg='' src='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' video_mobile_disabled='' min_height='' padding='default' shadow='no-shadow' id=''] [av_one_fourth first] [av_textblock] <h6>Recent News</h6> <em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</em> <a href="#">View more</a> [/av_textblock] [/av_one_fourth][av_three_fourth] [av_postslider link='category,3' columns='3' items='3' contents='title' autoplay='no' interval='5'] [/av_three_fourth][av_hr class='default' height='50' position='center'] [av_one_fourth first] [av_textblock] <h6>Recent Work</h6> <em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</em> <a href="#">View more</a> [/av_textblock] [/av_one_fourth][av_three_fourth] [av_postslider link='portfolio_entries' columns='3' items='3' contents='title' autoplay='no' interval='5'] [/av_three_fourth] [/av_section] [av_section color='socket_color' custom_bg='' src='http://kriesi.at/themes/enfold/files/2013/10/photodune-3581207-black-in-black-m-1500x1182.jpg' attachment='2572' attach='parallax' position='top left' repeat='stretch' video='' video_ratio='16:9' min_height='75' padding='large' shadow='no-shadow' id='portfolio'] [av_heading heading='A beautiful <strong>experience!</strong>' tag='h1' color='custom-color-heading' custom_font='#ffffff' style='blockquote modern-quote modern-centered' size='50' subheading_active='subheading_below' subheading_size='18' padding='60'] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. [/av_heading] [av_one_fifth first] [av_font_icon icon='ue826' font='entypo-fontello' style='border' caption='Eye Candy' link='manually,http://kriesi.at' linktarget='' color='#ffffff' size='40px' position='center'] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [/av_font_icon] [/av_one_fifth][av_one_fifth] [av_font_icon icon='ue856' font='entypo-fontello' style='border' caption='Tools' link='manually,themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=kriesi' linktarget='' color='#ffffff' size='40px' position='center'] We have added exactly the tools you need and left out everything you don't need. Finally a multi purpose Theme that is not bloated! [/av_font_icon] [/av_one_fifth][av_one_fifth] [av_font_icon icon='ue8a5' font='entypo-fontello' style='border' caption='A list' link='post,94' linktarget='' color='#ffffff' size='40px' position='center'] <ol> <li>Super nice Parallax</li> <li>Optimized for Speed</li> <li>Brilliant Template Builder</li> <li>Easy to use</li> <li>Set up in 2 minutes</li> </ol> [/av_font_icon] [/av_one_fifth][av_one_fifth] [av_font_icon icon='ue8a8' font='entypo-fontello' style='border' caption='Updates' link='manually,themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=kriesi' linktarget='' color='#ffffff' size='40px' position='center'] Enfold is an award winning theme that is quickly becoming one of themeforest top sellers. And for a reason! Try it yourself! [/av_font_icon] [/av_one_fifth][av_one_fifth] [av_font_icon icon='ue8dd' font='entypo-fontello' style='border' caption='Rocket Science?' link='manually,themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=kriesi' linktarget='' color='#ffffff' size='40px' position='center'] Far from! Probably the easiest Multipurpose theme you have ever used! [/av_font_icon] [/av_one_fifth] [/av_section]Best regards,
RikardIn reply to: widget latest portfolio shown as a horizontal list
Ok, I found the solution. In order to scroll down the various element of the full-width submenu in a responsive mode I added this CSS
@media only screen and (max-width: 767px) {
.responsive #top .av-menu-mobile-active .av-open-submenu.av-subnav-menu {
display: block;
position:relative;
height: auto;
max-height: 200px;
overflow-x: hidden;
}
}In this way you can se part of the submenu and still part of the page beneath it. Then I worked a little bit on the color change of the text when on hover and it works finely.
Maybe this could be helpful for others! You can check the topic as closed
ThanksYes, it is, but if you scroll down only a few milimeters it is not anymore and the next 100% color section automatically will not be 100%, too. Then there will always be some little of the color before/after at top/bottom of the screen visible.
Like here: https://www.dropbox.com/s/wa06lu4dn06dbla/scrolling_problem.PNG?dl=0
So my question is: is there a way to automatically correct that? So that when scrolling down the page a 100% color section is at least one time perfectly fits the screen?Thank you!
GerkeIn reply to: How can I achieve this?
Hi!
The header looks good when is scroll please elaborate the issue if you have any. Kindly request you to open new tickets for new issues.
To make the text fit in icon list please use the below css it will make the box scroll if there is more text. Reducing the text size will make it hard to read :)
.iconlist_title { max-height: 70px; overflow: auto; }Best regards,
VinayIn reply to: Mobile Full width submenu with overflow and scroll
Hey!
No, to apply to them all, please change the code to following one
@media only screen and (max-width: 580px) { .av-submenu-container ul { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }}Cheers!
YigitIn reply to: Mobile Full width submenu with overflow and scroll
Hi!
It does do it on my end. Please add media queries to apply changes only on mobile
@media only screen and (max-width: 580px) { ul#menu-plu { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }}Best regards,
YigitIn reply to: Mobile Full width submenu with overflow and scroll
thank you, although that didn’t quite work, but i tweaked it and now it works.
ul#menu-plu { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }Now, i’d like all my full-width submenu to do this, how do i go about this?
In reply to: switch left column layout to mobile view sooner
Hey!
Try adding this code to the Quick CSS:
@media only screen and (max-width: 989px) { .responsive .boxed #wrap_all { overflow: hidden; /*needed for mobile menu scrolling */ } .responsive #top { overflow-x: hidden; } .responsive .boxed#top, .responsive #top.boxed .stretch_full , .responsive.html_boxed.html_header_sticky #header, .responsive.html_boxed.html_header_transparency div #header{ width: 100%; max-width: 100%; } .responsive #top .flex_column_table_cell{display: block;} .responsive #top .flex_column_table{display:block;} .responsive #top #wrap_all .container { width: 85%; max-width: 85%; margin: 0 auto; padding-left:0; padding-right:0; float:none; } .responsive .units, .responsive .unit { margin: 0; } .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin { margin: 0; margin-bottom: 20px; width: 100%; } .responsive #top #wrap_all .av-flex-cells .no_margin{ display: block; margin: 0; height:auto !important; overflow: hidden; padding-left:8% !important; padding-right:8% !important; } .responsive #top #wrap_all .av-flex-cells .no_margin .flex_cell_inner{ width: 100%; max-width: 100%; margin: 0 auto; } .responsive #top #wrap_all .av-flex-cells .no_margin.av-zero-padding{ padding-left:0% !important; padding-right:0% !important; } .responsive #top #wrap_all .flex_column:empty{margin:0;} }Cheers!
Josue
