Discussion on Canvas | The Multi-Purpose HTML5 Template

Discussion on Canvas | The Multi-Purpose HTML5 Template

Cart 73,905 sales
Well Documented

SemiColonWeb supports this item

Supported

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

5635 comments found.

One small question. I went through all the documentations.

1. If I want to achive any specific demo’s css to my custom HTML page, what should I want to do.

2. I want to change the background and text colour of my menu, web site etc to match with the colours of my LOGO ? What should I do?

Are all these achieved through custom.css? Is custom.css utilized in all the demos?

Hello,

1. In order to use any Demo’s Features, you will need to Copy their relevant CSS/JS/HTML Codes based on relevant HTML Page. These come under Customizations. The Base Designs are provided for you to extend and customize further.

2. Canvas is built extensively using CSS Variables. We recommend using CSS Variables to change the Colors. You can find the relevant CSS Variables in the style.css File at the starting of the relevant sections that you will like to Customize. Example of the Variables can be found here: https://docs.semicolonweb.com/docs/header/header-types/#docs-variables . Support if you would like to change the Background Color of the Menu Item, you must use this Menu Style: https://canvastemplate.com/menu-3.html and change the Color of the example:
:root {
    --cnvs-themecolor:    #1abc9c;
    --cnvs-themecolor-rgb:    26, 188, 156;
}

.is-expanded-menu .primary-menu.style-3 {
    --cnvs-primary-menu-submenu-hover-bg: #EEE;
    --cnvs-primary-menu-active-color: #FFF
}

This can be simply pasted in the css/custom.css File. Customizations should always be done in the css/custom.css File: https://docs.semicolonweb.com/docs/getting-started/theme-customization/ to avoid issues and loss of customization codes when we release updates.

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.

Hope this Helps!

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

I found the PSD downloads.

1. How are the PSDs useful for a web designer/developer?

2. Are all the page designs were created initially in photoshop and then converted to HTML and CSS? If yes, is this the standard design procedure to be followed by me?

3. Is there any simple PSD to HTML/CSS convertion tutorial video available?

I know it is off topic. But kindly answer.

Hello,

1. PSDs are provided only for Classic Templates to create mockups for Clients.

2. Designs have been created in the Browser from scratch and PSDs are not used anymore. You must only use HTML/CSS or SCSS in order to work on your Websites.

3. There are no PSD to HTML/CSS Tutorials available as we design and code everything from scratch. Conversion Tools are not recommended as they won’t be able to retain the quality of the Codes.

Hope this Helps!

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

Hi! Great template. Love it. Trying to re-create block-content-promo.html and Im duplicating the html with the files correct. It doesnt animate. And any inspecting shows the following: functions.js:4 Uncaught ReferenceError: jQuery is not defined at functions.js:4:9 (anonymous) @ functions.js:4

Hello,

Thanks for your Patience and the Kind Words! :)

We have just checked out the Live Previews: https://canvastemplate.com/block-content-promo.html and the Package Files and this File appears to be working perfectly fine for us without any Bugs or Developer Console errors. The issues you are facing might be due to Customized Codes. Please visit our Support Forums to Open a Support Ticket for any further assistance.

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

Hi,

On block

https://canvastemplate.com/block-hero-18.html

when is on mobile images are not displayed from the center but from the left,

how i can fix it to show center of images?

Hello,

You can use the Responsive Classes to define Background Positions for Mobile Devices. 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, I am building a site. In site, I am trying to add mega menu but Desktop screen when I leave the mouse. mega menu close instantly i have try to add transition to show smooth effect but it is not working . Can you guide me ?

Hello,

Thanks for your Patience!

Please visit our Support Forums to Open a Support Ticket and Our Support Team will definitely help you out with this.

Meanwhile, do let us know if we can help you with anything else. Thanks. :)

Hello, I’m trying to implement a parallax page title section similar to your example at: https://canvastemplate.com/about-me.html. In my case I have a left sidebar. I can use your code exactly as in your demo except I have to remove the ‘include-header’ class from the section. If I don’t do that then nothing renders. But the problem is that if I eliminate the include-header class then a media query is executed an adds this: .parallax-bg {left: -95%;} which obviously messes up the displayed image on mobile devices. Is there a reason why this media query is being included when the ‘include-header’ class is eliminated from the section?

Hello,

Apologies for the Inconveniences caused!

We have checked this out and currently, we do not have any errors reported by the users related to the Parallax Section not working correctly on the Support Forums. 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 with a Live URL of the issue and Our Support Team will definitely provide you further assistance. 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. :)

Can I use this template to create a design for Ghost?

Hello,

Canvas is provided as a Template Base to extend easily for your Projects. You can surely design Ghost Templates, but it must be done manually as it is not compatible with Ghost out of the Box. You can create Ghost Templates for 1 Client with 1 Regular License of Canvas. It cannot be resold or sold on a marketplace in any form for any CMS.

Hope this Helps!

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

Hello,

I’ve a ticket open, I hope you can help me out.

Thanks!

Hello,

Thanks so much for your Kind Patience!

Your Support Ticket has already been replied to with the Solution.

Meanwhile, do let us know if we can help you with anything else. Thanks. :)

Hello

Thanks for your support

I have a ticket,,, You forgot to reply to this ticket

Thanks

Hello,

Thanks for your Patience!

Apologies for the Delays but we assure you we definitely have not forgotten about your Support Ticket. Your Support Ticket was transferred to our Design Team as it includes a Customizations Request. Customizations are not covered by the Item Support Policy but we usually provide minor Customizations anyways to our Users as we really value you since you have considered choosing Canvas for your Website. Rest assured your Support Ticket will be attended to shortly.

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

Thank you very much For your assist

Are you have template for ai tools??

Hello,

Very Happy to Help! :)

Currently, no. Do let us know what kind of Templates for AI Tools you are looking for and we would be more than happy to add them in the Future Updates!

Hope this Helps!

Feel free to let us know if we can help you with anything else. Thanks. :)

Hello! I really love your work.
I currently studying the new structure on canvas7.
I use demo-business.html as an example.
Can you help me with these problems:
  1. If I use canvas (the CSS an JS) on it’s default path/folder/directory structure in a html file, all features are WORKING. please see this URL: http://skyrocketz.com/cnvs/_assets/_front/
  2. But if I change the path of the CSS an JS on the html file (I want to load the html file from another path/folder/directory), almost all of the features are NOT WORKING. please see this URL: http://skyrocketz.com/cnvs/
    • The slider is not working
    • “How We Work” carousel is not working
    • “Our Work” filter is not working
    • “Portfolio” with slider image is not working
    • “Youtube Video” lightbox iframe is not working
    • Parallax background is not working

Thank you.

Hello,

Thanks for the Kind Words! :)

Since Javascript is loaded dynamically to make the Page super fast, and rank higher on Search Engines, they have a specific Folder Structure but this can be easily modified using just a couple of words in one file. These settings have been covered extensively in our Documentations on using Javascript; https://docs.semicolonweb.com/docs/getting-started/javascript/ . Please consider checking the Documentations and you will find all the answers and use Canvas with any Folder Structure you like.

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

Hope this Helps!

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

The contact form doesn’t work, nothing happens after pressing the Send message button. https://allstarco.swanmedia.ca/. Setup smtp with sendgrid

Sure.

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

I’ve just renewed the support, but still, Create Ticket is not clickable.

I got the confirmation email, please check Order #: 5

Apologies for the Inconveniences!

Please consider checking again. You should be able to Post Support Questions now. 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. :)

Hi, pre sale question. ¿How do i edit this? ¿Do i get a back en editor? Thanks

Hello,

Thanks so much for your Interest in Canvas! :)

You can simply edit the Templates manually with some knowledge of HTML/CSS according to your needs in a Text Editor like Sublime Text/VS Code and upload it to your Servers using FTP. A Backend is not provided since this is an HTML5/CSS Template.

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

I just finished my first website using this awesome theme and only had 1 problem. I’m pasting my solution below hoping this will help others.

Using a single-page layout, the top bar logo block had both “dark” and “default” class images with the “dark” one used on top first and the “default” white one switched to later as you scroll down the page. Unfortunately the “default” white one displays first for a brief 2 seconds which looks really bad. To fix this just change the “default” class to “logo-sticky” and it will not flash white.

Here’s the code:

Dusty

Hello,

Thank You so much for the Kind Words! :)

Thanks so much for raising your concerns related to this. We are already working on this as we speak to make this better. The thing is that the Dark Scheme is detected using JS and Logos are changed on based on that, so there is a brief delay as the JS is being loaded on the Page. You can consider adding the CSS Codes in the css/custom.css File to avoid this:
.dark #header-wrap:not(.not-dark) #logo [class^="logo-"],
.dark .header-row:not(.not-dark) #logo [class^="logo-"] {
    display: none;
}

.dark #header-wrap:not(.not-dark) #logo .logo-dark,
.dark .header-row:not(.not-dark) #logo .logo-dark {
    display: flex;
}

This should eliminate the delay. Hope this Helps!

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

I had tried forcing display:none on startup with javascript but it didn’t work, I didn’t think of doing that with CSS, thanks!

Seriously this template was the most elegant and easy to use code I’ve ever modified and I’ve been coding for 30 years.

Regards,

Hello,

Thats is really really kind of you! Thank You so much! :)

Glad the issue was resolved. We really try to study the Comments/Support Forums to improve the codes with every update and bring useful features and almost all codes are reusable and extendable. Your comments motivates to do more and we will bring more features with more updates.

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

I mistakenly ordered it thinking it was a wordpress theme. I’m not a core developer so I can’t use this template. Now how can I get a refund for this order?

Hello,

You can consider contacting Envato directly: https://help.market.envato.com/hc/en-us/requests/new for further assistance. Refunds will be handled according to the Refunds Policy. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else. Thanks. :)

Hello, do you also have an example to place the logo in the header on the right side?

Hello,

This is Definitely Possible. Minor CSS Adjustments will make this work:
.is-expanded-menu .header-row {
    flex-direction: row-reverse;
}

.is-expanded-menu .header-row #logo {
    margin-right: 0;
    margin-left: auto;
}

.is-expanded-menu .full-header #logo {
    padding-right: 0;
    padding-left: 30px;
    border-right: 0;
    border-left: 1px solid var(--cnvs-header-border-color);
}

.is-expanded-menu .header-misc {
    margin-left: 0;
    margin-right: 15px;
}

.is-expanded-menu .full-header .primary-menu .menu-container {
    padding-right: 0;
    padding-left: 0.5rem;
    margin-right: 0;
    margin-left: 0.5rem;
    border-right: 0;
    border-left: 1px solid var(--cnvs-header-border-color);
}

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. :)

is it permitted to use the images in the theme, I don’t mean taking an image and use it somewhere else, I mean using the images in a website created using this theme

Hello,

The Images/Videos included in the Package are Free for Commercial Use, so you can definitely use them but please consider providing a Linkback to the Websites provided in the Documentation > Credits Section for the Images.

Hope this Helps!

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

Hello, I have a site builder Saas. Can I use your templates on it without license issues?

Hello,

Thanks so much for your Interest! :)

Currently, we do not provide permission or any relevant Licenses to allow usage of our Templates in a Site Builder or any other CMS Solution.

Hope this Helps!

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

help me understand here i will have prebuilt html templates that i can use on my project? help me understand how it works

Hello,

Thanks so much for your Interest! :)

Yes, you will use the prebuilt Templates provided with Canvas for your Projects to get started quickly for your website. Static Websites are super fast and Canvas provides a very fast solution for your Websites. You can check a Live Score on Google PageSpeed here: https://pagespeed.web.dev/analysis/https-canvastemplate-com-demo-app-landing-html/lg3nmg0mq2?form_factor=desktop . You can simply edit those Templates manually with some knowledge of HTML/CSS according to your needs in a Text Editor like Sublime Text/VS Code and upload it to your Servers using FTP. We recommend starting with a Localhost Setup on your personal PC/Macbook before you deploy using FTP (in the public_html Folder). More Documentations and Help Guides can be found here: https://docs.semicolonweb.com/docs/getting-started/installation/ .

Hope this Helps!

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

Hi, two questions: Is it WordPress? I am not interested in WordPress, but when I clicked on a link in the demo named “documentation” it took me to a WordPress documentation page.

Does it support Arabica? what Arabic fonts are included?

Hello,

Absolutely! Canvas support RTL completely. Here is a Demo: https://canvastemplate.com/index-rtl.html . Arabic Fonts are not included but you can use any Arabic Font you like: https://fonts.google.com/?subset=arabic&noto.script=Arab .

Canvas is a Static HTML5/CSS3 Template, not WordPress. The Documentations are built on WordPress so that we can manage the Documentations in a more efficient way.

Hope this Helps!

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

hi,

pre-sale questions:

1. can we copy a specific block including the css&js ?

2. any instruction/doc for using a block/premade template in wp?

Hello,

Thanks so much for Purchasing Canvas! :)

1. Yes, absolutely. Blocks are designed to be copied to any Page you want. The CSS/JS of the Blocks have been added in the Document <head> and Document body respectively and can be easily copied and added to other Templates as you please.

2. Currently the Blocks are only compatible to be used with Canvas Templates which is a Static HTML5/CSS3 Template. So, WP is currently not supported.

Hope this Helps!

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

2. if we do copy the css and paste into wp, the blocks/template will works?

Hello,

We have not tested this, so we cannot really say for sure. However, this is not likely to work without a little bit of customization. We recommend adding the codes in a custom JS File and enqueue it using wp_enqueue_script() Function which might work better.

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