239 comments found

  • Bought between 1 and 9 items
  • Has been a member for 3-4 years

Hi, again, enjoying implementing the site, but I tested it on an Android device, and realized that the “view” “go” overlay links on things like recent work (on the Elegant Business Home Page) or portfolio items aren’t showing up. So if one relies on that UI element to help people preview or click on a link to another page, mobile device users won’t be able to. Since this is a responsive website, and we’re expecting people to interact with the content on mobile devices, is there a fix? Thanks!

ThemeMotive

Hey,

Thank you for your comment.

Please replace in style.css from:

.portfolio article>div {position: relative; overflow: hidden;}
.portfolio article div div {display: block; position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; background: rgba(255,132,0,0.8); text-align: center; opacity: 0; transition: all 0.5s ease-in-out 0s;}
.portfolio article div:hover div,
.portfolio article div.item-selected div {opacity: 1; transition: all 0.5s ease-in-out 0s;}
.portfolio article div ul {display: inline-block; overflow: hidden; position: relative; z-index: 3; top: 50%; list-style: none; margin: -20px auto 0; padding: 5px; border-radius: 20px; background: rgba(255,255,255,0.3); text-align: center;}

to

.portfolio article>div {position: relative; overflow: hidden;}
.portfolio article div div {display: none;}
.portfolio article div:hover div,
.portfolio article div.item-selected div {display: block; position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; background: rgba(255,132,0,0.8); text-align: center;}
.portfolio article div ul {display: inline-block; overflow: hidden; position: relative; z-index: 3; top: 50%; list-style: none; margin: -20px auto 0; padding: 5px; border-radius: 20px; background: rgba(255,255,255,0.3); text-align: center;}

/* Opacity with Transition */
.portfolio article div div {opacity: 0; transition: all 0.5s ease-in-out 0s;}
.portfolio article div div:hover {opacity: 1;}

Hope it helps!

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

Kind regards

Default-user

I already had the same code as you’re recommending above the “Opacity with Transition” section. So I added in the “Opacity with Transition” lines, and it doesn’t help. I touch the images that should show the overlay magnifying glass / arrow, and all it does is shade the area.

  • Bought between 1 and 9 items
  • Has been a member for 3-4 years
APNM Purchased

Hi I’m using Discussion on MultiPurpose – Responsive HTML5 Website Template.

We are using a the content slider – home9a.html. When you add the video first in the slider, then play it. It does not stay on that screen until the video is finished, it will move on to the 2nd slider and play the video in the background. Using IE11 but same issue in Firefox.

Any ideas?

ThemeMotive

Hey APNM,

Thank your for your comment :)

Please change in js/scripts.js

from

autoslides: 1,

to

autoslides: 0,

Hope it helps!

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

Kind regards

Default-user
APNM Purchased

Thanks…but that’s not what I want. I want the autoslides to be on but when a users views the video it should not autoslide to the next screen. This does work when the video is not first in the list of slides.

ThemeMotive

We checked it carefully and suggest you to use pause_on_hover: 1, instead of pause_on_hover: 0, so that when user click on play then automatically stop autoslides, because cursor will be on the slider area.

Hope it helps!

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

Kind regards

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

Hello, great theme. I would like to use the “blue theme” for menus, etc, however, I want a different button color (“orange”) on the “landing page” landing form submit button. What is the best way to do this? Thank you.

ThemeMotive

Hey Traderjphx,

Thank you for your comment :)

Concerning your question please in style-colors remove this part:

.color-blue .landing-form button {border-color: #499dd3; border-bottom-color: #1f77cb;}

and this par:

.color-blue button[type="submit"], .color-blue a.button, .color-blue .pricing-plan a.button, .color-blue table.pricing a.button {border-color: #2589e9; border-top-color: #499dd3; background: #52b3f2;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyYjNmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNTg5ZTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #52b3f2 0%, #2589e9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#52b3f2), color-stop(100%,#2589e9));
background: -webkit-linear-gradient(top,  #52b3f2 0%,#2589e9 100%);
background: -o-linear-gradient(top,  #52b3f2 0%,#2589e9 100%);
background: -ms-linear-gradient(top,  #52b3f2 0%,#2589e9 100%);
background: linear-gradient(to bottom,  #52b3f2 0%,#2589e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52b3f2', endColorstr='#2589e9',GradientType=0 );
color: #fff; text-shadow: 0 -1px 0 #3687c0;}
.color-blue button[type="submit"]:hover, .color-blue a.button:hover, .color-blue table.pricing a.button:hover {background: #2589e9;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI1ODllOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1MmIzZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #2589e9 0%, #52b3f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2589e9), color-stop(100%,#52b3f2));
background: -webkit-linear-gradient(top,  #2589e9 0%,#52b3f2 100%);
background: -o-linear-gradient(top,  #2589e9 0%,#52b3f2 100%);
background: -ms-linear-gradient(top,  #2589e9 0%,#52b3f2 100%);
background: linear-gradient(to bottom,  #2589e9 0%,#52b3f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2589e9', endColorstr='#52b3f2',GradientType=0 );
color: #fff;}

Hope it helps!

Please lets us know if we can be of furthe rassistance.

Default-user

perfect, thank you.

  • Bought between 50 and 99 items
  • Has been a member for 1-2 years
  • Poland
  • Referred between 1 and 9 users

Hello,

I have a select form element from your template which I like to have red outlined on page load (without JS). When I add class “error” on it, this does not make a red outline. However class=”error” works fine on text input fields. What should I do to make the .error style also work on select menus?

Thanks!

ThemeMotive

Hey Netunlimited,

Thank you for your comment.

In style.css there is line:

input.error, textarea.error, select.error {border-color: #e65842; background-color: #ffe6dc; box-shadow: 0 0 2px 1px #ffece6; color: #ef4437;}

so please just add .error class to the select and it should work.

Hope it helps!

Please lets us know if we can be of furthe rassistance.

Default-user

Yes, I saw that, but it doesn’t work. Probably because the select menu is turned into custom select by your scripts. Please see my screenshot: http://snag.gy/KsMxF.jpg I think because the SPAN around the select does not get error class and has its own border.

ThemeMotive

Please have a look how it’s implemented on contact.html – there is select field, which is getting red when not passing the validation.

Hope it helps!

Please lets us know if we can be of furthe rassistance.

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
noescom Purchased

Hi. Would it be possible to alternate colors in a table’s TH? Example:

<table class="alt"> <tr> <th> -- this th is orange </th></tr> <tr> <th> -- this th is gray </th></tr> </table>
ThemeMotive

Hey Noescom,

Thank you for your comment.

It’s possible. Could you please provide us link yo your html, so that we could send you direct CSS. In general it should be like:

th.orange {color: orange;}
th.gray {color: gray;}

and modify the structure:


<table class="alt">
<tr>
<th class="orange"> -- this th is orange
</th></tr>
<tr>
<th class="gray"> -- this th is gray
</th></tr>
</table>

Hope it helps!

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

Default-user
noescom Purchased

Thanks! In the meantime I already figured it out myself. I’m getting quite the hang of CSS :)

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
MigMB Purchased

Hi

I’m using Visual Studio 2012, but when I select Format Document the program changes this:

...</article>article class=”col2”>

into this

</article> <article class=”col2”>

And when I browse it articles are not displayed side by side, they are displayed in a new line instead.

Is there iny way to change this?

I’m using class=”columns hp-latest2

Default-user
MigMB Purchased

change this </article> <article class=”col2”>

into (A NEW LINE IS ADDED)

</article> <article class=”col2”>
ThemeMotive

Hey MigMB,

Thank you for your comment.

Could you plase disable automating formating style or replace ”</article> <article class=”col2”>” to ”</article><article class=”col2”>”.

Please lets us know if we can be of furthe rassistance.

Kind Regards

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
  • Russian Federation
incutai Purchased

Hi! TNX for the best buy i ever did.

Which SPAM protection can i add to my order form and how to do it? I use this version of template: http://obsluzhivanie-akvariuma.ru SPAM is really annoying… Maybe its not very hard to add some “Im not robot” checkbox? TY

ThemeMotive

Hey Incutai,

Thank you for your great feedback :)

Concerning SPAM protection, we can send you exemplary easy to implement solution via e-mail. Please send us e-mail to: info at thememotive dot com. We will send you back the exemplary files.

Hope it helps!

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

Kind regards

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
  • Italy

I can change the word “chose file” form with another text?

ThemeMotive

Hey Privatamente,

Thank you for your comment :)

Then please just replace text “Choose file” to “Any custom text”.

Hope it helps!

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

Kind regards, ThemeMotive team

Default-user

<input name=”userfile” type=”file” id=”foto”> where?

ThemeMotive

Please change this text in file /js/scripts.js

Hope it helps!

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

Kind regards,

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
kcginc Purchased

On the landing page template, I have varying lengths of text for each “article” in the slider. This causes the email form to ride up and down due to interaction between CSS (relative positioning) and slider script. I tried to increase the min-height property for “slider11 article” and adjust the top property in “landing-form form/div” to compensate and that seemed to work for desktop browsers. Now I’ve broken the responsive portion of the code as the template is not displaying correctly on an iPhone. Also, the template is not working properly on iPad portrait (pictures too wide?). Perhaps there’s a better way to do this (cosmicortho.com). Any help would be greatly appreciated!

ThemeMotive

Hey Kcginc,

Thank you for your comment :)

We carefully checked your website and observed that there are some html errors in your html code. Please check your website with http://validator.w3.org/check and correct all the errors.

We advise you to copy the native code of the slider and just place your longer text in the text areas. Please keep the lenght similar and please just adjust the position of

for example:
.landing-form form {
  top: -680px;
}

We tested it and it worked.

Another solution is to keep the height of sthe slider as it’s now and place the links “Read more” – as it would be better to read longer text in separate site than os slider (better user experience).

Hope it helps!

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

Kind regards, ThemeMotive team

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
noescom Purchased

Hi there. Two questions.

1) Is there a nice, clean way to align form elements horizontally in a column? For example a textbox and a dropdown list that either take 50% of a column?

2) I seem to be running into trouble when dynamically populating a dropdown box through javascript and selecting the first item. The item is selected, but the item is not shown in the select’s textbox. The problem seems to be related to the code at line 993 of scripts.js. When i disable this block, everything works fine (but the dropdown list looks like crap). Is there anything I can do?

Demo can be found here: http://ikoro.nl/cart/checkout/ Fill in “7513ED” at postcode and “200” at Huisnummer and press Tab to trigger OnChange. The dropdown box “Toevoeging” will be filled, but nothing is visibly selected (though it is).

ThemeMotive

Hey Noescom,

Thank you for your comment.

Concerning your questions:

1. Then please manipulate the width of .form2 input and .form2 label to get the result you want.

2. For the for we recommend you to simply using the input are, so that user can just put the number. You could add extra validation to make sure user put the right data.

Hope it helps!

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

Kind regards, ThemeMotive team

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years

Is there a way to make the Alert Messages info box pop up on the middle of the screen when you open up a particular page?

As always thanks again and greatest template on themeforest in case anyone else is reading.

ThemeMotive

Hey,

Thank you for your comment and great feedback :)

Concerning your question, yes it’s possible, but demands some custom code, please have a look here: http://stackoverflow.com/questions/19707236/show-popup-after-page-load

Hope it helps!

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

Kind regards

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
noescom Purchased

I’ve been fiddling with this for hours, and I can’t figure it out. I’ve got a positioning issue with a textbox and a dropdown box: the two are not on one line but vertically askew. This happens only in Internet Explorer; in Firefox everything’s fine. Example: http://ikoro.nl/cart/checkout/. Is there something in the CSS’s that I can fix to make both elements align?

Thanks a bunch in advance and thanks for your awesome template. I love it to bits.

Default-user
noescom Purchased

A small follow up: I tested my page on Android (Galaxy S3) and it happens there too. Any idea for a fix?

ThemeMotive

Hey,

Did you observed the issue on our native version too? We could’t replicate it. Which version of IE are you testing? In general it might be related with your custom changes in code, we recommend you to compare your custom code with native code and adjust your code to look similar like on native code.

Hope ut helps!

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

Kind regards

Default-user
noescom Purchased

I didn’t really change much, and the javascript i added is not called immediately in that page. To be absolutely sure I didn’t mess something up in my own code, I restored the original css files and the original js file. Same thing happens.

I can’t compare my page with your provided ‘native’ html files, because your files never put these elements next to eachother.

The IE version I use is 11.0.9600.16521. Screenshot of problem: https://dl.dropboxusercontent.com/u/93988347/css-error.png

Any more ideas?

ThemeMotive

Sounds like it’s some general CSS issue related with your new html structure and CSS.

Please have a look at form 2 style at http://thememotive.com/multipurpose/shortcodes.html

We recommend you to use similar solution and divide select field into separate row.

Hope ut helps!

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

Kind regards

Default-user
noescom Purchased

This is not something I want to do, but I guess there’s no alternative.

  • Bought between 50 and 99 items
  • Has been a member for 1-2 years
  • Poland
  • Referred between 1 and 9 users

Hi again. I have a question. I am using slider3 and when someone hovers on a slide it pauses the slides, which is good. But then, when someone hovers off the slide, it should resume autosliding, but it doesn’t.

Do you have any idea how this can be changed?

Thanks.

ThemeMotive

Hey,

Thank you for your comment.

Currently we have got only option that stop on hover and don’t start again. This was done intentionally that way to protect for example if user hover on slider and play video and then hover out from slider. We will think about new options in next releases, so again thank you for your comment.

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

Kind regards, ThemeMotive team

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

Hi there im having an issue with my main logo on mobile devices?

www.afforditsolutions.com.au

Loads fine on normal web browsers but on mobiles it shows up for a second and disappears? thanks alot

very nice template otherwise

ThemeMotive

Hey Afforditsolutions,

Thank you for contacting us.

Currently on http://www.afforditsolutions.com.au/images/temp/new_logo_main2@2x.jpg there is 404 error.

Please upload new_logo_main2@2x.jpg with 2 times bigger dimensions than new_logo_main2.jpg, so that it could be sharp on retina ready devices.

If you don’t want to upload retina logo please remove this from scripts.js


//logo for retina
$('header .title img').each(function() {    
    var retina = window.devicePixelRatio > 1 ? true : false;    
    if(retina) {        
        var filePath = $(this).attr('src');
        var fileName = filePath.substring(filePath.lastIndexOf('/')+1);
        var retinaFileName = fileName.replace('.', '@2x.');
        filePath = filePath.replace(fileName, retinaFileName); 
        $(this).attr('src', filePath);
    }
});

Hope it helps!

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

Kind regards, ThemeMotive team

  • Bought between 10 and 49 items
  • Has been a member for 0-1 years

Thank you for making such a nice template. Is there option for changing landing page form background or color? Thanks!

ThemeMotive

Hey Artisan14,

Thank you for your comment and positive feedback :)

Yes, sure it’s possible. Do you want to change color only or pattern?

Please replace background for selector .landing-form form

from

background: url("images/footer.png"); color: #fff;

to for example:

background: url("images/patterns/pattern07.png") repeat scroll 0 0 red;

where instead of “red” please put your custom color code or name.

Hope it helps!

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

Kind regards, ThemeMotive team

  • Bought between 10 and 49 items
  • Has been a member for 0-1 years
artisan14 Purchased

Hi, We would like to use font size from slider9 (modern) in slider4 (simple). Please advise. Thank you.

ThemeMotive

Hey Artisan14,

Thank you for your comment;

Please copy the font attributes for selector:

.slider9 h3+p

it;s”

font: 300 1.385em/1.2em "Signika",sans-serif;

and then replace it with the font attribute for selector:

.slider4 h3+p<code> it's <code>font: 300 1.643em/1.2em "Signika",sans-serif;</code> in style.css Hope it helps! Please let us know if we can be of further assistance. Kind regards, ThemeMotive team</code>
  • Bought between 50 and 99 items
  • Has been a member for 1-2 years
  • Poland
  • Referred between 1 and 9 users

Hello,

I am having problems with your template in IE7 on Windows. If you open this page in it: http://thememotive.com/multipurpose/shortcodes.html

Then there are some problems: 1) the checkboxes and radios don’t work 2) when I click “Choose file” in the form there, I get a “out of memory” warning 3) the column formatting is broken

Please advise.

Default-user

Update: in IE8, the checkboxes and radio’s also don’t work… and “choose file” button gives “Stack overflow” error.

ThemeMotive

Hey netunlimited,

Thank you for your comment.

Concerning your question. We investigated it and observed that IE 7 and IE 8 are not supporting custom radio and checkboxes. In this case please add to style-ie.css

label.radio input, label.checkbox input {visibility: visible;}

and please change this part of code in scripts.js

// custom checkboxes and radios
$("input[type=checkbox], input[type=radio]").not("input[type=radio].star").each(function(){
    var me = $(this);
    var myType = me.attr("type");
    if (me.parents("label").length) {
        me.parents("label").addClass(myType)
    } else {
        me.wrap('<label class="' + myType + '"></label>');    
    }
    var label = me.parents("label." + myType);

    var customMe = me.parents("span." + myType);
    var checked = false;
    if (me.is(':checked')) {
        checked = true;
        label.addClass("checked");
    }

    me.change(function(){
        if(myType == "radio") {
            var name = me.attr("name");
            var labels = $("input[name=" + name + "]").parents(".radio")
            labels.removeClass("checked");
            label.toggleClass("checked");
        } else label.toggleClass("checked");
    })
});

to this one:

// custom checkboxes and radios
if ( ! ( ($.browser.msie) && ($.browser.version < '9.0') ) ){
$("input[type=checkbox], input[type=radio]").not("input[type=radio].star").each(function(){
    var me = $(this);
    var myType = me.attr("type");
    if (me.parents("label").length) {
        me.parents("label").addClass(myType)
    } else {
        me.wrap('<label class="' + myType + '"></label>');    
    }
    var label = me.parents("label." + myType);

    var customMe = me.parents("span." + myType);
    var checked = false;
    if (me.is(':checked')) {
        checked = true;
        label.addClass("checked");
    }

    me.change(function(){
        if(myType == "radio") {
            var name = me.attr("name");
            var labels = $("input[name=" + name + "]").parents(".radio")
            labels.removeClass("checked");
            label.toggleClass("checked");
        } else label.toggleClass("checked");
    })
});
}

Hope it helps!

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

Kind regards, ThemeMotive team

Default-user

Thanks a lot! I’ve also noticed that the “fancy image borders” in JS make the images not clickable in IE 7 and 8. You might want to look into that as well. :)

ThemeMotive

Could you please provide us link to exemplary page? We couldn’t replicate it on IE8.

Thanks and kind regards

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
kazmarar Purchased

Is this template pinch-zoomable on mobile devices? I cannot zoom it on my Android table. If it is not zoomable, how can I make it zoomable for mobile devices?

ThemeMotive

Hey Kazmarar,

Thank you for your comment.

If you want to enable pinch-zoom in Android please replace this code:


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

to this one:


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=yes">

in html template.

Hope it helps!

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

Kind regards

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years

On the home7.html page I’m trying to replace the icons on the left side of the slider#7. The first “camera” icon won’t change even though I have replaced the below images with my own image: what else do I need to do?

For example the “camera” icon I have replaced: A. images/icon-camera.png B. images/icon-camera@2x C. images/icons/title-icon2

Default-user

Never mind, I figured it out

ThemeMotive

Hey,

Thank you for your comment.

Please just make sure if you replaced the native image with new one and refresh the page (clearning browser cache may also help).

Hope it helps!

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

Kind regards, ThemeMotive team

by
by
by
by
by
by