Hi,

You can open a new thread here: https://kriesi.at/support/forum/enfold/#new-post

There is no option for this by default, but you can apply a custom css class to the Special Heading element (e.g “av-custom-gradient-text”), then add the following css code:

.av-custom-gradient-text {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  color: transparent;
}

If you have more questions, please feel free to open another thread using the form above.

Best regards,
Ismael

Hi,

Try this CSS as well:

@media only screen and (max-width: 900px) {
#colum_tabla td.avia-highlight-col {
  width: 110px;
}
#colum_tabla td {
  font-size: 15px;
}
}

Best regards,
Rikard

Hey koomo,

You can set different font sizes for different screen sizes in the Styling tab in the element options.

Best regards,
Rikard

Hi,

Thank you for the inquiry.

Did you add this css code? It seems to be the reason why the font size of the post title is much larger on the other site.

.html_modern-blog #top .post-entry .post-title, .html_modern-blog .avia-content-slider .slide-entry-title {
    font-size: 2em;
    text-align: left;
    letter-spacing: 1px;
}

Also, make sure that the Enfold > Blog Layout > Blog Styling and Blog Layout settings are the same on both installations.

Best regards,
Ismael

Hi,
Try changing the height and font size to suit:

Best regards,
Mike

Hi,
I believe that I found the error in the css, this instead:

#iconstyle .iconbox_icon.avia-svg-icon img[is-svg-img=true],#iconstyle .iconbox_icon.avia-svg-icon svg:first-child {
    height: 0.3em;
    width: 0.3em;
    top: -10px;
    position: relative;
}

#top #iconstyle .avia-font-entypo-fontello, body #iconstyle .avia-font-entypo-fontello, html body #iconstyle [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
    line-height: .3em;
    display: block;
    top: 0;
    position: relative;
    font-size: 0.3em;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Try adjusting the size like this:

#iconstyle .iconbox_icon.avia-svg-icon img[is-svg-img=true], .iconbox_icon.avia-svg-icon svg:first-child {
    height: 0.3em;
    width: 0.3em;
    top: -10px;
    position: relative;
}

#top #iconstyle .avia-font-entypo-fontello, body #iconstyle .avia-font-entypo-fontello, html body #iconstyle [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
    line-height: .3em;
    display: block;
    top: 0;
    position: relative;
    font-size: 0.3em;
}

Best regards,
Mike

Hi,
It looks like your “custom class” iconstyle is actually a ID, perhaps you added it to the wrong field in the developer tab.
To correct the above css, try this:

#iconstyle .iconbox_icon.avia-svg-icon img[is-svg-img=true], .iconbox_icon.avia-svg-icon svg:first-child {
    height: 0.5em;
    width: 0.5em;
    top: -8px;
    position: relative;
}

#top #iconstyle .avia-font-entypo-fontello, body #iconstyle .avia-font-entypo-fontello, html body #iconstyle [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
    line-height: 1.5em;
    display: block;
    top: 0;
    position: relative;
    font-size: 0.6em;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thank you for the link.

You can use this css code to adjust the style of the checkout form fields.

.main_color div.product .woocommerce-tabs ul.tabs li.active a, .main_color .cart_dropdown .dropdown_widget .widget_shopping_cart_content, .main_color .cart_dropdown_link, .main_color .inner_product_header, .main_color .avia-arrow, #top .main_color .variations select, #top .main_color .variations input, #top .main_color #reviews input[type='text'], #top .main_color #reviews input[type='email'], .main_color #reviews .comment-text, .main_color #reviews #comment, .main_color .single-product-main-image .images a, #top .main_color .shop_table.cart .input-text, #top .main_color form.login .input-text, #top .main_color form.register .input-text, .main_color .chosen-container-single .chosen-search, .main_color .products .product-category h3:before, #top .main_color .quantity input.qty {
    background-color: #4f79e3;
}

#top div.woocommerce-message {
    border-color: #acb6ce;
    background-color: #4f79e3;
    color: #ffffff;
}

#top label span, #top legend span {
    font-weight: 400;
    font-size: 13px;
    color: #ffffff;
}

Best regards,
Ismael

Hey Caitlin,

Thank you for the inquiry.

Before proceeding, we kindly ask you to register on the forum using the purchase code associated with your theme license. Please use the following link: https://kriesi.at/support/register/

Once registered, you can open a new thread using the form here: https://kriesi.at/support/forum/enfold/#new-post

To add a button to the header widget area, you can use the Text widget, then add this shortcode:

[av_button label=' (Email address hidden if logged out) ' icon_select='yes' icon='mail' font='svg_entypo-fontello' title_attr='' button_type='' link='manually,mailto: (Email address hidden if logged out) ' link_dynamic='' link_target='' download_file='https://' attachment='' attachment_size='' downloaded_file_name='' size='small' position='center' label_display='' 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='av-me0reo0x' sc_version='1.0' admin_preview_bg='']

You can also use this html:

<div class="avia-button-wrap av-me0reo0x-af6ff2d8373030c9c60f62b386b56008-wrap avia-button-center  avia-builder-el-0  el_before_av_slideshow_accordion  avia-builder-el-no-sibling "><a href="mailto: (Email address hidden if logged out) " class="avia-button av-me0reo0x-af6ff2d8373030c9c60f62b386b56008 av-link-btn avia-icon_select-yes-left-icon avia-size-small avia-position-center avia-color-theme-color" aria-label=" (Email address hidden if logged out) "><span class="avia_button_icon avia_button_icon_left avia-svg-icon avia-font-svg_entypo-fontello" data-av_svg_icon="mail" data-av_iconset="svg_entypo-fontello"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="29" height="32" viewBox="0 0 29 32" preserveAspectRatio="xMidYMid meet" aria-labelledby="av-svg-title-4" aria-describedby="av-svg-desc-4" role="graphics-symbol">
<title id="av-svg-title-4">Mail</title>
<desc id="av-svg-desc-4">Mail</desc>
<path d="M0.96 8.448q-1.024-0.576-0.896-1.28 0.064-0.448 0.832-0.448h27.072q1.216 0 0.64 1.024-0.256 0.448-0.768 0.704-0.448 0.192-6.144 3.264t-5.824 3.136q-0.512 0.32-1.472 0.32-0.896 0-1.472-0.32-0.128-0.064-5.824-3.136t-6.144-3.264zM28.16 11.648q0.64-0.32 0.64 0.32v11.776q0 0.512-0.544 1.024t-1.056 0.512h-25.6q-0.512 0-1.056-0.512t-0.544-1.024v-11.776q0-0.64 0.64-0.32l12.288 6.4q0.576 0.32 1.472 0.32t1.472-0.32z"></path>
</svg></span><span class="avia_iconbox_title"> (Email address hidden if logged out) </span></a></div>

Best regards,
Ismael

Hey vrhgmt744p,

Thank you for the inquiry.

You can use the following css code to adjust the size of the icon inside the iconbox.

.iconbox_icon.avia-svg-icon img[is-svg-img=true], .iconbox_icon.avia-svg-icon svg:first-child {
    height: 0.5em;
    width: 0.5em;
    top: -8px;
    position: relative;
}

#top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
    line-height: 1.5em;
    display: block;
    top: 0;
    position: relative;
    font-size: 0.6em;
}

If you need this applied to specific icons, try adding a custom css class to the element. Please refer to the documentation below.

— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Best regards,
Ismael

Hey icarogioiosi,

Thank you for the inquiry.

You can add this css code to move the title to the right of the image, position it at the top, reduce the font size, remove the borders, and add space below each portfolio entry. Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings, then purge the cache after adding the modification.

#top .isotope-item.special_av_fullwidth .inner-entry {
    text-align: left;
    display: flex;
    flex-direction: row-reverse;
}

#top .grid-entry .inner-entry {
    box-shadow: none;
}

#top .isotope-item.grid-entry {
    margin-bottom: 20px;
}

#top .isotope-item.special_av_fullwidth .av_table_col .entry-title {
    margin: 0 0 20px;
    font-size: 16px;
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.phone-info .avia-icon-pos-left {
    float: none;
    display: inline;
}
.phone-info .avia-icon-pos-left .av-icon-char {
	font-size: 14px;
	line-height: 18px;
}
.phone-info .avia-icon-pos-left.av_font_icon.av-mds9wcyi-0057de6c5f2e63955f80107ffd4df8b8 {
	 margin-left: 10px;
}
#top .phone-info .avia-svg-icon.avia-font-svg_entypo-fontello svg:first-child {
    fill: #fff;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey vrhgmt744p,

Thank you for the inquiry.

You can enter these shortcodes in the phone info field.

Phone:

[av_font_icon icon='phone' font='svg_entypo-fontello' style='' caption='' size='40px' position='left' color='' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' av_uid='av-mds9v1ky' sc_version='1.0' admin_preview_bg=''][/av_font_icon]

Email:

[av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' size='40px' position='left' color='' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' av_uid='av-mds9wcyi' sc_version='1.0' admin_preview_bg=''][/av_font_icon]

Let us know the result.

Best regards,
Ismael

Hey Tilman,

Thank you for the inquiry.

You can add the same html in the phone info field.

<div class="top-bar-content">
  <span class="content">
    <i class="fa rt-icon-placeholder2"></i> Süderquerweg 651 • 21037 Hamburg
  </span>
  <span class="content">
    <i class="fa rt-icon-telephone"></i>
    <a href="tel:+49407375020">+49 40 737 50 20</a>
  </span>
  <span class="content">
    <i class="fa rt-icon-3-time"></i> Mo. bis Fr. 7:15-18:00
  </span></div>

Then, add this css code to adjust the layout of the content:

.top-bar-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px; 
}

.top-bar-content .content {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px; 
}

.top-bar-content i {
  font-family: "FontAwesome";
  font-style: normal;
  font-size: 16px; 
  display: inline-block;
}

You may need to install the FontAwesome plugin to properly display the icons.

— https://wordpress.org/plugins/font-awesome/

Best regards,
Ismael