How adapt web page template into meteor?

help
1

Hello, thanks for read

I have a problem, I hope some orientation because always I worked only with bootstrap. Never with css or templates.

I bought a template in wrapbootstrap.com
As you know, this templates coming with a setup files like a js, img, fonts, and of course html

I need integrate this template into meteor, I searched in web Meteor.startup() . This code help a little to solve, but no solve the problem

I have the next issue:
Somethime the view is good, sometimes is very bad
Next a img

1599×864 145 KB

We can se that window on right is perfect. The window on left is bad, and with errors. Why? sometimes good, sometimes bad

Next, my file js client

client/main.js

import angular from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import {name as Inicio} from '../imports/ui/components/views/inicio/inicio';
class Main {}
// JS IMPORTS
Meteor.startup(function () {$.getScript('js/jquery-2.1.3.min.js', function () {});});
Meteor.startup(function () {$.getScript('bootstrap/js/bootstrap.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.superslides.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.mb.YTPlayer.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.magnific-popup.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/owl.carousel.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.simple-text-rotator.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/imagesloaded.pkgd.js', function () {});});
Meteor.startup(function () {$.getScript('js/isotope.pkgd.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/packery-mode.pkgd.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/appear.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.easing.1.3.js', function () {});});
Meteor.startup(function () {$.getScript('js/wow.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jqBootstrapValidation.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.fitvids.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.parallax-1.1.3.js', function () {});});
Meteor.startup(function () {$.getScript('js/smoothscroll.js', function () {});});
Meteor.startup(function () {$.getScript('http://maps.google.com/maps/api/js?sensor=true', function () {});});
Meteor.startup(function () {$.getScript('js/gmaps.js', function () {});});
Meteor.startup(function () {$.getScript('js/contact.js', function () {});});
Meteor.startup(function () {$.getScript('js/custom.js', function () {});});
... more code

As you can see Meteor.startup help me to load the js files. If I dont use Meteor.startup more erros in console

Next my files

1600×797 124 KB

As you can see I copy the files of my template wrapbootstrap into meteor directory /public. But the css are in /client/css

I hope someone can help. I know that the problem may is file structure, I not sure.

////////////////////////////////////////////////////////////////////

Is a good way to import files like this? Iam doing something wrong?
Exist other way? please need help, due I dont understand the ‘file structure’ documentation. I need a example
Thanks for your time and read

3

I think you’re facing similar issues to the author of this thread…I’m having a very difficult time implementing a new theme I purchased with my Meteor app

1 Like
4

Hello.
This is my progress about my problem.
I find a almost a definitive solution,
As you remember I was use Meteor.starup() like this:

Meteor.startup(function () {$.getScript('js/jquery-2.1.3.min.js', function () {});});

I find in stackoverflow a best way to import my js files, next I share you.:

client/main.js


.. more imports
import '../public/js/jquery.superslides.min.js';
import '../public/js/jquery.mb.YTPlayer.min.js';
import '../public/js/jquery.magnific-popup.min.js';
import '../public/js/owl.carousel.min.js';
import '../public/js/jquery.simple-text-rotator.min.js';
import '../public/js/imagesloaded.pkgd.js';
// import '../public/js/isotope.pkgd.min.js'; // COMENTED
// import '../public/js/packery-mode.pkgd.min.js'; // COMENTED
import '../public/js/appear.js';
import '../public/js/jquery.easing.1.3.js';
import '../public/js/wow.min.js';
import '../public/js/jqBootstrapValidation.js';
import '../public/js/jquery.fitvids.js';
import '../public/js/jquery.parallax-1.1.3.js';
import '../public/js/smoothscroll.js';
import '../public/js/contact.js';
import '../public/js/custom.js';

.. more code

Now this is my result:
The most of visual components are fine, menu, slider, fonts, footer, almost ist ok. BUT Only have a issue with isotope and their files isotope.pkgd.js and isotope.pkgd.min.js. This files for some reason these are causing conflict. If I import the console send me this mensaje:

786×402 142 KB

I notice something:
When I instal Isotope with Admosphere Its no necesary import this files on my client/main.js.
Almost, almost could be fine with Admosphere, but no.

This is the result:

1600×866 173 KB

    1. The app load and menu, navbar etc its ok (windows left)
    1. The button and img are not good
    1. When I click in a one element (arrow green) the app It gets fixed (window right)
    1. When change the size of window next many errors it coming

So, I think that the problem remains in the way that I import, because with Meteor.starup() when it was do it good, everything well.

I need to change the way of I import this files?
You know some better way?
I share my post in stackoverflow here

Thanks for your time.