stephino supports this item


This author's response time can be up to 5 business days.

19 comments found.

Wow, Fresh design :)

Thank you!

Wow! Keyboard navigation :shocked: That is so smooth!

This is a piece of art, your skills, and the effort clearly show. Much appreciated!

Thank you so much!

I like this template. Thanks for your nice work!!! Is it possible to change the product / blog layout “lightboxes”. They are a little bit oversized.

I’m glad you like it!

The lightbox is actually Bootstrap 3’s Modal. We made it fit 90% of the page on purpose; you colde remove this feature or set any width you like by editing:

style.css (line 597)

.modal-dialog {
    width: 90%;

If you remove the “width” specification, the Bootstrap Modal will revert to its default behavior.

Have a nice day!

Thank you for your fast feedback.

Will the Contact Us How to change the location and cleanup blog email message? :stress:

Buy the item first, then ask for support. Thank you.

Hello, beautiful work! I am considering a purchase for my nonprofit arts group. We plan to use the map to show arts desinations in our county. Can I add multiple destinations? Also, is it possible to have the live map show up in the hero image area… though as a workaround, I could always show an image that links to the live map. Thanks for making such a nice product, I wish you success with it

Hello! Sorry, I’ve been gone for a while.

Yes, the Google Maps API allows the display of multiple locations/destinations at once (I just don’t have the code example right now).

I do not understand what the “hero image area” is. Could you please explain?

The Map area is fixed. The “Contact Us” box can be closed. What you describe is a bug which I cannot reproduce.

I hope I was of service.

Have a nice day!

By hero image, I just meant the large image that comes up first when accessing the site, but the contact/map button is right a top, so all good (the map is the most important element for my use). I was accessing the “mobile” live version from my computer screen, so maybe that affected it. As long as a user can close it, and we are golden. Purchasing the theme now. Very helpful, thanks!!!

You are welcome.

Thanks for a nice theme, any idea for UTF-8 ready font for headings, please?

Hello and thank you for your purchase! Sadly, most “fancy” fonts you’ve seen on major websites and here on ThemeForest only offer full support for English characters. I suggest you head down to and search a font that fits your needs and looks good for headings.

As far as I know, Arial is the only widely-available font that supports (almost) all UTF-8 characters.

Thank you again and have a great day!

Thanks, I’ll take a look. I need the support of Czech letters like ž, ? and ? :-)

Love your theme. It’s getting a lot of compliments :) Here is my test site:

I have two questions for you: 1) I’m a little confused by the google maps API (looking at v.3) and there wasn’t a lot of documentation with the theme on it. For a simple map with pins, I thought i could enter coordinates, but that doesn’t work. Do I need to be adding/editing javascript for this (really sorry if that is a dumb question, I’m just not sure how to find the answer)

2) When I access the site via my iPhone, The contact form is completely over the map, with no way to move it. If I close the form, obviously the map is gone too. Should I just get rid of the contact form, since the map needs to be available for mobile as well?

Thank you for your help

I do have one more question, and i know it is just because I don’t know Java very well. Thank you for your help so far, and i promise to stop bugging you after this!

I see that the code for the map is mostly in the .js file, with that one little bit in the html file. Most of the working examples I can find with multiple markers are just one piece of code, which I’m assuming I need to use in the .js file. Do I need to replace all of the map code, or is there just one piece of it that I can modify to add the other lat/long coordinates and labels. Finally, what do I do about the lat/long coordinates that are in the html file. Should those match up with all the lat/long coordinates that are in the .js file, or are they just a starting point for the map?

I will ask this question at stackoverflow as well. If you can answer it simply and directly, that would be awesome, but i understand this is way above and beyond for me to ask of you. Thanks for your help Stephino!

I can’t edit or delete the question I just posted, so wanted to add that I did ask it at stack overflow too:( Sorry for so many “beginner” questions, but this one will hopefully get an answer there, so I don’t have to take up your time with it.

So I see you’ve got your answers on Stackoverflow. Good job!

Don’t hesitate to contact me for other issues.

Have a great day.

Hi Stephino, I have a new question for you, about embedding a youtube video in a way that resizes nicely.

I added this to the CSS:

/Video/ .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

And this is the html:

<iframe src=”” frameborder=”0” width=”560” height=”315”></iframe> - See more at:

I thought it would work, but the video doesn’t show up at all. If I just straight up embed it, then it shows up, but looks terrible sized to mobile.

Thoughts on what I should do? Thanks in advance!

The iframe is in a div, not sure why I didn’t include that in the post

Should I be using Javascript for this function? I saw this writeup:

The other solution i came across takes advantage of bootstrap like this:

OK, I found a way that makes it work. I just had to put the div with the iframe inside the content div.

div class=”content” div class=”videoWrapper” <iframe width=”100%” height=”auto” src=”//” frameborder=”0” allowfullscreen></iframe> /div

blah blah content text starts here…

And is the css I used:

.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Sorry to jam up your comments feed! Cheers :)

I do have one more question, and have tried everything I could think of first with no luck to solve it. When I have your original map code, the “products” section light box effect works just fine, and I can click on the image to pop up the light box. When I put in my map code, which is just pretty much your code with an array for locations, the map works just fine but the products images no longer pop up that light box image. No js errors are being thrown, so I was hoping you might direct me to which line I might find the light box code. Even a general idea of where to look would be most helpful. Thanks!

Apparently, the mere act of asking you the question is enlightening, as I solved my dilemma. The more I tried to break the problem down to ask you a direct question, the closer I got to the answer until… aha! Thanks for building such an amazing theme. The more I work in it, the more I <3 it :)

Look nice. Good luck with sales.;

Hi stephino,

Im looking at getting this template for my company. However, I had one curiousity as I was going about the live preview.

The “sign up” buttons … they dont go anywhere or do anything on the preview. Do these buttons have any functionality ? Im going to be needing them to do like a “checkout” type process, that just sends me the email details of the customer, and the “level” they wish to purchase… . All of the transaction processing will take place off site… but I still need that Clickthrough to get the emails.

Let me know if this is a function within the template or if im going to need to look elsewhere.

Hello. Sorry for the late response, this is also for others who might be interested in the same thing. The “Sign Up” buttons do not have any functionality. However, the template is built using Bootstrap 3, so one could easily add an on-click pop-up for each button; the pop-up would contain an input field for the e-mail, a drop-down menu for the plan type and a submit button. Such an implementation would be swift but it is not currently provided with this template.

Hi Stephino, Thank you for this great template and the quality documentation with it. Even so, I have a problem with the creation of a xx-thumb.jpg file. I have created a new 1a.jpg file as img/products/1a.jpg. Now i understand that the 1a-thumb.jpg is automatically created, on-the-fly. I have also updated the html-version.html code to use the 1a.jpg image. I start the html-version.html page in Firefox but the page does not display the 1a-thumb.jpg. I see only the circular loading icon on the 1-canvas. At the end the 1a-thumb.jpg is not in the img/products folder. So what is the procedure in case of new images? My OS is W8.1. Thanks for the advice.-Eric

Hello Eric!

The thumbnails are, indeed, re-generated for you automatically but there is a caching mechanism in place so that this operation is done only once.

1. Please remove all ”*.thumb.jpg” files from ”/img/products” and ”/img/blogs” 2. Load the main “index.php” in your browser

Please let me know if your issue is fixed.

Thank you, Stephino

Hi! sorry for my english.

How can I stop a frame from adding a menu?

I want to put frames, but i don’t want some of them to show as a menu.

Can I change that?



Just add another div with class “row” (see bootstrap v3.0 documentation). If you want the new row to be part of the floating menu, you must declare it as such, by editing ”/js/functions.js” > lines after ”$.storyline({ frames: { ”.

Storyline documentation:

Thank you and good luck!


Weka Purchased

I like the template and am very happy with my purchase. Could you please check the demo site from your desktop and observe the product items stacking behaviour.

While changing the width of the browser window there is a gap in the second row first two columns. I think it has to do something with the height of the conteiners based on how much text is in there.

Thank you very much.

Hello, I have downloaded your theme, and i have set up a server/test server to it. But i am having a problem with it, when i try to preview in browser, (using dreamweaver) it either pulls up a page with just code, or it brings up a 404 error page not found.. Any suggestions on how to solve this issue? I am really looking forward to using this template. Thanks in advance for your response.

First of, don’t use DreamWeaver –

If you are using Windows, download and install Wamp Server:

If you are using Linux, install LAMP:

Drag-and-drop your files into the “www” folder and load the website accessing http://localhost from your web browser of choice.

Good luck!

Well, I personally enjoy dreamweaver, but up for trying other. So, are you saying it is not compatible with dreamweaver?

I’m saying you might get it to work with DW in the end but you don’t need to. The template is a simple HTML document which you can view with any (modern) browser. What IDE you choose to edit the files is up to you.

A simple LAMP stack would suffice to render the ”.php” files provided with this template.

I cannot provide any more information at this point.

Good luck!


Weka Purchased

Can you please let me know how to make the page display the product thumbnails right away?

By default only a the loading.gif is showing until the user scrolls the page or does some other action.

Hello, Thank you for query and sorry for the late reply!

The way the page works is when the user scrolls to the “products” section, the “StoryLine.js” plugin adds the “visible” class to the corresponding DIV element after 800 ms in order to create the loading effect. When the user scrolls out of the “products” section, the “visible” class is removed.

In order to disable this functionality without any JS modifications you shoud just edit the css/style.css file, line 373:

.products .isotope > div > * { opacity: 0; /* <=== Set the opacity to 1 */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-out; -o-transition: opacity 2s ease-out; transition: opacity 2s ease-out; }

You can also disable this effect on the “blog” section by editing the css/style.css file, line 819:

.blog .swipe > div > * { opacity: 0; /* <=== Set the opacity to 1 */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-out; -o-transition: opacity 2s ease-out; transition: opacity 2s ease-out; }

Good luck!


Weka Purchased

Thank you Stephino, Changing the opacity value did the trick. Have a great day.

hi there loved your web site and purchased which I needed as single html.. I have a problem (maybe on my side) when I ve seen the demo all seems fine such as images. slider images etc however after I donloaded I only see the images as 1 2 3 4 there are no images as I ve seen with demo can u pls explain if I do something wrong? thnx

Hello! There is nothing wrong, in fact this is the way all items are packed on ThemeForest. You can replace the placeholder images with your own art.

Thank you!

When i try to install the theme it gave me the following error:

The package could not be installed. The theme is missing the style.css stylesheet.

Please advise

Please ask for a refund. This is a standalone HTML template, NOT a WordPress theme.