607 comments found.
Hi. I’m been getting the dev env up and running and now gotten as far as that I can do e.g. “grunt—theme social-2”. If I make a change to e.g. vendor\skin-social\variables\_colors.scss, a rebuild of the theme is triggered. However, only theme-bundle.css and theme-core.css are updated. I was expecting all applicable css-files to be updated, e.g. module-timeline.css.
Hi robelind,
Watching and re-building so many files will make things VERY slow while developing. So instead of rebuilding everything, keep the watchers on bundles only, btw you can also disable minifying to speed up:
1. Build using bundles and no minifying (both js and css): grunt --theme social-2 --min false build:d 2. Then, start the watchers: grunt --theme social-2 --min false 3. Make you changes, preview .. 4. When you're done developing and you no longer need to preview in real time, make a full build that will cover all files, including the module-* and skins, if there are any: grunt --theme social-2 build:dms
Hope this clarifies things. If there’s anything else, let us know.
Edit : if you don’t need or you simply don’t care about skin files, you can also speed up the full build from step 4:
grunt --theme social-2 build:dm
Well, I understand that it would take some time to build all files, but isn’t the whole point of the watch concept to see your changes in “real-time” in the browser? Otherwise you could just do the old build-press F5 process.like always.
Yes, but you also have account for time. After all, the whole point is productivity.
With that in mind, the workflow I recommended with steps 1-3 gives you both speed and real-time preview capabilities while step 4 ensures that you have all the separate files builded as well.
You simply have a separate build when you’re done previewing to generate all the files only once, at the end of your working session (for example at the end of the day – but you can do it as often as you’d like – it’s just our recommendation to save time that would otherwise be wasted on builds).
To be more clear, you shouldn’t run Step 4 after each change you make, you have the watchers for that, but only after you have finished with previewing and you have stopped the watchers.
I’m not sure I follow. My point in my original post was that I don’t get real-time preview capabilities, since not all files are re-built. E.g. changing $primary-color, you’d expect big changes in the preview, but for e.g. social-2 literally nothing happens. This leaves me with only step 4 for actually previewing my change.
Have you tried the exact steps I provided?
Right .. just noticed you are using SASS, not LESS .. my mistake.
The steps are the same but the options are slightly different as it’s using LESS by default:
1. Build using bundles and no minifying (both js and css): grunt --theme social-2 --min false setWatch build:dist_sass 2. Then, start the watchers: grunt --theme social-2 --min false watch-sass 3. Make you changes, preview .. 4. When you're done developing and you no longer need to preview in real time, make a full build that will cover all files, including the module-* and skins, if there are any: grunt --theme social-2 build:dmssass or without skins: grunt --theme social-2 build:dmsass
Just a small note on SASS:
We would recommend that for the moment you should use LESS instead of SASS, especially if time is an issue, as from our tests the LESS compiler is much faster.
The reason is that right now the only SASS compiler uses a ruby implementation which is slow.
There is a relatively new library LibSass which uses an implementer written in C. That will make a HUGE difference, reducing most SASS builds to milliseconds but unfortunately it doesn’t support all the features of SASS language yet, requiring you to hack your way through the SASS code a little to make it work.
If you feel like you’re interested, see http://libsass.org
Running the build with ‘—min false’ gives the error message “Loading “concurrent.js” tasks…ERROR >> TypeError: Cannot read property ‘indexOf’ of undefined”. Same for starting the watchers, so I did both without ‘—min false’. This gave me a completely un-styled web page. The directory ‘dist\themes\social-2\css’ contains no css files.
Just took another look at the build.js tasks from grunt.
It seems there’s an issue with these builds as it will try to convert LESS to SASS – effectively overwriting your SASS files.
To fix it you need to open grunt/tasks/build.js and remove ‘convert_sass’ from all the build entries BEFORE using them.
We’ll also apply the fix for the next update.
Are you using the latest version?
I’m using version 3.6.3.
Ok .. here’s a gist for the grunt/tasks/build.js and grunt/tasks/concurrent.js:
https://gist.github.com/lazabogdan/9197c33251ff5c754c17Just replace those files and re-run the steps. Let me know how it worked.
When using ‘—min false” I still get the “Cannot read property ‘indexOf’ of undefined” error, but the build finishes. ‘dist\themes\social-2\css’ now contains ‘vendor.css”, but ‘theme-bundle.css’ is missing and thus the web page is all screwed up.
UPDATE: The error message is gone, but only ‘vendor.css’ is produced.
If you pay attention to the build output, do you see any warnings or errors? These should be in yellow/orange or red.
By the way, with the fixes from build.js, you should be able to run:
1. Build using bundles and no minifying (both js and css): grunt --theme social-2 --min false build:dsassInstead of:
1. Build using bundles and no minifying (both js and css): grunt --theme social-2 --min false setWatch build:dist_sass
With the same result.
grunt --theme social-2 --min false build:dsassthera are no warnings or errors.
I also tried running
grunt --theme social-2 --min false build:dist(Less, as I understand it). There were several problems with build tasks missing (‘less:components’, ‘copy:css_components’, ‘autoprefixer:css_components’) and the dist produced didn’t contain theme-bundle.css.
For LESS, you have to run it as:
grunt --theme social-2 --min false build:d
However it won’t fix the errors as they’re unrelated with the syntax. We’ll get back to you soon with an updated gist that will work.
Thank you for your patience.
Hi robelind,
As promised here’s the updated gist that will fix both LESS and SASS builds and—min false issues:
https://gist.github.com/lazabogdan/9197c33251ff5c754c17Just replace those files entirely and once again, the steps when using Sass are:
1. Build using bundles and no minifying (both js and css): grunt --theme social-2 --min false build:dsass 2. Then, start the watchers: grunt --theme social-2 --min false watch-sass 3. Make you changes, preview .. 4. When you're done developing and you no longer need to preview in real time, make a full build that will cover all files: grunt --theme social-2 build:dmsassAnd using LESS:
1. Build using bundles and no minifying (both js and css): grunt --theme social-2 --min false build:d 2. Then, start the watchers: grunt --theme social-2 --min false 3. Make you changes, preview .. 4. When you're done developing and you no longer need to preview in real time, make a full build that will cover all files: grunt --theme social-2 build:dm
The fixes from the gist were tested on 3.6.3 and should complete the builds, however, we’ve further tested the Sass builds in particular and found some issues with the current structure.
It’s mostly about the loading order of partials and variables within the theme’s main Sass file e.g. app/scss/themes/social-2/theme-core.scss.
For example, if you add a custom variable $primary-color: red; into app/scss/themes/social-2/variables.scss, you’d expect all areas using the $primary-color to be red.
Unfortunately, that’s not the case and you’ll notice that although the color changes in some areas, it doesn’t apply everywhere.
The fixes required are slightly more complicated and will take us a few more days until we can release an update. Also, the fixes are only required for the Sass version. Using LESS works just fine (and for the moment, much faster).
If the fixes from the gist are still causing errors for you, please let us know.
Thank you.
Unfortunately, there’s still no ‘theme-bundle.css’ produced. Tried using the LESS build.
It’s very interesting .. here it’s working fine. We’re missing something obvious here, just can’t figure out what it is. Anyway, a new update should be available soon, maybe in a few days.
how come when i resize the screen, everything disappears? http://www.thehighbrary.org/music.asp please help
any help?
im still experiencing this problem
Hi vallowens,
Well, if you take a look in the console to what happens with the markup after a resize, you can notice that every panel is getting opacity: 0 for some reason.
<div class="panel panel-default" style="margin-bottom: 15px; zoom: 1; opacity: 0;">...</div>
Maybe you have some custom scripts that are interfering somehow?
on this particular page i only use the scripts that came with the theme, thats why im confused, but where can i go and fix this problem? what console?
I meant the Developer Inspector from your browser. Very strange .. this obviously doesn’t happen on our live demo. Are you using the latest version?
You could try disable the gridalicious grid by removing the data-toggle=”gridalicious” and see if you can rule that out as the cause.
Please provide a just html demo, I want to config theme for meteorjs and require is not working fine, could you please add a simple html with all files?
And please add a lightweight demo for every admin, that would be awesome…can you?
Thank you for this awesome piece!
I love your workHi,
Thank you for your appreciation!
Not sure we understand correctly. What do you mean by “just html” demo? We DO offer a html version for all themes which are included in the dist folder of the downloaded package.
Unfortunately we don’t have any experience with Meteor so at the moment we can’t help you with that, however there’s a gist for RequireJS made available by startiaco, one of our clients:
I had problems in order to load your JS files with my RequreJS files, I thought I’ve commented this but comment is missing so i repost.This is the gist for making your theme work perfectly with RequireJS in my project, maybe is useful for others, it took me some hours to make everything work with the perfect combination…
https://gist.github.com/robhunt3r/443bcd8f4e8cee16d3ab If I just import your JS files, everything is broken, missing dependencies etc, but this combination works… Take a look, maybe there’s a better way but this is the only way I make everything work.
Maybe you should take a look at that and see how he did it.
Thanks
I want the html version without use requirejs…just the admin with all the assets like old school xD Thank you
good morning i already bought thyme forest but i really do need some help in setting it up ,i am having difficulty.i would really appreciate if you could contact me at 7542343833 .so that you could walk me through the steps.thank you
Hi glendon1,
Please send us an email to contact@mosaicpro.biz as we don’t offer support by phone.
Also just want to make sure you want to set up the development environment as this is not a script/wordpress theme that you can install.
Thanks, mosacipro.
Hi,
I had problems in order to load your JS files with my RequreJS files, I thought I’ve commented this but comment is missing so i repost.
This is the gist for making your theme work perfectly with RequireJS in my project, maybe is useful for others, it took me some hours to make everything work with the perfect combination…
https://gist.github.com/robhunt3r/443bcd8f4e8cee16d3abIf I just import your JS files, everything is broken, missing dependencies etc, but this combination works… Take a look, maybe there’s a better way but this is the only way I make everything work.
Great, we appreciate it!
By the way, is there any option to make an horizontal scrollable div? Because I have a carousel-like content, but I don’t want to use carousel buttons for each page, but a scroll bar to let user navigate the content…
Sure,
<div data-scrollable-h="">
...
</div>
Oh cool, so easy, didn’t saw on docs,well, neither vertical but can be guessed on the Sidebar. It would be nice to have in docs a section for all this stuff (or is added already, tell me where is, maybe I’m blind :P) Thanks for your very fast support.
You’re welcome! Glad to help.
We’re working on the docs for the next update.
If you have any other suggestions, please let us know.
I saw something, when using the vendor-bundle-all and module-bundle-all, there isn’t any reference to data-scrollable-h, but it is inside module-bundle-main and module-layout… But as I’ve told you, I can’t use separate JS files with RequireJS, I need to use the -all files… Is this intended?
I’m thinking it’s not working with RequireJS and individual files because of the order it’s loading things. It should also work with the separate files, if they’re loaded in the correct order. The module.js files shouldn’t depend on one another, but they are all depending on the vendor files.
The -all files are simply a concatenation of all the individual files in a specific order. Have a look at the _grunt.config.json file to see the order it concatenates files when creating the all.js version.
Having a hard time controlling the Owl Carousel I would like to be able to customize the previous and next navigation but seems to be just a lot of conflicts also if I add my own options in a document ready it just fails.
Its very close but everytime I need to make any adjustment all the wired in “owl-basic” scripts are just conflicting.
Any suggestions on how to either remove the implementation or be able to add in my own scripts to extend the capabilities?
Hi tomwalls,
You can remove our implementation by simply not loading the module-media.js script and then you can load your own implementation. You can see how it was made if you open the scripts within dev/app/vendor/media/js/carousel/owl. Just replicate what you need from there.
The problem now is that we’ve linked the functionality to the actual carousel theme, but we’ll probably rewrite our implementation soon to make things easier.
Thank you.
I have found that I can maniuplate the 3.6.0 version with no problem. But the 3.6.3 does not handle this:
Go to the same for carousel and replace with the above on 3.6.3 and it doesn’t work. Do that to 3.6.0 and it behaves correctly.
it removed my HTML i posted this:
This works on 3.6.0 div class=”owl-basic” data-items=”1” data-pagination=”false” data-navigation=”true”
does not on 3.6.3
Because 3.6.0 was using owl carousel 1+ while 3.6.3 is using owl2 which has other options and API.
See http://www.owlcarousel.owlgraphic.com and https://github.com/smashingboxes/OwlCarousel2
By the way, you can post HTML here by putting it into <pre>html here</pre> tags;
perfect i’m up and running now thanks!! Great theme
You’re welcome. Glad to help.
If you have any other difficulties, please let us know.
Looking at the documentation for “Static Structure”, there should be 10 kits, located under dist/kits. What I find in the distribution is 5 kits, located in dist/ui.
What’s up?
Hi robelind,
Indeed there is a mistake in our documentation as there are 5 main kits as the other are modules included in various themes.
We will update the documentation as soon as possible.
Thanks for reporting, mosaicpro.
Hi. I’d like to use the fixed layout from the layout kit with sidebars, as in this example: http://cdn.mosaicpro.biz/themekit-3.6.3-final/dist/ui/layout/fixed-2-inner-sidebars.html. However, as can be seen in the example, there’s a gap between the header and the content (container) which I find very ugly. How can I make them positioned next to each other?
Hi robelind,
That can be easily fixed from the navbar kit found in dev/app/vendor/navbar/less/_main.less on line 18:
// FIXED NAVBAR + LAYOUT SPACING
.ls-top-navbar & {
padding-top: @navbar-height + @grid-gutter-width/2;
}
remove the + @grid-gutter-width/2;
.ls-top-navbar & {
padding-top: @navbar-height;
}
or a hardcoded css solution would be to add this at the bottom of your css file:
.ls-top-navbar body {
padding-top: 51px;
}
Thanks,
mosaicpro
Hello Guys, I updated my theme files from older version to new version. Still i am not able to view advance form elements. i Had included one css and two js file in my script. default.min.css and two js files are vendor.min.js scripts.min.js
I replaced them with new vendor.min.js How can i update so that it will work. Can you please help me on this. I can send you screenshots if necessary.
HI swapthakre,
Please send us a demo link to contact@mosaicpro.biz or the source code of your page so that we can check what’s missing.
Thanks,
mosaicpro
Hello Mosaipro, I sent you the mail form nishant.dongare@gmail.com. Can you please check it.
I Sent you but you haven’t replied. Please provide some service.
This is not fare.
What is the correct way of using the static files as a template for a site?
Ideally I would play around with Less and Vagrant, however I just need to get a site done – want to use the real estate template with a few modifications.
I copied the contents of dist/themes/real-estate to my work folder and started editing. However when I open listing.html file on the browser, the nav drop down is not working, among several other js errors I can see on the console as “undefined is not a function”.
When I checked the source code for dist/themes/real-estate/js/module-bundle-main.js, one of the problem files, I see that it has a lot of dependencies to files that are on dev/app/....
With this in mind, can you please advise how can I use this template? Do I need to copy the referenced files on the dev folder as well or is there a more practical way??
Thanks
Hi stenio123,
We’ve opened the dist/themes/real-estate from the latest version of themekit and we didn’t see any errors.
What browser + version are you using?
Thanks, mosaicpro.
It is fine, I guess it is because I am using the theme with Meteor.js, which analyses all javascripts in the folder. I just removed the “js” folder since won’t use the scripts and problem solved. Thank you for the quick response!
BTW as a suggestion, it would be great if you could include a step-by-step tutorial of using the layoutkit, sidebarkit, etc. I know the idea is “just open them and copy what you like from the source code”, but would be great to understand the dependencies and see it done. Thanks!
Hello,
Is the “Timeline – list” option also available in Social Network 2 Theme?
Thanks
Hi ojack,
Yes the timeline list style is included in Social #2.
http://cdn.mosaicpro.biz/themekit-3.6.3-final/dist/themes/social-2/user-private-timeline.htmlP.S. Check out the pages dropdown in the top navbar.
mosaicpro.
Hello, Could you tell me the installation steps and requirements ?
(Want to install social-3 theme)
Hi MetehanYy,
We’re not sure what you mean by “installing”.
The theme can’t be “installed” as ThemeKit is a static HTML product. You can find all the HTML pages and their assets within the dist directory of your download.
Regards, MosaicPro
When I try to install the social-3 them from the dist file it shows up demo page how can convert it into usable website. I need know how to make functions on the theme working like default community websites.
Hi MetehanYy,
This item is not a Script or Wordpress Theme. To be more clear this item contains multiple themes (design) the that you can implement onto your own app(script) but not the app (script) itself.
Thanks,
mosaicpro
Than highly recommend you to make style stylesheet of wordpress to all themes.
Thanks
Tried to test the messages functionality. didn’t really work on the demo. Is it going to be working in the full version and is it difficult to make it work?
What setups should be customized in order to make the massages and friends section work?
Hi timastar,
There are literally countless ways of implementing a fully functional messages & friends systems.
As you should know, ThemeKit is a front-end product and provides a user interface framework and a couple of themes in form of front-end technologies such as HTML, CSS and JavaScript. It does not cover anything related to the server side or a functional backend system.
Unfortunately, our support doesn’t cover back-end implementations, but you can find resources and plenty of tutorials online to get started.
Thank you.
mosaicpro
Hi I have purchased the theme.I went through readme.txt and able to run real estate Theme via command :::grunt—theme real-estate.
But please let me know the project flow how the theme runs after the grunt—theme real-estate command executes. Please anybody share the reference as how the theme runs.
Thanks in advance
Hi pradd,
Please give us more info on what you’re trying to achieve.
Here are the 2 common commands:// To compile a theme you need: grunt --theme real-estate build:d
// To open the theme in a browser and have watches turned on: grunt --theme real-estate
If you want to create your own theme there are several things you need to do apart from the grunt commands. We will soon provide a step by step information guide on this.
Thanks, mosaicpro.
I want to know which is the starting file example index.html will be loaded first then css followed by script.But in app folder i am able to see only template files.Please Let me know which file or folder is loaded and so on. Also kindly share the steps to create the theme using template engine.
Hi pradd,
Please send me your contact details on contact@mosaicpro.biz and I will help you directly.
Thanks,
mosaicpro.
This template is amazing! and the code quality is awesome! I just suggest a improvement to change the way that LESS files are included in each template. Its being very difficult to understand which less files a specific template are using and this makes the things hard to import just the necessary files to the real project.
Hi diegomarangoni,
The LESS files are structured to load minimal css for each theme and avoid css bloat. We will consider getting more instructions or a mapping for each theme and their included less files.
Thanks for the feedback, mosaicpro.
Hi! thanks for amazing work.
I would like to create a new theme, I am following docs. But seems like Grunt commands are changed, if possible can you please provide working step-by-step grunt commands need to setup a theme.
Many thanks!
Hi pinku1,
There are a few things required to get a new theme in place which I’ll gladly walk you through.
Email me your contact details on contact@mosaicpro.biz
A complete guide will be available soon with step by step guides on how to setup your own theme from themekit.
Thanks,
mosaicpro
Hi, Great template! I just installed it and can’t find where the demo message NEW MESSAGE FROM MR AWESOME is generated from. I will appreciate a pointer on this.
Tks, T
Hi,
The version you’re using must be really old. Why not upgrade to the latest?
Hello,
Which file am i looking for to update the chart? I want to make multiple charts using my database but can’t seem to find the file to do this in?
Cheers, Mike
Hi Mike,
Which chart exactly are you trying to customise?
Im having an issue installing vagrant ,
under social.yaml, im not sure what is the package root
Hi jeffingo,
You’re only required to update the from: key of the synced_folder option with the absolute path to the main directory of your downloaded package (the directory that includes dev, dist, vagrant, etc).
The to: key is optional and can remain as it is. With the current path, you’ll find the project within the vagrant machine after you ssh into the environment in the /home/vagrant/social directory.
If you need further assistance, please let us know.
Thank you.
Great Theme and Kit…. Thank You!!!
Due to the structure of how I’m using the template, is it possible to add the classes to the BODY tag, as opposed to the HTML tag? If not, I can modify the attributes via JavaScript, but that feels kind of wonky.
Thanks
Hi thomsol,
For now is best to use the HTML tag but will review the structure about using the body instead of html.
Thanks,
mosaicpro.
