Hi Josue,

that is AWESOME!

The only thing that´s missing is I can´t add custom css to columns because columns don´t have an editor. What I need to achieve is what you see in the screenshot here: https://dl.dropbox.com/s/0v9ui4zywfrlc68/index.html

You can see that any of the three columns has an individual bg image. I did with this CSS for example:

#unternehmenkacheln .avia-builder-el-9 {background:url(images/bg-kacheln/kachel-team.jpg) no-repeat!important;background-size:cover!important;}

In this case .avia-builder-el-9 is the first column element inside a color section with the ID #unternehmenkacheln. That works as long as I don´t add/remove an element because then the class of the column changes. Maybe it´s not hte best idea to ad the bg image to the colum element itself but I have no other idea.

Any other idea how to create a box like this that has a bg image and can hold a text container element where I can add text and links etc.

Cheers
– Michael

Hi Ismael and Devin,

I apologize in advance… long reply coming. I hope it helps. :-) I got to look at the diffs between your (Ismael’s) Homepage Test and mine:

1. The first color section has extra parameters in your version: video=” video_ratio=’16:9′.

2. The three placeholder-tall images on the homepage are aligned center in yours and left in mine.

3. The middle placeholder-tall image is animated top-to-bottom in yours and bottom-to-top in mine. I intend for just that image to be bottom-to-top.

4. Your color sections have shadow set to no-shadow. Mine are set to shadow.

5. More categories are included in the portfolio grid on mine.

6. Your homepage-widgets color section has an empty av_textblock at the top of it. (I think I saw this in my document’s layout later and removed it.)

7. The testimonial subtitles are different.

8. The title is empty on my version’s contact form because there is a custom h2 title above the form.

9. Small differences in the contact form like the to: email address and the label for Email address.

There are also these changes in the text between yours and mine, maybe because of edits I made to my document while working on the CSS:

1. There are no paragraph tags around some of your paragraphs. I’ve added some paragraphs that have their own CSS classes to mine. (I’m using the Disable WPAutoP plugin on my site.)

2. I’ve added icons above the 5 services buttons. (I have not uploaded the icon font yet, so they are not displaying.)

3. I switched the View our Portfolio button’s class from secondary-button to tertiary-button.

4. Under the Homepage – column 1 widget area, I added a textbox with a button for viewing more articles.

5-6. I added a class on the h3 for Why user experience design instead of web design?. I also split that textblock to put the button into a separate textblock.

7. I changed the testimonial widget’s header to be an h3 with its own class.

8. I added a Park/Company field to

The rest of the differences are just whitespace.

So, to sum up the shortcode diffs: I don’t see any differences that may affect the color section width other than the video parameters being added to yours.

Here are the differences in the full HTML for the two pages:

1. Their html_entry_id_ and avia_entry_id_ numbers are different.

2. Your page’s images and CSS are using Pagespeed to optimize them; mine are not – maybe because your page is currently my site’s homepage. Similarly, your version minimizes some CSS that the plugins have not externalized.

3. On yours, the Tipsy Social Icons CSS is within a <style> tag instead of a <link> tag.

4. The plugins’ scripts are imported in a different order.

5. Mine has a <link rel=’next’ …> tag.

6. Your page uses the .home class.

7. The breadcrumb trails are generated differently. Quite a bit of difference here, so please refer to the files’ HTML.

8. Mine has this between the breadcrumbs and the div id for homepage-hero:

<div class=’container_wrap container_wrap_first main_color fullsize’>
<div class=’container’>
<main class=’template-page content twelve alpha units’ role=”main” itemprop=”mainContentOfPage”>
<article class=’post-entry post-entry-type-page post-entry-354′ itemscope=”itemscope” itemtype=”http://schema.org/CreativeWork”&gt;
<div class=”entry-content-wrapper clearfix”>
<header class=”entry-content-header”></header><div class=”entry-content” itemprop=”text”>

9. The color section id’s in mine also contain classes like avia-builder-el-0, el_before_av_section, and avia-builder-el-first. These are also present in other things I built with the Avia editor, such as images.

10. There are <main> elements associated with each color section ID in yours.

11. My contact form uses a fieldset and classes like textare_label hidden textare_label_avia_message_2.

12. Yours has some obfuscated JavaScript toward the end, starting with var addComment.

I’ll continue looking into this to see if one element on the page seems to be causing the color section width to break. Firebug might show me this.

Was your version created after I upgraded to Enfold 2.7.1? Would I be able to resolve this issue by creating new documents with the latest version of Enfold?

Devin – Thanks. Right, I wasn’t going to change the raw shortcodes unless someone here instructed me to do that. I just turned on the debug mode long enough to do the diff above.

I’ve commented out the code for adding the debug mode. Feel free to turn debug mode back on if you need it for looking at this issue. Also, if you need them, I have saved files containing the shortcodes for both of our versions of Homepage Test. Could I email these to you?

Thanks,
David

hey !

i’m using the code “add_theme_support(‘avia_template_builder_custom_css’);” in function.php in order to set each element individually, so maybe this code has higher priority than the classic custom.css.
well anyway i give the name “section1 “in css class for the color section and put the code bellow into custom.css :
“.section1 div.container{border-style: none; width: 100% !important;}”

though it worked, but chrome cache tricked me…

• This reply was modified 11 years, 9 months ago by Ben.

Where in the code should I do?

		<?php
		global $avia_config;
		$blank = isset($avia_config['template']) ? $avia_config['template'] : "";

		//reset wordpress query in case we modified it
		wp_reset_query();

		//get footer display settings
		$the_id 				= avia_get_the_id(); //use avia get the id instead of default get id. prevents notice on 404 pages
		$footer 				= get_post_meta($the_id, 'footer', true);
		$footer_widget_setting 	= !empty($footer) ? $footer : avia_get_option('display_widgets_socket');

		//check if we should display a footer
		if(!$blank && $footer_widget_setting != 'nofooterarea' )
		{
			if( $footer_widget_setting != 'nofooterwidgets' )
			{
				//get columns
				$columns = avia_get_option('footer_columns');
		?>
				<div class='container_wrap footer_color' id='footer'>

					<div class='container'>

						<?php
						do_action('avia_before_footer_columns');

						//create the footer columns by iterating

						$firstCol = 'first';
				        switch($columns)
				        {
				        	case 1: $class = ''; break;
				        	case 2: $class = 'av_one_half'; break;
				        	case 3: $class = 'av_one_third'; break;
				        	case 4: $class = 'av_one_fourth'; break;
				        	case 5: $class = 'av_one_fifth'; break;
				        }

						//display the footer widget that was defined at appearenace->widgets in the wordpress backend
						//if no widget is defined display a dummy widget, located at the bottom of includes/register-widget-area.php
						for ($i = 1; $i <= $columns; $i++)
						{
							echo "<div class='flex_column $class $firstCol'>";
							if (function_exists('dynamic_sidebar') && dynamic_sidebar('Footer - column'.$i) ) : else : avia_dummy_widget($i); endif;
							echo "</div>";
							$firstCol = "";
						}

						do_action('avia_after_footer_columns');

						?>

					</div>

				<!-- ####### END FOOTER CONTAINER ####### -->
				</div>

	<?php   } //endif nofooterwidgets ?>

			<!-- end main -->
			</div>

			<?php

			//copyright
			$copyright = avia_get_option('copyright', "&copy; ".__('Copyright','avia_framework')."  - <a href='".home_url('/')."'>".get_bloginfo('name')."</a>");

			

			//you can also remove the kriesi.at backlink by adding [nolink] to your custom copyright field in the admin area
			if($copyright && strpos($copyright, '[nolink]') !== false)
			{
				$kriesi_at_backlink = "";
				$copyright = str_replace("[nolink]","",$copyright);
			}

			if( $footer_widget_setting != 'nosocket' )
			{

			?>

				<footer class='container_wrap socket_color' id='socket' <?php avia_markup_helper(array('context' => 'footer')); ?>>
                    <div class='container'>

                        <span class='copyright'><?php echo $copyright . $kriesi_at_backlink; ?></span>

                        <?php
                            echo "<nav class='sub_menu_socket' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
                                $avia_theme_location = 'avia3';
                                $avia_menu_class = $avia_theme_location . '-menu';

                                $args = array(
                                    'theme_location'=>$avia_theme_location,
                                    'menu_id' =>$avia_menu_class,
                                    'container_class' =>$avia_menu_class,
                                    'fallback_cb' => '',
                                    'depth'=>1
                                );

                                wp_nav_menu($args);
                            echo "</nav>";
                        ?>

                    </div>

	            <!-- ####### END SOCKET CONTAINER ####### -->
				</footer>

			<?php
			} //end nosocket check

		}
		else
		{
			echo "<!-- end main --></div>";
		} //end blank & nofooterarea check

		//display link to previeous and next portfolio entry
		echo avia_post_nav();

		echo "<!-- end wrap_all --></div>";

		if(isset($avia_config['fullscreen_image']))
		{ ?>
			<!--[if lte IE 8]>
			<style type="text/css">
			.bg_container {
			-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $avia_config['fullscreen_image']; ?>', sizingMethod='scale')";
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $avia_config['fullscreen_image']; ?>', sizingMethod='scale');
			}
			</style>
			<![endif]-->
		<?php
			echo "<div class='bg_container' style='background-image:url(".$avia_config['fullscreen_image'].");'></div>";
		}
	?>

<?php

	/* Always have wp_footer() just before the closing </body>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to reference JavaScript files.
	 */

	wp_footer();

?>
<a href='#top' id='scroll-top-link' <?php echo av_icon_string( 'scrolltop' ); ?>></a>
<div id="fb-root"></div>
</body>
</html>

And what should I write? <iframe ???></iframe>?

Hi Yigit,

Very sorry about the duplicate topic, I was worried that I threw too much into this one so thought I’d at least find out the most important answer I needed quicker on it’s own. Won’t do again.

I dug through the forum a bit as I needed to fix everything in short order and I at least found working solutions, but not sure if they were the best.

For 2) I used the css .image-overlay { display: none!important; }

For 1) and 4) I just created a custom class and used the following code – is this the best way to accomplish this or is there a better way to align everything middle vertically and move left/right as needed?

.avia_image.asseen1 {
top: -8px;
right: -160px;
}

.avia_image.asseen2 {
top: -38px;
}

.avia_image.asseen3 {
top: -21px;
left: -160px;
}

Thank you,
Jonathan

Thanks for the response Ismael, but it’s still not working >_<. Here is the entire code for the header.php file, with the code you mentioned added:

<?php
	global $avia_config;

	$style 		= $avia_config['box_class'];
	$responsive	= avia_get_option('responsive_layout','responsive');
	$blank 		= isset($avia_config['template']) ? $avia_config['template'] : "";
	$headerS	= !$blank ? avia_header_setting() : "";
	$headerMenu = $responsive ? avia_get_option('header_menu','mobile_drop_down') : "";

?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="<?php echo " html_$style ".$responsive." ".$headerS;?> ">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="format-detection" content="telephone=yes">
<title><?php if(function_exists('avia_set_title_tag')) { echo avia_set_title_tag(); } ?></title>
<!-- page title, displayed in your browser bar -->

<?php

	/*
	 * outputs a rel=follow or nofollow tag to circumvent google duplicate content for archives
	 * located in framework/php/function-set-avia-frontend.php
	 */
	 if (function_exists('avia_set_follow')) { echo avia_set_follow(); }

	 /*
	 * outputs a favicon if defined
	 */
	 if (function_exists('avia_favicon'))    { echo avia_favicon(avia_get_option('favicon')); }

?>

<!-- add feeds, pingback and stuff-->
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="alternate" type="application/rss+xml" title="<?php echo get_bloginfo('name'); ?> RSS2 Feed" href="<?php avia_option('feedburner',get_bloginfo('rss2_url')); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<!-- mobile setting -->
<?php

if( strpos($responsive, 'responsive') !== false ) echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">';

?>

<?php

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */

	wp_head();
?>

</head>

<body id="top" <?php body_class($style." ".$avia_config['font_stack']." ".$blank); avia_markup_helper(array('context' => 'body')); ?>>

	<div id='wrap_all'>

		<?php if(!$blank){ ?>

        <header id='header' class=' header_color <?php avia_is_dark_bg('header_color'); echo " ".$headerMenu; ?>' <?php avia_markup_helper(array('context' => 'header','post_type'=>'forum'));?>>

            <?php
            
            if($responsive && $headerMenu == 'mobile_slide_out')
            {
            	echo '<a id="advanced_menu_toggle" href="#" '.av_icon_string('mobile_menu').'></a>';
	    		echo '<a id="advanced_menu_hide" href="#" 	'.av_icon_string('close').'></a>';
            }
            

            $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');

            //subheader, only display when the user chooses a social header
            if(strpos($headerS,'social_header') !== false)
            {
            ?>
            <div id='header_meta' class='container_wrap container_wrap_meta'>

                  <div class='container'>
                  <?php
                        /*
                        *	display the themes social media icons, defined in the wordpress backend
                        *   the avia_social_media_icons function is located in includes/helper-social-media-php
                        */

                        if(strpos($headerS,'bottom_nav_header') === false) avia_social_media_icons($social_args);

                        //display the small submenu
                        echo "<nav class='sub_menu' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
                            $avia_theme_location = 'avia2';
                            $avia_menu_class = $avia_theme_location . '-menu';
                            $args = array(
                                'theme_location'=>$avia_theme_location,
                                'menu_id' =>$avia_menu_class,
                                'container_class' =>$avia_menu_class,
                                'fallback_cb' => '',
                                'container'=>'',
                                'echo' =>false
                            );

                            $nav  = wp_nav_menu($args);
                            echo $nav;

                            $phone = avia_get_option('phone');
                            $phone_class = !empty($nav) ? "with_nav" : "";
                            if($phone) echo "<div class='phone-info {$phone_class}'><span>{$phone}</span></div>";

                            /* <div class="phone2">503-436-5576</div>
                            *  Hook that can be used for plugins and theme extensions (currently:  the woocommerce shopping cart)
                            */
                            do_action('avia_meta_header');
                        echo '</nav>';
                    ?>
                  </div>
            </div>

            <?php } ?>

            <div  id='header_main' class='container_wrap container_wrap_logo'>
                  <div class='phone2'><a href="tel:15034365576">Contact Us:(503)436-5576</div></a>
                  </a></strong><img class='cards' src='http://garagedoorsrepairwestlinn.com/wp-content/uploads/2014/01/crdit-card-logo.jpg' />   
                    <?php
                    /*
                    * Hook that can be used for plugins and theme extensions (currently:  the woocommerce shopping cart)
                    */
                    do_action('ava_main_header');

                    ?>

                    <div class='container'>

                        <?php
                        /*
                        *	display the theme logo by checking if the default logo was overwritten in the backend.
                        *   the function is located at framework/php/function-set-avia-frontend-functions.php in case you need to edit the output
                        */
                        echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', false, 'strong');

                            if(strpos($headerS,'social_header') !== false && strpos($headerS,'bottom_nav_header') !== false) avia_social_media_icons($social_args);

                        /*
                        *	display the main navigation menu
                        *   modify the output in your wordpress admin backend at appearance->menus
                        */
                            $extraOpen = $extraClose = "";
                            if(strpos($headerS,'bottom_nav_header') !== false){ $extraClose = "</div></div><div id='header_main_alternate' class='container_wrap'><div class='container'>";  }

                            echo $extraClose;

                            echo "<nav class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
                                $avia_theme_location = 'avia';
                                $avia_menu_class = $avia_theme_location . '-menu';
                                $args = array(
                                    'theme_location'	=> $avia_theme_location,
                                    'menu_id' 			=> $avia_menu_class,
                                    'container_class'	=> $avia_menu_class,
                                    'fallback_cb' 		=> 'avia_fallback_menu',
                                    'walker' 			=> new avia_responsive_mega_menu()
                                );

                                wp_nav_menu($args);
                            echo '</nav>';

                            /*
                            * Hook that can be used for plugins and theme extensions
                            */
                            do_action('ava_after_main_menu');
                        ?>
                    <!-- end container-->
                    </div>

            <!-- end container_wrap-->
            </div>

            <div class='header_bg'></div>

        <!-- end header -->
        </header>

	<?php } //end blank check ?>
	<div id='main'>

and for custom css:

#top .social_bookmarks { display: none; }
#header_meta { display: none; }

#header_main .container, .main_menu ul:first-child > li > a {
height: 131px !important;
line-height: 131px !important;
}

#header_main_alternate .container, .main_menu ul:first-child > li > a {
color: green !important;
height: 40px !important;
line-height: 40px !important;
}

#top .main_menu .menu>li:last-child>a {
padding-right: 10px;
}

.phone2 {
color: black;
font-size: 25px;
padding: 4px;
position: absolute;
right: 80px;
top: 99px;
}

.cards {
position: absolute;
right: 80px;
top: 50px;
}

I feel like I’ve done everything exactly as suggested.. and it’s still not working.