-
Search Results
-
In reply to: Sub Menu looking strange
Hi SarahKunterbunt,
We have added this code in your Quick CSS:
#top .avia_ajax_form input, #top .avia_ajax_form textarea { font-family: "open sans condensed",Arial,sans-serif; font-size: 15px; }Let us know if you need further assistance.
Best regards,
NikkoIn reply to: LayerSlider Text Background Not Responsive
Thank you! That does look a lot better. If I do want to set a minimum font size, do you know if there is any way for the background to scale with the text or will it always react that way if I have a minimum font size set?
Hi, can not choose proper font size for smaller screens …. this toggles back to default after savingAfter updating, somehow the shortcode isn’t generated correctly anymore when it contains linktarget=’_blank’
For example, this works fine in a text-widget:
[av_font_icon icon='ue8fc' font='entypo-fontello' style='' caption='' size='30px' position='left' color='#ffffff' link='manually,https://www.linkedin.com' linktarget='' animation='deactivated' id='' custom_class='' av_uid='' admin_preview_bg=''][/av_font_icon]And this removes the icon:
[av_font_icon icon='ue8fc' font='entypo-fontello' style='' caption='' size='30px' position='left' color='#ffffff' link='manually,https://www.linkedin.com' linktarget='_blank' animation='deactivated' id='' custom_class='' av_uid='' admin_preview_bg=''][/av_font_icon]Is this issue already known? I found some other topics, but that seems to be other bugs.
In reply to: format table
Hey schweg33,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.avia-table tr th, .avia-table tr td { font-size: 16px; color: #444; }If you need further assistance please let us know.
Best regards,
VictoriaHi,
Sorry for the delay. We set the line height property of the text block to 1.2em.
#av_section_1 .avia_textblock.av-small-font-size-32 p { text-align: center; font-size: 54px; line-height: 1.2em; }This is how the text looks now.
Screenshot: https://imgur.com/a/ZWpbKjq
Best regards,
IsmaelIn reply to: Update theme
Hi BobCarey,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
#top .form_element label span { font-size: 16px; }If you need further assistance please let us know.
Best regards,
VictoriaIn reply to: Coloured caption on hover for single image
Hey Bruno,
It’s added in the shortcode:
[av_image src='https://localhost/enfold/documentation/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/images/placeholder.jpg' align='center' styling='' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-5bzohe'][/av_image]Refer to the following:
Best regards,
Jordan ShannonIn reply to: Isolate Part of Caption Text
Hey Dzimnikov,
Add this to quick css:
.av-image-caption-overlay-center p:first-child{ font-size:30px!important; }Best regards,
Jordan Shannonwell what i did now:
give a custom-class to that masonry alb element: lightbox-with-description ( you can adjust this to a more easier class )
Fill out the description fields –
I decided to create an own markup for mfp – it is easier to address then with class : mfp-description in the bottom-bar
Adjust the page id to yours or get rid of that if clause ( think of to delete one of the last curly brackets then on the end )
Choose on Masonry ALB to show both Title and Description !!! ( i set the description to display: none then to have it only on lightbox )
https://webers-testseite.de/masonry/function popup_masonry_with_description() { if(is_page(32904)){ ?> <script type="text/javascript"> (function($){ $(window).load(function(){ $('.av-masonry.lightbox-with-description a.av-masonry-entry.lightbox-added').magnificPopup({ type: 'image', image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '<div class="mfp-bottom-bar">'+ '<div class="mfp-title"></div>'+ '<div class="mfp-description"></div>'+ '<div class="mfp-counter"></div>'+ '</div>'+ '</div>', }, mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded', closeOnContentClick: false, midClick: true, gallery: { enabled: true }, callbacks: { change: function() { $(this.content).find('.mfp-description').html('<p>'+$(this.currItem.el).find('.av-masonry-entry-content').html()+'</p>'); }, }, }); }); })(jQuery); </script> <?php } } add_action('wp_footer', 'popup_masonry_with_description');some css for quick css:
.page-id-32904 .lightbox-with-description .av-masonry-entry-content.entry-content { display: none; } .page-id-32904 .mfp-description { color: #fff; width: 85% } .page-id-32904 div .mfp-title { font-size: 24px; } .page-id-32904 .mfp-description p { line-height: 24px; margin: 0 !important; }Hi,
I added a headline rotator in my secondary menu, adding this code in WP / Enfold Child Theme Options / Header / Add Extra Info in Header (top left) :
[av_headline_rotator before_rotating='' after_rotating='' margin='' margin_sync='true' align='left' custom_title='' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' tag='h3' interval='5' animation='fade' alb_description='' id='' custom_class='slogan-rotatif-menu-secondaire' av_uid='av-k651payb' admin_preview_bg=''] [av_rotator_item title='<a href=‘’ title=’‘ class=’’ data-av_icon="" data-av_iconfont="awesome-font" title=""></a> Paiement sécurisé' custom_title='' link='' linktarget='' av_uid='av-lncu6'] [av_rotator_item title='<a href=‘’ title=’‘ class=’’ data-av_icon="" data-av_iconfont="awesome-font" title=""></a> Livraison offerte à partir de 50€' custom_title='' link='' linktarget='' av_uid='av-e8icu'] [av_rotator_item title='<a href=‘’ title=’‘ class=’’ data-av_icon="" data-av_iconfont="awesome-font" title=""></a> Expédition sous 48h' custom_title='' link='' linktarget='' av_uid='av-7pqyu'] [/av_headline_rotator]Unfortunately, there is a big display issue and I don’t know how to fix it.
Indeed, when the page is loaded the 3 texts appear at the same time, then one disappear and 2 are still shown, then 1 and after that only, it seems to work correctly. But if I only go to another page tab and I come back to this page, display in not good anymore… and so on…Could you help me please?
Thanks a lot!
In reply to: Make tabular data table more mobile friendly
Hi,
Sorry for the late reply, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:@media only screen and (max-width: 767px) { .avia_scrollable_table .avia-table:before { content: "Scroll \27A4"; font-size: 16px; float:right; } .avia_scrollable_table .avia-table > tbody > tr:nth-child(1) > td:nth-child(4):after { content: "Scroll \27A4"; font-size: 16px; top:-77px; position: relative; } }
Best regards,
MikeIn reply to: Fullwidth Sub menu styling
Hi lmzucker432,
Try adding this CSS code in Quick CSS, located in Enfold > General Styling:
#top .av-submenu-container .avia-menu-text { color: white; font-size: 20px; } #top .av-submenu-container .avia-menu-text:hover { color: yellow; }Best regards,
NikkoIn reply to: Fullwidth Sub menu styling
I would like the font size around 20, the idle color would be white with no opacity and rollover would be yellow.
In reply to: Hamburger menu next to default menu in enfold
Thanks Ismael. I looked at the links you provided to include the social icons in the mobile/burger menu. I added the code into our child theme’s functions.php file, but it doesn’t seem to do anything. I think it is because of the way I have the default menu set to “Display as icon” and I have modified the secondary menu via CSS to bring it down to the left of the default menu (icon). In the child theme style.css file I had to add the CSS further below for the secondary menu positioning to work (header_meta margin top -31px) and to hide the secondary menu altogether when the screen size becomes 767px and narrower.
FYI, in Header settings, Header Social Icons is set to “No social icons.” I’ve tried changing to show icons in all 3 choices and it doesn’t have any effect.
I’m including the URL to the dev site in the private content section along with temp WordPress admin access credentials.
Here is a screenshot mock up of what we hope to accomplish: https://ibb.co/93gwJQ1
/* ----- BEGIN SECONDARY (SUB MENU) MENU CSS ----- */ #header_meta { margin-top: -31px; } @media only screen and (max-width: 767px) { #header_meta { display: none; } } nav.sub_menu { position: relative; top: 60px; left: -44px; } .html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 172px; } .sub_menu>ul>li>a, .sub_menu>div>ul>li>a { font-size: 14px; text-decoration: none; font-weight: bold; padding: 7px 0; font-family: 'metropolisblack', Helvetica, Arial, sans-serif !important; } .sub_menu li { float: left; position: relative; padding: 0 6px; border-right-style: solid; border-right-width: 1px; line-height: 10px; } /* removes dividers between menu items */ .sub_menu li { float: left; position: relative; padding: 0 6px; border-right-style: solid; border-right-width: 0px; /* 1px */ line-height: 10px; } /* ----- END SECONDARY (SUB MENU) MENU CSS ----- */In reply to: image caption is not responsive
Hi Enfold Support,
Thanks for all your help with enfold theme support. You’re what makes this theme so popular. Regarding image caption text being response… is there a way to have the text fit the area of the image regardless of the screen size? You’ve added the responsive feature for other elements (example: special headers) but with image caption overlays you have to use media queries for pretty much each screen size. Is there a way to have the font size adjust to always fit within the text overlay container and never be too big or small for the image area without media queries?
Thanks again for all your great work.
Best,
EricThis placeholder image – which is not a real image – appears at the end of every blog post. How do I get rid of it?
[av_image src='https://www.grovertbbq.com/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/images/placeholder.jpg' align='center' styling='' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-2y5mkt'][/av_image]
Here is a link to an example: https://www.grovertbbq.com/2020/01/23/early-bird-specials-january-27/
Thank you!
Hi.
I have managed to get the result i wanted, but am quite confident the way i have hacked it together is not the best way.
I have also tried to take out parts of the code i don’t think i need but then it does not work.
I am wanting to style the portfolio spring menu and have used the info from the support forum, i have tried my best!
Using this code:
/* create portfolio sort items to look like a button menu */
I am not sure i need this first bit of code but when i remove it the boarder round the buttons disappears?? I know something is wrong with the code as I don’t need the font-size: 24px as it has no effect, but if i delete it then the boarder disappears as said.
#js_sort_items {
font-size: 24px;
}/* create each none active item as a button */
#js_sort_items a {
background-color: #ffffff;
padding: 12px 16px 10px;
border: 1px #00aa67 solid;
}/* create each active item as a highlighted button */
#js_sort_items .active_sort {
background-color: #4ba956
;
color: #ffffff!important;
padding: 12px 16px 10px;
text-decoration: none;
}/* add some space between the new button */
#js_sort_items a {
margin-right: 10px!important;
}/* remove the seperator */
.text-sep {
display: none!important;
}/* optional centre the buttons */
.avia-fullwidth-portfolio #js_sort_items {
text-align: center;
}/* Portfolio sort menu font size and weight*/
.av-masonry-sort a { font-size: 12px; }
#js_sort_items .inner_sort_button span, #js_sort_items .text-sep {
font-size: 18px; font-weight: 500;
}All the code is in the Quick.css
Finally I would also prefer to be able to use a class to style just one of the portfolio sort menus, rather than effect the whole site.
Doing it the way I have obviously effects the whole site, can you please advise on how to make it work by using a class, an example would be brilliant.
In reply to: Fullwidth Sub menu styling
Hi lmzucker432,
The option with styling it is limited, the menu colors is chosen from the colors in Main Content, Alternate Content, Logo Area, etc.
If you need some custom CSS to help with it, then we’ll provide it, just give us the values for the font size, color and hover color.Best regards,
NikkoIn reply to: WooCommerce Related Products
Hey KeyshaunSmith,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.woocommerce .related.products ul.products li.product .woocommerce-loop-product__title { font-size: 28px !important; }If you need further assistance please let us know.
Best regards,
VictoriaHey dweddell,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
/* Header in sidebar to turn to burger on iPad 768px */ @media only screen and (max-width: 990px) { .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img{opacity:1} .responsive #top .av_header_transparency .logo img.alternate{display:none;} .responsive #top #wrap_all #header {position: relative; width:100%; float:none; height:auto; margin:0 !important; opacity: 1; min-height:0;} .responsive #top #main {padding-top:0 !important; margin:0;} .responsive #top #main .container_wrap:first-child{ border-top:none; } .responsive.html_header_top.html_logo_center .logo { left: 0%; -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); margin:0; } .responsive .phone-info{float:none; width:100%; clear:both; text-align: center;} .responsive .phone-info span{margin:0;padding:0; border:none;} .responsive.html_header_top #header_main .social_bookmarks , .responsive.html_top_nav_header #top .social_bookmarks { width:auto; margin-top:-16px; } .responsive #top .logo{position: static; display:table; height:80px !important; float:none; padding:0; border:none; width:80%; } .responsive .logo a{display:table-cell; vertical-align: middle;} .responsive .logo img{height:auto !important; width:auto; max-width: 100%; display: block; max-height: 80px;} .responsive #header_main .container{height:auto !important; } .responsive #top .header_bg { opacity: 1; filter: alpha(opacity=1); } .responsive.social_header .phone-info {text-align: center; float:none; clear:both; margin:0; padding:0;} .responsive.social_header .phone-info span{border:none; width:100%; text-align: center; float:none; clear:both; margin:0; padding:0;} .responsive #header_meta .social_bookmarks li{ border-style:solid; border-width:1px; margin-bottom:-1px; margin-left:-1px;} .responsive #top #header_meta .social_bookmarks li:last-child{border-right-style: solid; border-right-width: 1px;} .responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul{float:none; width:100%; text-align: center; margin:0 auto; position: static;} .responsive #header .social_bookmarks{padding-bottom:2px; width:100%; text-align: center; height:auto; line-height: 0.8em; margin:0;} .responsive #header_meta .sub_menu>ul>li{float:none; display: inline-block; padding: 0 10px;} .responsive #header .social_bookmarks li{float:none; display: inline-block;} .responsive.bottom_nav_header #header_main .social_bookmarks{ position: relative; top: 0; right: 0; margin: 10px auto; clear:both;} .responsive.bottom_nav_header.social_header .main_menu>div{height:auto;} .responsive .logo img{margin:0;} .responsive.html_header_sidebar #top #header .social_bookmarks{display:none;} .responsive body.boxed#top, .responsive.html_boxed.html_header_sticky #top #header{max-width: 100%;} .responsive.html_header_transparency #top .avia-builder-el-0 .container, .responsive.html_header_transparency #top .avia-builder-el-0 .slideshow_inner_caption{padding-top:0;} .responsive #top .av_phone_active_right .phone-info.with_nav span{border:none;} .responsive #top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a, .responsive #top #wrap_all .av_header_transparency .sub_menu > ul > li > a, .responsive #top .av_header_transparency #header_main_alternate, .responsive .av_header_transparency #header_main .social_bookmarks li a, .responsive #top #wrap_all .av_header_transparency .phone-info.with_nav span, .responsive #top .av_header_transparency #header_meta, .responsive #top .av_header_transparency #header_meta li, .responsive #top #header_meta .social_bookmarks li a{ color:inherit; border-color: inherit; background: inherit;} .responsive.html_top_nav_header .av-logo-container{height:auto;} .responsive.html_top_nav_header .av-section-bottom-logo{border-bottom-style: solid; border-bottom-width: 1px;} .responsive .av-burger-menu-main{display: block;} .responsive #top #wrap_all .main_menu{top:0; height:80px; left:auto; right:0; display: block; position: absolute;} .responsive .main_menu ul:first-child > li a { height: 80px; line-height: 80px;} .responsive #top .av-main-nav .menu-item{display:none;} .responsive #top .av-main-nav .menu-item-avia-special{display:block;} .responsive #top #wrap_all .menu-item-search-dropdown > a { font-size: 24px; } .responsive #header_main_alternate{display:none;} .responsive #top #header .social_bookmarks{display:none;} .responsive #top #header .main_menu .social_bookmarks{display:block; position: relative; margin-top: -15px;} .responsive #top .av-logo-container .avia-menu{height:100%;} .responsive #top .av-logo-container .avia-menu > li > a{line-height: 80px;} .responsive #top #main .av-logo-container .main_menu{display:block;} .responsive #top #main .av-logo-container .social_bookmarks{display:none;} .responsive #top #main .av-logo-container .main_menu .social_bookmarks{display:block; position: relative;} .responsive #top #main .av-logo-container .main_menu{display:block;} .responsive #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive #top #wrap_all .av-logo-container {height:80px; line-height:80px; } .responsive #top #wrap_all .av-logo-container {padding:0;} .responsive #top #header_main > .container .main_menu .av-main-nav > li > a{ min-width: 0; padding:0 0 0 20px; margin:0; border-style: none; border-width: 0; } .responsive #top .av_seperator_big_border .avia-menu.av_menu_icon_beside{border-right-style: solid; border-right-width: 1px; padding-right: 25px;} .responsive #top #header .av-main-nav > li > a, .responsive #top #header .av-main-nav > li > a:hover{ background:transparent; color: inherit; } .responsive.html_top_nav_header .av-logo-container .inner-container{overflow: visible;} .html_header_sidebar #header .container { width: 90%; } }If you need further assistance please let us know.
Best regards,
VictoriaIn reply to: Update theme
Hi Bob,
I can’t see any gaps between background images on my end, please provide screenshots or a way to reproduce the problem.
Menu: you can change that under Enfold->Advanced Styling.
Buttons: you can change the colours in the Styling tab in the element options. If you want to apply border radius to the buttons then you assign a class to the elements in question (for instance border-radius) by activating that option under Enfold->Layout builder, then add this to Quick CSS:
.border-radius { border-radius: 5px; }Contact form:
Bigger font using this CSS:
.home #element_avia_1_1 span { font-size: 18px; }Select for the elements not to validate in the theme options if you want to remove the asterisk.
Label for math problem:
.home #element_avia_6_1 label { color: #000; }Best regards,
RikardTopic: Fullwidth Sub menu styling
How do I change the color of the Fullwidth Sub menu styling ~ for example. Font size, idle color, hover color
Hi,
@wabrahams: This is the Styling > Font Sizes panel.Screeshot: https://imgur.com/a/IOPJ7JN
You can specify different font sizes for each device or screen width by clicking their respective icons.
Best regards,
IsmaelIn reply to: Text Size – Contact Form Response
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
CSS Snippet:
h3.avia-form-success { font-size: 14px; }Best regards,
YigitIn reply to: LayerSlider Text Background Not Responsive
Hi,
Thank you for the info.
The headlines don’t respond properly because you specify a Styles > Text | Font & Style > Min. font size on mobile and default view. We removed the minimum font size value of the headline in the first slide.
Best regards,
IsmaelIn reply to: Adjusting the font size using the magazine module?
Hey hylandgraphics,
You can remove the code added before and use this one:
#top .av-magazine .av-magazine-time.updated { font-size:20px; } #top .av-magazine h3.av-magazine-title.entry-title { font-size:16px; }If you need further assistance please let us know.
Best regards,
VictoriaIn reply to: Adjusting the font size using the magazine module?
Hey hylandgraphics,
You can remove the code added before and use this one:
#top .av-magazine .av-magazine-time.updated { font-size:20px; } #top .av-magazine h3.av-magazine-title.entry-title { font-size:16px; }If you need further assistance please let us know.
Best regards,
VictoriaIn reply to: Magazine Entry Font Size
Hey creatiffco,
Please try this instead:
.av-magazine-content-wrap h3.av-magazine-title a { font-size: 14px; }Best regards,
RikardHello,
I had a thread about this before and I was given the below CSS to fix it but I am also adding other magazine modules to the site on various pages to pull from different categories and the styling is not adjusting there? What do I need to do to adjust them on other places within the site as well. Examples in private data….
#av-magazine-1 .av-magazine-time.updated{
font-size:20px!important;
}#av-magazine-1 h3.av-magazine-title.entry-title{
font-size:16px!important;
}
