Re: Simulate Slideshow Widget BACKGROUND Scheme using CSS3
For the lack of any other input, I have added:
Code:
.xr_strb {
left: -40px !important;
top: -13px !important;
}
to the Page code (head) CSS.
This sorts out the positioning issue of the banner.
I then just increased the animation total time to 140s so there is a longer delay for the last image (12) but the first image (1) repeats now get a proper look in.
Not perfect but usable.
Acorn
1 Attachment(s)
Re: Simulate Slideshow Widget BACKGROUND Scheme using CSS3
Acorn,
I very much appreciate the input, and I am eager to apply your code in the project. However, I am confused as to the way XARA adds html and head code...
1) First off, when I open your CSS-Cross-fade Carousel XAR file, it gives me an error Attachment 129093, as I am using Xara Designer Pro X 17.1.0.60742 DL x64 Dec 9 2020. (Hopefully, this is not deleting something I need.)
2) Secondly, when I look in the HTML Placeholder, there is no Head code, only Body. How is the <style> code added to the html? (When I generate the HTML, I see the Head code, but I see no Support folder with your example, nor any css file that contains the code.)
Thanks again,
-Tom
Re: Simulate Slideshow Widget BACKGROUND Scheme using CSS3
Quote:
Originally Posted by
tomcadman
Acorn,
I very much appreciate the input, and I am eager to apply your code in the project. However, I am confused as to the way XARA adds html and head code...
1) First off, when I open your CSS-Cross-fade Carousel XAR file, it gives me an error
Attachment 129093, as I am using Xara Designer Pro X 17.1.0.60742 DL x64 Dec 9 2020. (Hopefully, this is not deleting something I need.)
2) Secondly, when I look in the HTML Placeholder, there is no Head code, only Body. How is the <style> code added to the html? (When I generate the HTML, I see the Head code, but I see no Support folder with your example, nor any css file that contains the code.)
Thanks again,
-Tom
Tom, the Warning is not an error, it's just telling you I used a later version (Xara Pro+). All will be good.
The body code is for the content, the images and the captions.
The CSS is in the Page HTML code (head) as it is styling.
Delete the Placeholder, you lose the content but not the styling.
If it worries you, put it in the Placeholder code (head).
It makes it portable across pages if all you want is the same images on all pages.
It would actually be better the CSS was in Website Code (head).
That way you can have different carousels on any page, just change the content.
Acorn
Re: Simulate Slideshow Widget BACKGROUND Scheme using CSS3
Quote:
Originally Posted by
tomcadman
...when I look in the HTML Placeholder, there is no Head code, only Body. How is the <style> code added to the html?...
-Tom
Never mind... I found it under the Page Tab.
-Tom
Re: Simulate Slideshow Widget BACKGROUND Scheme using CSS3
Quote:
Originally Posted by
Acorn
...I used the XDA v16+ use of Image Filenames to create a list of indexed images (gates, gates1 to gated11)... it is safest to select all images and re-apply the label for the Image Filename...
In light of above comment, can you elaborate on use of Image Filenames generated within XARA app? (e.g. "image-name@2x", etc.)
That is to say, how can I anticipate what XARA generated filenames will be for the <figure> code?
Thanks,
-Tom
Re: Simulate Slideshow Widget BACKGROUND Scheme using CSS3
Quote:
Originally Posted by
tomcadman
In light of above comment, can you elaborate on use of Image Filenames generated within XARA app? (e.g. "image-name@2x", etc.)
That is to say, how can I anticipate what XARA generated filenames will be for the <figure> code?
Thanks,
-Tom
Tom, the @2x is the Retina (192dpi) image that is generated.
If unticked, just use image-name.jpg instead.
Acorn
Re: Simulate Slideshow Widget BACKGROUND Scheme using CSS3
Acorn,
FYI... I have it working (with lower grade images which I will replace later.)
Final step: Do you know of a simple way to add the top and bottom dark gradient across the screen over the slide show, so that it blends into the background? (as in original example TEST1.)
Thanks,
-Tom
Re: Simulate Slideshow Widget BACKGROUND Scheme using CSS3
Quote:
Originally Posted by
tomcadman
Acorn,
FYI... I have it
working (with lower grade images which I will replace later.)
Final step: Do you know of a simple way to add the top and bottom dark gradient across the screen over the slide show, so that it blends into the background? (as in
original example TEST1.)
Thanks,
-Tom
Tom, I would quickly create a black box a quarter the height of the carousel and add a Flat Transparency top to bottom, starting outside the box so the start is opaque.
Clone and flip horizontally and Stretch to width > Tile both.
Acorn
Re: Simulate Slideshow Widget BACKGROUND Scheme using CSS3
Quote:
Originally Posted by
tomcadman
Final step: Do you know of a simple way to add the top and bottom dark gradient across the screen over the slide show, so that it blends into the background? (as in
original example TEST1.)
Never mind... I got it all to work... TEST3 version.
Thanks for all your help!
-Tom