Hi,
I noticed on the sailwave results folder that a club has published results with a photograph (presumably a local landmark) in the background. It was a interesting way of presenting the results to give them a local feel. Any clues as to how you might go about this?
regards,
Nick
Hi Nick,
Could you provide the link please so I can take a look and see how they have done it?
Kind regards,
Huw
Annoyingly can’t find the set of results I saw it on. If I find it I’ll let you know.
regards,
Nick
Hi Nick,
Quick test… Example http://gygsc.org.uk/Results/2019/imagetest.htm
(Just a example …)
If you edit one of your style files or better still create a new one then add following lines in the after “body {font: 72% arial, helvetica, sans-serif; text-align: center;”
body {font: 72% arial, helvetica, sans-serif; text-align: center;
background-color: #25a0e8;
background-image: url(http://gygsc.org.uk/wordpress/wp-content/uploads/2019/02/Background-start0-1-e1549920262935.jpg);
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;}
Then Select that Style when publishing.
Style files easily found by clicking on Sailwave Data shortcut.
Cheers
Keith
That Looks nice Keith
Improved to allow opacity on background.
http://gygsc.org.uk/Results/2019/imagetest2.htm
Example has Gold, Silver Bronze and Hover effect.
Insert after body Css instead
/* KS Added After to allow for transparent background on results. */
body::after {
content: “”;
background: url(http://gygsc.org.uk/wordpress/wp-content/uploads/2019/02/Background-start0-1-e1549920262935.jpg);
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
background-size: cover;
z-index: -1;}
Thanks Keith,
appreciate the reply. Will give that a try.
regards,
Nick
Couple of questions / suggestions.
The 2 clubs I’m a member have decided to go with the Background image for results.
eg http://www.gygsc.org.uk/Results/2020/2020Thursday.htm
All works well in the style sheet but it does mean it’s fixed.
I was wondering if in the future it might be an option to add background images to series properties, like the logos. To add flexibility for others.
You’d need to add the CSS too.
Second Question.
I have row cell highlight CSS in my style sheet
/* KS - Added Lines Below to create hover effect */
.summarytable tr:hover {background: #ffff99;}
.summarytable td:hover {background: #ffff00;}
I have tried to turn it into an effect based on the social media one so others could use it.
As its CSS I need it insert elsewhere or apply it in a different manner.
I tried the code below, but I suspect I have hold of the wrong end of the stick, can you advise.
//
// name=HighlightRow.js
// dependencies=
// description=Highlight row in table when hovered over.
// author=Keith Sykes
// version=1.0
// date=2020-10-30
// url=
// email=
// twitter=
//
/* KS - Add css Lines Below to create hover effect to highlight row.*/
$(function() {
var hlstart = ‘’;
var hlrow = ‘.summarytable tr:hover {background: #ffff99;}’;
var hlcell = ‘.summarytable td:hover {background: #ffff00;}’;
var hlend = ‘’;
$(‘head’).prepend(hlstart + ’ ’ +hlrow + ’ ’ + hlcell + ’ ’ hlend);
Keith,
You could pass a url variable to the javascript. https://easyautotagging.com/javascript-get-url-parameter/
I’m not sure how this would work with CSS
Peter
Hi Keith,
My style templates are in the Sailkwave program folder, rather than the Sailwave data shortcut. The Sailwave data “style” folder is emply.
I tried copying the style file from the program files (e.g. redhead2 - copy) but I couldn’t make any changes. I can see the code but can’t edit it. Do I do something else to make the style code writeable?
regards,
Nick
Hi Nick,
As a guess I suspect you are just clicking on the file, (So it open in your browser) you need to open it in Notepad or similar. Right Click Open with.
Just to confirm where your copy of sailwave is getting its templates,
Open Sailwave Global Options, Folders.
Hope this helps
Keith
Thanks Keith,
I did try that but wasn’t sure enough of myself to continue! I’ll persevere - I’m a bit new to this! Once I’ve made any edits, I presume I re-save it as in Notepad as a txt file?
regards,
Nick
Hi Nick,
Save it as a .htm, just use save.
FYI it’s best to move the file to the Sailwave data styles directory as these won’t get overwritten on a new Sailwave install.
If you get stuck happy to have a call to help Or let me know the url of the image you want to use and I can send you an updated file.
Keith
To anyone following this thread you may be interested in the new Effect available which allows an image or photo to be used as a background - You can change the photo and save it together with the Sailwave file - so each Series has a different image and there is no file editing involved. See the thread Image background Effect
Hi Jon,
This is a very nice effect. I was able convert a short segment of a youtube video to a gif file and use it as a background. Here is the link: http://jpvm.org/results/2017/LaserMasters/Sailwave%20results%20for%202017%20Laser%20Canadian%20Masters%20Championships%20at%20Wabamun%20Sailing%20Club%202020.html
Once the gif is loaded the results will start scrolling.
Thank you for all your support.
Peter
Sailwave
1 December
Originally published at: https://www.sailwave.com/image-background-effect
This effect allows a background image (it doesn’t have to be a photo) to be applied to the results as an effect so you can turn it on or off as simply as selecting the effect. You can also specify the image to use and save it with the series. You can of course simply…
Hi Peter,
Very impressive. An interesting idea. Just goes to show what can be done. It was jerky the first time as it was still loading the gif. But once it had loaded it was very slick and smooth
Jon
Hi Peter, very nice I had a play and used https://ezgif.com/video-to-gif to convert a bit of Video,
I can see what effects etc you have used and I can see what’s in the Style from the HTML source but No Style Name as names not in STYLE, just wondered if its a standard Sailwave one? would save me looking through them all.
Cheers
Keith
Hi Keith,
I used https://www.kapwing.com/videos to convert the youtube video. For my first attempt I used 59 seconds of video which converted to a 500MB file. I didn’t play with the resolution.
They are standard Sailwave styles and below is a screen capture of the settings:
I’m looking for white outline fonts which might make the text a bit better to read.
Peter
