Biotic - Mobile and Tablet Creative Template
Themeforest Biotic - Mobile and Tablet Creative Template HTML Template
Biotic Mobile Template
Biotic is a template for mobile and tablet. You can use it to create a mobile website, web app, and integrated with solutions like phonegap, for a real native app.
Hi
ReplyDeleteSorry to bother, but how would I change the colors of the navigation buttons on the left side. I am looking for a best method for making different shades of the same color. I am working with a base color of #0088cc and I would like to make progressive lighter shades of this color. Is there a tool that you use to create these shades?
Your help is greatly appreciated in this matter.
Best Regards,
Chris Scott
Hi Chris,
ReplyDeleteThere is no bother. I am here to help.
The colors we used for the menu in this template are hand picked, and we did not use any special tool. We just created some color palletes in photoshop to look good, and after we add the CSS color codes in CSS.
If you want I can create a color pallete for you based on that color 0088cc ?
Regards.
Yes please could you create a color pallete based on color#0088cc – Thank you very much
ReplyDeleteHi,
ReplyDeleteUse this lines in your CSS. Replace the lines you have under your navigation code, in the color CSS file, from the colors folder.
/* Navigation Links */
.main-nav ul li:nth-child(1){
background-color:#3fbcfa;
}
.main-nav ul li:nth-child(2){
background-color:#31b3f3;
}
.main-nav ul li:nth-child(3){
background-color:#22a5e6;
}
.main-nav ul li:nth-child(4){
background-color:#179bdd;
}
.main-nav ul li:nth-child(5){
background-color:#1095d7;
}
.main-nav ul li:nth-child(6){
background-color:#0088cc;
}
.main-nav ul li:nth-child(7){
background-color:#047db9;
}
.main-nav ul li:nth-child(8){
background-color:#0574ab;
}
.main-nav ul li:nth-child(9){
background-color:#026b9f;
}
.main-nav ul li:nth-child(10){
background-color:#04618f;
}
.main-nav ul li:nth-child(11){
background-color:#035781;
}
.main-nav ul li:nth-child(12){
background-color:#024a6d;
}
.main-nav ul li:nth-child(13){
background-color:#013f5d;
}
.main-nav ul li:nth-child(14){
background-color:#02364f;
}
.main-nav ul li:nth-child(15){
background-color:#012a3e;
}
Let me know if it’s ok.
It’s a palette that starts from a brighter color than your, and around nr6 is exactly the color you wante. And from that point until 15’th nav link is getting darker.
Regards.
75096207-d953-42aa-8b0b-e26109e72029
ReplyDeleteHi, Does this theme use Framework7 (I am also watching your codec theme)? I am used to work with ionic (and angular js, I see Framework7 could work with it) so I ask your opinion, Would a migration to use ionic with this theme be a nightmare? Do you recommend better spend time learning Framewokr7 which I don’t plan to use anymore? Thanks for your time.
ReplyDeleteHi,
ReplyDeleteNo, this is the ony template (Biotic) that uses Jquery Mobile, and not framework7. The other templates we have uses framework7.
From our point of view, jquery mobile is very good to use. Framework7 it’s good too, and easy to learn.
Test it for yourself.
Regards.
Hello on the send.php where i should input my email.
ReplyDeleteHi,
ReplyDeleteYour email should be added in contact.html
In the code of the form at some point you have the line:
<input class="" type="hidden" name="to" value="youremail@yourwebsite.com" />
Just edit the
youremail@yourwebsite.com
Regards.
Hi,
ReplyDeleteAwesome theme! I have a question though. When previewing the app none of the links are working and I keep on getting a small pop-up saying: Error loading page. Do you know why?
Thanks,
Linda
Purchase code: a85f96ce-4c90-457a-b0c9-697f85710878
Hi,
ReplyDeleteYes, the problem is that you test the theme locally and not on a server.
The templates uses ajax, wich is a server side code.
Please upload the files to a server and they will work.
Or use firefox. Firefox read ajax offline too.
Thank you for choosing our mobile templates.
Best Regards.
Hello there, i’m having troubles with the page transition, each time i click on any item of the left bar it switches between pages, but it looks like its just switching without reloading the CSS, and JS, so im unable to listen to page events, i trying to use $(document).ready but its not working since the page is not loading any JS or CSS, alos i have some CSS that i need to override on the page but again its not reading new pages css.
ReplyDeleteany clues on how to run a function when the page is loaded?.
Hi,
ReplyDeleteTake for example the function added inside the file jquery.mobile-custom.js from the js folder.
If you will open it you will see some functions that are added just for some pages.
For example the blog show more news button>
$( document ).delegate("#blog", "pagecreate", function() {
$(".posts li").hide();
size_li = $(".posts li").size();
x=4;
$('.posts li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+2 <= size_li) ? x+2 : size_li;
$('.posts li:lt('+x+')').show();
if(x == size_li){
$('#loadMore').hide();
$('#showLess').show();
}
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
});
});
So you need to use
$( document ).delegate("#blog", "pagecreate", function() {
});
Just change the “blog” title with the page name that you use.
And don’t forget to change the title of the page also from the page HTML code where you have:
“div data-role=”page” id=”blog” class=”secondarypage” data-theme=”b”“
We need to do this because pages are loaded with Ajax, and there is no refresh involved here.
For the CSS it’s to put into the style.css It will be ready for all pages.
Regards.
NICE!, looks like it will work. will give it a try in a moment, about the css, i dont need the css for all the pages, so what i did is to place the css outsinde the header tag, and its working perfect now.
ReplyDeletethanks a lot.
hello, its me again, i tested the swiping left and right on a couple of devices and it only worked fine on a Smartphone, i tried on a tablet and its difficut to swipe left or right, i will use my app just on tablets, so, is there a way to change the properties of the swipe in order to get it working on the tablets, i dont know if there is a swipe sensitive property or something.
ReplyDeletethanks.
Hi,
ReplyDeleteI think the swipe will depend on the tablet. We are testing on ipad and an android tablet, and seems to work fine. What tablet are you using?
its a Samsung Galaxy tab 3
ReplyDeleteIt’s working fine on our side. We just test it again. In chrome and firefox on a samsung tablet. Also tested on lenovo with android, and works perfectly.
ReplyDeletethanks for your reply, cant figure out whats wrong with the tablet but actually the swip effect is not really important, can just fix it adding a Buton on each top cornet to toggle the left or right nav bars, do you have any recomendation for implementing that?, or do you already have an example of that. im adding these buttons on the index.html
ReplyDeleteHi,
ReplyDeleteThe example for those buttons is about.html file.
On secondary page there are buttons that open the left and right panel.
See for example the code that opens the left panel
The HTML button
<div class="nav_left_button"><a href="#" class="nav-toggle"><span /></a></div>
The javascript function (located in jquery.mobile-custom.js file)
$( ".nav-toggle" ).click(function() {
$.mobile.activePage.find( "#left-panel" ).panel( "open" );
});
And the HTML code to open the right user panel is
<div class="nav_right_button"><a href="#right-panel"><img src="images/icons/white/user.png" alt="" title="" /></a></div>
If the action to open it is ”#right-panel” added in a href=””.
The buttons on the home page can be added in the same way. Just in CSS you will need maybe to create a new class for them not to overwrite the ones used in secondary pages like about…
And they need to be fixed in CSS with position fixed or absolute on the left and right corners of the home screen.
Hope this helps.
Regards.
Is there a easy way to manage navigation from one file, instead of updating it on every html file, similarly adding google analytic code from single source?
ReplyDeleteHi,
ReplyDeleteSince the template is an HTML template the menu must be manually included in the files found. A customized php solution will do the job. Or a custom javascript one.
The same for the google analytic, ading it with ajax. But not sure if google allow analitics with ajax inserted automatically. The same a dinamic php solution will do the job, by adding a common footer.
Regards.
thanks for the support, I have a small issue, can i get your email ID so i can send the details and url???
ReplyDeleteHi,
ReplyDeleteSure, just write us on sindevo.com__@__gmail.com Without the __
Or using the contact form from our profile page here on themeforest. Will send us an email directly to that email adress.
Regards.
Regards.
Ok I sent two emails, kindly check, may be its in the junk???
ReplyDeleteI got the emails.
ReplyDeleteI have replied now.
Regards.
Hello Sir / Madam
ReplyDeletePre purchase question ?
With the regular license can I use the template for an ecommerce website. That is selling products with the nobile app.
Regards
Hi,
ReplyDeleteYes, you can use it to create one end product.
The idea is not to sell this template. You can sell other products on the mobile website that you will create with this template.
Regards.
Ok that is awesome. So am also free to sell if I get a buyer for the APP
ReplyDeleteOh I think you got this wrong.
ReplyDeleteSo you cannot sell this mobile template as an app. you cannot resell the template.
I thought you want to transform the mobile template into a shop, where you will sell other products, like cosmetics, electronics….etc
Yes I am transforming it into a shop where i will sell beauty products.
ReplyDeleteAs a startup we are open to buy out
ReplyDeletethat is should in case
ReplyDeleteIn your second comment you said “So am also free to sell if I get a buyer for the APP”
ReplyDeleteI understood that you want to sell the app.
If you want to sell beauty products using the mobile template that will be a shop everything is ok then.
Sorry for the confusion.
Regards.
Hi just downloaded the theme. But missing SASS/Compass files in the zip. Planning to adjust the green color. So is it possible to get sass files?
ReplyDeletebest regs
/taisto
Hi,
ReplyDeleteWe did not used SASS in the files.
To adjust the green color all you need is to edit the CSS file.
Regards.
OK, have fixed it. Is there any documentation how to make buttons and other UI components in the theme?
ReplyDeleteHi,
ReplyDeleteThere is a documentation included. See HELP folder from the general zip file. But the documentation is on how to use the existing files. To add other buttons and UI elements that do not exist in the demo and in the files will require basic CSS coding.
Regards.
Hi, i purchased the event builder theme.
ReplyDeleteBut the visual composer backend is not usable, how to solve the issue? When i tried to add element, it wont be added.
Please assist. Thank You
Regards,
Jeremy
Hi Jeremy,
ReplyDeleteI think you refer to other theme you purchased. This mobile template does not include any “event builder theme” or backend composer.
Regards.