Help in using template from github

  • 1
  • Question
  • Updated 3 years ago
  • Answered

So I put the content-templates-master/ on my rise vision storage.  I want to use the restaurant-promotion template for my presentation.  I know I need to copy the url to the index.html file but I am not sure what to do with that.  Can someone walk me through using a template for rise vision that I found on github and actually getting it into my presentation?


Thank you.

Photo of Jon Hanson

Jon Hanson

  • 240 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Ray Durkin

Ray Durkin

  • 3,480 Points 3k badge 2x thumb
Hi Jon,

Please take a look at this conversation:  https://community.risevision.com/rise_vision_inc/topics/how-do-i-host-content-templates-on-my-rise-s...

It looks like exactly what you are wanting.

Thanks!
Photo of Ray Durkin

Ray Durkin

  • 3,480 Points 3k badge 2x thumb
Jon,

I apologize - it looks like I just pointed you to your own conversation. 
Photo of Ray Durkin

Ray Durkin

  • 3,480 Points 3k badge 2x thumb
Jon,

It looks like you just need to take the URL you already have and either put it in a schedule or into a presentation.  If you don't know how to do that, you can watch a video training overview of the Rise Vision platform here:  http://www.risevision.com/user-training/#?cid=f114ad26-949d-44b4-87e9-8528afc76ce4
Photo of Jon Hanson

Jon Hanson

  • 240 Points 100 badge 2x thumb
I was not patient enough earlier for the content to load.  But I am still having trouble with the text of the template to load, I am getting the images.  I created a new presentation, created a new placeholder, added content by url, placed the url of the index file, saved it and previewed.  

So I get three different screens that dissolve in but not text.  What am I missing?
Photo of Alex Kolenoff

Alex Kolenoff

  • 3,506 Points 3k badge 2x thumb
Hi Jon,

Would you be able to send a Preview link to the presentation you created?
Photo of Jon Hanson

Jon Hanson

  • 240 Points 100 badge 2x thumb
Is this what you need?
http://bit.ly/1IeniJz
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Hi Jon,

Thank you for the link. I uploaded a copy of the template myself and it looks like the issue is with some links beginning http when they should be https. If you can try editing the index.html file in the following places:

Around line 34, in the section marked 'fonts', please change href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' to href='https://fonts.googleapis.com/css?family=Oswald:400,300,700'

Around line 111, between the <script> tags, please change src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"; to src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";

After I made these changes the text showed up for me so I hope it is the same for you. Please let us know either way. 

Thanks,

Peter
Photo of Jon Hanson

Jon Hanson

  • 240 Points 100 badge 2x thumb
Sorry, all I have done some wordpress websites with templates in the past but very little html.  I just learn on the fly, so I can't even figure out how to edit the index.html file.  In the risevision storage do I right click on the index.html file and then click inspect?  Or what do I do?  
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Hi Jon,

No problem at all! I think the easiest way to do this would be to download the template folder to your computer and then open the index.html file in a plain text editor such as Notepad in Windows or TextEdit on a Mac. You should then be able to make the two changes above and save the file, keeping the name as index.html. Just be sure not to edit it in something like Microsoft Word, Apple Pages, or Google Docs, as these programs add extra formatting that can effect the way the page is displayed.

Once this is done, if you go to where the folder is in your Rise Vision storage you should be able to double click on the folder to open it and then you can select the old index.html and move it to trash. You can then click on the upload button and select 'upload files' then select your edited index.html from where you downloaded it to. 

Once this is uploaded you should be able to get the link as before and see the text displayed.

Thanks!

Peter
Photo of Jon Hanson

Jon Hanson

  • 240 Points 100 badge 2x thumb
Ok, so I downloaded the template folder.  If I double-click on the index.html file it opens in a browser and I get the template with images and no text.  So I know that is not what I am supposed to do to edit.  So I open the index.html file in textedit on my mac.  And what I get is the work Contribute which is a hyperlink to http://github.com/Rise-Vision/content-templates/tree/master/events
Obviously I am missing something!  Thanks!
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Hi Jon,

Sorry, it actually looks like you are doing everything right but for some reason textedit is not displaying as it should. I recommend trying to open it in either Sublime Text 2 or TextWrangler, both of which are free to download and I have tested opening the file in both and they display it correctly. I would personally recommend Sublime Text 2, especially if you are planning on doing more work with templates and html in the future.

I hope this works, please let me know if you need any more assistance.

Thanks!

Peter
Photo of Jon Hanson

Jon Hanson

  • 240 Points 100 badge 2x thumb
It worked!  I used Sublime Text 2 and was able to edit the index file and now the text and images appear in the template.  Thank you!
Photo of Jon Hanson

Jon Hanson

  • 240 Points 100 badge 2x thumb
I do have one more question.  I opened up the style.css file and can see how to change background images and logo etc.  But how do I change the text?
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Hi Jon,

That's great, happy to hear that the changes worked!

In terms of the text, that is added to the template through the google sheets web component. What this means is that once it is set up you can easily edit the text just by changing it on a published spreadsheet. I had a look at the readme file for the template and it looks like the instructions for this are currently not there. Apologies for this, we will add them back in this morning. In the meantime, here is what you can do to change the text:

As I said, the text for the slides is displayed through the use of the google-sheets web component. To see an example of the layout, please see the example spreadsheet located here https://docs.google.com/spreadsheets/d/1orUHfkuPKI8alfmN7KmZbIGOoOWEWsker4LtjEOzb5M/edit#gid=0

you can use your own public spreadsheet by creating a new spreadsheet in google sheets and then selecting 'Publish to the web..' from the File menu. 

Once published, you will need to take copy the key for you spreadsheet which is the long string of letters and numbers found in the url. An example of this can be seen in the url for the example spreadsheet above. Once you have copied the key, please open the index.html file in your text editor and locate the following code:

<google-sheets id="sheet" key="1orUHfkuPKI8aIfmN7KmZblGOoOWEWsker4LtjE0zb5M" gid="0" rows="{{rows}}" published> </google-sheets>

You can then replace the key with the key you have copied from your own published spreadsheet.

You can then edit the text within the cells of the spreadsheet and the changes will appear in the display.

Hopefully this works for you, and again please do let us know either way.

Thanks and have a great morning!

Peter
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Hi Jon,

I received your notification and you should now be able to view the example google sheet.

Thanks!

Peter