WordPress.org

Ready to get started?Download WordPress

Forums

Remove content bkg overlay from a single template only (10 posts)

  1. spookify
    Member
    Posted 1 year ago #

    Hi, the theme i am using has 6 templates for various page layout options. One of witch is a fullscreen slider layout. My problem is i am trying to use the wp-supersized plugin in this template, but the content background is overlayed over the fullscreen image despite their being no content.

    How can i remove the main content block from just that template only?

    In the theme options i have an option to set the background color, image or opacity of the content that displays on the pages. I have the settings to display the content background white at 80% opacity.

    http://possarchitecture.com/

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    I'm sorry but as you are using a commercial theme, you need to seek support from the theme's developer/vendor. We do not support commercial themes here.
    http://www.be-themes.com/beat

  3. spookify
    Member
    Posted 1 year ago #

    Oh this is the template .php file if it helps...

    <?php
    /*
     *
    Template Name: Full Screen Slider
     *
    */
    ?>
    <?php get_header(); ?> <!-- Header -->
    <?php while(have_posts()): the_post(); ?>
    	<div role="main" class="full-width-container container full-screen-slider" id="main" data-animation="fade"> <!-- Start Main -->
    		<?php $args = array(
    			'post_type' => 'attachment',
    			'numberposts' => null,
    			'post_status' => null,
    			'post_parent' => get_the_ID()
    		);
    		$attachments = get_posts($args);
    		?>
    		<div id="tf_loading" class="loading"></div>
    		<div id="tf_bg" class="tf_bg">
    			<?php
    			if ($attachments) {
    				foreach ($attachments as $attachment) {
    					$image_attributes = wp_get_attachment_image_src( $attachment->ID,'full');
    					if($attachment->post_excerpt)
    						echo '<a href="'.$attachment->post_excerpt.'"><img src="'.$image_attributes[0].'" alt="Image 1" /></a>';
    					else {
    						echo '<img src="'.$image_attributes[0].'" alt="Image 1" />';
    					}
    				}
    			}
    			?>
    		</div>
    		<div class="fullscreen_slider_thumbnail">
    			<?php
    				if ($attachments) {
    					$i = 0;
    					foreach ($attachments as $attachment) {
    						if($i == 0 )
    							echo "<a href='#' data-index='".$i."' class='show_index current_index'></a>";
    						else
    							echo "<a href='#' data-index='".$i."' class='show_index'></a>";
    						$i= $i+1;
    					}
    				}
    			?>
    		</div>
    		<div id="tf_content_wrapper" class="tf_content_wrapper">
    			<?php
    			if ($attachments) {
    				foreach ($attachments as $attachment) {
    					echo '<div class="tf_content" id="content1 page-title" style="display:block;">';
    		 			if($attachment->post_title !='' && !(is_numeric($attachment->post_title))){
    						echo '<h2 class="alt_bg_color">'. $attachment->post_title.'</h2>';
    					}
    					if($attachment->post_content !=''){
    						echo '<p>'.$attachment->post_content.'</p>';
    					}
    					echo '</div>';
    				}
    			}?>
    		</div>
    		<div id="tf_next" class="tf_next alt_bg_color">e</div>
    		<div id="tf_prev" class="tf_prev alt_bg_color">j</div>
    	<?php endwhile; ?>
    	<?php  ?>
    	</div> <!--  End  Main -->
           <script type="text/javascript">
    			/*
    			the images preload plugin
    			*/
    			(function($) {
    				$.fn.preload = function(options) {
    					var opts 	= $.extend({}, $.fn.preload.defaults, options);
    					o			= $.meta ? $.extend({}, opts, this.data()) : opts;
    					var c		= this.length,
    						l		= 0;
    					return this.each(function() {
    						var $i	= jQuery(this);
    						jQuery('<img/>').load(function(i){
    							++l;
    							if(l == c) o.onComplete();
    						}).attr('src',$i.attr('src'));
    					});
    				};
    				$.fn.preload.defaults = {
    					onComplete	: function(){return false;}
    				};
    			})(jQuery);
    		</script>
    		<script type="text/javascript">
    			jQuery(function() {
    				var $tf_bg				= jQuery('#tf_bg'),
    					$tf_bg_images		= $tf_bg.find('img'),
    					$tf_bg_img			= $tf_bg_images.eq(0),
    					total				= $tf_bg_images.length,
    					current				= 0,
    					$tf_content_wrapper	= jQuery('#tf_content_wrapper'),
    					$tf_next			= jQuery('#tf_next'),
    					$tf_prev			= jQuery('#tf_prev'),
    					$tf_loading			= jQuery('#tf_loading');
    					var show_index_number;
    					var animate_type   = jQuery('.container').attr('data-animation');
    
    				//preload the images
    				$tf_bg_images.preload({
    					onComplete	: function(){
    						$tf_loading.hide();
    						init();
    					}
    				});
    
    				//shows the first image and initializes events
    				function init(){
    					//get dimentions for the image, based on the windows size
    					var dim	= getImageDim($tf_bg_img);
    					//set the returned values and show the image
    					$tf_content_wrapper_padding = parseInt($tf_bg_img.css('height'))-20;
    					$tf_content_wrapper.find('div:not(:first-child)').css('display','none');
    					if(jQuery(window).width() < 767){ $tf_content_wrapper.css('padding-top',$tf_content_wrapper_padding+'px'); }
    					$tf_bg_img.css({
    						width	: dim.width,
    						height	: dim.height,
    						left	: dim.left,
    						//top		: dim.top
    					}).fadeIn();
    					$tf_content_wrapper.fadeIn();
    
    					//resizing the window resizes the $tf_bg_img
    					jQuery(window).bind('resize',function(){
    							if(jQuery(window).width() > 767){
    								var dim	= getImageDim($tf_bg_img);
    								$tf_bg_img.css({
    									width	: dim.width,
    									height	: dim.height,
    									left	: dim.left,
    									//top		: dim.top
    								});
    							}
    							else{
    								jQuery('.full-width-container').css('padding-top','0');
    								resize($tf_bg_img);
    								$tf_content_wrapper.css('padding-top',(parseInt($tf_bg_img.css('height'))-20));
    
    							}
    					});
    					jQuery(window).load(
    						function(){
    							if(jQuery(window).width() < 767){
    
    								$tf_bg_images.each(function(){
    									resize($tf_bg_img);
    								});
    
    							}
    							if(jQuery(window).width() > 767){
    								if($tf_bg_img.is(':animated'))
    							return false;
    								var dim	= getImageDim($tf_bg_img);
    								$tf_bg_img.animate({
    									width	: dim.width,
    									height	: dim.height,
    									//top		: dim.top,
    									left	: dim.left
    								},350);
    
    							}
    
    					}); 
    
    					//click the arrow down, scrolls down
    					$tf_next.live('click', function(){
    						if($tf_bg_img.is(':animated'))
    							return false;
    						if(animate_type == "fade")
    							fade_scroll('tb');
    						else
    							slide_scroll('tb');
    					});
    					//click the arrow up, scrolls up
    					$tf_prev.live('click', function(){
    						if($tf_bg_img.is(':animated'))
    							return false;
    						if(animate_type == "fade")
    							fade_scroll('bt');
    						else
    							slide_scroll('bt');
    					});
    
    					jQuery('.show_index').click(function(e){
    						e.preventDefault();
    						if(jQuery(this).hasClass('current_index'))
    							return false;
    						show_index_number = parseInt(jQuery(this).attr('data-index'));
    						if(animate_type == "fade")
    							fade_scroll('index');
    						else
    							slide_scroll('index');
    					});
    					jQuery(document).keydown(function(e){
    						if($tf_bg_img.is(':animated'))
    							return false;
    
    						switch(e.keyCode){
    							case 37:
    								if(animate_type == "fade")
    									fade_scroll('bt');
    								else
    									slide_scroll('bt');
    								break;	
    
    							case 39:
    								if(animate_type == "fade")
    									fade_scroll('tb');
    								else
    									slide_scroll('tb');
    								break;
    						}
    					});
    
    					setInterval(function() {
    						fade_scroll('bt');
    					}, 5000);
    				}
    				function update_thumbnail(current) {
    					jQuery('.fullscreen_slider_thumbnail').find('a').removeClass('current_index');
    					jQuery('.fullscreen_slider_thumbnail').find('a').eq(current).addClass('current_index');
    				}
    
    				function fade_scroll(dir){
    					//if dir is "tb" (top -> bottom) increment current,
    					//else if "bt" decrement it
    					var before_current = current;
    					current	= (dir == 'tb')?current + 1:current - 1;
    					if(dir == 'index') {
    						current = show_index_number;
    					}
    					//we want a circular slideshow,
    					//so we need to check the limits of current
    					if(current == total) current = 0;
    					else if(current < 0) current = total - 1;
    					update_thumbnail(current);
    					//we get the next image
    					var $tf_bg_img_next	= $tf_bg_images.eq(current);
    					var $tf_bg_img = $tf_bg_images.eq(before_current);
    					//hide the current description
    						$tf_content_wrapper.children(':visible')
    										   .fadeOut();
    					$tf_bg_img_next.fadeIn(700);
    					$tf_content_wrapper.children()
    											   .eq(current)
    										       .fadeIn(500);
    
    					$tf_bg_img.fadeOut(700);
    
    				}
    				function slide_scroll(dir){
    					//if dir is "tb" (top -> bottom) increment current,
    					//else if "bt" decrement it
    					current	= (dir == 'tb')?current + 1:current - 1;
    					if(dir == 'index') {
    						current = show_index_number;
    					}
    					//we want a circular slideshow,
    					//so we need to check the limits of current
    					if(current == total) current = 0;
    					else if(current < 0) current = total - 1;
    					update_thumbnail(current);
    					//we get the next image
    					var $tf_bg_img_next	= $tf_bg_images.eq(current),
    						//its dimentions
    						dim				= getImageDim($tf_bg_img_next),
    						//the top should be one that makes the image out of the viewport
    						//the image should be positioned up or down depending on the direction
    							left	= (dir == 'tb')?jQuery(window).width() + 'px':-parseFloat(dim.width,10) + 'px';
    
    					//set the returned values and show the next image
    						$tf_bg_img_next.css({
    							width	: dim.width,
    							height	: dim.height,
    							left	: left,
    
    						}).show();
    
    						//the top should be one that makes the image out of the viewport
    						if(jQuery(window).width() < 767){
    							resize($tf_bg_img_next);
    						} 
    
    					//$tf_bg_img_next.css('left',$tf_bg_img.width());
    						//now slide it to the viewport
    
    						$tf_bg_img_next.stop().animate({left : 0},1000, 'jswing');
    
    						//$tf_bg_img_next.css('left',-$tf_bg_img.width());
    					//we want the old image to slide in the same direction, out of the viewport
    						var slideTo	= (dir == 'tb')?$tf_bg_img.width() + 'px':jQuery(window).width() + 'px';
    						if(dir == 'tb') {
    							slideTo = "-"+slideTo;
    						}
    						$tf_bg_img.stop().animate({left : slideTo},1000,'jswing',function(){
    						//hide it
    							jQuery(this).hide();
    						//the $tf_bg_img is now the shown image
    							$tf_bg_img	= $tf_bg_img_next;
    						//show the description for the new image
    						   if(jQuery(window).width() < 767){ $tf_content_wrapper.css('padding-top',$tf_bg_img.height()); }
    							$tf_content_wrapper.children()
    											   .eq(current)
    										       .fadeIn(500);
    						});
    
    					//hide the current description
    						$tf_content_wrapper.children(':visible')
    										   .hide()
    
    				}
    
    				//animate the image to fit in the viewport
    				function resize($img){
    					var w_w	= jQuery(window).width(),
    						w_h	= jQuery(window).height(),
    						i_w	= $img.width(),
    						i_h	= $img.height(),
    						r_i	= i_h / i_w,
    						new_w,new_h;
    
    					if(i_w > i_h){
    						new_w	= w_w;
    						new_h	= w_w * r_i;
    
    						if(new_h > w_h){
    							new_h	= w_h;
    							new_w	= w_h / r_i;
    						}
    					}
    					else{
    						new_h	= w_w * r_i;
    						new_w	= w_w;
    					}
    
    					$img.css({
    						width	: new_w + 'px',
    						height	: new_h + 'px',
    					});
    				}
    
    				//get dimentions of the image,
    				//in order to make it full size and centered
    				function getImageDim($img){
    					var w_w	= jQuery(window).width(),
    						w_h	= jQuery(window).height(),
    						r_w	= w_h / w_w,
    						i_w	= $img.width(),
    						i_h	= $img.height(),
    						r_i	= i_h / i_w,
    						new_w,new_h,
    						new_left,new_top;
    
    					if(r_w > r_i){
    						new_h	= w_h;
    						new_w	= w_h / r_i;
    					}
    					else{
    						new_h	= w_w * r_i;
    						new_w	= w_w;
    					}
    
    					return {
    						width	: new_w + 'px',
    						height	: new_h + 'px',
    						left	: (w_w - new_w) / 2 + 'px',
    						top		: (w_h - new_h) / 2 + 'px'
    					};
    					}
    			});
            </script>
    <?php get_footer(); ?><!-- Footer -->
  4. esmi
    Forum Moderator
    Posted 1 year ago #

    We do not support commercial themes as you paid for support when you bought the theme. It is not our place to keep theme vendors in business or deprive them of any income that they may derive from support services.

  5. spookify
    Member
    Posted 1 year ago #

    They offer no support anymore :(

    Any other suggestions where i may get some help?

  6. esmi
    Forum Moderator
    Posted 1 year ago #

    Perhaps you need to consider hiring someone to carry out the work for you? This level of coding is almost certainly beyond the scope of the support we are able to provide in the forum.

  7. spookify
    Member
    Posted 1 year ago #

    Perhaps you need to consider hiring someone to carry out the work for you? This level of coding is almost certainly beyond the scope of the support we are able to provide in the forum.

    oh, thought it was a matter of just "unhooking" main content from a template...guess not.

    Is not the point of "WordPress" to offer an open source CMS without the need to charge a client for custom CMS dev?

    Guess wordpress is "beyond the scope" of practical open source solutions
    for front-end web dev's

  8. esmi
    Forum Moderator
    Posted 1 year ago #

    Is not the point of "WordPress" to offer an open source CMS without the need to charge a client for custom CMS dev?

    You're using a commercial theme and you're looking to customise it. That's really well beyond what can reasonably be supported via these free, volunteer-staffed, forums.

  9. spookify
    Member
    Posted 1 year ago #

    but this is retardedly easy for a wordpress developer lol...

    and if i had customized the stock 2013 theme to this point myself and had a question?
    is there a section of the forums that deal with advanced issue's?

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    If you have a query regarding one of the themes available at WordPress.org, let us know.

Topic Closed

This topic has been closed to new replies.

About this Topic