Hey idespiran!

Thank you for using Enfold.

Do you want to replace the product image with a video? Are you going to do this for all products? It’s possible but you need to add a custom field. Edit the product then go to the Screen Options. Enable the custom field, add a new field called “product_video” then add the youtube url as value. If possible, use this kind of youtube url format: http://www.youtube.com/watch?v=G0k3kHtyoqc

Add this in the functions.php file:

add_filter('woocommerce_single_product_image_html','avia_woocommerce_post_thumbnail_description', 10, 2);
function avia_woocommerce_post_thumbnail_description($img, $post_id)
{
	global $post, $woocommerce, $product;
	
	$image_title = esc_attr(get_post_field('post_content', get_post_thumbnail_id()));
	$image_link  = wp_get_attachment_url( get_post_thumbnail_id() );
	$image  = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
		'title' => $image_title
		) );
	$attachment_count = count( $product->get_gallery_attachment_ids() );

	if ( $attachment_count > 0 ) {
		$gallery = '[product-gallery]';
	} else {
		$gallery = '';
	}
	
	$video = get_post_meta( $post->ID, 'product_video', true );
	$echo = do_shortcode("[av_video src='{$video}' format='16-9' width='16' height='9' custom_class='']");

	
	if(has_post_thumbnail() && get_post_meta( $post->ID, 'product_video', true )) 
	{
		return sprintf( $echo . '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s"  rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_title, $image);
	} 
	elseif(has_post_thumbnail() && empty($video))
	{
		return sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s"  rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_title, $image);
	} 
	else 
	{
		return $img;	
	}
}

In order to make the video bigger, add this in the Quick CSS field:

.single-product-main-image {
  width: 50%;
}

For further modifications, please contact codeable: http://kriesi.at/contact/customization

Cheers!
Ismael

Hey!

You can try this:

add_action('ava_after_main_container', 'add_banner_before_breadcrumb'); 
function add_banner_before_breadcrumb() {
	if ( is_product() )
	{
		echo '<div id="av_product_description" class="avia-section main_color avia-section-default avia-no-shadow avia-full-stretch av-parallax-section avia-bg-style-parallax av-minimum-height av-minimum-height-75 container_wrap fullsize" style="color:#ffffff;" data-section-bg-repeat="stretch">
			  <div class="av-parallax avia-full-stretch"></div>
		</div>';
	}
}

add_action('wp_footer', 'ava_custom_script_parallax');
function ava_custom_script_parallax(){
?>
<script>
(function($){
  	$('#av_product_description .av-parallax').css('background-image', 'url(' + 'http://sst.seite-freigeben.de/wp-content/uploads/stripe_Poducts11.jpg' + ')');
	$('#av_product_description').css('height', '500px');
})(jQuery);
</script>
<?php
}

Set the height of the #av_product_description manually.

Regards,
Ismael

Hi BijendraMohan!

Please add following code to Quick CSS in Enfold theme options under General Styling tab

.page-id-8246 .entry-content p img {
  position: relative;
  top: 20px;
}

that would be only applied on this page. If you would like a global solution, please firstly turn on custom CSS class field on ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then give your text block elements that you will need to center images a custom CSS class and use the code as following

.avia_textblock.your-custom-class p img { position: relative; top: 20px; }

Regards,
Yigit

Hi!

Turn on the custom css class. Refer to this link: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Add custom css class attribute to the image with the caption. Use “custom-image” for example. Add a bottom margin to it:

.custom-image img.avia_image {
  position: relative;
  margin-bottom: 70px;
}

Regards,
Ismael

Hi!

This will require custom modification directly on the core theme files. Edit shortcode.js. Look for this code on line 2287:

var gallery = $(this), images = gallery.find('img'), big_prev = gallery.find('.avia-gallery-big');

Replace it with:

var gallery = $(this), images = gallery.find('img'), big_prev = gallery.find('.avia-gallery-big'), imglink = gallery.find('.avia-gallery-thumb a');

Change this line:

//trigger displaying of thumbnails
		gallery.on('avia_start_animation', function()
		{			
			images.each(function(i)
			{
				var image = $(this);
				setTimeout(function(){ image.addClass('avia_start_animation') }, (i * 110));
			});
		});

With this:

//trigger displaying of thumbnails
		gallery.on('avia_start_animation', function()
		{
			imglink.each(function(i)
			{
				imglink.removeAttr('href');
			});
			
			images.each(function(i)
			{
				var image = $(this);
				setTimeout(function(){ image.addClass('avia_start_animation') }, (i * 110));
			});
		});

Again, look for this line:

gallery.on('mouseenter','.avia-gallery-thumb a', function()

Replace it with:

gallery.on('click','.avia-gallery-thumb a', function()

Edit avia.js, look for this code:

exclude			:	'.noLightbox, .noLightbox a, .fakeLightbox, .lightbox-added',

Replace it with:

exclude			:	'.noLightbox, .noLightbox a, .lightbox-added, .avia-gallery-thumb a',

Last, add this to the Quick CSS field:

#top .avia-gallery .avia-gallery-thumb a {
	cursor: pointer;
}

Best regards,
Ismael

Hey!

The css code above will only show 10% of the images. Try this:

@media only screen and (max-width: 768px) {
#full_slider_1 .avia-slideshow-inner, #full_slider_1 img {
  height: 315px !important;
  width: 150% !important;
  left: -50%;
}}

@media only screen and (max-width: 480px) {
#full_slider_1 .avia-slideshow-inner, #full_slider_1 img {
  height: 250px !important;
}}

It will not show exactly like the desktop view but you will get most part of the images. You should turn on the custom css class if you’re trying to modify a specific element such as the slider: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Regards,
Ismael

Hey!

That is possible but it will require a custom modification. Edit config-templatebuilder > avia-shortcodes > masonry_entries.php. Look for this code:

$items .=		"<figure class='av-inner-masonry main_color'>";
				$items .= 			$bg;
				
				//title and excerpt
				if($this->atts['caption_elements'] != 'none' || !empty($text_add))
				{
					$items .=	"<figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='avia-arrow'></div>".$text_before;
					
					if(strpos($this->atts['caption_elements'], 'title') !== false){
                        $markup = avia_markup_helper(array('context' => 'entry_title','echo'=>false, 'id'=>$entry['ID'], 'custom_markup'=>$this->atts['custom_markup']));
						$items .=	"<h3 class='av-masonry-entry-title entry-title' {$markup}>{$the_title}</h3>";
					}

					if(strpos($this->atts['caption_elements'], 'excerpt') !== false && !empty($content)){
                        $markup = avia_markup_helper(array('context' => 'entry_content','echo'=>false, 'id'=>$entry['ID'], 'custom_markup'=>$this->atts['custom_markup']));
						$items .=	"<div class='av-masonry-entry-content entry-content' {$markup}>{$content}</div>";
					}
					$items .=	$text_after."</div></figcaption>";
				}
				$items .= 		"</figure>";

Replace it with:

$items .=		"<figure class='av-inner-masonry main_color'>";
				$items .= 			$bg;
				
				
				$items .= 		"</figure>";
				//title and excerpt
				if($this->atts['caption_elements'] != 'none' || !empty($text_add))
				{
					$items .=	"<figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='avia-arrow'></div>".$text_before;
					
					if(strpos($this->atts['caption_elements'], 'title') !== false){
                        $markup = avia_markup_helper(array('context' => 'entry_title','echo'=>false, 'id'=>$entry['ID'], 'custom_markup'=>$this->atts['custom_markup']));
						$items .=	"<h3 class='av-masonry-entry-title entry-title' {$markup}>{$the_title}</h3>";
					}

					if(strpos($this->atts['caption_elements'], 'excerpt') !== false && !empty($content)){
                        $markup = avia_markup_helper(array('context' => 'entry_content','echo'=>false, 'id'=>$entry['ID'], 'custom_markup'=>$this->atts['custom_markup']));
						$items .=	"<div class='av-masonry-entry-content entry-content' {$markup}>{$content}</div>";
					}
					$items .=	$text_after."</div></figcaption>";
				}

Add this to the Quick CSS field:

.av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
position: relative;
}

Masonry items may not align correctly when excerpt is activated.

Best regards,
Ismael

Hey janetgot!

Thank you for using Enfold.

1.) Use this to fix the header:

.html_header_top.html_header_sticky #header {
position: fixed;
z-index: 10000;
}

2.) You have this code on the style.css file which affects the image on the 3rd column:

.avia-builder-el-14, .avia-builder-el-15, .avia-builder-el-17, .avia-builder-el-18 {
width: 200px;
font-size: 110%;
}

If you want to modify specific elements on the theme, enable the custom css class on the advance layout builder: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Best regards,
Ismael

Hey!

Please go to Appearance > Editor and open helper-main-menu.php file and find

echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', $addition, 'strong', true);
and add your text right below it as following
echo "<div class='header-custom-text'><a href='http://kriesi.at' target='_blank'><img src='http://kriesi.at/wp-content/themes/kriesi/images/logo.png' /></a></div>";
Then you can adjust its position using custom CSS in Quick CSS field

.header-custom-text { position: relative; right: 0; top: 10px;  }

Regards,
Yigit