Rubik Presentation Page
Icon html
Icon bootstrap

473 Downloads
38 Comments
Premium Support
Lifetime Updates
Release: 2 years ago
Update: 1 year ago
Icon html
Icon bootstrap

47 Handcrafted Components

5 Customized Plugins

4 Example Pages

Bootstrap Based

Documentation

Fully Responsive

Product certified by: Creative Tim

We are here to help you!

38 Web Developers commented on this product

Report issue Video Tutorial

chompusudarat
  • downloaded
7 months ago

@axelut thank you for your reply. I change the javascript to this one "https://maps.googleapis.com/maps/api/js" already same like it not work fine. in the beginning it was working but after load page complete then it doesn't work again. and also if I just push F12 on my laptop to run it. same like it work fine but if I upload and run them on server it not working :(

axelut
  • owner

@chompusudarat sorry to hear that you still have the issue. That is very weird, it is working on the local computer but not on the server. Our website's presentation page is built with Rubik and is hosted on Heroku: http://presentation.creative-tim.com/ and we have a map in the page and everything is working fine there. Maybe on your server they require and explicit key... can you please follow Google's Steps on how to get a key and add in in your google.maps link like in this tutorial: https://developers.google.com/maps/documentation/javascript/get-api-key Please let us know your progress. Best, Alex!
7 months ago

juliyvchirkov
  • downloaded

@chompusudarat @axelut sorry for bothering, but maybe my advice will help somehow as far as I remember, google is cancelling free uncontrolled use of gapi related services bit by bit, the new way of dealing w/ gapi has been officially announced by google 2+ years ago thus nowadays the one & only way to get google api related services working for your projects (sites) w/o failures is to use google developers console to create & manage personal workspace for each project, 'cause you gotta request & setup own personal key (or keys if needed, that's for you to decide) to get gapi working properly I guess the fountainhead of your troubles w/ google.maps api can be key mismatch — if you're using the code of «rubik» as is w/o modifications, you're using gapi related stuff w/ the key which belongs to creative-tim team, & thus a hundred to one this key is limited to the bunch of creative-tim team projects (sites, domains) so to get rid of failures w/ gapi you gotta register / login at https://console.developers.google.com/apis/, create new project for your site where you're going to place the map, choose from the list & connect to your project apis which you're planning to use (screenshot https://goo.gl/SLBtEk), request / generate one or a couple of keys for your needs, & replace the key of creative-tim team w/ your own in the code of rubik «a couple» since you can use gapi inside your project in many ways w/ different keys: first can be for use w/ javascript api, i.e. key visible to every visitor in code of your pages in public, next for use only inside php scripts on server-side, i.e. unreachable for everyone but you, third can have limited use only within android or ios mobile apps, et cetera & since these keys are smth like your ID for gapi services, for sure you'll want to protect your «public» keys by limiting the possible points of their use w/ list of your domains for security reasons (for example, to be sure nobody uses your key to connect gapi on some fishing site, or just to know nobody spends your traffic et cetera) — 'cause since google treats your key as your ID, any requests & operations made from any server on internet w/ your «public» unprotected key will be logged to your history & your responsibility despite my review of the flow may seem a bit bulky, in fact in google developers console everything is extremely simple & it takes no time to setup that shit for example, I'm using gmaps js api, roads api, static maps api, street view api, street view image api, embed api, geocoding api, places api, directions api & distance matrix api w/ client-side javascript & server-side php requests for one of our projects just to supply the customers w/ a couple of maps to direct them to offline shops & showrooms (despite that galore gapi stuff may seem excessive indeed it's used to make the routine sheen & accessible on any device w/ any hardware & os, both mobile & desktop, light & static on low bandwidth, powerful & interactive otherwise, et cetera) — but syne google for developers provides nice & clear detailed man w/ live examples for every gapi, it almost took for me no time to integrate the whole bunch hope this helps, & you'll also setup your own gapi instance quickly and easily yup, the whole gapi service is still free of charge w/ really great terms — if your project is not geostartup like 4square you'll never need to pay no cent since you'll never get over the limits
7 months ago

juliyvchirkov
  • downloaded

@chompusudarat @axelut sorry for bothering, but hope my advice will help somehow. as far as I remember, google is cancelling free uncontrolled use of gapi related services bit by bit; the new way of dealing w/ gapi has been officially announced by google 2+ years ago, thus nowadays the one & only way to get google api related services working for your projects (sites) w/o failures is to use google developers console to create & manage personal workspace for each project, 'cause you gotta request & setup own personal key (or keys if needed, that's for you to decide) to get gapi working properly. I guess the fountainhead of your troubles w/ google.maps api can be key mismatch — if you're using the code of «rubik» as is w/o modifications, you're using gapi related stuff w/ the key which belongs to creative-tim team, & thus a hundred to one this key is limited to the bunch of creative-tim team projects (sites, domains). so to get rid of failures w/ gapi you gotta register / login at https://console.developers.google.com/apis/, create new project for your site where you're going to place the map, choose from the list & connect to your project apis which you're planning to use (screenshot https://goo.gl/SLBtEk), request / generate one or a couple of keys for your needs, & replace the key of creative-tim team w/ your own in the code of «rubik». I say «a couple» since you can use gapi inside your project in many ways w/ different keys: first can be used w/ javascript api, i.e. this key will visible to every visitor in code of your pages in public, next — for use only inside php scripts on server-side, i.e. unreachable for everyone but you, third can have limited use only within android or ios mobile apps, et cetera. & since these keys are smth like your ID for gapi services, for sure you'll want to protect your «public» keys by limiting the possible points of their use w/ list of your domains for security reasons (for example, to be sure nobody uses your key to connect gapi w/ some fishing site, or just to know nobody spends your traffic et cetera) — 'cause syne google treats your key as your ID, any requests & operations made from any server on internet w/ your «public» unprotected key will be logged to your history & improper use will be your responsibility. despite my review of the flow may seem a bit bulky, in fact in google developers console everything is extremely simple & it takes no time to setup that shit. for example, I'm using gmaps javascript api, roads api, static maps api, street view api, street view image api, embed api, geocoding api, places api, directions api & distance matrix api w/ 2 different keys for client-side javascript & server-side php requests for one of our projects just to supply the customers w/ a couple of maps to direct them to offline shops & showrooms (despite that galore gapi stuff may seem excessive indeed it's used to make the routine sheen & accessible on any device w/ any hardware & os, both mobile & desktop, light & static on low bandwidth, powerful & interactive otherwise, et cetera) — but syne google for developers provides nice & clear detailed man w/ live examples for every gapi, it almost took for me no time to integrate the whole bunch. hope this helps, & you'll also setup your own gapi instance quickly and easily. yup, the whole gapi service is still free of charge w/ really great terms — if your project is not geostartup like 4square you'll never need to pay no cent since you'll never get over the limits ———————————————————————— small postscriptum for Alex: have been forced to repost this comment anew 'cause all line breaks have been gone after posting, turning my comment into hard-to-read-sheet. smth like comment.replace(/\n/g, '<br>') w/ js before submitting the form or comment.gsub(/\n/, '<br>') w/ ruby on server-side after submit could make the things look much better. lack of line breaks turns phrases into the swamp. drain the swamp! 😸
7 months ago

axelut
  • owner

@juliyvchirkov thank you very much for the detailed explanation. It makes sense that Google want to remove the access from not controlled sources. We will get the API keys to use inside our products and for the users who are downloading the product we will add something like "?key=[your-generated-api-key]" and a tutorial with the steps that they need to take to generate the key as you described. For our comment system, yes it is very basic... we will add something that will get Markdown as input so everything will be formatted right + having working links, code blocks etc. If you know anything for Rails, which also works with our current username attribute "@somebody", we would be very happy to check it. Best, Alex!
7 months ago

chompusudarat
  • downloaded
7 months ago

@axelut Thank again for your reply, I got it now. I follow Google's Steps and then it work Thank you for your help :)

axelut
  • owner

@chompusudarat that's great! Please let us know if we can help you with anything else. Best, Alex!
7 months ago

chompusudarat
  • downloaded
7 months ago

@axelut Yeah, But can you pls give me an advice about how do I can get my location on map. Which API that you generate? Do I need to change some link for add my location instead location now that is already on the theme. I try to change it by change the link for google maps but it so many link even I change them all it still show the theme location :( Thank again :)

axelut
  • owner

@chompusudarat glad that it was working. To add your own coordinates please go to assets/js/rubick.js around line 387 you will see this function: initGoogleMaps and there you can set the Lat Long for your location. Best, Alex!
7 months ago

lpfy 6 months ago

Small glitch when using video as background, the responsive-src attr should place in video tag rather than in source tag. The responsive image background won't show up when screen resized <992px, everything become fine once I moved responsive-src attr from source tag to video tag.

axelut
  • owner

@lpfy thank you for using our product and for the information. You're right, there is an issue with responsive-src, we added this on our updates list, we will test the solution that you proposed on multiple devices, and if it is working fine we will add it in the official archive. Please let us know if we can help you with anything else. Best, Alex!
6 months ago

jgregmcverry
  • downloaded
2 months ago

@axelut. Great theme. I used your hover cards for another project and then saw you article on Medium and nknew this was a team I must support. I am using a rubik theme here: productsandservices.revisiononlinelearning.com And I am having a few issues with the header: images and buttons: Specifically I can not get them to display consistently well on mobile. For the buttons I created my own class as I could not style them otherwise. I could not even get inline styling to work. The buttons are pushing to the right of mobile display I have tried numerous small and extra small column contributions and can't get them to behave as I would expect in bootstrap. For the image I would like to display the logo centered in the header. Any tips you or the community could provide will be great.

axelut
  • owner

@jgregmcverry thank you for using our products. Glad that you like the article from Medium :D I've checked the page that you've send. Unfortunately I don't see any buttons in the header. Did you change something in the meantime? Also, which logo are you looking to make centered? Best, Alex!
2 months ago

jgregmcverry
  • downloaded
2 months ago

Read through the CSS. Solved most of my own issues. Wish I could delete comments I posted bc things work great. Thanks for your help. @alexlut

axelut
  • owner

@jgregmcverry got it. Glad that it is working fine. I will do that for you :D Best, Alex!
2 months ago

matrfb 1 month ago

I would like to embed two separate maps in my Rubik page (with details of two different locations). How do I do this?

axelut
  • owner

@matrfb thank you for your interest in our product. You just duplicate the code that is for 1 map. If you search in startup.html the id "contactUsMap" you will find the area with the map and the Javascript for that is on rubick.js line 83 and line 387 where is called the method: initGoogleMaps. Please let us know if this was helping you. Best, Alex!
1 month ago

matrfb 1 month ago

Also, can you send me the plugin that makes the contact form work? Thank you!

axelut
  • owner

@matrfb please check this tutorial: https://bootstrapbay.com/blog/working-bootstrap-contact-form/ and let us know how it was working. Best, Alex!
1 month ago

You have to be logged in to post a comment. Login here.

Why our customers appreciate us

Design Quality

Really really nice

Design Quality

Design Quality