Hi,

.post-entry a {
font-size: 12px;
font-weight: normal;
}

Try it like that and let us know if it works properly

Best regards,
Basilis

Hey xandria,

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

.html_elegant-blog #top .post-entry .post-title, 
.html_elegant-blog .avia-content-slider .slide-entry-title {
  text-transform: none;
}
.av-masonry-entry .av-masonry-entry-title {
  font-size: 18px;
  font-weight: bold;
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi dondela,

Please, remove that code and add this one, the curly was in the wrong place.

@media only screen and (max-width: 767px) {
  #top .av-large-testimonial-slider .avia-testimonial-meta-mini {
      padding-top: 185px;
  }
  .responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0px 35px;
  }
  #top #wrap_all .all_colors #after_section_5 h1 {
    font-size: 24px;
  }
}

If you need further assistance please let us know.
Best regards,
Victoria

Hi schnippel,

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 until 1500px*/
@media only screen and (min-width: 990px) and (max-width: 1500px) {
  
        .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;}
        
        
      /*new mobile*/
        .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,
Victoria

Hi dondela,

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

@media only screen and (max-width: 767px) {
  #top .av-large-testimonial-slider .avia-testimonial-meta-mini {
      padding-top: 185px;
  }
}
.responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0px 35px;
}
  #top #wrap_all .all_colors #after_section_5 h1 {
    font-size: 24px;
  }

If you need further assistance please let us know.

Best regards,
Victoria

Hi dondela,

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

@media only screen and (max-width: 767px) {
  #top .av-large-testimonial-slider .avia-testimonial-meta-mini {
      padding-top: 185px;
  }
}
.responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0px 35px;
}
  #top #wrap_all .all_colors #after_section_5 h1 {
    font-size: 24px;
  }

If you need further assistance please let us know.

Best regards,
Victoria

Hey DROR,

You can’t add an icon in the Special Heading Element but you imitate the Special Heading using a Code Block, with a fontello icon:

<div class="av-special-heading av-special-heading-h3">
<span class="av-icon-char av-icon-char-custom" style="font-size:20px;line-height:20px;width:20px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>
<h3 class="av-special-heading-tag " itemprop="headline">The Title</h3>
<div class="special-heading-border"><div class="special-heading-inner-border"></div></div>
</div>

just replace The Title, with the title you want to use, then on your Quick CSS section, located in Enfold > General Styling, add this css code:

#top span.av-icon-char.av-icon-char-custom {
    float: left;
    margin-right: 4px;
}

#top span.av-icon-char.av-icon-char-custom:before {
    content: "\e836" !important;
}

just replace content with the right icon. Hope it helps :)

Best regards,
Nikko

Hey Serge,

To upload the custom fonts manually and add them to frontend elements using CSS code please follow the below steps:

1. Generate the webfont kit from fontsquirrel
2. Extract The files and copy the @font css code from stylesheet.css to Enfold child theme styles.css

@font-face {
    font-family: 'YOUR-FONT-NAME';
    src: url('YOUR-FONT-NAME.woff2') format('woff2'),
         url('YOUR-FONT-NAME.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

3. Copy the woff and other font files to the same folder as the child theme styles folder wp-content\themes\enfold-child

4. Now you can start assigning new font family to headings and paragraph using custom CSS in your child theme styles or in the Quick CSS section
NOTE: If the below code doesn’t change anything deactivate caching plugin and try adding “!important” to the font-family: ‘YOUR-FONT-NAME’!important;

p {
 font-family: 'YOUR-FONT-NAME';
 font-size: 18px;
}

Another way to do this would be to use a plugin like Use any font which will make the job of assigning fonts very easy.

Best regards,
Vinay

Hey Joe,

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

@media only screen and (max-width: 767px) {
  .av-image-caption-overlay-center {
    font-size: 14px;
  }

}

If you need further assistance please let us know.

Best regards,
Victoria

Hi,

Apologies, I forgot this is a font and not an image. The following should work, just adjust the value:

.iconbox_icon.heading-color{
font-size:12px!important

;
}

Best regards,
Jordan Shannon

Hi PestkaStudio,

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

@media only screen and (min-width: 1024px) and (max-width: 1200px){
  .phone-info {
    top: 76px;
    margin-right: 85px;
    width: 60%;
  }
}

@media only screen and (min-width: 1201px) {
  .phone-info {
    top: 76px;
    margin-right: 85px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px){
  .phone-info {
    top: 76px;
    margin-right: 85px;
    width: 40%;
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .phone-info {
    display: none;
  }
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi,

We have added the below code to the Quick CSS section.

Please change the URL of the logo to a tick image.

.progressbar-percent {
	color:transparent;
	background: url('http://stageholdings.co.uk/wp-content/uploads/2017/08/SC-logo-497x454_hight-1-257x300.png');
	background-size: 30px 40px, cover;
	background-position: top right;
       background-repeat: no-repeat;
       width:60px;
}
.progressbar-percent span {
	color: #000!important;
}

As an optional choice, you can also use any Icon that comes with enfold by adding the below CSS. To use the icon I have commented the background rule in Quick CSS.

.progressbar-percent span:after {
        content:"\e812";
        color:#000;
	font-family: 'entypo-fontello';	
	position: absolute;
	right: 5px;
}

Let us know if you have any questions :)

Best regards,
Vinay

• This reply was modified 8 years, 1 month ago by Vinay.