Hi,

The speed of the animated number can be delayed/incresed to show the animation for a longer/shorter period by editing the shortcode.js file found in the wp-content\themes\enfold\js\ folder.

Increase the number 3000 to a greater number in the line:

var number_container = $(this), elements = number_container.find('.__av-single-number'), countTimer = number_container.data('timer') || 3000;

Best regards,
Vinay

Hi,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

1. Install and activate ” Temporary Login Without Password “.
2. Go to ” Users > Temporary Logins ” on the left-side menu.
3. Click ” Create New “.
4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
   ( do be sure that we have enough time to debug ).
5. Click ” Submit “.
6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create an admin user and post the login credentials in the “private data” field.

Best regards,
Vinay

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

#top.page .entry-title {
    text-transform:uppercase;
    font-family: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 100!important;
    font-size: 
    letter-spacing: 1px;        
}

Best regards,
Vinay

Hi,

Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

Best regards,
Vinay

Hi,

Thank for asking this interesting question. It can be achieved using the below CSS. You need to have sticky and shrinking header enabled in Enfold > Header > Header behavior for this code to work :)

#header.header-scrolled-full .av-logo-container.container {
	position: absolute;
	left: 20px;
}

Best regards,
Vinay

Hi,

Update your logo text in the below code and please try adding this at the very end of your themes / child theme’s functions.php file:

//-------------------------------
// Additional Logos
//-------------------------------
function add_custom_logos($logo) {
  if(is_page()){
  $logo .= '<a class="first-logo" href="#"><img src="https://royalflush-sport.com/wp-content/uploads/2018/03/Header-No-Tagline-1.png"><h1> YOUR LOGO TEXT </h1></a>';
  }
  return $logo;
}
add_filter('avf_logo_final_output', 'add_custom_logos');

Best regards,
Vinay

Hi,

I’m not sure if you are using a child theme… If you have not installed it here is the link https://kriesi.at/documentation/enfold/using-a-child-theme/

When the main theme is updated the modified files will get overwritten. A Child theme will help you preserve these modifications when you update the main theme.

Please install a child theme and insert the script at the bottom of the functions.php which can be accessed via WP Dashboard > Appearance > Editor > Theme Functions (functions.php) or use a FTP client and locate the functions.php file in wp-content\themes\enfold-child\functions.php

Best regards,
Vinay

Hi,

I’m sorry I cannot find where the loading image is coming from. I will check with the rest of the team and let you know.

Best regards,
Vinay

Hi,

Glad this is fixed for you!
To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)

Best regards,
Vinay

Hey Nagytalp,

Unfortunately, this customization is out of our support scope. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

Best regards,
Vinay

Hi,

Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. As you are an Enfold customer we have tried to help you beyond our support scope to achieve the layout you designed.

Please enable debug mode by adding the code provided in this link to your functions.php file which can be accessed from Appearance > Editor http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

This lets you view the shortcode for all the page elements.

Design the section above the header on an empty page and place the shortcode in the header widget.

If you are still unable to design the section above the header and it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

Best regards,
Vinay

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

Hi!

It appears the custom ID was added as a custom class hence the CSS did not work for you.

I have corrected that and improved the code a bit to make it responsive. Now you can see 2 columns in mobile device :) If you don’t like this modification you can remove the @media code.

I had the change the order of the icons to match the length so the space between the icons is even. If you like to keep the same order you will have to shorten the icon titles.

#six-columns .flex_column.av_one_fifth {
width: 15%;
margin-left: 2%;
}

#six-columns .flex_column.first {
clear: none!important;
margin-left: 0!important;
}

#six-columns .column-top-margin {
margin-top: 0 !important;
}

#six-columns .container { 
	width: 100% !important; 
	/*max-width: 100%; 
	padding-left: 75px; 
	padding-right: 75px; 
	margin: 0; */
}

@media only screen and (max-width: 768px) {
#six-columns .flex_column {
    width: 48%!important;
    margin-left: 2%!important;
    margin-bottom: 2%!important;
}}

Regards,
Vinay

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 7 years, 4 months ago by Vinay.

Hey m_reiprich,

Yes, it is possible to highlight the active menu.

Add the below CSS to custom styles or in Enfold > General Styling > Quick CSS section.

/*----------------------------------------
// CSS -  Submenu Highlight
//--------------------------------------*/

/* Your css styles for active menu item*/
#top .active-menu-item,
#top .active-menu-item a  {
	background:#000!important;
	color: #FFF!important;
}

#top .av-subnav-menu > li > a {    
    border-left-style: none!important;
    border-left-width: 0px!important;
}

And the code in the below link to your functions.php
https://gist.github.com/vinaynkashyap/2c9f689ec3ebe1ec21595b740723d0fe#file-functions-php

NOTE: This works best when different sections are created using the color section element.

Best regards,
Vinay