Canvas Support

Fixed side menu column for more than just the index page

22 replies · opened Dec 16, 2016

CcheliutaDec 16, 2016

Hi there,

So I'm trying to build my Portfolio, which will be mainly videos, and I chose index-portfolio-3 as my home page, as it will show my latest projects directly on the home page. However, I don't seem to have this same style for other pages, such as About Me. I only have the option of choosing between pages with top menus, which means a completely different design from page to page. So I just want a consistent side menu on the side, as it is the case on the home page.

So what's the best idea to make this video get to the right side of the page, and the title have it underneath?

I'm sure this must be a very trivial thing for some to fix, but with so many style sheets attached, I haven't got a clue which one might modify this, and the best solution for my problem.

Please help.

Thanks.

SSemicolon WebSTAFFDec 18, 2016

Hello,

This is already possible by default. Please consider using the header-side-left.html Template in the Package/HTML Folder to add Additional Inner Pages for your Website.

This should definitely work fine. Hope this Helps!

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

CcheliutaDec 22, 2016

Thanks for that. I've managed to fix it now.

The problem That I am now is that when I try to use the data-lightbox="iframe" class, all vimeo links work and playback perfectly, exactly as expected, however, no youtube videos work. What's the workaround that? Sorry if I'm asking too many questions, but I don't think this question has been asked. Here's how my div looks like with a working vimeo link:

<div class="portfolio-overlay">

</div>

So this works fine, however as soon as I replace it with a youtube link (tried using http://www.youtube.com/watch thing and the short version), it stops working. Where is the problem? I tried replacing https with http, but nothing seems to work.

Thanks in advance.

CcheliutaDec 22, 2016

<div class="portfolio-overlay">


</div>

Sorry, my code is not displayed correctly in my previous comment, I'm trying to use the blockquote button to sort it.

CcheliutaDec 22, 2016

								[](https://vimeo.com/87209757)
								[](portfolio-single-video.html)
SSemicolon WebSTAFFDec 23, 2016

Hello,

We Really Apologize about the Inconveniences caused!

Can you please provide us with the Youtube URL you are trying to use so that we can provide you with a Proper 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 further issues with Canvas.

CcheliutaDec 23, 2016

Thanks for the quick response. I'm impressed with the way the theme looks, and also the customer support, thanks so much for this. This should do the job:

CcheliutaDec 23, 2016

https://www.youtube.com/watch?v=9fA_wybMIRo&t=3s

CcheliutaDec 23, 2016

Another issue I'm having is with this page http://themes.semicolonweb.com/html/canvas/index-portfolio-3.php, and it's rendering the wrong way. I've seen a ticket posted by someone else on this forum, tried the solution and doesn't seem to work, I've checked all the images I'm using and they are all 400300px, exactly as specified...so I don't understand why is should do this. I notice that as soon as I reduce the number of 'article' tags in the 'section' tags to less than 13, it starts doing this, reducing the number of columns to two instead of three after a delay of about a second. So the same screen size, all images are same size 400300 with the exception of those in the 'data-lightbox' which open a lightbox.

CcheliutaDec 23, 2016

And this is how my div looks like: ``

So just in case it was clear, the images are all the same size as before, the only difference is that I reduce the number of article tags and all the 'article' tag images arrange themselves in columns of two instead of three. I kind of like this size and wouldn't want to use 'portfolio-2 tag in the div, which would reduce the size and make three columns, but still leave a lot of gap on the right hand side. Hope this clarifies the problem. Thanks again for the patience and all the replies.

CcheliutaDec 24, 2016

Hi there, sorry if I post too many messages, but I managed to sort out the issue with embedding youtube videos, it was a pretty simple solution and nothing to do with the theme, but it might be helpful for anyone else stuck into this. So basically, in this url:

https://www.youtube.com/watch?v=9fA_wybMIRo&t=3s
the problem are the last 5 characters &t=3s, these characters make the embedding not work, and only display a black frame. Once I've eliminated these characters from my code, the embedding worked beautifully. However, the last issue with my home page still persists, despite me trying dozens of variations. Please help.

SSemicolon WebSTAFFDec 28, 2016

Hello,

Thank You so much for all your Patience! We Really Appreciate it!

Really Glad that your issues with the Youtube Video Lightbox has been resolved. However, regarding the issue with the Portfolio Grid, 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.

Additionally, we also have a Predefined Template with Portfolio 3 Grid + Side Header: index-portfolio-3.html Template which might be useful in fixing your issue.

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

CcheliutaDec 28, 2016

Hi there, thanks for taking the time to answer this. Here's a live page with the page, and it is, as you suggested, based on the index-portfolio-3.html page, but the issue is somewhere with the javascript programming I believe, and that's way beyond my ability to understand and fix. Just to emphasize again, all images are 400*300 to the pixel (apart from the lightbox ones).

Let me know what you suggest. Here's the live url link: http://ideainmotion.co.uk/threePageLayoutProblem.html

Thanks once again for your patience. Happy New Year!

SSemicolon WebSTAFFJan 1, 2017

Hello,

A Very Happy New Year to you too! And Thank You so much for all your Patience with us! :)

The Size of the Images do not matter, as they adjust themselves. Can you please consider adding the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking: 


	jQuery(window).on( 'load', function(){
		setTimeout( function(){
			SEMICOLON.portfolio.arrange();
		}, 600);
	});

This should definitely fix the issue.

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

CcheliutaJan 1, 2017

Hi there,

I did, still no luck. I checked my page on Chrome, Opera, and IE, and I'm getting the same result.

I've updated the page on the server, so you can see the result at the same address: http://ideainmotion.co.uk/threePageLayoutProblem.html

Thanks.

CcheliutaJan 2, 2017

Hi,

I'm not sure what you mean by the resolution of the browser, but I'm assuming you mean the resolution of the screen (is that right?). I'm using two screens, and all the tests are made on both of them, with the same effect. One of them has a resolution of 12801024, and the other one 19201080 pixels. I'm using Windows 10.

Thanks.

CcheliutaJan 2, 2017

I've also tested the page on my laptop, again with 1920*1080 resolution, it's displaying with the same problem. On the other side, on my Samsung Galaxy S6 browser, if I choose 'Request desktop site' option, it's displayed properly. That's the only browser that's displaying the page correctly. And there's a huge gap between the Get in Touch bar and the copyright stuff on the bottom. Please help.

CcheliutaJan 2, 2017

Don't know if it helps, but I'll just mention that every time I hit refresh, it's displaying the page exactly as I want it to, for a second or so, it then goes to the two column version.

Here's a video screen capture of the way that page is displayed on my large 1080p screen: https://youtu.be/KhczLD--dwQ

It's displayed the same way on Chrome, Opera on my desktop computer and on my laptop.

SSemicolon WebSTAFFJan 6, 2017

Hello,

Thanks for your Continued Patience and your Detailed examples of the Issue. Unfortunately, we really apologize but we were still unable to detect this issue on our end which is the reason why we are unable to provide you with perfect solutions! However, we assure you that we will keep trying to fix this for you.

We have been working on your Issues lately for a while and there a few things which we think might fix your issues:

  1. We noticed that all your Portfolio Items are Flex Sliders which are initialized on Window Load and the priority of the Footer Margin is above the Flex Sliders which is why there is a noticeable gap. Find the following code in the js/functions.js File:
SEMICOLON.initialize.stickFooterOnSmall();

and move it to the bottom of the Function Block after the following line: 

SEMICOLON.initialize.modal();
  1. Also, move the following line of code in the same area below the above line of code:
SEMICOLON.portfolio.arrange();

These might fix your issues. Thanks for your Patience. Hope this works!

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

CcheliutaJan 8, 2017

Hi there,

Thanks for your continued effort to help me find a solution to this. Neither adding the code you mentioned in the earlier port, neither moving these two lines made any difference to the end result. It's the same.

I've tried everything I could think of, taking every single div inside the article tag in the html page, and eventually it cam down to the fslider tag. Does that help? I promise I haven't messed with any javascript file, there are all exactly the same way they were packaged. Any other ideas? Should I just try another template? Sorry, but I'm really stuck here and really want to have my website active.

Thanks for all your help.

Regards,
Eduard.

SSemicolon WebSTAFFJan 9, 2017

Hello,

Thank You so much for your Continued Patience! We definitely understand your Frustration regarding this!

As we mentioned before the Codes on your Page appears to be fine and also it is working fine when we are viewing your Website on our Computers. Can you please consider checking your Website on other Computers to see if this issue exists there too? We ask you to do this since it works on Our Computer and might work with other computers as well. Please let us know what you find regarding this. 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.

CcheliutaJan 9, 2017

Hi,

I've tried it on 3 computers, 2 PC's and a Chromebook, and they are all displaying it with two columns, there is an error somewhere in the javascript. I can't use the theme therefore, so I will have to get something else.

Thanks for trying anyway.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard