Hey Lory1508,

There is nothing like that in the theme by default unfortunately, but I think you could use the Advanced Custom Fields plugin, or similar plugin, for that purpose.

Best regards,
Rikard

Hey Michelle,

There is nothing like that in the theme by default unfortunately, but you should be able to implement it using a plugin like Advanced Custom Fields, or a similar plugin.

Best regards,
Rikard

Hi,

Thank you for the info.

The snippet breaks the layout of the builder because it contains form fields or input tags. You may need to create a custom shortcode for the snippet so that the input fields do not have to be inserted directly in the code block element.

// https://codex.wordpress.org/Shortcode_API

Best regards,
Ismael

Hey DimitriMTM,
Thank you for the login and test page, I cloned your element and removed the HTML from the title fields. I also added a custom ID to the element test_icon_grid
To add a background color to the titles, as your inline HTML would have created:

#test_icon_grid .av_icongrid_title {
	background-color: #ffc000;
	color: #ffff03;
}

To remove the animation and just display the txt:

#test_icon_grid li .avia-icongrid-flipback,#test_icon_grid li .avia-icongrid-front {
	transition: none !important;
}

I added this to your test page via a code block element, please clear your browser cache and check.

Best regards,
Mike

Hi,

I fixed 1 error in Quick CSS field and 4 errors in Appearance > Customize > Additional CSS fields. CSS errors break CSS code and cause issues. As I mentioned before, please ask the person who is adjusting CSS to check their code on http://csslint.net/ for errors as most of the back and forth here is caused by those CSS errors :)

Fixing CSS helped with socket issue. For 3rd column of footer, I added following code to bottom of Quick CSS field

@media only screen and (max-width: 1014px) and (min-width: 769px) {
#footer div .av_one_fourth:not(.first) {
    margin-left: 4%;
}
#footer div .av_one_fourth:nth-child(3) {
    width: 26.5%;
}
}

Please review your website!

Best regards,
Yigit

Hi,

@laurent: You do not have to use the conversion plugin for that snippet. Please try to add the snippet as is without using the placeholders for the less and greater than symbols.

@cz: It is probably not working because of the textarea or the input fields. You may need to create a custom shortcode for the form or the input fields so that you do not have to embed them directly in the code block. Please check the shortcode API on how to create custom shortcodes.

// https://codex.wordpress.org/Shortcode_API

Best regards,
Ismael

Hey,

Please do not create duplicated threads and please ask a question per thread so it does not get confusing :)

1- I replied here – https://kriesi.at/support/topic/partner-logo-on-mobile/

2- Please add following code to Quick CSS

#top .avia-logo-element-container .slide-entry {
    display: block;
    width: left;
}
#top.page-id-16071 .avia-content-slider-inner {
    height: auto !important;
}

You have following code in both Customize > Additional CSS and Quick CSS fields

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .slide-entry {
    margin-left: 0 !important;
    width: 100% !important;
    clear: none !important;
    margin-top: -45px !important;
    margin-bottom: -5px !important;
  }
}

@media only screen and (max-width: 464px) {
  .responsive #top #wrap_all .slide-entry {
    margin-left: 0 !important;
    width: 100% !important;
    clear: none !important;
    margin-top: -60px !important;
    margin-bottom: -50px !important;
  }
}

You may need to adjust your custom CSS.

3- Please edit your Grid Row element and give it a unique ID (“shadow-cell” in example below) and then add following code to bottom of Quick CSS field and adjust it as needed

#shadow-cell .flex_cell_inner {
    box-shadow: 10px 10px 10px #888;
}

4- Please refer to this post – https://kriesi.at/documentation/enfold/typography/#how-to-upload-custom-fonts and upload it in Enfold theme options. I cannot see Century Gothic font on any browser :)

Regards,
Yigit

Hi,

Thank you for the update.

We may have to add the post ID to the get_field function so that it returns the actual year from each post. Please look for the line where we defined the $year variable and replace it with the following code.

$year = get_field ("Date", $entry->ID);

// https://www.advancedcustomfields.com/resources/get_field/

Best regards,
Ismael

Hi,

1- You had following custom CSS code in both Quick CSS and custom CSS fields:

#header #header_main .container {
    width: 100%;
    max-width: none;
}

I removed them. You can simply choose container width in Enfold theme options > General Layout > Dimensions > Maximum Container width

2&3- Fixing 1 must have fixed these too :)

4- I added your icons as custom links and hid them on desktop using following code in Quick CSS field

@media only screen and (min-width: 767px) {
.only-mobile { display: none !important; }}

5- Since those are actually customized mega menu titles, they will not look the same without further customization. If this is something really important for you, please consider to hire freelance developer for the task.

I am sorry but this thread is getting pretty complicated for me to follow. Could we go step by step with your further questions? :)

Best regards,
Yigit

Hi,

This is the post I referred – https://www.advancedcustomfields.com/resources/shortcode/.

I tried using Video shortcode in preview and it did not work for me either. I will check with our devs once again. Also, I re-opened – https://kriesi.at/support/topic/video-shortcode-in-ajax-portfolio/ so we can continue there regarding video shortcode issue :)

Best regards,
Yigit

Hey,

Your code is missing a closing curly bracket. Please change it to following

/* custom style form fields */
#top .av-contact-form-color .input-text,
#top .av-contact-form-color input[type=’text’],
#top .av-contact-form-color input[type=’input’],
#top .av-contact-form-color input[type=’password’],
#top .av-contact-form-color input[type=’email’],
#top .av-contact-form-color input[type=’number’],
#top .av-contact-form-color input[type=’url’],
#top .av-contact-form-color input[type=’tel’],
#top .av-contact-form-color input[type=’search’],
#top .av-contact-form-color textarea,
#top .av-contact-form-color select {
/* Background color */
background-color: #F8F8F8!important;
}

You can use a website like this one – csslint.net to check your custom CSS for errors :)

Regards,
Yigit

Hey MediaMix1,
Sorry for the late reply, and thanks for the login, I see from your PDF Print plugin that it is getting the text from the excerpt

But I believe that you need to set the “Custom Post Fields” for the content to show:

Than being said, typically plugins have trouble using the Advanced Layout Builder shortcodes to get the content so I’m not sure if this plugin will work correctly, but perhaps it will after it is set up.

Best regards,
Mike

Hey S-edwards,
Sorry for the very late reply, do you mean that you built this with the Advanced Custom Fields plugin (ACF)?
Anyways the element looks custom, the gallery image links do not have title attributes and this is what the lightbox needs to show the titles. The counter is automatically populated by the lightbox script by counting all of the images on the page.
Please try adding the title attributes to your image links.

Best regards,
Mike

Hey,

Thanks for contacting us!

1- Please add following code to Quick CSS and adjust the width as needed

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

2- You can use a plugin such as this one – https://woocommerce.com/products/private-store-for-woocommerce/

3- Please add following code to bottom of Functions.php file in Appearance > Editor

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

4- There was a whitespace at the beginning of “product short description” field, I deleted it and now description is right below price. When you remove the price, it will move right under product title :)

5- See #4. If this was not what you meant, please post a screenshot and show the changes you would like to make. You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.

6- Please add following code to bottom of Functions.php file

add_filter( 'woocommerce_is_sold_individually', 'av_remove_quantity_fields', 10, 2 );
function av_remove_quantity_fields( $return, $product ) {
    return true;
}

7- Please use this plugin – https://wordpress.org/plugins/loco-translate/ and edit WooCommerce language files to change the string.

8- Please add following code to bottom of Quick CSS field

.shop_table.woocommerce-checkout-review-order-table {
    display: none;
}

9- Please see #7

10- You can use a plugin such as this one – https://wordpress.org/plugins/woo-thank-you-page-nextmove-lite/ or this one – https://woocommerce.com/products/custom-thank-pages/

Best regards,
Yigit

Hi,
Thank you for the admin login, I created a “customer” account so I could test the login form.
On your /my-courses/ page the login form tries to submit the form when clicking the input fields, so you can not enter the details.
I believe this is because you have the Sensei LMS plugin shortcode wrapped in a link:

[vc_row][vc_column][vc_column_text]<a href="https://academy.harmonicsounds.com/my-courses/">[sensei_user_courses]</a>[/vc_column_text][/vc_column][/vc_row]

Please try removing the link.
But if you use the page /my-account-2/ to login everything works correctly, but it is using woocommerce shortcode:

[woocommerce_my_account]

I also see that you are using the WPBakery Page Builder plugin, I recommend disabling this builder as it has caused conflicts with the Advanced Layout Builder in the past.

Best regards,
Mike

Hi,

1&2- I deleted following code from Quick CSS and Custom CSS fields

#header #header_main .container {
    max-width: 110% !important;
}

3- Added following code to bottom of Quick CSS field

#top #header .avia_mega_div > .sub-menu > li > ul > li a:hover { 
    background-color: #ddd !important;
} 

4- It is already on the right edge on my end.
5- Added following code to bottom of Quick CSS field

#top .social_bookmarks li {
    border-color: #dddddd;
}

Please review your website :)

Best regards,
Yigit

Hi,

You had so many CSS errors in both Quick CSS field and Customize > Custom CSS fields. I fixed them and now your website looks fine.

In case you run into similar issues in future, please check your CSS code for any errors using a website such as this one – http://csslint.net/

Please review your website :)

Best regards,
Yigit

Hi,

@PearlSmile when you add classes to the custom css fields are you adding the “dot” like .class if so please remove the “dot”
If you are using the Enfold Theme Options > Performance > JS & CSS file merging and compression please disable, this is showing you a “cached” version.
Otherwise, please open a new thread with an admin login in the Private Content area and an example of what you can not achieve.
Since this is not your thread posting your login here will not be private and you will not see anything we write in the Private Content area.

Best regards,
Mike