Looking for design assistance

  • 1
  • Question
  • Updated 1 year ago
  • (Edited)
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members.

Hello everybody I was looking at Darius's profile and website and came across a design he made that was great and was wondering how I could possibly do something like this not exact but similar as I want to make something with a background like that and more for our presentation.

Example: http://preview.risevision.com/?type=presentation&id=7fade33b-6203-4692-837f-f3f3f5e87b4b&sho...
Photo of Robert Bihler

Robert Bihler

  • 260 Points 250 badge 2x thumb

Posted 1 year ago

  • 1
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Hey Robert, I'm glad you liked it. Presentation is very simple... in a way. It has background with all the graphics, html widget with all these bubbles flying, text widget for names and custom date html because the date/time widget did not work for me in this case.. Those bubbles is some pen from www.codepen.io ... It was long time ago and I do not have any record which one was it. For the most I dig out all the cool stuff from there.

I did get your email, and I was gonna answer you later. If you want I can send you files for the bubbles. They can be customized to fit your needs... speed, size, colors, direction etc.. Requires some basic html/css/js knowledge.
Photo of Robert Bihler

Robert Bihler

  • 260 Points 250 badge 2x thumb
This is great i also have a follow up question, How would you implement codepen creations into the rise vision editor?
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Although I like to say it is easy, the answer how to do it is not. Rise Vision editor is so flexible (I love it for that) that there is few way to do that.

Basically, codepen files (and this is widely accepted way to go about this in general), when you download them, they come sorted out by the type: there is html file, then there are folders with css and js files and some additional stuff.

Option #1: you put all that stuff as is, do not change anything, in you online storage. Then use web page widget to link to that html file (usually index.html). Now I have to note that Rise Vision storage is a bit funky. Typically index file has links in it to these additional css and js files. For some weird reason those links will not work for you when stored in Rise Vision. You gonna need to copy the direct links from Rise Vision storage: go to that file in the storage and copy the link; hen go back to index file and replace existing link. This is not difficult at all, but you need to be aware of that. Also this requires you to upload all the files except index file to the storage first. Then you copy links from storage to index file that is till on your PC. And when you done updating links, only then you upload index file. A bit fiddly, but not difficult.

This is not an issue when you upload files to a regular online hosting, such as GoDaddy. Then there is no need to update links.

Option #2: If there is not much css or js going on, you can have all, of them within the same html file. That makes all that linking mess unnecessary. In this case you can still pull index file with web page widget (advantage is that you can set refresh rate to it), you also can use html widget and paste in it all the index file content.

Option #3: again, if there is not much html, css, and js going then you can put all that within Rise Vision editor's html code. Rise Vision is just straight forward html file. This is perfect when you want to use your own html stuff such as multi-page interactive presentation, but still have Rise Vision Widgets available to use.

And there is #4 which I am still testing. It is similar to option #1, but instead of using online hosting/storage, you can put files on the same Windows PC.

Again, I assume you gonna need to do some modifications to the original files, which means do not rush with uploading files. First, make sure things work OK locally.