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
