Forum Replies Created
-
AuthorPosts
-
Hi,
Please try going to Enfold Theme Options ▸ Advanced Styling ▸ Main Menu Links and adjust the background color to suit.
Please note the options Apply only to mouse hover state & Apply only to active state at the bottom, you will want to check one of these and then add another rule to check the other like this:
and you may also want to use the Main Menu sublevel Links option.Best regards,
MikeHey emilconsor,
Thank you for your patience and for the link to your test site, Try adding this code to the end of your functions.php file in Appearance ▸ Editor:function custom_script() { ?> <script> (function($) { $(function() { var tall = $('.custom-grid.career-grid').height(); var half = $('.career-flex.left').height() / 2; $('.career-flex.right .flex_column_div').css('height',half); $('.career-flex.left .avia_image').css('height',tall); }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_script');
and then add this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:
@media only screen and (min-width: 1024px) and (max-width: 1440px) { .career-flex.right p { font-size: 0.9em; line-height: 1.3em; } #top .career-flex.right .av-special-heading { margin: 0; padding-bottom: 10px; font-size: 20px; } #top .career-flex.right .flex_column_div:nth-child(2) { padding: 10px; } } @media only screen and (min-width: 1441px) and (max-width: 1824px) { .career-flex.right p { font-size: 0.9em; line-height: 1.3em; } } .custom-grid.career-grid .flex_cell, .custom-grid.career-grid .flex_column_div { overflow: hidden; } .career-flex.left .avia_image, .career-flex.right .avia_image, .career-flex.right .avia-image-container-inner { width: 100%; }
A screenshot of the expected results are below.
I tried a few different ways to work this and feel that as the page is the best solution is to use this script and css, because it also works for very large screens 2560px, but you will note that the css only goes down to 1024px, that is because you have changed the display to flex and for mobile and tablet the layout doesn’t adjust, so you will need to write some more css for moble or switch back to display block, I’m not sure what your intentions are for that as your lower elements are also using flex.
I see with your Grid Row element that you have placed an image element inside a column element inside the grid row cell and changed the display to flex, for the left side 2/3 cell you could just use the image as a background and it would fill the cell as you wish. For the right side you would not need to place the top image in a column, but only use a text element inside a column for the bottom text section. I created an example for you linked below with this added css:#av-layout-grid-1 { padding: 40px; } .flex_cell.av_one_third { padding: 0 30px; } .avia-image-container.avia-align-center { margin-bottom: 30px; }
This is just a suggestion.
Best regards,
MikeHey emilconsor,
Thank you for your patience and for the link to your test site, Try adding this code to the end of your functions.php file in Appearance ▸ Editor:function custom_script() { ?> <script> (function($) { $(function() { var tall = $('.custom-grid.career-grid').height(); var half = $('.career-flex.left').height() / 2; $('.career-flex.right .flex_column_div').css('height',half); $('.career-flex.left .avia_image').css('height',tall); }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_script');
and then add this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:
@media only screen and (min-width: 1024px) and (max-width: 1440px) { .career-flex.right p { font-size: 0.9em; line-height: 1.3em; } #top .career-flex.right .av-special-heading { margin: 0; padding-bottom: 10px; font-size: 20px; } #top .career-flex.right .flex_column_div:nth-child(2) { padding: 10px; } } @media only screen and (min-width: 1441px) and (max-width: 1824px) { .career-flex.right p { font-size: 0.9em; line-height: 1.3em; } } .custom-grid.career-grid .flex_cell, .custom-grid.career-grid .flex_column_div { overflow: hidden; } .career-flex.left .avia_image, .career-flex.right .avia_image, .career-flex.right .avia-image-container-inner { width: 100%; }
A screenshot of the expected results are below.
I tried a few different ways to work this and feel that as the page is the best solution is to use this script and css, because it also works for very large screens 2560px, but you will note that the css only goes down to 1024px, that is because you have changed the display to flex and for mobile and tablet the layout doesn’t adjust, so you will need to write some more css for moble or switch back to display block, I’m not sure what your intentions are for that as your lower elements are also using flex.
I see with your Grid Row element that you have placed an image element inside a column element inside the grid row cell and changed the display to flex, for the left side 2/3 cell you could just use the image as a background and it would fill the cell as you wish. For the right side you would not need to place the top image in a column, but only use a text element inside a column for the bottom text section. I created an example for you linked below with this added css:#av-layout-grid-1 { padding: 40px; } .flex_cell.av_one_third { padding: 0 30px; } .avia-image-container.avia-align-center { margin-bottom: 30px; }
This is just a suggestion.
Best regards,
MikeSeptember 12, 2021 at 4:57 pm in reply to: Headline Rotator – Typewriter Jumping Paragraph, Media Element Image Animation #1320591Hi,
Glad to hear this helped, for your /404/ page please try this css:#top.page-id-673 #main .avia-image-container.av-hover-grow .avia-image-overlay-wrap:hover { -webkit-transform: scale(1.05); transform: scale(1.05) } .avia_transform #top.page-id-673 .avia-image-container a:hover .image-overlay { opacity: 0 !important; }
After applying the css, please clear your browser cache and check.
Best regards,
MikeSeptember 12, 2021 at 4:47 pm in reply to: Images & Gravity Forms Not Loading, Unformatted HTML, Slow Page Loads #1320589Hi,
Thank you, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHey nickthe,
Thank you for your patience and for the screenshots, but I don’t think that you gave us access to the correct site as I don’t see the filter above in your functions.php and the logo doesn’t match the screenshots, please check.
To answer your request, try adding this code to your functions.php instead:add_filter('avf_logo_subtext', 'kriesi_logo_addition'); function kriesi_logo_addition($sub) { if( is_front_page() ){ $sub .= "<h1 class='logo-title logo-subtitle'>"; $sub .= "Company Name"; $sub .= "</h1>"; }else{ $sub .= "<span class='logo-title logo-subtitle'>"; $sub .= "Company Name"; $sub .= "</span>"; } return $sub; }
and add this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:
#top .logo, #top .logo a { overflow: visible; } #top .logo-subtitle { color: #aaa !important; font-size: 18px !important; top: 30px !important; position: absolute; white-space: nowrap; } #top h1.logo-subtitle { line-height: 90px; margin-bottom: 0; }
then clear your browser cache and check.
Best regards,
MikeSeptember 11, 2021 at 10:59 pm in reply to: Search and Button in Top Bar – Which way to implement? #1320540Hey slui,
Thank you for your patience, to show the classes field in the menu items you would need to enable it in the screen options:
So it seems that the menu item next to your social icons was the closest to what you wanted so I added the custom class menu-button-bordered to the item and added this css to your Quick CSS:#menu-item-796.menu-button-bordered > a { border: 2px solid; border-radius: 2px; padding: 7px; }
and now it seems to be working:
Please clear your browser cache and check, and if you like then remove the other button.Best regards,
MikeHey bobfurgo,
Thank you for your patience and for the login, but it doesn’t seem to have admin rights as most of the features to the site are not available. I’m not sure why this one post is different from the others but the dates are from 10/2019 was this site imported?
This one post is not using the cropped 1500×630 image as all the other ones are it is using a srcset of images none of which is 1500×630 and I don’t have access to investigate further. The source image seems to be 964×528 and not 1500×861 as posted above.
The featured_large image size should be cropped unless it has been overwritten by your child theme or an image optimization plugin.
Your Blog Post element has also been modified so there really is no way to ensure that it will work correctly, please compare these screenshots.
Yours:
How it should look:
Best regards,
MikeSeptember 11, 2021 at 9:29 pm in reply to: Images & Gravity Forms Not Loading, Unformatted HTML, Slow Page Loads #1320537Hi,
Thank you for sharing this information perhaps it will help other LiquidWeb users. Shall we close this thread then?Best regards,
MikeSeptember 11, 2021 at 9:05 pm in reply to: Rotate view of fixed number of images in the accordion slider #1320535Hey barrystrauss,
Thank you for your patience but unfortunately I don’t see a reasonable way to achieve this without rewriting the element.
I would recommend trying to create this with the layerslider, perhaps there is one in the Template Store that is similar that you can use as a starting point.Best regards,
MikeSeptember 11, 2021 at 8:25 pm in reply to: How to change social media icon to telegram icon #1320534Hey tinagianna,
Thank you for your patience and for the login, to add the Telegram icon to the social profiles I added this code to your functions.php:// Register new icon as a theme icon function avia_add_custom_icon($icons) { $icons['telegram'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue8b7'); return $icons; } add_filter('avf_default_icons','avia_add_custom_icon', 10, 1); // Add new icon as an option for social icons function avia_add_custom_social_icon($icons) { $icons['Telegram'] = 'telegram'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
since you are not using a child theme, this was added on line 47 after:
if( isset( $avia_config['use_child_theme_functions_only'] ) ) { return; }
since you are not using a child theme, this will be lost on your next update, I recommend using a child theme.
I also added the Telegram mouse-over css to your Quick CSS using the Telegram Logo Color Palette from here#top #wrap_all .av-social-link-telegram:hover a{ color:#fff; background-color:#0088CC; }
Please clear your browser cache and check.
Best regards,
MikeSeptember 11, 2021 at 7:46 pm in reply to: Headline Rotator – Typewriter Jumping Paragraph, Media Element Image Animation #1320533Hey Jasmer,
Thank you for your patience and for the screencast, for the Headline Rotator please try this css in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:@media only screen and (max-width: 767px) { #top.home .av-rotator-container { min-height: 62px; } }
For your logo on desktop to not fade try this css:
.avia_transform #top.home .avia-image-container.av-small-hide.av-mini-hide a:hover .image-overlay { opacity: 0 !important; }
For your logo on desktop to not grow so much try this css:
#top.home #main .avia-image-container.av-small-hide.av-mini-hide.av-hover-grow .avia-image-overlay-wrap:hover { -webkit-transform: scale(1.05); transform: scale(1.05) }
this transform scale is the same as the lower images but it seems like more to me, perhaps because the logo image is larger, so you can try different scales to find the one you like, such as 1.02
After applying the css, please clear your browser cache and check.Best regards,
MikeSeptember 11, 2021 at 6:15 pm in reply to: Form Validation Captcha Code Snippets for Enfold #1320531Hey williamsmedia,
Thank you for your patience and the link to your page. I assume that when you say you want a form validation for your custom form snippet you mean that you want the form to not be submited unless all of the fields are correct?
This function would be done by a script, but in examining your page source code I don’t see a script added to the code block.
So if you have a script to add to the code block and it is causing an error when you add it then it most likely needs to be added between <script> tags inside the code block like this:
If this doesn’t help then try posting a link to your entire script and form code in a plain text document (.txt) and link in the Private Content area below so I can test or try including an admin login in the Private Content area so I can examine your test page.Best regards,
MikeSeptember 11, 2021 at 5:07 pm in reply to: Custom button on top of shop main page (adjust the standard woocommerce page) #1320530Hi,
Ok, we will leave this open to hear back from you after your test.Best regards,
MikeSeptember 11, 2021 at 5:04 pm in reply to: Borders Apearing above or below Color or Grid Sections, when no border is set #1320527Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeSeptember 11, 2021 at 5:04 pm in reply to: Bug: Blog Grid Layout only shows 2.5 "lines" and then cuts of rest #1320525Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeSeptember 10, 2021 at 1:48 pm in reply to: Custom button on top of shop main page (adjust the standard woocommerce page) #1320398Hey zoltom,
Thank you for your patience and for your explanation. Try adding the filter button by adding this code to the end of your functions.php file in Appearance ▸ Editor:add_action('woocommerce_before_shop_loop', 'filter_button_before_shop_loop'); function filter_button_before_shop_loop() { if(is_shop()) { echo do_shortcode("[av_button label='FILTERS' icon_select='no' icon='ue800' font='entypo-fontello' link='manually,http://' link_target='' size='small' position='left' label_display='' title_attr='' color_options='color_options_advanced' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='custom' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#0a0a0a' btn_color_bg_hover='custom' btn_custom_bg_hover='#444444' btn_color_font='white' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' id='shopknop' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']"); } }
You can replace the button shortcode with yours from the screenshot, or try this as-is to test.
Best regards,
MikeHi,
From your screenshot the error message says that your email and user name were not accessed, so it seems that you didn’t enter the correct information, you need to use all of your new license information from your account that you created and none of the information from the old license.Best regards,
MikeHey Per,
Thank you for your patience, please see our Token documentation and the Troubleshooting section at the end.
Also check that you have allowed the correct specific permissions to verify the purchase in the token, this link should take you to a screenshot.Best regards,
MikeHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeSeptember 6, 2021 at 8:09 pm in reply to: Essential / Default Images Sizes in Media Archive #1319902Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Glad this works for you, if it was written differently the font change may also affect the post title which you didn’t include in your specification. Unless there is anything else we can assist with on this issue, shall we close this then?Best regards,
MikeHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeSeptember 5, 2021 at 11:05 pm in reply to: Customize Order-Received Page And Drop Down List on Checkout Page #1319807Hi,
Thank you for your patience and the link to your site, for the checkout page the input fields seem to be using the font “Helvetica Neue” at 12px so I tried matching it for this solution, feel free to adjust to suit.
I added this to your Quick CSS field:#top.woocommerce-checkout .select2-results__option[aria-selected], #top.woocommerce-checkout .select2-results__option[data-selected], #top.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 12px; font-family: "Helvetica Neue"; background-color: #f8f8f8; } #top.woocommerce-checkout .select2-container--default .select2-selection--single, #top.woocommerce-checkout .select2-dropdown { background-color: #f8f8f8; border: 0px solid #f8f8f8; }
this is the result:
For your order received page I assumed that you want “GRACIAS. TU PEDIDO HA SIDO RECIBIDO.” to match The H2 heading in the next section below “DETALLES DEL PEDIDO” so this css does that:#top.woocommerce-order-received .woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received { font-size: 28px; font-family: "lora"; color: #696969; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
the result:
Please clear your browser cache and check.Best regards,
MikeHi,
Thank you for the screenshot, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:#top #sub_menu1 { padding: 0 55px; }
After applying the css, please clear your browser cache and check.
Best regards,
MikeHi,
Thank you for your patience and for the login, to ensure that the following custom css doesn’t interfere with other pages or elements I recommend adding a custom class to this blog element which you can use everywhere on your site that you want this effect, for this example we will use aktuell
then to hide the date and change the font size & line height we will use this css rule:.aktuell > div > div > article > div > .slide-entry-excerpt { font-size: 10px; line-height: 12px; } .aktuell > div > div > article > div > .slide-meta { display: none; }
I was not sure how small you wanted the text so I guessed, feel free to adjust.
the results:
Please clear your browser cache and check.Best regards,
MikeHi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts