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, ThemeMovie, Thank you for your responses. I would like to ask some more questions.
  1. Please advise if one can easily combine every option with any other option, for example Home>CreativeBusiness with Sliders>ProductSlider, or any Color or any Menu? I am asking because these possibilities are not shown in Live Preview.
  2. Also please advise, how the fonts can be changed? Is it done manually in CSS or there is an easier way?
Thank you in advance.

Hey kazmarar,

Thank you for your questions :)

As for combining options – yes, you can combine sliders/colors/menus/boxed/frames/patterns or even title styles.

As for fonts, if you need to use other font than already used, you will need to change one line in HTML (if you want to use one of Google fonts) and replace the font with your font name in style.css . It’s simple and we could assist you with that too.

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

Thanks and kind regards

Hi, I’m using slider7 on my site, but with color-blue. On the 99% of the site the color is blue, but in the slider the small icons and the go-top remained orange. I’ve tried to modify the stlye sheet but without too much success.

Could you please help me?!

Wonderful support! You’ve helped me so much so far! Thank you! Definitely worth the money from this template!

Hey czigleraron,

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

1. As for slider, please change in style.css (just color background-color need to be changed)

from:

.slider7 .controls ul .active a:before {background-color: #ff8400;}

to

.slider7 .controls ul .active a:before {background-color: #319cee;}

2. As for go-top, please change in style.css (just color background-color need to be changed):

from

a.go-top {position: fixed; right: 0; bottom: 50px; display: block; overflow: hidden; width: 44px; height: 40px; background: #ff8400 url("images/go-top.png") 50% 50% no-repeat; text-indent: -50em;}

to

a.go-top {position: fixed; right: 0; bottom: 50px; display: block; overflow: hidden; width: 44px; height: 40px; background: #319cee url("images/go-top.png") 50% 50% no-repeat; text-indent: -50em;}

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

Thanks and kind regards

Works perfect! Thank you!

You are welcome :)

I don’t want all the images to have a border. What I have to do to have class for border, which I can use only for the images I want?

At the moment, the default border is automatically added to all the images.

Thank you

Hey remsa,

Thank you for your comment :)

There are few ways of removing box-shadow effect on images.

If you want to remove all then please remove this from scripts.js file:

//fancy borders on images
$(".content img, footer .widget_photos img").not(".content .testimonial img, .hp-services img, .logo, h3 img, button img, .product-meta img, .img-border img").each(function(){
    var i = $(this);
    i.wrap('<span class="img-border" />');
    if(i.hasClass("alignleft")) {
        i.removeClass("alignleft");
        i.parent().addClass("alignleft");
    }
});

If you want to add it only for some custom images then please add: to the img tag, like for example here:

<span class="img-border"><img src="images/temp/image.jpg" alt="" /></span>

You migh also don’t remove the fancy borders script from scripts.js, but just modify this part (for example to add new element, which should not have the box shadow):

 not(".content .testimonial img, .hp-services img, .logo, h3 img, button img, .product-meta img, .img-border img")

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

Thanks and kind regards

Hi ThemeMotive, I am interested whether this template can be used as multilanguage? I am going to use it for three languages, one of them non-latin, but still left to right. If it is possible, then how the language signs (like flag icons) can be inserted?

Hey kazmarar,

Thank you for the details :)

Concerning your questions:

MultiPurpose is ready to easily use one of over 600 Google fonts, so that you could use English, Armenian or Russian fonts on your website.

According to the flags, you might need to download for example this one and little custom changes will be needed in CSS depends on your needs of how you would like to present the flags. We could assist you with that if needed.

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

Thanks and kind regards

Hi, ThemeMotive, Thank you for response. You say that you an assist with the custom changes of CSS to present flags. That is great. Just let me know in case if I buy the theme, will this change in CSS be free of charge or I would have to pay additionally for that?

Best regards

Hey kazmarar,

If this is just a matter of simple adding icon to drop down menu or just linked icon in the footer then we might do that for you for free :)

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

Thanks and kind regards

I’m currently using the h12 header, with the social plugin in the main-header section!

Since there is a lot of empty place in the main-header just above the mainmenu, I was thinking I’d like to put a searchbar there.

I played around with it, but couldn’t place it in a way that it was nice.

I’d like the searchbar on the same level as the social icons, and the searchbar should be on the left (or right, I don’t really mind) to the icons.

Thank you very much for your help!

BR, Aron

Hey czigleraron,

Thank you for your comment :)

Please add this exemplary code under social icons code (<nav class=”social”> ... </nav)> in the main-header section:

            <form method="get" class="searchform" action="./home3.html">
                <fieldset>
                    <input type="text" value="" name="s" id="s" placeholder="Search">
                    <button type="submit" id="searchsubmit" value="Search"></button>
                </fieldset>
            </form>

and please also update the style.css with the following code:

.main-header form {margin: 11px 16px 0px 0;}
@media (max-width: 800px) {
    .main-header form {margin-top: 16px;}
}
@media (max-width: 645px) {
    .main-header form {margin: 0 auto; margin-bottom: 16px;}
}

Then the search will be visible close to the social icons in the main header. In responsive mode it will also work fine (the code is already tested and ready for that).

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

Thanks and kind regards

works great, thanks!

Hi, i’d like to add a small icon.ico flie to the website, so the tab doesn’t look so dull!

Where, and what will I need to place?

Best Regards, Aron

Hi, haven’t replied to this on purpose so far. The favicon.ico is uploaded into the images directory. I’ve added the exact text very you’ve asked me to, but it doesn’t seem to work. Could you please take a look at it. It is www.mybells.net

Best Regards, Aron

fixed it :) my bad. When I copied the text the qoute sign wasn’t good, changed it, now it works.

OK, thanks for feedback :)

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

Kind regards

Hi ThemeMotive, Could you please tell me, how to install the theme ? I am not professional.I am beginner.?ou would help a lot if you told me…:)

Hi ThemeMotive, If you upload it via FTP directly? Not work? Only with dreamweaver? Sorry for the silly questions… Thanks

Please edit the files in Dreamweaver (according to your needs) first and then please upload all the necessary files (html, css, js, images) to your hosting account (via FTP or some other way – it depends on your hosting provider). We could assist you with that if needed.

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

Thanks and kind regards

Hey Manolo07,

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 ThemeMotive!

I’m considering buying the template. I’m not a professional IT developer, but html, css and php are languages I kinda understand so I can edit it and customize it in the way I’d like it.

Since it is really important for me, that my website should look good on tablet and phone too, how do I ensure that it looks good on the mobile device? is this feature inbuilt, so it auto-adjusts, or will I need to upload a mobile version of the site under a subdomain?

Sorry for the newbie question, I’m just not sure how this works,

Greetings, Aron.

Hey Aron,

Thank you for your comment :)

MultiPurpose has got fully and smooth responsive design – it fits to any resolution or device automatically (no subdomain needed).

Please have a look for example here http://www.responsinator.com/?url=http%3A%2F%2Fthememotive.com%2Fmultipurpose%2F to see how it will look on different devices like tablets and phones.

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

Thanks and kind regards

Thanks for the fast reply. You just got yourself a new customer!

You are welcome :) Thanks :)

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

Kind regards

Hi there, Would I be able to remove the footer “MultiPurpose template created by ThemeMotive | All rights reserved” and place it on sitemap page? The “All rights reserved” will stay on each page. I looked through the License Agreement and was unable to find anything on this. Thanks in advance.

Hey Seletech,

Thank you for your comment. :)

Concerning your question: Sure, you can remove it and use your own content in this place.

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

Thanks and kind regards, ThemeMotive

Thank you so much – love the design.

You are welcome :) Thanks a lot :) We appreciate it :)

Hi,

I really like your theme! Great Work!

I do have one question before I purchase it though.

How easy is it to change the color to one that matches my client’s logo scheme?

Thanks

Hey jaschutz,

Thank you for your your comment and positive feedback :)

In general it’s easy to customize color and most changes you can do using just style.css file.

There are two option:

1) You could use one of the predefinied color skin easily by just changing the class name.

2) Second option if you would like to use some completely custom color then you will need to replace color #ff8400 to your custom color for example #89cfda in style.css and style-headers.css (if you want to use some of the additional menu). Depends of what kind of website you are going to build and what element you need to use, you migh also need to for example prepare new images for slider paginator based on psd file included (so it’s easy too).

We could assist you with the color change, so please let us know if we can be of further assistance or can help you more in this case.

Thanks and kind regards

Hi! i have a problem with your template, I really hope you have a solution for me! (: I want to use your columns in the front page. So i took the div class of col4 and col34, but because I want the 1/4 to be on the right, so i swap them around, then they went mis-align. Am I doing something wrong?

ohmygosh! awesome!! (: thanks!! (:

just one more question (: could i have one tab in a tablist be on the right side? so say, I have 5 tabs, default will all go to the left. I want 4 on the left, and 1 on the right.

Hey,

You are welcome :)

Sure, you can make it. Custom CSS code is needed in that case. Here is the exemplary, working and tested code:

CSS code to add in the file style.css:

ul.tabs li.tab-right {float: right;}
ul.tabs li.tab-right a {float: right;}

and for responsive please replace:

this code:

    ul.tabs li {float: none; margin: 0;}
    ul.tabs li a {float: none; display: block; margin: 0;}

to this:

    ul.tabs li, ul.tabs li.tab-right {float: none; margin: 0;}
    ul.tabs li a, ul.tabs li.tab-right a {float: none; display: block; margin: 0;}

Here is the example of the HTML structure (class=”tab-right” was added to the 5th element).

<li class="tab-right"><a href="#">Tab 5</a></li>

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

Thanks and kind regards

hi! i’m really like your template, just one question, can i get the top menu header to stay on top, is there like a one-liner code that will do the trick? (:

Hey violetjoy,

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

Yes, sure, we have got already working code doing it :)

It is also included in the download package and described in the documentation.

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

Thanks and kind regards

I am trying to wrap text around an image, with space around the imahe, but it doesn’t work. The align attribute is not supported in HTML5.

Tried to put in css file: .textwrap {float-right; margin:10px; }

This does not work too. Any suggestions?

Thank you

Hey remsa,

Thank you for your comment :)

Please have a look at this working example (you can test it for example on blog-single.html):

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

<p class="alignleft"><img src="images/temp/author.jpg" alt="" /></p>

<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>

code in style.css to add:

.alignleft {float: left; margin: 10px;}

Please note that class=”alignleft” was added not to img tag but to p tag.

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

Thanks and kind regards

Hi

Very nice template. I have a quick question.

Is it going to be a problem in mobile device if the logo is a bit higher and a bit longer than yours?

I had that problem with another template where the navigation would overlap the icon in certain devices. I guess it was doing that because of the breaking point.

Joe

Hey JoeAsap,

Thank you for your question and positive feedback :) We appreciate it :)

Most mobile are using 320 px resolution (for example iphone). MultiPurpose has got 10px margin on the left and right (for this resolution), so there is 300px for logo image. Current logo image on the preview has got 219px width, so if your logo is not wider than extra 81px or has got no more than 300px width in general then all should be fine. If your logo is wider than 300px or your mobile has got too small resolution (like for example 280px) then just little CSS fix will be needed and all will be fine as well. We could assist and help you with that.

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

Thanks and kind regards

Hi!

First of all, I have to tell you that the more I go in depth in this template, the more I realize how versatile and useful it is! Well done!

I have a question regarding the main nav, as follows. I added a background image to the main nav bar, and another one to each item in hover. I saved two versions of each one (one normal, and the other for retina). I would need to know if it is necessary to add the following code in the css, as I found it in http://retina-images.complexcompulsions.com: .some-selector { background-image: url(“my-image.png”); -webkit-background-size: 300px 90px; -moz-background-size: 300px 90px; -o-background-size: 300px 90px; background-size: 300px 90px; }

Where “some-selector” should be my selector, “my-image” should be my image, and so on.

Anoher issue concerns to home4.html. The slider images do not show complete in mobile (Samsung). It is not important, just to know if it is the intended idea or it is something that can be fixed. Also, in the same html, viewing it in IE8, the couple of images under the slider do not show one beside the other, but one under the other.

Thank you for your attention.

Hugo

Thank you very much for your quick response! There is something that is not clear to me. In your example, there is only the image for retina. Is the other (my-image.png) missing? Or how can I set it in the css apart from the one for retina?

Thanks again.

Kind regards, Hugo

Please not that it was only the example of code concerning retina.

The non retina code for that could look for example like this:

.my-image {
background-image: url("images/my-image.png");

Please not that retina code example (from our the previous comment) should be placed in the section (and image my-image.png should have 40px x 120px dimensions in this case):

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) { 

}

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

Thanks and kind regards

Thank you! I got it! :)

Kind regards, Hugo

This comment may end up being too long for most people but I would hope that it helps other people considering buying this theme.

First of all, this theme has a solid 5 star rating for a reason. It’s amazing! I’ve been at this web stuff a little while and it’s some of the best coding I’ve ever seen anywhere. Solid and semantic. The number of HTML page files and options can be intimidating at first but once you explore it for a while you find you have the ability to build ANY site you care to make right out of the box. From a magazine to a web-hosting company and anything in between. By cutting and pasting sections of the HTML from different pages, you can make hybrid pages that further extend it’s capabilities. Because it uses just one HUGE style sheet (7500 lines), when you do cut and past sections, they work! Once you decide which pages and features you’re going to use, you just delete the unused pages and styles. The Style Sheet and HTML files then become easily manageable.

If you are brand new to HTML5 and CSS3, There will be a small learning curve from HTML/XHTML. Namely, I would discourage you from altering the CSS widths, heights, margins, positioning, or padding in the styles. Along with using the Media Queries, this is the core of how a “responsive” site works. Changing these styles without knowing how they work can very easily break the responsiveness.

In conclusion (finally), I bought this to build a site for a friend (freebie) and it has saved me at least 100 hours of coding by hand. At this price, anyone would be crazy not to have this in their arsenal.

Cheers. I hope this was helpful to you. MDM

P.S. After re-reading this, I realize I sound a little too excited. I promise you I’m not a shill. I’m just a part-time web developer guy that has NEVER seen a premium theme like this before at any price.

On more question from me, sorry for bothering …

It just: <article class=”content-slider hp-our-clients”> works fine with default orange setting. But if color is changed (to green for example), bottom line changes its color from orange to black insted of green. And also – <h2> heading becomes bigger, than it is at the same settings, only with color set to orange /link to color.css removed/.

I am trying it with defaul home2.html page. Nothing is being changed but color. It seems like that client-slider-bar is missing its colour style in CSS or … ?

Thanks for your time!

Hi, thanks for reply!

It works fine for <h2>.

I`ve tried to do the same for <h3> and its not working properly. Thicker part of the line (under the text) is OK (and green), but the thinner part disappears compeletly. Any suggestion how to fix that?

This is my last plea! :-)

Thanks

You are welcome :)

If you need to change it to h3 (in content-slider) then please also add this code in style.css (it will add the thinner gray line):

.content-slider>h3:first-child {border-bottom: 1px solid #dfdfdf; margin: 0 0 0.5em;}

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

Thanks and kind regards

Its perfect. Thank you for marvelous assistance.

Hi, please help me.

I have a problem with slider3. Its not working as it works on the live preview. When slide is changing, left and right arrow and bottom points as well, will disappear for a short while. In the time new slide appears, it visible again. I have uploaded this problem here, take a look please:

http://www.microsite.yoursolution.cz

I have tried open original file from downloaded package, it is the same /to elimite chance, that problem is between my computer and chair/. And I noticed, that the same problem appear on some other slider. Some working just fine (nothing disappears, everything is smooth and fine).

Can you help me? `Cause on the live preview it works fine, so I am presuming, that is some minor bug in downloadable package …

Many thanks!

Hi,

Thank you for your comment :)

The solution is very simple, please just use the style.css from the latest version of MultiPurpose or just update the part in your style.css concerning the style3 if you already have made some changes and do’t want to update all style.css

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

Thanks and kind regards

Hi again,

to be honest, I don`t know how, but it works :-) It was strange though .. when the style.css was replaced, the whole slider disappeared. When “JS” folder with scripts was replaced, everything start to work just fine. All the same, thank you!

And by the way – great template! Best on the market as far as I can tell .. keep doin` good job!

John

Great that it works now :) We are also happy and glad to read your positive comment :) Thanks a lot for that :) We appreciate it :) Thanks again :)

Thanks and kind regards, ThemeMotive team

Hi. It’s still me, I’m sorry. I’m trying to create a form where I have to use radio and check buttons with labels, but I have a problem. Labels are always blank, and then I noticed they’re blank in your live example either (look at this page http://thememotive.com/multipurpose/shortcodes.html) I tried to modify the css but I had no success. Do you know how I can do that?

The code in your example is:


<label><input type="radio" name="radio1" value="1"> Radio</label>
<label><input type="radio" name="radio1" value="2" checked="checked"> Radio selected</label>

but I can’t see the label “Radio” and “Radio selected” in the page, while “Radio & Check” is visibile, as you said. How can I make those labels visibile too?

Hi,

This is all correct and made intentionally, instead of text “Radio” or “Radio selected” there is round icon of radio element.

However if you want to put additional label then you might place them like in this example (code from Form Style 1):

                        Examplary text1 <label><input type="radio" name="radio1" value="1"> Radio</label>
                        Examplary text2 <label><input type="radio" name="radio1" value="2" checked="checked"> Radio selected</label><br />

Note that “Examplary text1” and “Examplary text2” are added before label tag.

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

Thanks and kind regards

It was exactly what I needed! Thanks a lot.

Hey, great demo :) are you turning this project into a WordPress theme?

Hey VisionSmart :)

Nice to hear from you :) Thanks a lot for the positive feedback :) We appreciate it :) Yes, we have got plan to turn MultiPurpose into WP, but currently we are concentrating on the site template.

Thanks and kind regards

Hey Nashpixels,

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

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