Hi,

I´m trying to create a page template for a custom post type.
I have set builder mode to debug, constructed my pagelayout using the page builder elements and then copied the generated shortcode to my template.
In my custom post type I have some custom fields that I also include as variables inside the shortcode.
This has been working fine and certainly feels like a really convenient way of constructing customizations, but for some reason when I try to include a color section element in my shortcode then the layout breaks as I view pages based on my template.

I have created a page called single-myCPTname and tried using both page.php and template-builder.php as base. Where inside template-builder.php would be the best place to paste my shortcode? …or I should I place it somewhere else?

Here are 2 simplified versions of the shortcode I´m trying to use (without my custom fields variables):

1. This one work as expected (displaying 2 columns)

echo do_shortcode(”
[av_one_half first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']
[av_textblock size='' font_color='' color='' custom_class='']
<h2>Test text1</h2>
[/av_textblock]
[/av_one_half]

[av_one_half min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']
[av_textblock size='' font_color='' color='' custom_class='']
<h3>Test text2</h3>
[/av_textblock]

[/av_one_half]“);

2. This one wraps both the colorsection and the following text columns with the background image, there is also empty space added above the color section. (expected full width color section with background image and then below that, the two text columns)

echo do_shortcode(“[av_section min_height='25' min_height_px='500px' padding='default' shadow='no-border-styling' bottom_border='no-border-styling' id='' color='main_color' custom_bg='' src='https://www.enfold2.dev/wp-content/uploads/2016/02/myimage.jpg' attachment='3360' attachment_size='full' attach='scroll' position='top left' repeat='stretch' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' custom_class='']
[av_textblock size='' font_color='' color='' custom_class='']
test text
[/av_textblock]
[/av_section]

[av_one_half first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']
[av_textblock size='' font_color='' color='' custom_class='']
<h2>Test text1</h2>
[/av_textblock]
[/av_one_half]

[av_one_half min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='']
[av_textblock size='' font_color='' color='' custom_class='']
<h3>Test text2</h3>
[/av_textblock]

[/av_one_half]“);

Greatful for help with this, thanks!

Hi,

I have a two line menu using Quick CSS and also to make it appear correctly in a mobile menu. (See below and link). However, the second line of the menu doesn’t show a red underline on the selected page like it does on the first line to tell you what page you are on. Can you show me what needs added to the CSS below to fix? Many thanks, Frank

#top #wrap_all .av-social-link-facebook a {
color: #fff;
background-color: #37589b;
}
#top #wrap_all .av-social-link-twitter a {
color: #fff;
background-color: #46d4fe;
}
.phone-info span {
color:white !important;
font-size: 14px;
}
#scroll-top-link {
background-color: #001d5b;
color: white;
border-color: white;
}
#header #header_main_alternate .container {
height: 80px;
}
@media only screen and (min-width: 767px) {
#header #header_main_alternate .container {
height: 80px;
}
.html_header_top.html_header_topbar_active.html_header_sticky.html_bottom_nav_header #top #main {
padding-top: 198px !important;
}
.logo img {
min-width:350px!important;
height:auto!important;
}

Hi,

I’ve added some Quick CSS to make a two line menu and to display correctly on mobile. However, I also added CSS to make the social media icons top right of page to appear their regular colors facebook, twitter, instead of the theme gray color. Then on the primary color for links #d1000 (burgundy) for Primary color to underline the menu items.

However, when I view the site on mobile, the social media icons up top still appear gray and the 3 bars in the mobile menu appear as #d100000 (burgundy) instead of white like the menu links are. Can you please see attached screenshots and recommend how to change the 3 mobile menu bars to white, but leave he red underline on the desktop site menu and also to have the social media icons to appear the normal facebook, twitter colors as they do on the desktop site? I’ve included the Quick CSS I’m using now. Many thanks.

#top #wrap_all .av-social-link-facebook a {
color: #fff;
background-color: #37589b;
}
#top #wrap_all .av-social-link-twitter a {
color: #fff;
background-color: #46d4fe;
}
.phone-info span {
color:white !important;
font-size: 14px;
}
#scroll-top-link {
background-color: #001d5b;
color: white;
border-color: white;
}
#header #header_main_alternate .container {
height: 80px;
}
@media only screen and (min-width: 767px) {
#header #header_main_alternate .container {
height: 80px;
}
.html_header_top.html_header_topbar_active.html_header_sticky.html_bottom_nav_header #top #main {
padding-top: 198px !important;
}
.logo img {
min-width:350px!important;
height:auto!important;
}