Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
My website is now back to where it was under CE4, except for the textured background which I am putting aside for now because I suspect it can be somewhat difficult and time consuming. I must say that Backlight has made my redevelopment so much easier than it was under CE4. I didn't even bother migrating my galleries; it was so easy to republish them once the Backlight framework was in place. And making small changes under Backlight was very,very easy. A global colour setting would be nice though.
I managed to get my opening slide show going with the following code as the main window copy:
<center>
<video id="videoplayer" width="75%" height="75%" autoplay loop>
<source src="videos/Opening_Slide_Show.mp4">
</video>
</center>
This works in the Windows browsers; but when I check my cell phone (Android), the slide show first appeared as a black rectangle and now doesn't appear at all. When it did appear there was no way to start the slide show as had been enabled under CE4. I have suppressed the controls for the video so that it doesn't mess up the browser screen in Windows; this appears to affect the Android presentation.
Any suggested solutions? Will Stages, yet to be released for Backlight, help me fix this issue?
Another, much less important issue, is that if you enlarge the browser window far enough, a grey bar appears on the left-hand side. How do I get rid of it?
Offline
A global colour setting would be nice though.
Color for which element(s)?
That grey area looks like it could be the main body background color.
for your video you're going to have to start by changing the html. The <center> tag is deprecated and not supported in html5. Try putting it in a div with a custom class and in that class set:
margin: 0 auto;
or just add it to the div as inline styling. Not sure if this will solve the problem but it's a first step.
You also might try a Google search on responsive html5 video
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
To get that grey (or off-white; its value is 250) I went through every colour setting and set it accordingly. I did this for several settings of grey until I got the one I liked, the current setting. By "global" I meant a colour setting that would apply to all equivalent colour settings unless overridden. At least two such global values would be required, background and text.
Until I tried the center tag this morning, my video was set to the left and I had to use a blank tray 01 to get any sort of centering at all and it varied by browser. The center tag fixed that problem, so I'm not sure what you mean by it being deprecated and not supported.
Offline
Since the <center> tag is not valid html5 (although it still may work in some cases) you shouldn't really be using it. Try something like this instead:
<div style="margin: 0 auto;">
your video stuff
</div>For colors
page background is found under Page Layout
Text for main column is under Main Column. copy color and hyperlink color
Text for Tray column is under Tray Column
Other colors under Typography
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Needed width. This worked:
<div style="width: 854px; margin: 0 auto;">
This also worked (tried it first, but went back to the simpler code based on your suggestion):
<div style="width: 854px; margin-left: auto; margin-right: auto;">
In respect to the colours, there are many such settings throughout Backlight and it is not always clear as to the effect of each setting without testing. To be sure, I modified every one I could find; probably overkill, but it worked.
This works in the Windows browsers; but when I check my cell phone (Android), the slide show first appeared as a black rectangle and now doesn't appear at all. When it did appear there was no way to start the slide show as had been enabled under CE4. I have suppressed the controls for the video so that it doesn't mess up the browser screen in Windows; this appears to affect the Android presentation.
Any suggested solutions? Will Stages, yet to be released for Backlight, help me fix this issue?
Another, much less important issue, is that if you enlarge the browser window far enough, a grey bar appears on the left-hand side. How do I get rid of it?
Any suggestions on these remaining items?
Offline
The grey comes from your custom.css code:
html,
body,
main {
background: linear-gradient(90deg, #e0e0e0 50%, #fafafa 50%, #fafafa);
}Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
Ah! I missed that. I even toggled that rule off and on in the inspector and didn't even look to see where it was coming from.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
I commented out the css code and the grey is still there, so it must be coming from the Backlight settings. I'm not sure how the css code got there because i didn't set it. And when I went through all the Backlight colour settings I definitely got a change in the shade of grey. I did it at least three times to arrive at the current shade of grey.
Offline
the grey is gone. Try clearing your browser cache.
the css was already there in the custom-sample.css file included in Backlight. It looks like you may have resaved it as custom.css and then activated it in the page template under Advanced Customization.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Sorry, Rod, but the grey is not gone. I have cleared the cache twice in two browsers, Opera and Chrome, and rebooted as well. Please see the attached images.
[img=Outside]Z:\Storage\Miscellaneous Images\Curser_above_Amor_de_Dios_box.png[/img]
[img=Inside]Z:\Storage\Miscellaneous Images\Curser_in_Amor_de_Dios_box.png[/img]
I get the same results in both browsers.
Added after initial post: I don't know if you can see the images. I've never posted images on this site before. I can put them on my web site and give you a link.
Last edited by charking (2016-07-07 13:42:51)
Offline
Offline
Unless things have changed significantly since the last time I checked in on HTML5 video, your simple video element isn't going to cut it. HTML5 video is hugely complicated. Here's a random tutorial:
http://www.html5rocks.com/en/tutorials/video/basics/
Offline
Yeah, the gray is not gone because the offending code is still in place. If you comment it out it should look like
/*
html,
body,
main {
background: linear-gradient(90deg, #e0e0e0 50%, #fafafa 50%, #fafafa);
}
*/Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
Unless things have changed significantly since the last time I checked in on HTML5 video, your simple video element isn't going to cut it. HTML5 video is hugely complicated. Here's a random tutorial:
http://www.html5rocks.com/en/tutorials/video/basics/
I can't disagree, Matthew. I threw something together and it "worked". It is by no means complete because it allows for only mp4 videos. I would not consider it solid code but only the beginning. Thanks for the link.
Added after initial posting: I was looking for the right word and just thought of it. My video code as it stands now is not robust. It could easily break, but it is a starting point.
Last edited by charking (2016-07-07 15:09:13)
Offline
Yeah, the gray is not gone because the offending code is still in place. If you comment it out it should look like
/* html, body, main { background: linear-gradient(90deg, #e0e0e0 50%, #fafafa 50%, #fafafa); } */
This is what is on my web site, unless there is another custom.css file I am missing.
/*
html,
body,
main {
background: linear-gradient(90deg, #e0e0e0 50%, #fafafa 50%, #fafafa);
}
*/
/* Change CRG Select and Feedback Icons */
/*
figure button.crg-select.off::after,
.crg-modal button.crg-select.off::after,
.pswp__button--crg-select.off::after {
content: "\f10c";
}
figure button.crg-select.on::after,
.crg-modal button.crg-select.on::after,
.pswp__button--crg-select.on::after,
.crg-status li a[data-level="off"]::before {
content: "\f058";
}
figure button.crg-feedback::after,
.pswp__button--crg-feedback::after {
content: "\f044";
}
*/Added after initial posting: This is the address I am referring to:
http://www.charking.com/backlight/custom/css/custom.css
Last edited by charking (2016-07-07 15:06:23)
Offline
I've looked in several browsers. I'm no longer seeing the gray bar on the left
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
What are we supposed to be looking at in those images?
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
I've looked in several browsers. I'm no longer seeing the gray bar on the left
I noticed that myself. I think the bar to which I was referring disappeared when I implemented the centering code you gave me, an unexpected but happy side-effect.
Offline
charking wrote:What are we supposed to be looking at in those images?
The ColorPic software provides the hex value of the colour on the screen over which the cursor is hovering. The small square in the pane at the bottom of the ColorPic window (identified as the Magnify pane) indicates where the cursor was when I took the reading, and the hex value of that spot on the screen is provided in the Color pane towards the top of the ColorPic window.
Offline
Ah, ok. Yep, that was the hex value for the background color in your custom css.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Ah, ok. Yep, that was the hex value for the background color in your custom css.
Except that my custom css has been totally commented out and the background colour of #fafafa is still there. Please see my response earlier to Daniel Leu.
Last edited by charking (2016-07-08 00:47:33)
Offline
Oh, I know. But when I looked again yesterday at a page I'd left open, the custom css was visible in the inspector. I was even able to toggle it on and off.
(that's why I commented about seeing the css but hadn't looked to see where it was coming from. when I looked after Daniel's post, the styling it was obviously coming from the custom.css file, according to the inspector)
Are you still seeing the gray bar??
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Pages: 1