Discussion on MultiPurpose - Responsive HTML5 Website Template

Discussion on MultiPurpose - Responsive HTML5 Website Template

Cart 2,369 sales
Well Documented

ThemeMotive supports this item

Supported

322 comments found.

Hi,

I am trying to get the sliders to change more quickly. Can you please tell me how to change the timing? I am using Slider4 and the content-slider and would like both to be able to rotate more frequently.

Please let me know what I can change to make this happen.

Thanks

As for the content-slider in this case you will need to add custom code.

Please place this code under line 748 on the current version of scripts.js:

function autoContentSlider() {
window.setInterval(function () {
    if(pos > maxLeft) pos--;
    else pos = 0;
    var moveTo = pos * itemW - offset;
    slider.stop(true, true).animate({left: moveTo}, speed);
   }, 3000); // repeat forever, polling every 3 seconds
}
autoContentSlider();

Then it should change the slides every 3 seconds :) Current slider is optimized jQuery slider and working in the loop and it go to the beginning after the last element is viewed, we consider it more user friendly than working in the loop.

Please let us know if we can be of further assistance.

Thanks and kind regards

Hi,

Sorry but I cannot figure out where to put this in the scripts.js file. The line where you said to add this is in the google maps section of the file I have. Can this just be added anywhere or must if be specifically within a specific section of the slider code?

Hey,

Thank you for your comment :)

Please put the code mentioned above just before this part of code in the scripts.js (this part is already in your scripts.js)

(here should go the code)

    }
});

$(".slider > *").css({opacity:1},500);

})

// google maps
$(".gmap").each(function(){

(the rest of the scripts.js document)

If you have problem with this, we can prepare the file or you and send you via e-mail (we will need your e-mail adress then, so please send us e-mail in this case).

Please let us know if we can be of further assistance.

Thanks and kind regards

If I am using just one slider, how can I remove all the code relating to the other sliders in the scripts file?

Can I use the Nivo slider, which is not included in the template files? In this case, do I have to make changes or remove code from the scripts file?

Thank you,

Hey Remsa,

Thank you for your comment :)

The general code for sliders is very great optimized, so that many sliders use the same code and most of changes are done in style.css, however some sliders needed to have different code (for example slider on landing-page.html, home6.html and slider on home10.html), you might remove code for these sliders (if you don’e need them) in scripts.js under sections (// slider form, //slider 6, // slider 10 ). We may optimize the file for you if you want, please just send us your (if it’s different than the latest version) scripts.js and write us is which slider you want to use.

Concerning Nivo Slider (you don’t need to remove code from scripts.js) – this is different/separate type of slider (which is using its own files), MultiPurpose sliders are more ligthweight (dont’t need extra http requests) and the are also using optmized SEO firendly semantic HTML5 strucuture and have got ultra optimized CSS code. If you want to use Nivo slider you might need to install new files (js. css), add markup, hook up the slider and optionally change the settings, use themes, use thumbnails or custom transitions. You might probably also need to add some custom CSS. Helpful details about how to do that please find here.

Please let us know if we can be of further assistance.

Thanks and kind regards

Very nice template. One of the things that caught my eye was the Promo Slider. However, when I tested the responsiveness, the images didn’t resize as well as other sliders such as the Content Slider. (Same thing with Best Slider) If the Promo Slider put the text that is placed over the image in desktop view between a resized image and the slider nav section, that might work better in Responsive view. Again, I really like the template and the Promo Slider specifically, just hope the responsiveness can be improved.

Hey Redembermarketing,

Thank you for your positive comment and thoughts about improvements :)

Please note that in the Best Slider responsive version is done intentionally that way. Previous version of this slider was done with scalling images, but then the font-size needed to be very small (to keep the image and full text in the slider), hard to read (not good for SEO and users), so we redesign this type of slider and made the text just little bit smaller. Thanks again for your suggestions of improvements – we have already made the improvement for resolution less than 360px for Promo Slider, so that the text is going down and has got additional shadow to improve the visibility.

Please let us know if we can be of further assistance.

Thanks and kind regards

Thanks for the response. My point was that the text shouldn’t stay in the image area at all at those lower resolutions. Move the text out of the image area so the image can be scaled, and move the text beneath the image so it’s easier to read / better for SEO.

Thank you for your feedback and improvement proposition :) We appreciate it. We are constantly working to improve our products, so we noted your propositions and put it on our “to do” list.

Please let us know if we can be of further assistance.

Thanks and kind regards

Hi,

It would be great if you could have the menu as a PHP include so that it could be changed globally?

Would this be possible do you think?

In your code sample there is mistake. Please remove first instances of “selected=” for each menu/option item and then it should work. Right now you generating the output code like: selected="selected="selected"", but should be just selected="selected"

Please let us know if we can be of further assistance. Thands and kind regards

Aha! That makes perfect sense – thank you again for the support!

(sorry for my cumbersome questions!)

You are welcome :)

Please let us know if we can be of further assistance.

Thanks and kind regards

Hi,

On an ipad…

When I add an image inline of the content it is full width when viewed landscape but when viewed portrait it cuts off the side of the image.

If i set the width to be as per below it fixes the issue but the page has to be reloaded after rotating the ipad to get it to become 100% width… is there a way to get it to do it automatically?

example_page_1

Thanks

Hi,

We couldn’t replicate that issue on the online preview (for example here all looks fine on all iPads view, so probably it might be your custom image on some custom place/html structure. Then you might please add the class for this image for example class=”custom-img” and add additional style in style.css

.custom-img {max-width: 100%; height: auto;}

Please let us know if we can be of further assistance.

Thanks and kind regards

Hi

That has worked – thanks!. I think the issue was the width=100% within the image.. it was causing a conflict when you loaded the page in landscape mode, turned it to portrait it was not adjusting for some reason….

Thanks!

You are welcome :)

Hi,

Is there any way to disable the mobile version of the site, so o iPad and iPhone you view as per desktop?

Thanks

Ah – need to kill the [meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0”] in the page

Thanks!

Seems like you have made some custom modifications and maybe some code is missing. Please make sure the code is valid – it should be. View port meta is recommended to have and it should work fine with this. You optimize it a bit and try to remove just maximum-scale=1.0 from that if needed.

Please let us know if we can be of further assistance.

Thanks and kind regards

You are right… I just re-tested from fresh and somewhere i’ve stripped out something I shouldn’t have

Thanks!!!

Beautiful product! I do have a question. Is it possible to have the messages that appear when submitting the contact form pop up in the middle of the screen, like a modal, instead of pushing the content down? This makes the content go off the screen.

Also, when I refresh any of the pages to see the changes I make to the theme, the drop-down-select menu that appears in smartphone view flickers in below the Home menu button in wide view, pushing the content down, then disappears in less than a second, restoring the page. It’s a minor hiccup, but it can be worrying as this happens fairly consistently.

Thank you.

Hey

Thank you very much for comment and positive feedback :) We appreciate it :)

Concerning your questions, please just replace this line in the scripts.js:

var formTop = form.offset().top;

to this:

var formTop = (form.offset().top) - 45;

Then it will load the box with message 45px down, so that it will improve the visibility :)

Concerning second question, could you please tell us the details about the browser you are using in your mobile and what kind of mobile is it, so that we could replicate it and investigate (however it might be related to low connection speed and slow loading of the page)?

Please let us know if we can be of further assistance.

Thanks and kind regards

Hey, Great Template! Quick question… I cannot find how to activate the header row (that moves with the page) that is seen on the demo. For instance, when you scroll down the page, the header bar follows along. Thanks you for your help!

Hey Miketuck,

Thank you for your comment and positive feedback :) We appreciate it a lot :)

Concerning your question about sticky header. Propably you don’t have the latest version of the template. In the latest version sticky header is enabled by default like on the online preview. If you have the latest version, it’s very easy to activate/deactivate it, please just add sticky-anabled class to the <header> tag. Furthermore if you don’t want to have the top bar as sticky (like on the online preview) please also add the class no-topbar to the <header> tag. So the final example can look like this:

<header class="h3 sticky-enabled no-topbar">

If you don’t want the sticky header to show then please just remove “sticky-enabled no-topbar” from the code.

If you want just the latest files needed (style-header.css and scripts.js) to upade, so that it’s working please send us e-mail, so that we know where to send you the files back :) If you don’t have the latest version of the html files you should also add span element to the slogan close to the logo, so that it’s not showing in the sticky header. If you have the latest version then span element is already added.

Example:

<img src="images/temp/logo.png" alt="MultiPurpose" width="219" height="35" /><span>Ultra Customizable Template</span>

Please let us know if we can be of further assistance.

Thanks and kind regards

Thank you for your assistance. Everything works now. We had accidentally removed the sticky code during installation. Again thanks for a great template.

Hey guys,

Is there a way to have a text box of some sort with MULTIPLE paragraphs inside it?

It seems that if I create, say, a div with class=”box”, then each <p> tag inside that div will create a new and distinct text box of its own… it’s like the “box” class is on the <p> instead of the <div>.

Ideally I’d like to be able to put a variety of content into a “box” of some sort, like a <form> along with media (vids/pics/etc) as well as paragraphs.

Am I missing something obvious? Thoughts/workarounds?

Thanks! :)

Hey mtg01,

Thank you for your comment :)

Please note that class name box is reseved for informational boxes shortcodes, so please use for example class name custom-box instead. Then it should work fine :)

For example:

1) add in style.css

.custom-box {border: 2px solid #ccc; padding: 0 20px; margin: 10px auto; max-width: 400px;}

2) add in the “content” section:

<div class="custom-box">
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>

Please let us know if we can be of further assistance.

Thanks and kind regards

Hello Guys,

I have installed the theme on my local machine but it not working the following error comes : MultiPurpose Template is missing. WP 3.6.1 what I did just copy HTML folder to themes folder Please I need ur help ASAP :)

Hey Abukhamis,

Thank you for your message.

Please note that it is HTML5 site template, not WordPress theme, so that’s the reason you can’t activate it on WordPress.

Please have a look here and please contact the Envato in this case (if needed).

You might also consider using the HTML template, you could edit in WYSWIG mode for example in Dreamweaver or Kompozer and just upload on your server via FTP.

Please let us know if we can be of further assistance.

Thanks and kind regards, ThemeMotive team

Hey Abukhamis,

We are happy to inform that MultiPurpose WordPress theme (with lot of outstanding features) was finally released and it is available to download now on themeforest :)

Please have a look here: http://themeforest.net/item/multipurpose-responsive-wordpress-theme/9219359

Hope it helps!

Please let us know if we can be of further assistance.

Kind regards,

ThemeMotive team

Hey guys, do you have any other theme products? Specifically I am looking for an “admin area” template, like the kind you find in the ”\ Site Templates \ Admin Templates\” area here on theme forest.

There are a couple in there I’m looking at, but if y’all have something, especially if it is similar to MultiPurpose, I’d rather purchase from you…

Lemme know? Thanks!

Hey mtg01,

Thank you for your positive feedback :)

We have got also Converting Landing Page on ThemeForest, but we are working on the brand new useful and beautiful themes, so please follow us to be informaed when they are released. Concerning Admin Panel – it’s already possible to build simple admin panel with the current features, but we have got it on the to do list to update it with some extra admin panel subpages. Would be great to hear some feedback from people that need it, so we can already thank you for your feedback and interest in admin panel features :)

Please let us know if we can be of further assistance.

Thanks and kind regards

Thanks, followed. :)

For feedback, it seems that a lot of the admin templates for sale on this site are very similar with respect to the “features” they have… Seems like it comes down to more a matter of differences in layout and visual appearance. I’d recommend checking out some of the admin templates to see the common elements they are all including.

Personally, I won’t be using every feature of these admin templates (like the graphs for example), but having them available so we can add them in later would be great.

Thank you for feedback and following :) We appreciate it :)

Hi, well done template!

I am trying to adopt the css for some of the various “buttons” into an <input type=”submit”> form element, however not having much luck. (The submit button is displaying with a plain white background.)

Are there any predefined classes for input/submit tags?

I’m using the “green” color scheme.

Thanks!

In this case you will need to modify style.css and style-colors.css

1) Please find and replace in style.css:

find:

a.button, button

replace to:

a.button, button, input[type="submit"]

in style-colors.css:

find:

.color-green button[type="submit"], .color-green a.button

replace to:

.color-green button[type="submit"], input[type="submit"], .color-green a.button

find:

.color-green button[type="submit"]:hover, .color-green a.button:hover

replace to:

.color-green button[type="submit"]:hover, input[type="submit"]:hover, .color-green a.button:hover

Please let us know if we can be of further assistance.

Thanks and kind regards

Thanks very much, this worked!

You are welcome :)

Please let us know if we can be of further assistance.

Thanks and kind regards

Hello, I was wondering if there could be a sub-menu under the already submenu ul list. i tried adding another ul item under the li item that is already inside the ul item with no success. I didn’t know if it was possible with this drop down menu.

Hi,

Thank you for your comment :)

Sure, it it possible and easy to do. You just need to add proper html code.

Here is the working/tested example of li element for header menu with two level links:

<li class="current-menu-item"><a href="./">Home</a> <ul> <li><a href="./landing-page.html">Landing Page</a> <ul> <li><a href="./landing-page.html">Landing Page</a></li> </ul> </li> </ul> </li>

Please let us know if we can be of further assistance.

Thanks and kind regards

Dear ThemeMotive,

This might be a stupid question, but I will ask it anyway. How should I calculate approximately the server usage for this website? My website, (not yet including all pictures, etc) is about 10MB, but to make it easy lets say it will be 10MB.

Does the browser automatically cache this template to speed up download, or do I need to add something to it?

Considering I’m expecting (just to round it up) 10000 unique visitors a month, how big data plan should I chose?

Thank you for you assistance! Best regards, Aron

Hey,

Thank you for your question :)

Concerning hosting plan needed, currently on Dreamhost (and most hosting providers) there is unlimited bandwidth and storage, so won’t be problem for this, especially when there will be about 300 unique visitors/day. Please also note that your webiste will be static html (no database, php), so it should work really :)

Concerning point one “Leverage browser caching” if you expect returning visitors and would like to speed up then please consider adding this lines into your .htaccess file (this demands Apache server, so please make sure have got it on your hosting plan):

## EXPIRES CACHING ##

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year" 
ExpiresByType image/jpeg "access 1 year" 
ExpiresByType image/gif "access 1 year" 
ExpiresByType image/png "access 1 year" 
ExpiresByType text/css "access 1 month" 
ExpiresByType application/pdf "access 1 month" 
ExpiresByType text/x-javascript "access 1 month" 
ExpiresDefault "access 2 days" 
</IfModule>
## EXPIRES CACHING ##

Please let us know if we can be of further assistance.

Thanks and kind regards

This link migh be also useful for you.

Please let us know if we can be of further assistance.

Thanks and kind regards

Thanks guys!

I haven’t thought of the .htaccess; It is way better than adding it to every page!

In the meanwhile I’ve compressed all the images on the website. Now developers.google.com tells me, there are no major issues on the website (mostly green ticks, only 2 orange, but those aren’t critical either!)

Thank you very much for your assistance!

Best Regards, Aron

Hi,

I was wondering for the ‘page-side-nav.html’, could I have the nav menu on the left instead of the right? If so, how should I go about editing it?

Hi,

Thank you for your question.

1) If you want to change all sidebars to the left then please just replace in the style.css (just need to replce the float value):

from

.main {float: left; width: 74%; max-width: 680px;}
aside {float: right; width: 24%; max-width: 220px;}

to

.main {float: right; width: 74%; max-width: 680px;}
aside {float: left; width: 24%; max-width: 220px;}

2) If you want to change the sidebar to the left only on the page-side-nav.html then please add in the style.css:

.left-nav .main {float: right;}
.left-nav aside {float: left;}

and on the page-side-nav.html replace:

<section class="content">

to

<section class="content left-nav">

Please let us know if we can be of further assistance.

Thanks and kind regards

Dear ThemeMotive!

I’m having problem making a custom sub-page using the template. I took the original code from the home8.html page.

See page on http://mybells.net/mybells-mobile-app-for-android.html.

As you can see the colors aren’t right, the 3 coloums aren’t in place next to each other, and there is no spacing, they are right next to the margin.

Also I’m having problem with the progress bar. I’ve change the filling skills in the style.css page to the following: .skill-1 {width: 90%;} .skill-2 {width: 100%;} .skill-3 {width: 60%;} .skill-4 {width: 80%;} but it doesn’t seem to adjust properly.

Could you please help me adjust your style.css in a way, that this will look good?

It would be very much appreciated!

Best Regards, Aron

Wow, you guys are good! My E-mail is czigleraron@gmail.com please send me the newest version here! Thx!

Thanks a lot :) File was just sent to your e-mail, so please find it in your attachement :)

Please let us know if we can be of further assistance.

Thanks and kind regards

The update fixed all the problems instantly, without any further config. needed! Thank you very much!

Is there a WordPress version of this template?

Hey Howdous,

Thank you for your comment :)

Currently HTML5 Site Template version is the one that is available, but you might customize it with Dreamweaver or Kompozer. Please follow us on Envato, Facebook or Twitter to be informed about the WP version.

Please let us know if we can be of further assistance.

Thanks and kind regards

Hey Howdous,

Thank you for your comment.

We are happy to inform that MultiPurpose WordPress theme (with lot of outstanding features) was finally released and it is available to download now on themeforest :)

Please have a look here: http://themeforest.net/item/multipurpose-responsive-wordpress-theme/9219359

Hope it helps!

Please let us know if we can be of further assistance.

Kind regards,

ThemeMotive team

Hello, I am sorry to inform you that this theme is not compatible with IE7 and IE6. Made several tests before stating this Are you sure about IE7 and IE7 the theme being displayed correctly?

Hey andreaf81,

Thank you for your comment :)

We have made few fixes today to improve visibility on IE8, IE7 and IE6, however these browser are very outdated (especially IE6 and IE7) and they don’t support HTML5, CSS3 features and responsive mode.

Please also note that nowadays very very little percent of people are using IE6 and IE7 and this trend is dropping. Here is the reference: http://gs.statcounter.com/#browser_version-ww-monthly-201208-201308 (IE6 and IE7 are so outdated and niche that they are not even included in the ranking).

Please let us know if we can be of further assistance.

Thanks and kind regards

Hi Does this template come with a slider selector? i.e. where you slide to select a value rather than input the value into a field?

Do you want it to have in http://thememotive.com/multipurpose/landing-page.html as a part of form? Please also have a look at this slider http://thememotive.com/multipurpose/home9.html and this slider http://thememotive.com/multipurpose/home10.html They are in some way related to the one from your example.

Please let us know if we can be of further assistance.

Kind regards

I need an element so it can be used similar to the radio buttons, drop downs etc.

So you need just the element not slider, right? That will demand custom coding. We may help you with that, please write us e-mail, so that we could respond you with the exemplary code samples.

Please let us know if we can be of further assistance.

Thanks and kind regards

Hi,

Fantastic job with this template. Decided to buy and enjoying working with what you’ve done.

Found something that I am about to fix but wanted to share (in case there is a solution). For the menus, the secondary nav will attempt to load pages that have no value and will use the option name in the url.

e.g. in landing-page.html if in mobile, you click on “Sliders” option, page is directed to ”/Sliders” which doesn’t exist.

Cheers

Hey hup234design,

Thank you for your comment :) It’s nice to hear positive feedback from you :) We appreciate it :)

As for the menu items it would be better to improve the user experience and remove the emtpy (with anchors) items/links in responsive mode (also recommend to do this in standard mode). Then If user will choose any item from the responsive menu then it will come to the certain page.

In MultiPurpose it is possible to easily have full control on which menu items show to users. You could remove the select field in the source code with that item or set the value to some real subpage (./home4.html) or index page (”./”).

Please let us know if we can be of further assistance.

Thanks and kind regards

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey