Discussion on Canvas | The Multi-Purpose HTML5 Template

Discussion on Canvas | The Multi-Purpose HTML5 Template

Cart 74,037 sales
Recently Updated
Well Documented

SemiColonWeb supports this item

Supported

This author's response time can be up to 1 business day.

5642 comments found.

Hi, pre-sale question. You mentioned that the template loads js plugins asyc in order to load the page faster. Google Recaptcha V3 is included in those plugins that load async? I am asking because I have noticed that Recaptcha slow down a little bit the websites. If it is not included, Canvas provides an easy way to add 3rd party plugins to the current plugins that load async?

Hello,

Thanks for your Interest in Purchasing Canvas! :)

Google reCaptcha APIs are already included: http://themes.semicolonweb.com/html/canvas/contact-recaptcha.html and already loads asynchronously. Google reCaptcha V3 is included too: http://themes.semicolonweb.com/html/canvas/contact-recaptcha-v3.html which already included the Async Compatible Codes within JS Files provided by Google and you will simply need to replace the Site/Secret Keys with yours.

Canvas does not interfere with 3rd Party Plugins. You can included them however you like, async or not, directly on the Page after the js/functions.js JS File Linking.

Hope this Helps!

Let us know if we can help you with anything else. Thanks. :)

Hello,

Unfortunately, this is currently not support out of the box and will need Customizations. We will surely consider adding this in Our Future Updates and will send you a Notification once this is available. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas. Thanks. :)

ok, as an alternative can i tweak the regular portfolio that already has a filter to function in a manner where the user doesnt have to hover over image to see link buttons? Basically I just want the image itself to be clickable and hover effect just does an color overlay. When image is clicked I want the lightbox enlargement to pop up. Any help on this would be much appreciated!

Hello,

Absolutely Possible! Simply replace the existing Overlay with the following codes:
<div class="bg-overlay">
    <div class="bg-overlay-content dark" data-hover-animate="fadeIn">
        <a href="images/portfolio/full/1.jpg" class="d-block position-absolute w-100 h-100" data-lightbox="image" title="Image" style="top: 0; left: 0;">
            <span class="sr-only">Image Lightbox</span>
        </a>
    </div>
    <div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>

This will definitely work fine. Hope this Helps!

Consider using the Support Forums to Open a Support Ticket for any further assistance.

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

I have tried to use this icon for days now but it will not render. I haven’t fully updated all of the theme files (there are breaking changes and I am not ready yet. But I did try updating just the font files and still no luck.

icon class: icon-line-trending-down

Link (there should be an icon after Alert! in the hero header): https://tcgsniper-staging.azurewebsites.net/

Hello,

We have checked out your Website and the .icon-line-trending-down Icon does not exist in your css/font-icons.css File.

Make sure that you have updated this File as well along with the Font Files so that the Latest Font Icons are available for use.

This should definitely fix the issue. Hope this Helps!

Please visit our Support Forums to Open a Support Ticket for any further assistance.

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

Instagram photos aren’t loading since the day

kindly check link and let me know the issue, i am tired so that ask you for help. thanks in advance

Hello,

Apologies about the Inconveniences caused!

We have just checked out your Website and the issue is that you are using an Older Version of Canvas with the Old Instagram API which has been discontinued by Facebook themselves. We have already updated this and using our own Plugin in the Latest Versions of Canvas which runs on the Public APIs of Instagram and does not need any Access Codes. So, you will need to Upgrade to the Latest Version of Canvas for the Instagram Widget to work properly. Here is the Migration Guide:http://docs.semicolonweb.com/docs/upgrading-v5-to-v6/migration/ .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

Dear,

From version 6*

http://themes.semicolonweb.com/html/canvas/blog-timeline.html

blog time line not working well I updated all files and still not working well

https://www.oknovibeograd.rs/takmicenja

Hello,

Thanks for your Comment.

We have checked out your Website and you have not added the JS Codes at the bottom of the Page from the Default Templates provided with the Package. Simply add the JS Codes and this should be resolved automatically.

Hope this Helps!

Please visit our Support Forums to Open a Support Ticket for any further assistance.

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

Hello, How to change language website ? ex. eng to china , china to eng

Hello,

Since Canvas is a Static Template, you can simply duplicate the Files and convert the Language to Chinese manually. Then you can use Two Folders, One for English (https://www.your-website.com/en) and another for Chinese (https://www.your-website.com/cn) . Then you Link to One Another.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

hello, can you tell me what the data-loader-html= does? This is in restaurant theme.

<body class="stretched sticky-footer" data-loader-html="<span class="pizza"> <span class="slice" /> <span class="slice" /> <span class="slice" /> <span class="slice" /> <span class="slice" /> <span class="slice" /> <span class="slice" /> <span class="slice" /> <span class="slice" /> <span class="slice" /> <span class="slice" /> <span class="slice" /> <span class="slice" /> </span>">

Hello,

The data-loader-html Attribute is used for HTML Codes to display Custom Loaders. Consider checking out the Documentation for this: http://docs.semicolonweb.com/docs/getting-started/page-transition/ .

Hope this Helps!

Please visit our Support Forums to Open a Support Ticket for any further assistance.

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

Hello,

Seems that Real Estate listing page (http://themes.semicolonweb.com/html/canvas/demo-real-estate-listing.html) doesn’t show up correct way in Firefox (using desktop version 80.0.1), instead of 3 properties boxes in row it shows only 2 properties boxes.

Is this some bootstrap related issue, because it shows correct in other browsers? Is there fix for this?

Hello,

Apologies about the Inconveniences caused!

This is due to the Isotope Plugin incorrectly calculating the Grid Widths on the Firefox Browser. This can be easily fixed by either removing the .grid-container Class from the Grid or by replacing the .gutter-20 Class with .gutter-30.

This will definitely fix the issue. Hope this Helps!

Please visit our Support Forums to Open a Support Ticket for any further assistance.

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

Thank you for the fast reply, this fixed issue

All Time Classic HTML Theme, Worked Great for my site https://calculator.co.ke

Hello,

Thank You so much for the Kind Words and for the Showcase! :)

You website looks great.

Do let us know if we can help you with anything. Thanks. :)

Hello,

We bought the template recently and using for our new website braingym.today. We found an issue that video on slider loading after some blank space and the video is not playing in mobile view also.

Can you please help us to solve this issue, by making the video on slider loads without blank space and also loads on mobile view.

We are working based on the slider code in below page. http://themes.semicolonweb.com/html/canvas/index-fullscreen-video.html

Thanks.

Hello,

Thanks for the Purchase! :)

1. The Video Loading is not an Issue and loads in the same way in the Live Previews. This is to prevent any Layout Shifts during resizing the Video to the available Width/Height. You can find and delete the following code in the style.css File:
body:not(.has-plugin-html5video) .video-wrap video {
    opacity: 0;
}

2. Apple and Android do not allow autoplay for HTML5 Videos/Audio to prevent unsolicited usage of Bandwidth (which can be Cellular) on the User’s Mobile Device. They can only be played on their native Video Player.

Here is the Official Reference for Apple: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html .

Meanwhile, currently the Inline Video Autoplay is supported only from iOS 10 onwards. You can use the following instructions to make it work on iOS 10 or above devices:

1. Add the playsinline Attribute to the <video> Tag. Example:
<video id="slide-video" poster="images/videos/explore.jpg" preload="auto" loop autoplay muted playsinline>
    ...
</video>
2. Then add the .no-placeholder Class to the .video-wrap Container that encloses the <video> Tag. Example:
<div class="video-wrap no-placeholder">
    <video id="slide-video" poster="images/videos/explore.jpg" preload="auto" loop autoplay muted playsinline>
        ...
    </video>
    <div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
</div>

This will definitely work fine. Hope this Helps!

Please visit our Support Forums to Open a Support Ticket for any further assistance.

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

Hi, Thanks for the reply.

Can you please let us know, how take below slider auto scroll. http://themes.semicolonweb.com/html/canvas/rs-demo-premium-nice-carousel.html#

Hello,

Simply check the Official Documentations of the Revolution Slider and change the JS Settings according to what is mentioned here: https://www.themepunch.com/revsliderjquery-doc/additional-javascript-settings/#autoplay-randomize at the bottom of the Page.

This will definitely work fine. Hope this Helps!

As this Comments Section is meant only for Pre-Sale Questions and not Support related queries, we request you please visit our Support Forums to Open a Support Ticket for any further assistance.

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

Hi, Very flexible template and some nice layouts. I notice there are blogs and ecommerce which as I understand won’t be functional on html alone.

Do you have any advice or preferred method of getting these to work, such as using Perch or Kirby. I want to stay away from Wordpress.

Thanks

Hello,

Thank You so much for your Interest in Canvas and for the Kind Words! :)

Since Canvas is a Static HTML5/CSS3 Template, the Blog and Shop Templates are provided only for Templating Purposes. Canvas does not come pre-integrated with Perch or Kirby and you will need to manually integrate to make this work. Meanwhile, currently the only way to Add Blogs or Products is through the Codes using a Text Editor like Sublime Text or Equivalent.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

Hi In the restaurant demo, on the mobile view, the text-layers in the slider are very small and not readable: http://prntscr.com/ul30yv I just downloaded the latest version. Are there any settings that can change this? Thanks!

Hello,

Thanks for your Patience!

Since there are no Responsive Font Sizes defined for the Layers by default, the Font Sizes are automatically resized by the Revolution Slider. You can consider setting the Responsive Level Settings for the Main Slider in the JS Settings and data-fontsize Settings for the Layers according to the Official Documentations here: https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/ for a Custom Font Size according to different Device Sizes.

Meanwhile, we will be releasing an Update later this week which will include these by default.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

Hello,

You should fix the Instagram plugin (js/plugins.instagram.js) by adding rel=”noopener” to the anchor tag (line 57 on Canvas 6.0.6). This is to avoid the “Links to cross-origin destinations are unsafe” in the Lighthouse audits, under the Best Practices section.

Hope this helps!

Hello,

Thank You so much for the suggestions!

We will do this right away and release an Update. We are also working on fixing some inconsistencies related to this, according to the Lighthouse suggestions and will release them in the future updates very soon. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas. Thanks. :)

How can I change small tabs numbers in slide into demo-news page? Bu default I see 5. I would like to change this number: https://monosnap.com/file/0i5j1naAP71jn9u7bYiSPpY052I7FD

Hello,

As this Comments Section is meant only for Pre-Sale Questions and not Support related queries, we request you to please visit our Support Forums to Open a Support Ticket and Our Support Team will be more than Happy to help you out with this.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas. Thanks. :)

hi, i have an error when i put the fslider in my home page : Uncaught TypeError: $ is not a function at eval (eval at jsLinking (functions.js:157), <anonymous>:3:8) at Object.jsLinking (functions.js:157) at Object.functions (functions.js:220) at Object.loadFlexSlider (functions.js:1417) at init (functions.js:2156) at dispatch (jquery.js:2) at v.handle (jquery.js:2) I integrate correctly the libs jquery, plugins and functions js in my footer. Have you an idea ? Thanks

hi, i have buy a new licence for the support but i can’t create a ticket on your support. Can you see ? thanks

Hello,

Thank You so much for renewing your Support. Simply Logout of the Support Forums and Login again. This will refresh your License Data.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

hi, it’s ok, i have create a ticket : “fslider and scroll : js error”. Thanks

Hello,

We have just checked this out and it appears to be working perfectly fine for us. There might have been a temporary API Error with the Youtube. Please consider checking again if the Live Previews are working fine for you. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas. Thanks. :)

Hello. I have a hugo generated blog and use a free Markdown editor for creating new content. If I buy Canvas how will my workflow change? If I still feel uncomfortable with the new wortkflow will I be able to turn Canvas into a hugo theme? I have some knowledge of html and css. Or maybe you have a hugo-based Canvas?

Hello,

Thank You so much for your Interest in Purchasing Canvas! :)

Unfortunately, Canvas is not Hugo Compatible currently and as you have mentioned, you will need to manually integrate this to make this work as it readily does not work with Hugo out of the box.

Since Canvas is a Static HTML5/CSS3 Template, you will need to add your Content using a Text Editor like Sublime Text or equivalent.

Hope this Helps!

Let us know if we can help you with anything else. Thanks. :)

Hi. IE 11 is supposed to be supported. But there is serious alignment issue here http://themes.semicolonweb.com/html/canvas/demo-construction.html Anything can be done to make content blocks showing properly (text blocks under the images)? Thank you

I found it that the class ‘fbox-content px-0’ is causing trouble in IE while overlapping content. I removed it now it appears to be fine (maybe you want to remove it from future updates?). Can you please check at your end?

Hello,

Apologies about the Inconveniences caused and Thanks for reporting this to us! :)

There appears to be some inconsistencies with the way IE11 processes Flex CSS. We are working on this and an update will be released shortly with the solution. Thanks for your Patience.

Please visit our Support Forums to Open a Support Ticket for any further assistance.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas. Thanks. :)

Revolution Slider Visual Editor : I installed the module but I have a 404 when I try to access the standalone version. Do you have an idea ?

Hello,

We have just tried installing the Revolution Slider Visual Editor and it appears to be working fine for us. Please consider following the Official Documentation for the Revolution Slider Visual Editor: https://revolution.themepunch.com/visual_editor/documentation/ which should help you immensely in setting up the Visual Editor in the correct way.

Additionally, can you please provide us with a Live URL so that we can check out what might be the exact issues and forward this to the Plugin Authors and then provide you with a more accurate solution for this. Thanks for your Patience.

The Files included in the Package are directly from the Original Plugin and not modified so we suspect that issues might be related to your Hosting Server Environment.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

Thanks for your answer, i retry the install and now it’s ok. Thanks

Can I change the responsive code so that the mobile menu shows at larger screen size? I am having issues with the demo-restaurant.html theme where an 11” laptop screen does not show mobile menu and the desktop menu is moving nav buttons down a line because they dont fit the screen. thanks!

Hello,

This is Definitely Possible but you will need to make Customizations. Please consider checking this Support Ticket where we have provided with the Solution: http://support.semicolonweb.com/forums/topic/how-to-collapse-nav-bar-to-hamburger-toggle-at-1200px/#post-20672 .

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey