Hey Peter,
Thanks for contacting us!
You can go to Enfold theme options > General Styling > Typography > Default Content Font Size or you can go to Enfold theme options > Advanced Styling and edit Body to adjust font size :)
Best regards,
Yigit
Hi folks. I’ve seent that you can easily add a button to an Easy Slider by pasting the shortcut code to the “Caption text” section of the slide.
I’ve been using this shortcode that I’ve found in one of your examples:
[av_button label='Click me' link='manually,http://' link_target='' size='small' position='center' icon_select='yes' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff']
if I add more than one in the same Caption text field, the buttons are shown one on top of the other in a column, all aligned to the left of the slide.
See the screenshot: https://imgur.com/xvzBk0b
How can I have the buttons aligned side by side, in a row, with some space between them, and all CENTERED horizontally (and if possible also VERTICALLY) insode the slide?
Thanks in advance!
Bye,
A.-
Hi,
Thank you for the update.
To make the default thumbnails and copy larger in the magazine element, please try the following css code.
.av-magazine-thumbnail {
width: 180px;
min-height: 180px;
}
.av-magazine-thumbnail img {
height: 180px;
width: 180px;
}
.av-magazine .av-magazine-content-wrap .av-magazine-title {
font-size: 2rem;
line-height: 1.4em;
}
.av-magazine .av-magazine-content {
font-size: 1rem;
line-height: 1.3em;
}
This code will increase the font size of the copy and set the width and height of the thumbnails to 180px. You can adjust these values as needed to achieve the desired size for the thumbnails and content.
I hope this helps! Let me know if you have any other questions or if you need further assistance.
Best regards,
Ismael
Hi,
Thank you for the inquiry.
To change the weight and color of the text in the recent portfolio sidebar widget, you can try using the following CSS:
#top .main_color strong.news-headline {
color: red !important;
font-weight: 400;
font-size: 0.7rem;
}
Note that the !important keyword is used to ensure that these styles take precedence over any other styles that might be applied to the element.
It’s also possible that there might be other styles that are conflicting with the styles you have defined. In this case, you might need to use more specific selectors to target the element you want to style.
For example, you could try using a combination of the element type, class, and/or ID to create a more specific selector. This can help to ensure that your styles are applied correctly.
I hope this helps! Let me know if you have any other questions or if there is anything else I can assist with.
Best regards,
Ismael
/*sidebar text sizes*/
.news-link { font-size: 14px; font-weight: 100 !important; }
Sorry actually this was the successful code to change the size.
On this page fr instance:
https://asiamluxe.com/portfolio-item/love-at-first-bite-how-the-love-for-south-vietnamese-cuisine-inspired-madame-vo-eateries-in-nyc/
I want to change the weight, color and size of the text in the recent portfolio sidebar widget.
In my attempt the size is working, for the weight not so. Also tried to color the text here but to no avail. Something overriding the css I suppose
/*sidebar text sizes*/
.sidebar .widgettitle { font-size: 14px; font-weight: 100 !important; }
Do you have a css hack for me?
Thanks
Hey schweg33,
Thank you for the inquiry.
Are you referring to the alignment of the privacy buttons? If you want to align the buttons in a single row, please add this css code.
@media only screen and (max-width: 480px) {
.responsive .avia-cookie-consent .container a {
font-size: 0.7em;
padding: 0.8em 1em;
}
.responsive .avia-cookie-consent p.avia_cookie_text {
margin-bottom: 1em;
}
}
Best regards,
Ismael
Hi,
Thanks for the link to your site, for your homepage slider I adjusted the font sizes for the mobile size so the text will fit on the screen better:

and I add this css to make the mobile slide image a little bigger to show your text better:
@media only screen and (max-width: 767px) {
#top.home #full_slider_1 .avia-slideshow-inner,
#top.home #full_slider_1 .avia-slideshow-inner img {
height: 420px;
}
}
please clear your browser cache and check and see the screenshot in the Private Content area.
Best regards,
Mike
Hi
I am using the Enfold Band theme template. The header/title seems to resize perfectly for desktop & tablet, but for the phone, it is cut off no matter what I do.
Everything below that seems to be fine.
I thought at first it was because I had tried a custom font, but even with default Arial, I have the same result.
Please advise.
Thanks,
John
Hi Nic_007,
Can you try adding this CSS code in Enfold > General Styling > Quick CSS:
@media only screen and (max-width:767px) {
#av_section_1 .av-special-heading-tag {
font-size: 32px !important;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
background-color: transparent;
}
}
Best regards,
Nikko
Hi Patrick,
Thanks for pointing it out to us, the documentation should be fixed shortly.
As for the CSS code, you can use this:
/*------------------------------------------------
------------------------------------------------
Accordion style 2
------------------------------------------------
-------------------------------------------------*/
/* Tab title style */
.av-accordion-style-2 .toggler {
font-size: 18px;
font-weight: bolder;
padding: 10px 15px;
text-transform: uppercase;
margin: 2px 0;
background: #B5DCFD;
}
.av-accordion-style-2 .activeTitle.toggler:hover,
.av-accordion-style-2 .activeTitle.toggler,
.av-accordion-style-2 .toggler:hover {
color:#FFF;
background: #1869FF;
}
/* Extra content in tab title */
.av-accordion-style-2 .toggler span.extra-content {
display: block;
clear: both;
font-size: 13px;
line-height: 1.5em;
font-weight: lighter;
opacity: .65;
padding: 5px 0;
text-transform: none;
}
/* Accordion icon */
.av-accordion-style-2 .toggle_icon:before {
position: absolute;
font-size: 18px;
top:50%;
transform: translateY(-50%);
left: 0;
content:"\e875";
font-family: 'entypo-fontello';
line-height: 0;
}
/* Active tab icon */
.av-accordion-style-2 .activeTitle .toggle_icon:before {
content:"\e873";
font-family: 'entypo-fontello';
}
/* Hide default icon */
.av-accordion-style-2 .toggle_icon {
border:none;
position: absolute;
left: auto;
right: 20px;
}
.av-accordion-style-2 .toggle_icon .vert_icon,
.av-accordion-style-2 .toggle_icon .hor_icon {
display:none;
}
/*Toggle content area */
.av-accordion-style-2 .toggle_content {
background: #ced7df;
}
Hope it helps.
Best regards,
Nikko
Hi woogie07,
Please try to add this CSS code:
@media only screen and (max-width:767px) {
#top #wrap_all .avia-slideshow .av-slideshow-caption .avia-caption-title {
font-size: 36px !important;
}
}
Just change the font size as you see fit.
Best regards,
Nikko
Hi,
Please try this css to change the size of the date:
#top #wrap_all .all_colors h2.av-milestone-date {
font-size: 23px;
}
adjust the number to suit.
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Hi,
I’m trying to customize the Tab section on a website using the instructions from the Enfold documentation at https://kriesi.at/documentation/enfold/tab-sections/#toggle-id-1
I would like the tab section to appear similar to what is shown on https://kriesi.at/themes/enfold-2017/elements/tab-section/ A screenshot of what I’m trying to achieve can be seen at https://snipboard.io/KrHgwW.jpg
The problem I’m having is when I use the CSS from the Tabs Section documentation (shown below) it doesn’t work for me. I’m using Enfold v 5.3 with PHP 8.0. and only a security plugin is enabled at this time. A link to the page is in the private content. Thank you.
/*—————————————-
// Tabs Element Styling
//————————————–*/
/* Tab icon size */
span.av-tab-section-icon:before {
font-size: 76px!important;
}
/* Tabs */
#top .tabcontainer .tab {
background: #27618d;
color: #eeeeee;
border: none!important;
}
#top .tabcontainer .tab:hover {
color: #ffffff!important;
}
/* Active tab */
#top .tabcontainer .active_tab {
background: #ffffff!important;
color: #000;
border: none!important;
}
/*Active tab on hover*/
#top .tabcontainer .tab.active_tab:hover {
color: inherit!important;
}
/* tab content */
#top .tabcontainer .tab_content.active_tab_content {
background: #ffffff!important;/*border:none!important;*/
}
Hi Marcus,
Thanks for contacting us!
I think in your case using “Phone Number Or Small Info Text” field to add your text and number would be better.
1- Please add following code to Quick CSS field in Enfold theme options > General Styling tab
.phone-info {
font-size: 14px;
}
2- Please insert your phone number as following
<a href="tel:0412121212">tel:0412121212</a>
Regards,
Yigit
hi rikard,
found it, but no option to change the font itself. also when i change the font size and color – nothing happens…
Thanks Ismael for the code. It already looks better.
I would like to make the font-size of the years smaller.

Thanks in advance.
Hey GWS,
Thank you for the inquiry.
Did you add the following code in the functions.php file?
//-------------------------------
// function - Text Logos
//-------------------------------
add_filter('avf_logo_final_output', 'avf_text_logo_final_output');
function avf_text_logo_final_output($logo) {
$link = apply_filters('avf_logo_link', home_url('/'));
$logotext = "LOGO TEXT";
$subtext = "A CUSTOM SUBTEXT";
$subtext = "<span class='subtext'>$subtext</span>";
$logo = "<span class='logo'><h1><a href='".$link."'>".$logotext.$subtext."</a></h1></span>";
return $logo;
}
You can add this code in the Quick CSS field to adjust the style of the text logo and subtext.
/* Text logo styling */
#top .logo,
#top .logo a {
overflow: visible;
}
#top .logo {
background: gold;
display: flex;
align-items: center;
padding: 15px;
}
#top .logo .subtext {
font-size: 18px;
color: #be0027;
position: absolute;
width: 100%;
left: 0;
top: 25px;
}
/* Hide subtext on scroll */
#header.header-scrolled-full .subtext {
display: none;
}
Best regards,
Ismael
Hey Alfredo,
Thank you for the inquiry.
You can replace the code above with the following css.
.special_amp {
font-size: 1em;
font-family: 'Heebo', Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: 300;
}
Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding modification.
Best regards,
Ismael
Hi,
We are trying to replace the logo with the company name instead. We tried using the instructions in the documentation: https://kriesi.at/documentation/enfold/logo/ and also from this 2018 support topic: https://kriesi.at/support/topic/replacing-logo-with-text-and-then-control-font-size-and-add-tagline/ but both caused critical errors on the site. It is the only code we had placed in /child-theme/functions.php.
Can you confirm if the instructions in documentation are up-to-date, or provide new details for doing this. Please see the private content for the website URL. There is currently a ‘logo’ of the company name but it is not good quality, which is why we want to use the text instead. Thanks.
Hello guys,
I found this code in another thread. The ampersand has changed. But it’s still italic and regular or bold. I want it to be light, just as the other words in the sentence.
/*Change fancy ampersand to normal one*/
.special_amp {
font-family: initial !important;
font-size: inherit !important;
color: inherit !important
}
Thanks in advance.
Hello guys,
I’m trying to adjust the colors and font-sizes of the timeline. Using the Avia Layout Builder. But no matter what I do, nothing changes. Can you see for me what’s going on? Maybe I used some code in Quick CSS that overrides something?
Thanks in advance.
Credentials and link to the page in private content.
Hey woogie07,
Thanks for the link to your site, typically if you wanted a call button you would add the tel: link to your menu item and use the button option, but I see that you have a phone number in your topbar and the topbar shows on mobile so would you like a call button there?
If so you could use the shortcode wand to create your button and use it to create a call button shortcode that you can add anywhere to display it, such as the Enfold Theme Options ▸ Header ▸ Extra Elements ▸ Phone Number or small info text field.
So to do this first open a new post and in the block editor select the classic block and in the toolbar select the shortcode wand ▸ Button:

then the standard Advanced Layout Builder button element will open for you to design the button, after you build your button and save the button shortcode will show for you to copy

Then add your button shortcode to this function:
function call_button_shortcode( ){
echo do_shortcode(" button-shortcode-here ");
}
add_shortcode( 'call_button', 'call_button_shortcode' );
for my example I used this code:
function call_button_shortcode( ){
echo do_shortcode("[av_button label='Call Us' icon_select='yes' icon='ue854' font='entypo-fontello' link='manually,tel://555-555-5555' link_target='_blank' size='medium' position='right' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' 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='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' 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='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']");
}
add_shortcode( 'call_button', 'call_button_shortcode' );
Then add this to your child theme functions.php, and add the call button shortcode [call_button] to your Phone Number Or Small Info Text field:

This is the result for desktop and mobile:

You can also add this call button shortcode in other places like widgets and your footer.
Best regards,
Mike
Hi,
Thanks for your patience and the link to your site please try this css:
@media only screen and (max-width: 450px) {
#top #wrap_all .all_colors h2.av-milestone-date {
font-size: 35px;
line-height: 1em;
}
#top h2.av-milestone-date strong {
font-size: 20px;
}
}
After applying the css, please clear your browser cache and check.
this is the expected results:

Best regards,
Mike
Hi,
You are welcome, Philipp!
Please add following code to Quick CSS as well and adjust it as needed
#top .phone-info {
font-size: 14px;
}
#top .sub_menu {
font-size: 14px;
}
Best regards,
Yigit
Thanks a lot Yigit! Now its perfectly centered!
The only thing left is that the font size of the menu and the extra information could be a bit larger. Is it possible?
1000 thanks in advance!
Best regards, Philipp
Hi Yigit,
Thanks! Question 2 and 3 are solved. Question 1 partially. I managed to change the icon (Read more link, Privacy Policy and Sitemap). But the other arrows are not changing (Onze softwareoplossingen and Over Emanon). I tried to add a code (content: “\E802”;
font-family: ‘friendly’;) to:
.red-arrow-title .av-icon-char {
color: #EB5847;
font-size: 16px;
position: absolute;
margin-left: 5px;
}
Didn’t work.
Thanks in advance for your help.
Hi,
wie kann ich einzelne Elemente verändern und wo setze ich dann den Code rein?
Wie zum Beispiel
Es funktioniert mit diesem Code. Danke
.js_active .tab {
font-size: 14px;
}
(gefunden bei Enfold Support) zum Ändern der Schriftgröße des Reiters.
Früher funktionierte das mit Quick Css, aber für die Anpassung von Elementen musste man irgendeinen Code einfügen ins Theme, um diese anpassungen machen zu können und so dass dort enstprechende Kästchen neben den Elementen sichtbar werden. Wie ist die Vorgehensweise?
Beste Grüße
Hey Jaro,
Please try the following in Quick CSS under Enfold->General Styling:
nav.sub_menu_socket ul a {
font-size: 16px;
}
Best regards,
Rikard
Hi,
Thank you for your patience and the login I changed the h3.team-member-name css to include float:left; and added css to remove the float when it is a popup:
h3.team-member-name {
font-size: 18px;
float: left;
}
.mfp-content h3.team-member-name {
float: none;
}
so now before popup it is like this:

and when poped up it is like this:

please clear your browser cache and check.
Best regards,
Mike