1. You can add custom icons into the Icon Picker via your child theme:

1) Install and activate your Vela-Child-Theme.zip.

2) Go to Appearance -> Editor to edit Vela Child theme.

3) Add the below code to Theme Functions (functions.php):

add_filter( 'vc_iconpicker-type-openiconic', 'vela_custom_iconpicker_type_openiconic' );
function vela_custom_iconpicker_type_openiconic($icons){
    $your_icons = array(
        array( "your-icon-1" => "Icon 1" ),
        array( "your-icon-2" => "Icon 2" ),
    );

    return array_merge_recursive( $icons, $your_icons );
}

The above code will append your icons into the OpenIconic icon set.

4) Upload your icon files to child theme folder “wp-content/themes/Vela-Child-theme/fonts/”.

5) Add you CSS font icons to style.css in your child theme:

@font-face {
  font-family: 'your-icon';
  src: url('fonts/your-icon.eot');
  src: url('fonts/your-icon.eot#iefix') format('embedded-opentype'),
       url('fonts/your-icon.woff') format('woff'),
       url('fonts/your-icon.ttf') format('truetype'),
       url('fonts/your-icon.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="your-icon-"]:before, [class*=" your-icon-"]:before {
    font-family: 'your-icon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.your-icon-1:before { content: '\e800'; }
.your-icon-2:before { content: '\e801'; } 

2. You can edit team member posts in Team Members on your WordPress admin, select and edit the posts one by one like your portfolio posts and blog posts.

So speaking to Step 3 & 5 for example is “your-icon-1” pseudo-code/placeholder for what should be the name of my particular files? in line of that question, in step 5 in the format block of code, as my files are .png files, i take it i can just add that within that block of code? One last question has to do with changing the colour of the subtitles of the pages, I am using the one Page setup and i will like to change the colour, for example the About Us section of the Page is in black and i will like to change to green

Sorry but you couldn’t add PNG files as icons since all icons in the Icon Picker are vector icons that support retina display.

If you’d like to use PNG image, please add it into the Single Image element instead.

To change the page title color, you have to add custom CSS to Theme Options -> Advanced -> Head Content as below:

<style type="text/css">

.heading h2{
color: #2b9c39;
}

</style>

Okay so if i do get to change the icons into any of the preferred formats, can you please answer the part of my question i.e. is “your-icon-1” pseudo-code/placeholder for what should be the name of my particular files?

You can set the name of your icon files as you please but should be the same as defined on your code. Also, when you are using font icons, you should upload all 4 types of font files to serve all browsers.

As seen on the sample code I provided:

src: url('fonts/your-icon.eot');
src: url('fonts/your-icon.eot#iefix') format('embedded-opentype'),
url('fonts/your-icon.woff') format('woff'),
url('fonts/your-icon.ttf') format('truetype'),
url('fonts/your-icon.svg') format('svg');

Your icon files should be “your-icon.eot”, “your-icon.woff”, “your-icon.ttf” and “your-icon.svg”.

Okay great, thanks for the explicit explanation most appreciated. So when it comes to the Contact Us Form, does the recipient e-mail tie in with the contact e-mail that I have noticed in the Header section of the menu? I also noticed that the google map does not render on the page an thoughts…

It doesn’t. You can set them separately. Here is how to set the Contact Form email -> http://contactform7.com/setting-up-mail/

The email in the Header is a menu item, you can set it in Appearance -> Menus, select the Top Bar Menu to edit the menu items.

Thanks I have the Contact Form working. I’m not sure if you saw my other question whilst I asked about the Contact form, in which i stated that the Google Maps plugin, does not render on the page. Via Visual Composer I went through it’s config, put in city, State and it pulled that up, but when you go to view the page nothing is rendered at all, the bottom of the page is just blank. Any thoughts…. ?

Please make sure you have set the right Google Maps API key in Theme Options -> Google Maps.

If it still doesn’t work, please PM me your site URL -> https://themeforest.net/user/wyde#contact

Hi, I have noticed that it takes a pretty long time for the One Page theme to render, hence not really having a good user experience. I did notice your demo rendering rather swiftly. Is there a solution to this? is the theme using loads of resources? your suggestions will be greatly appreciated.

Hi,

There are a couple of images on your site are very large.

Some of them have the file size over 5MB each. That is not suitable for using on the web.

You should resize your background images before uploading to your WordPress site.

The following images need to be resized and compressed:

1. Background image on slider.

2. Background image in the section “OUR SKILLS”.

3. Background image on the page “PRICING”.

Also, our demo sites are using W3 Total Cache plugin to minify static resources, it can increase server performance and reduce the download times.

Hi,

Thanks for your detailed explanation, most appreciated. i do have the following, follow up questions for you:

1. What will you prescribe the images be resized and compressed to?

2. With regards the Slider, I do have a cover image, which renders before and after the video plays, So i guess that is what you are referring to as the “Background Image on Slider” ?

3. On the topic of the slider, since i am using a video in place of an image you used in the demo, the video seems very grainy and hence does not look nice. What do you suggest can be done to make it look sharp, as the video when rendering in a normal video player looks very sharp.

4. You had also mentioned in earlier conversations that in order to use the Velo: Input info element the files will have to be in the following formats .eot, .woff, .ttf, .svg) do you know of any tool out there, that can be used to convert a .png file into the aforementioned formats? I was only able to come across a tool that will convert a .png to .svg but not the rest.

5. You had mentioned that one of the solutions to being able to render the Google Maps will be to apply the Themes updates as this is a bug in the previous version. My question is, will updating the Theme, have any effect on work i have done thus far? Just FYI, I presently have the child theme enabled and I have not made changes directly to the Parent Theme.

1. You should resize your images to be smaller than 1920px and the file size should be less than 500KB.

2. Here is the one I mentioned to -> http://askmentor.com/enterprise/wp-content/uploads/2016/10/askmentor_video_thumbnail.png You should save it as JPEG image instead of PNG because it’s too large to use on the web.

3. I’m sorry but I couldn’t see your video on the slider because you are using the OGV file that couldn’t play on my Chrome and I suppose it couldn’t on other browsers. You should use the MP4 video instead so it will have a good quality video and support all major browsers.

4. Unfortunately, it’s not recommended to convert PNG images to font icons. If your icons are PNG type, please add it to the Text Block element or Single Image element instead. It is not suitable to use as the vector icons in the Icon Picker.

However, if you’d like to try, please visit this site -> http://fontello.com/ it can convert your SVG icons to font icons to add into the Icon Picker in the theme.

5. No, the theme updating won’t affect your current data and settings if you have not made changes directly to any file in the parent theme.

Hi, I do have the following questions for you, will appreciate possible solutions:

• OpenIconic icon set: o I applied the code and custom CSS script you had made available to me, as well as uploading two .svg files (Named, your-icon-1, your-icon-2 accordingly) as suggested to the child theme folder “wp-content/themes/Vela-Child-theme/fonts/”. to test out and I could not find any of the icons as options to pick from. Why do you reckon this is?

• Whitespace: o Between the end of the “About Us” section and the beginning of the “Our Value Proposition” section, there is this Whitespace that gets rendered on the page, which I am unable to figure out, how to reduce or get rid of, can you help with nay insights please?

• Single Image Element: o Ideally, I would rather use the Vela Info Box, but due to the fact of not having icons in font vector format apart from. Svg. I had to implement the “Our Value Proposition: section with the Single Image Element, trying to get the same feel as using the Info Box. As you may observe on the page the border lines of the Image element are visible, is there a CSS script you can provide that gets rid of the lines? Equally how do I get the text to be closer to the icons? Especially the icons on the left.

Your help with this, will be most appreciated.

Apology, it’s because the theme sets the maximum width of logo to 200px so it doesn’t full the screen width and is not in the center properly.

Thank you for reporting this issue, it will be fixed in the next update.

Also, you can fix it right now by adding the custom CSS into Theme Options -> Advanced -> Head Content as below:

<style type="text/css">
#header.mobile #logo{
    max-width: none;
}
</style>

Hi, thanks for the code, it work for the logo. But the titles (h1 and h3) in the first part of the website are still not responsive under mobile.

Regards.

We will fix it in the next update, thanks for reporting it.

Can it be esayly fox with css too, or did i have to wait ?

Sure, here is the code:

<style type="text/css">

    .section.fullscreen .container > .row{
        table-layout: fixed;
    }

    @media screen and (max-width: 600px) {
        h1{
            font-size: 32px!important;
            line-height: 1.5!important;
        }

        h3{
            font-size: 24px!important;
            line-height: 1.5!important;
        }
    }

</style>

Hi, thanks for the fix, one notice about it, it seems to extend way more than just “fullscreen” the first row. (it was not responsive i guess because i set the row to full height.

Regards.

The code I provided will fix the fullscreen row on mobile too.

Yes it fix the text, but now the row is way more extended in height, i’m not sure i express that fact properly.

It fits perfectly the screen height on my end.

When you set the row to full height, it displays to fit the screen height but if you are logged on as admin, you will have the admin bar that increases the height of the row. You should log out to see the actual height of the row.

There is still no full height.

Regards.

You will find the demo content in folder “Demo Content” inside the main downloaded package.

Then you can upload the XML file by using WordPress Importer plugin to import demo manually.

You can find more details on how to import demo manually in our documentation.

However, to import Widgets manually, you will need to install the 3rd party plugin named “Widget Settings Importer/Exporter” ( https://wordpress.org/plugins/widget-settings-importexport/ )

Also, to import Settings, please go to Theme Options -> Import / Export, click on “Import from File” then paste the whole text content inside the file “theme_options.txt” and click Import.

Wyde….You’ve only given me half the answer. I need to upload the demo content manually…Where do I upload the rest as the auto install stops at widgets then hangs for ever…does not go any further…...Manual import does not work as it requires FTP which we do not have access to…....

I’ve installed the Widgets-settings-import/export and I’ve also manually updated theme_options.txt content and clicked import and as I suspected still no change in the site….....this process does not work please advise otherwise please organise a refund for me…..I’ve spent 4 days on this supposed simple process.

Thanks

As I mentioned in previous emails, if your WordPress site displays the FTP login page, it doesn’t mean the theme requires your FTP but it’s because your WordPress couldn’t access the “wp-content” and “wp-uploads” folder, these folder need to be writable when you upload the theme and import demo content, you will need to set the folder “wp-content” and all sub folders to be writable in order to import demo content, otherwise you couldn’t.

However, if you’d like you can request a refund here -> http://themeforest.net/refund_requests/new

OK…How can I get the theme to show my phone number and support link in the top left hand corner as demonstrated in the headers in theme options….I’ve selected this option but can not see the option to add text to top right hand corner

You can add your phone number, link and any text as the menu items in the Header Top Bar menu.

When you import the main demo, you will get the Header Top Bar menu in Appearance -> Menus.

If you have no top bar menu, you can create a new menu and set it as the Top Bar Navigation so it will display in the top left of the header menu.

To add a phone number, you have to add Custom Links menu, put tel:+PHONENUMBER into the URL field, then set the number in the Text field.

In the top bar navigation, you can display menu and social icons as settings in Theme Options -> Header. Please choose where you’d like to show the Top Bar Menu and Social Icons (Left or Right hand).

The Top Bar Menu option displays the Top Bar Navigation from Appearance -> Menus. And the Social Icons option displays social icons from Theme Options -> Social Media.

OK…Thank you for that….that has worked…....Now I’m trying to get the menu icon next to the logo. How can I do this? Thanks

I’m not sure but if you mentioned to the shopping cart menu icon and the search icon, you can enable Search Icon and Shopping Cart Icon in Theme Options -> Header so they will appear in the menu.

However, you will need to install and activate WooCommerce plugin to enable Shopping Cart Icon in the menu.

Please let me know if I am missing something.

Nahh, I actually mean the menu widget which is collapsed then opens up when you hover over it. It also moves up and down with the page.

Also how can I place the pricing option column in the center. I only have one pricing column and would like it in the center.

Thanks

1. I’m not sure, I tried to look into all our demos but the only one I can see it can collapse and expand is the sticky menu on this demo -> http://wydethemes.com/vela4/

If this is what you’re talking about, you can set the menu icon in Theme Options -> Header -> Logo -> Sticky Logo.

Otherwise, please let me know which one you’re working on. Or give me your page URL where you have the problem.

2. To place the Pricing Table in the center, you have to add 3 columns in a row. So you should change the row layout to 3 columns. Then move a pricing table to the centered column instead.

OK, but I only have one pricing item. Is there a way to get it in the center.

Thanks

Sure, if you follow the instructions I provided, you will have it in the center as you can see here -> http://wydethemes.com/vela4/pricing-box/

Also, if it still doesn’t work, please PM me your page URL where you have this problem -> https://themeforest.net/user/wyde#contact

so I can inspect the code to find if there was something wrong.

OK thank you for this the pricing option is now good.

OK this worked thank you very much

I have discovered another small problem. I’m using the one page website setup. Every time I click the home button I get sent to the next page down instead of starting at the top of the Slider image. Is there anyway I can stop this so that if a person clicks the home page they get sent to the top of the slider image.

Normally when you’re working on One Page site, if you click on the home button, it always brings you to the top of the page as you can see on our One Page demo -> http://wydethemes.com/vela4/

Could you please PM me your site URL so I can investigate this issue and help you out.

Thanks for this….My pricing boxes have lost their formatting. Is there anyway to correct this? Can you please show me because it keeps happening.

If the formatting you mentioned is the pricing details formatting, please make sure your details are in bulleted list format, see the below image:

I have confirmed this, and the boxes have still lost their formating. Any other ideas

Also I’ve added some products to my shop and I’m using the one page theme. When I add the shop to the menu I’m unable to see the products. Any ideas of how I can get products to show?

It will be easier if I can see the live site so I can inspect the code to find if there was something wrong. Could you please PM me that page URL: https://themeforest.net/user/wyde#contact

Regarding the shop page: The Shop page is a product archive page from WooCommerce, you couldn’t display that page with other pages and other content elements, that means it couldn’t display in the front page of the One Page site.

In order to display the products on the front page, you should create new page, and then add a Recent Products element to the page to show some recent products instead of displaying all products from the shop page, see the below image:

You can add other WooCommerce elements to display specific products by different queries if you’d like.

Also, you should remove the Shop page from the main menu but add a button (All Products) below the recent products to link to the shop page instead.

OK..Thanks for this. The only problem now is that the page has lost its formatting. i.e page title cant be seen and text of products is same colour as background.

Also when I click any of the links in the shop or products page they go no-where it’s as if they are dead.

By default the title text and any other text display as the dark color, if you have the dark background, you should change the text color to white. To change the text color, you have to edit the row or the column container of those text elements, and then change the Text Color option from Dark to Light. I just changed it for you so it seems to be working fine.

Regarding the shop page, I tried it and everything seems to work fine. When I click on the product image, it brings me to the product details page and when I click on the Add To Cart button, it adds the product to the cart too. However, you didn’t show the shopping cart icon in the top menu so you will see nothing changed after you click on the button. You should enable it in Theme Options -> Header -> Shopping Cart Icon.

Anyway, just so you know you have other add-ons plugins for the WooCommerce installed and they add the checkout form into the product detail page, this is not included in the theme design and we have never tested those plugins with the theme so if there was something wrong or your shop page doesn’t work properly, you should deactivate those plugins to see if it works.

Thank you for this…...Today I was trying to create portfolio items under our work heading, but the images of the portfolio item are not displaying on the home page…...I’ve followed the guide and it looks like I’ve done everything as instructed. Do I need to do anything else?

Please make sure you have set the featured images for those portfolio items. The portfolio grid displays only featured images, see below image:

Hi I have enabled the featured image and it does not work…..is there anything else I can try.

I’ve never seen this issue before. Normally when you add Vela:Portfolio to the page, it will display the portfolio items from your site automatically without choosing any options.

Try to edit the Vela:Portfolio element to check the settings. If you have any custom query in Custom Posts, please remove it.

Also, if you have any other plugins, try to deactivate them to see if it works.

If it still doesn’t work, please PM me your site URL: https://themeforest.net/user/wyde#contact

Also, if you’re using One Page site, please make sure you’ve added the Our Works page to the primary menu.

Yes…I’ve added Our Works to the primary menu

OK…..no need to worry I’ve figured it out…..I can just display the portfolio page and that works fine…...Thanks for you’re help.

Actually sorry it’s still not working…..I’ve DM’d you. Thanks

Thanks for your link! Just replied to your email!

Thank you, I’ve got another query, the text on the slider is too quick. How can I slow it down to an acceptable rate? And on my meet the team the background is too dark how can I make it bit light.

Thanks

When you edit the slide, you can edit the layer animation timing in the timeline editor. Select the text layer and drag the end point to extend the end time, see more on how to edit the animation timing here: https://www.themepunch.com/revslider-doc/layer-animations-timeline/#timeline-controls

Regarding the background of the meet the team section, when you edit the row container of the meet the team section, you can reduce the Opacity of the Overlay Color to make it lighter. You can see more details on how to use the Background Overlay option in our documentation, find the section Visual Composer -> Background Overlay.

Thanks for the slider information…...But I am unable to see the “Background Overlay” section in your documentation…..Are you able to show me path to changing background overlay for the team members section? .......Thanks

Those plugins are bundled with the theme, of course they are not available on WordPress website. You don’t need to download them manually.

After you install and activate the theme, you will see a notification message at the top of the page.

Click on “Begin installing plugins”, you will see the Install Recommended Plugin page, then install and activate Wyde Core, Visual Composer and Slider Revolution.

If you couldn’t install these plugins through your WordPress site and it displays the FTP login page.

That means you have no permission to write the folder “wp-content”, please set the permission of the folder “wp-content” on your host to writable.

However, if you’d like to upload and install bundled plugins manually, you can find those plugins in “Vela/inc/plugins” when you extract the theme zip file.

Thank you this worked

Please make sure you’re using the latest update of Visual Composer plugin 4.12. The old version of this plugin is not compatible with the new update of WordPress.

You have to update the theme to get the new update of this plugin.

After you update the theme, you will see a notification message at the top of the page to update this plugin. If you couldn’t update it, try to delete it from your Plugins page first.

Thank you for your help! I’ve updated the plugin and it seemed to work, but I used Vela icon block and Vela icon text and icons don’t appear on the website view… is there any theme update that you should check?

The current version of FontAwesome icons that’s included in the latest update of Visual Composer is a different version from the one in the theme so some icons in this icon set won’t show up. We will update this icon set in the next update.

THANKS! Do you know approximately when it’s going to be the next update? I’d like to know it to consider if I wait to start building the services page or in case that the update would take too long I should think about another design.

I found it for the individual page. Is there a way to change this globally so all change when pages are selected as default?

1. Actually the size 150×150px is the smallest size of thumbnails in WordPress site, see -> https://codex.wordpress.org/Post_Thumbnails#Thumbnail_Sizes

So we couldn’t display any smaller sizes than this.

However, even your thumbnail is 150×150 but it is only 7KB of file size, it’s very small. As you can see in the suggestions from if you display 50×50 instead, it will be 6.4KB that’s not much different from the current one.

2. It’s the same issue as above, and I also answer the same as above.

Yes, indeed it’s the default thumbnail size for Wordpress. But like the page also says, you can without issue specify custom size as well, like 50×50. I know it’s nor making much a difference, but it’s way more for SEO perspective than anything else.

We’re sorry but it’s difficult to change them. You’ll need to edit many files in the theme directly. This is not recommended! Because your changes will be lost when you update the theme.

Ok, and you are talking about basket or Logo above menu ? or both ?

Both of them are difficult, because you have to edit some files in the theme directly.

Can we try at least do logo and menu ? There is a layout where logo is on the top but logo and menu are centered … maybe will be easier to use this one ?

Sure, you can try it with CSS.

Here is what you have to do.

1. Change the header layout, choose the 3rd layout which have the logo at the top of menu.

2. Add the custom CSS to Theme Options -> Advanced -> Head Content as below:

<style type="text/css">
    #header.logo-top{
        text-align:left;
    }

    #header.logo-top #logo{
        padding: 20px 0 0 20px;
        text-align: left;
    }
</style>

Works great !!! As usually !! just last question . .can I use picture as a background in the header ? or only color ?

And .. when you have sticky header enabled when scrolling down, menu is hiding unless mouse over . .can I disable that ?

Here is the code for all above:

Add it to Theme Options -> Advanced -> Head Content:

<style type="text/css">

    #header.logo-top{
        text-align:left;
        background:url(http://www.planwallpaper.com/static/images/739916-awesome-background-images.jpg);
    }

    #header.fixed.logo-top:not(.mobile) .header .container{
        height: auto;
    }

    #header.logo-top #logo {
        padding: 20px 0 0 25px!important;
        text-align: left;
        height: auto!important;
    }

    #header.fixed.logo-top:not(.mobile) .header .nav-wrapper{
        opacity:1;
    }
</style>

Wyde .. basically this what I need . .just sticky menu works bit strange .. can I send you credentials so u can have a look ?

Ok I have correct it . .just had to use !important in this line #header.fixed.logo-top:not(.mobile) .header .container{ height: auto!important;

I still having few issues: 1: too much white space above logo – sticky and normal 2: was trying to keep sticky logo same size as normal but no luck 3: Mobile version has as well very small logo and lot of space bewteen slider and logo

I will need to inspect the code on your site to provide the custom CSS for you. Please PM me your site URL -> https://themeforest.net/user/wyde#contact

Thanks for your site URL.

You have to edit the code I provided as below:

#header.logo-top #logo {
        padding: 20px 0 0 25px!important;
        text-align: left;
        height: auto!important;
}

#header.logo-top:not(.mobile) #logo {
        padding: 10px 0 0 25px!important;
        text-align: left;
        height: auto!important;
}

Thank you !

Wyde .. is it possible to have only top-nav bar as a sticky ?

And . .how can I change search field background ?

1. The code to set the top nav bar to be sticky:

#header.fixed .header-top{
display: block;
}

2. The code to set the search field background:

.search-input input, 
.search-input input:focus{
background-color: #fff!important;
}