5642 comments found.
Hi I’m working with the slider in the index-corporate-2.html. I’m having difficulty positioning the caption text. I’d like to put it in the upper-right of the image, but that CSS style doesn’t seem to exist. I managed to fake it by combining style=”margin-top: -230px;” with using .
This doesn’t seem the most elegant way and I’m worried how this’ll handle on other platforms. Is there a better way to nudge the caption text in various directions relative to the image?
Also is there a quick/easy way to alter the caption text color? Sometimes the caption text overlays both a light and dark area of the image and thus a single text color doesn’t look so hot.
Hello,
The Captions in the Swiper/Canvas Slider is currently positioned in the middle vertically by default and by jQuery in the js.functions.js File. In order to use your Custom Positions, you will first need to disable this functionality. To do this, please follow the steps below:
1. Add the .custom-caption-pos Class to the Caption you do not want to Position Automatically.
2. Find the following code in the js/functions.js File:
$slider.find('.slider-caption').each(function()
and replace it with:
$slider.find('.slider-caption:not(.custom-caption-pos)').each(function()
Now you can position the Slider Captions anyway you would like to by simply adding the top and the left or right positions in the CSS.
You can simply add style=”color: #HEX !important;” to the h2 and p in the .slider-caption to handle this.
This will definitely work fine.
Let us know if we can help you with anything else or if you find any issues. Thanks. 
How can I change time between the slides, the time between slide 1 and slide 2. Please reply.
Hello,
Please let us know which Slider you are using so that we can provide you with more accurate information about this query. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any other issues with Canvas. Thanks.
I want to buy your template but have a doubt. I want to use the Portfolio layout 3. The vertical menu. Except that when I see the other pages of the menu turns top. I can always put the vertical menu?
I depend on it to buy your theme.
Hello,
Thank You so much for your Interest in Purchasing Canvas.
This is Definitely Possible. You can add the Vertical Menu on all the Pages of your Website. You can simply Copy the Codes from the Template and use it. This will definitely work fine.
Let us know if we can help you with anything else. Thanks.
My clients want me to use the following fonts on their site:
Headings : Neutra Text – Bold
Sub Headings : Neutra Text – Italic / Museo Sans – Bold (700)
Paragraphs & Bullets : Museo Sans – Regular (300)
They have even sent me the fonts. How do I go about it.
Regards
Hello,
You can Link your Custom Fonts in the <head> of the HTML Document and then change the Font Names in the css/fonts.css File. Complete Setup Instructions for changing the Font can be found in the Documentation > Start > Changing Fonts Section. Please check this out and if you are still facing any issues.
This will definitely work fine.
Let us know if we can help you with anything else or if you find any further issues. Thanks.
Can you walk me through this.
Hello,
Consider using this Code:
@font-face {
font-family: 'Neutra Text';
font-style: normal;
font-weight: 700;
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
font-family: 'Neutra Text';
font-style: italic;
font-weight: 400;
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
font-family: 'Museo Sans';
font-style: normal;
font-weight: 300;
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body,
small,
#primary-menu ul ul a,
.wp-caption,
.feature-box.fbox-center.fbox-italic p,
.skills li .progress-percent .counter,
.nav-tree ul ul a { font-family: 'Museo Sans', sans-serif; }
h1,
h2,
h3,
h4,
h5,
h6,
#logo,
#primary-menu ul li a,
#primary-menu ul li .mega-menu-content.style-2 > ul > li.mega-menu-title > a,
#top-search form input,
.entry-link,
.entry.entry-date-section span,
.button.button-desc,
.counter,
label,
.nav-tree li a,
.wedding-head .first-name,
.wedding-head .last-name { font-family: 'Neutra Text', sans-serif; }
.entry-meta li,
.entry-link span,
.entry blockquote p,
.more-link,
.comment-content .comment-author span,
.button.button-desc span,
.testi-content p,
.team-title span,
.before-heading,
.wedding-head .first-name span,
.wedding-head .last-name span { font-family: 'Neutra Text', serif; }
If you would like to apply the Fonts to any Custom Class, you will only need to add the Class here. This will definitely work fine.
Let us know if we can help you with anything else or if you find any issues. Thanks.
Any more updates in this or next week?
Thanks
Hello,
Canvas 3 is coming within the Next 2 Weeks. Better and Stronger than ever. Additional Templates, very Nifty and Useful Features and some Bug fixes. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else. Thanks.
Hi,
When using the sticky dark nav header, the logo gets compressed when scrolling down and looks distorted. Is there a way to set a different logo when scrolling down for the sticky navbar? Thanks
Actually, the contact page’s logo adjusts its width proportionately, so I’m not sure why the other pages only change height
Hello,
Please make sure that you do not have the Width or Height attributes set for the Logo Images. Example:<img src="images/logo.png" alt="Canvas Logo" width="160" height="100" />
If you have the code similar to the above, there will be issues resizing your Image on the Sticky Menu since this will conflict with the Responsive Image properties. Removing this will definitely fix your issue.
Let us know if we can help you with anything else or if you find any other issues. Thanks.
Hi. Can you please tell me how to disable the full screen slider and just leave a single full screen static image? Thank you.
Hello,
This is Definitely Possible. You can get the Code of the Full Screen Static Image from the index-fullscreen-image.html File in the Package/HTML Folder.
This will definitely work fine.
Let us know if we can help you with anything else or if you find any issues. Thanks.
Hi, I’m having problems with avast, that is blocking my site and don’t know why. Can you help me? The site is www.redids.com.ar. Thanks
Hello,
We have just checked out your Website and the Codes seems to be perfectly fine. We also did a Security Check on your Website: https://sitecheck.sucuri.net/results/www.redids.com.ar/ and they also seem to be showing no issues with your Website.
Additionally, none of our Users have reported such issues earlier. Have you encountered this issue with any other website in the recent past? This will help us in checking out any related issues with your Website but it seems to be clean. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any other issues with Canvas. Thanks.
Thanks! I’ll check my server.
Hello, I mailed you yesterday about some issues I’m having. Just wanted to check you received them?? Thank you
Hello,
We have already sent you the Solution to your Issue via Email. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any other issues with Canvas. Thanks.
Hi Semicolonweb,
I’ve just send you an email concerning contact form issue. Please take a look and respond to my email. thank you.
Hello,
We have sent you the Solution to your issue via Email. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any other issues with Canvas. Thanks.
Hi! You have been very helpful in resolving most of my issues with this template. But one issue remains. My clients need to launch their site http://nc2015.nationalhrd.org/ immediately but they are nagging me about the 2 logos that you helped me incorporate in the header. On some mobiles (especially theirs), the two logos get distorted and a third instance of the right logo appears beneath.
Could you help me resolve this issue ASAP. Thanks.
dlpsxn
Hello,
We are always here to help you out with your issues!
It would be great if you could send me both the Logos with Standard and Retina Resolutions to our Email and we will provide you with the appropriate codes that will work across all the Devices seemlessly. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any other issues with Canvas. Thanks.
Hello,
I had sent you the two logos used in the header by e-mail, But the reply I’ve received relates to a totally different issue that I’d raised much earlier. Pls reply soon as the site needs to be launched tomorrow.
Thanks
Hello,
We have already sent you an Email with the Codes for the solution to this issue. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any other issues with Canvas. Thanks.
Hmm I have a strange problem I can’t wrap my head around. Sometimes when I go to my website : http://studder.nl the first attempt returns a blank page. If you reload or come a second time to the site the site is rendered correctly. Any chance you see what I did wrong?
Thanks.
Hello,
We have just checked out your Website and there seems to be an Encoding Error with the .webm and .mp4 Videos. Please try using Miro Video Converter: http://www.mirovideoconverter.com/ to convert your Video. This is really good & converts and optimizes videos to Smaller Size without degrading the quality.
This should fix your issue.
Let us know if we can help you with anything else or if you find any other issues. Thanks.
Hi there,
first of all: Thank you for the great template. It’s a pleasure to work with it.
I’ve got a problem with section anchors across URL’s:
I’m using section anchors under the site http://www.suikertuin.de/demo4/leitgedanke.html by clicking the images “Life, Love, Joy”. This is working fine.
When I try to use section anchors from another site, for example the index.html http://www.suikertuin.de/demo4/index.html , the anchors should point to the leitgedanke.html sections. This is basically working, but the anchor is not set correctly. The headline text is missing. I think that the text is hidden by the sticky menu.
Do you know how to solve this problem? Thank you for your support.
Hello,
Thank You so much for the Kind Words.
<script>
jQuery(document).ready( function(){
var t = setTimeout(function() {
if (location.hash) {
window.scrollTo(0, 0);
}
}, 1);
});
jQuery(window).load( function(){
var urlHash = window.location.hash;
divScrollOffset = SEMICOLON.initialize.topScrollOffset();
if( urlHash != "" ) {
$('html,body').stop(true).animate({
'scrollTop': $( urlHash ).offset().top - Number(divScrollOffset)
}, 750, 'easeOutQuad');
}
});
</script>
This will definitely work fine.
Let us know if we can help you with anything else or if you find any issues. Thanks.
Thank you very much. Solved the problem. Great support
Hi, I’ve also the same issue with Instagram account. My username in Instagram is sickboy4 and I get the feed of user sickboy45
Hello,
There seems to be an issue with the Current Instagram Plugin and we are replacing it with the New One and will make it available with the Next Update. It is a Slightly lengthy process but you can update it yourself by following the steps below:
1. Find the following Code Block in the js/plugins.js File:jQuery - Spectragram by Adrian Quevedoand replace the Entire Plugin Block with the code you can find here: https://www.dropbox.com/s/8fk45vv7ehucnhv/jquery.instafeed.js?dl=0
2. Find the instagramPhotos: function( c_accessToken, c_clientID ) Code Block in the js/functions.js File and replace the entire Code Block with the following code:
instagramPhotos: function( c_accessToken, c_clientID ){
var $instagramPhotosEl = $('.instagram-photos');
if( $instagramPhotosEl.length > 0 ){
$instagramPhotosEl.each(function() {
var element = $(this),
instaGramTarget = element.attr('id'),
instaGramUserId = element.attr('data-user'),
instaGramTag = element.attr('data-tag'),
instaGramLocation = element.attr('data-location'),
instaGramCount = element.attr('data-count'),
instaGramType = element.attr('data-type'),
instaGramSortBy = element.attr('data-sortBy'),
instaGramRes = element.attr('data-resolution');
if( !instaGramCount ) { instaGramCount = 9; }
if( !instaGramSortBy ) { instaGramSortBy = 'none'; }
if( !instaGramRes ) { instaGramRes = 'thumbnail'; }
if( instaGramType == 'user' ) {
var feed = new Instafeed({
target: instaGramTarget,
get: instaGramType,
userId: Number(instaGramUserId),
limit: Number(instaGramCount),
sortBy: instaGramSortBy,
resolution: instaGramRes,
accessToken: c_accessToken,
clientId: c_clientID
});
} else if( instaGramType == 'tagged' ) {
var feed = new Instafeed({
target: instaGramTarget,
get: instaGramType,
tagName: instaGramTag,
limit: Number(instaGramCount),
sortBy: instaGramSortBy,
resolution: instaGramRes,
clientId: c_clientID
});
} else if( instaGramType == 'location' ) {
var feed = new Instafeed({
target: instaGramTarget,
get: instaGramType,
locationId: Number(instaGramUserId),
limit: Number(instaGramCount),
sortBy: instaGramSortBy,
resolution: instaGramRes,
clientId: c_clientID
});
} else {
var feed = new Instafeed({
target: instaGramTarget,
get: 'popular',
limit: Number(instaGramCount),
sortBy: instaGramSortBy,
resolution: instaGramRes,
clientId: c_clientID
});
}
feed.run();
});
}
}
3. This new Plugin uses UserID so you will need to it instead of your UserName. You can find the User ID of your Account from here: http://jelled.com/instagram/lookup-user-id .
4. You will also need to make sure that you use Unique HTML IDs for each Instagram Feed on the same Page and adding a HTMl ID is now mandatory. Example: #instagram-feed1, #instagram-feed2 etc. Rest of the Code remain same.
Example:<div id="instagram-feed1" class="instagram-photos masonry-thumbs col-5" data-user="2992499" data-count="10" data-type="user" />
There are also some new features that comes with this Plugin about which will be adding more information in the Documentation in the New Updates which we will be releasing soon.
This will definitely work fine.
Let us know if we can help you with anything else or if you find any issues. Thanks.
Thanks! It works now!
Hi…I really like how you organized your code. Everything is very clean. But I have a question about the Google Fonts. Why did you put a link to the Google fonts on each page, instead of having an @import in the style.css or fonts.css? This would have centralized the fonts in one place and reduced the HTTP requests for each page. Thank you.
Hello,
Thank You so much for the Kind Words.
We definitely agree with you and this is an Excellent Suggestion! We will surely try pushing this as an Update. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any other issues with Canvas. Thanks.
Hi,
I have purchased the Canvas | The Multi-Purpose HTML5 Template but see that the template is not working for mobile browsers (iPhone 5S Safari and Nexus 6 Chrome) as advertised. The screens are not mobile browser optimized at all. Please can you let me know how to fix this? Have others faced a similar issue with this template?
Regards, A
I have deployed the template at: http://adoro.in/HTML2/index.html This is working responsive on my laptop web browsers but not working from my mobile browser.
Please Help!
Hello,
We have just checked out your Website and since you are using an Incorrectly Confirgured Iframe to redirect to the Main Content, you see an issue. Once you Load the Web Page directly: http://www.adoro.in.s3-website-ap-southeast-1.amazonaws.com/HTML2/index.html on your Mobile Devices, it will Load perfectly fine.
Canvas is Fully Responsive and have been optimized for smooth performance on Mobile Devices. Try serving your Content directly and without using an Iframe as it is also not very SEO Friendly. This will definitely work fine.
Let us know if we can help you with anything else or if you find any issues. Thanks.
Hi…really fantastic Theme with so much Details…Perfect!
I wrote an Email Weeks ago, but no answer up to now…my question: Is it possible to add a Popover or Tooltip instead of a Hyperlink at the Calendar? My Popover stops work when i change the Month at the Calendar…it only works one time…how can i fix that Problem?
Thanks for your answer and have a great Time!
Hello,
Thank You so much for the Kind Words.
Really Apologize about the delay in replying to your Comment and Thank You so much for your Patience.
This is Definitely Possible. Please find the following code on the Page:
function updateMonthYear() {
$month.html( cal.getMonthName() );
$year.html( cal.getYear() );
}
and replace it with:
function updateMonthYear() {
$month.html( cal.getMonthName() );
$year.html( cal.getYear() );
$('[data-toggle=popover]').popover();
}
This will definitely work fine.
Let us know if we can help you with anything else or if you find any issues. Thanks.
Hello,
many thanks for your quick reply. Great Template – great Support
I have replaces it and everything works fine. But, if the text/content is a little bit larger, you can’t read everything. He will cut off from the next/previous day. Any suggestions? Do i have to change something in the event-data.js?
Thanks for your help
Hello,
Thank You so much for the Kind Words.
Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any other issues with Canvas. Thanks.
Hi,
unfortunately not now…it looks like, that i finished the Site tomorrow….but i can send a Screenshot, thats no Problem….you can see there exactly what i´m talking about
Hello,
Please send us an Email from here: http://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123/support with the Screenshot of your Issue so that we can look into it and fix this up for you. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any other issues with Canvas. Thanks.
I am not able to attached Files there.
Please look here to see what i mean: http://www.prodoor.de/screenshot-canvas.jpg
A big thank you for your great help!
Hello,
We have just checked out and it seems you will only need to add data-container=”body” to the Popover Element. Example, this will be the Code in the js/events-data.js File:'08-21-2015' : '<a href="http://google.com" target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Quia quibusdam nemo nobis rerum. Dolorem, ipsa?</a>',
This should definitely solve your issue.
Let us know if we can help you with anything else or if you find any issues. Thanks.
I just dumped a WordPress template for Canvas. Already happy I did – http://www.calculator.co.ke
Hello,
Wow! Thank You so much for the Kind Words. We really really appreciate it.
Do let us know if we can help you with anything else or if you find any other issues with Canvas. Thanks.
Hello, I am trying to use the popup contact form from contact-5.html in a one-pager. I copied the code but I cant get it working. It stays “black overlayed” and is not useable.
How do I fix this?
Figured it out by myself. You can’t put it in a class=”section”..
Hello,
Placing the Modal Contact Form anywhere on the Template is Definitely Possible and can certainly be placed inside a .section. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any other issues with Canvas. Thanks.
Hello,
I have a fullscreen slider like on this page http://themes.semicolonweb.com/html/canvas/menu-7.php with autoplay: 5000 to change my slides each 5 seconds.
But one of these slides, I want to display for 9 seconds instead of 5. How do I do that? I tried adding data-pause=”9000” to my slide ( ) but nothing happens, it still goes in 5 seconds.
Where do I need to put what code?
Hello,
This Option is currently not available with the Swiper Slider and is only possible with the Revolution Slider at the moment. Currently, you can only define a Static Global Pause Duration for all Slides at once and not a Dynamic one.
Let us know if we can help you with anything else or if you find any other issues. Thanks.
