607 comments found.
Hi, great looking theme!
What’s the best way to compose my own theme using the components of yours? Should I make my own less file and include all files that you use? What are the basic requirements in that case? Tried it but having troubles with “ParseError: Unrecognised input” on lines with variables (ie {direction}: (@size1 + @@size2)
My project has it’s own structure and Vagrant environment so I have to make adjustments, but I’d like to keep your file structure intact to easily be able to upgrade when changes get out.
(I’m only interested in the CSS files)
Hi codepeak,
Sorry for the delayed reply. The main less file for every theme is in dev/app/less/themes/$theme/default.less; as long as you keep the structure of that file you could work on a copy of that file and it should work.
About the variable errors, how are you compiling the less file? You should be using grunt, even if its not the task from our setup (in this case you should also run the css output through autoprefixer to add CSS vendor/browser prefixes as our code is standard CSS3 – this is made automatically with our setup).
It’s also possible that your less compiler is outdated and we might be using new less features that are not supported yet by all less compilers.
However, we recommend that you customize your desired theme using our grunt tasks.
Another suggestion for customizing would be to duplicate the entire module within dev and work on that copy, for example if you’re working on the social-1 theme, you should duplicate the following:
1. Theme’s Html templates directory (dev/app/html/themes/social-1 to dev/app/html/themes/new-theme).
2. Theme’s less directory (dev/app/less/themes/social-1 to dev/app/less/themes/new-theme).
3. Theme’s javascript directory (dev/app/js/themes/social-1 to dev/app/js/themes/new-theme).
You will also have to update dev/app/_skins.json with a default entry for the new theme;
After this, you can generate the initial dist output (dist/themes/new-theme) for the new theme by running from the dev directory within a terminal grunt --theme new-theme build:dist and grunt --theme new-theme to run watchers for changes on all the files in the new theme;
This way you can work on the existing setup and simply get the final static files for your customized theme from the dist folder and use that on your implementation and also when there are new updates it should be easier for you to update your customized theme.
If we can be of any further assistance, please let us know.
Thank you.
Ah, great information! I’ll have a look! Thank you very much!
Glad to help. Just a small correction:
You will also have to update dev/app/_skins.json with a default entry for the new theme;
The correct path is dev/_skins.json
Hi Guys, Great theme, Good Job!!! Any plans to add a lightbox with a comment section much like Facebook or instagram? This will be awesome and the only thing missing from this theme in my opinion.
Thanks, Jason
Hi Jason,
Thank you for your appreciation.
Yes, the modal with image and comments is already on our list. The feature will be available with the next 1 or 2 updates.
If you have any other suggestions, recommendations or requests, please let us know.
Thank you.
Hi,
Thank you for the quick response!! Any idea as to a time frame? Also, I would purchase this feature separately through Code Canyon if it’s released soon. Any chance of that happening?
Thank you,
Jason
A few days if it makes it in the 1st update or 1-2 weeks with the second.
Excellent, Thank you for the update 
How do I change Sidebar Transition? For example, starting with theme “Layout” (/dist/ui/layout/index.html), how would I change Side Bar Transition to “Push”?
I am mostly concerned for Sidebar Transition when the page is viewed from iPhone. The Sidebar can stay always open when viewing from a PC. But, I would like the Push transition on an iPhone.
I spent a few hours on this, and cannot figure this out.
Hi,
1. Specify the desired effect on the toggle button (specifically for push it’s “st-effect-3”):
<a href="#your-sidebar" data-toggle="sidebar-menu" data-effect="st-effect-3" class="btn btn-default">Push</a>
2. Make sure the sidebar markup is where it should be within the page. The only difference is that for some effects the sidebar needs to be placed within ”.st-pusher” and for some outside of ”.st-pusher”. Here’s the structure:
<div class="st-container">
<!-- sidebar effects OUTSIDE of st-pusher: -->
<!-- st-effect-1, st-effect-2, st-effect-4, st-effect-5, st-effect-9, st-effect-10, st-effect-11, st-effect-12, st-effect-13 -->
<!-- content push wrapper -->
<div class="st-pusher">
<!-- sidebar effects INSIDE of st-pusher: -->
<!-- st-effect-3, st-effect-6, st-effect-7, st-effect-8, st-effect-14 -->
</div>
</div>
Minor Issue: On Safari on a Macbook Pro, using Admin Theme, I can use my trackpad to jerk the sidebar menu from left-to-right. This is an annoyance.
On Firefox, this is fine. I can only use my trackpad to move the sidebar menu up and down, but not from left to right.
Is there away to fix this?
Hi drjoke,
Would appreciate if you could follow up with some more details.
1. Are you talking about horizontal scrolling?
2. Is this happening on any sidebar or a particular sidebar with specific elements inside?
3. Does the issue persist on all screen resolutions or just on a specific one?
4. Also, would appreciate if you could pinpoint a page from our live demo where you can identify the issue as it will help us fix the issue faster.
It’s interesting that I can’t replicate the issue on both a MacBook and a Mac Pro.
Thank you for reporting.
1. I am talking about horizontal scrolling. It is hard to notice. Things may have moved 1 – 2 pixel, but I can still notice.
2. It is happening on the main sidebar (left side bar) on the main page of the Admin theme linked below:
http://cdn.mosaicpro.biz/themekit-3.5.0-fix/dist/themes/admin/index.html3: This problem persists only on Safari using Macbook Pro, and I do not see this on Firefox on the same machine.
I tried resizing my Safari window, and it always happen.
4. The link is shown above.
Thank you for taking the time to provide more details. Our team will look into the issue and hopefully solve it as soon as possible.
Hello, i don’t understand what is this? Is it a theme for wordpress or you must install it into a server becuase i’d like to know before buying.
Hi kostasKK,
Thank you for your interest.
It’s not a WordPress theme but it can be used to create one. ThemeKit is a HTML template and UI framework and provides only static files (HTML, CSS and JavaScript).
ThemeKit can be used with any scripting language (including PHP), but any server-side implementation is up to the developers. ThemeKit is meant to help developers in that they can focus on functional aspects of their projects implementation rather than the user interface and design.
If we can be of any further assistance, please let us know.
Thank you.
So, its not a social network because i am searching for social network.
Thank you for the quick response
You’re welcome.
Well, if you take a look at the online demo, ThemeKit does provide three themes with a user interface tailored specifically for social networks, it just doesn’t include any server-side functionality.
So, i can use it for social network but how to install into a subdomain because, my friend told me that bought it but he don’t know how to install, so before buy it i ‘d like to know the steps because i am not sure if i will make it.
thank you
Ok, so clearly you’re looking for a fully functional social network which can simply be installed and ready to use.
ThemeKit is not what you are looking for, we were just making a point with the last reply that ThemeKit does provide multiple designs for a social network.
We wish you luck with the search for what you’re looking for and with your project. You should try the WordPress category.
Ok thank you for your time.
how to turn off the responsive behavior of the theme . I want fixed width of the website in all devices . Please tell how to do it. It is very urgent , Thank you
Hi,
Unfortunately, we’re not officially supporting this option (as neither does Bootstrap) but you could try to follow the steps provided by the Bootstrap team for this experimental feature. See http://getbootstrap.com/getting-started/#disable-responsive
Thank you
Please, test the boxed layout at 768px of width (iPad portrait). As you can see many css styles (like menu colors) are broken because the wrong use of bootstrap media queries.
We’ll definitely check. Also, could you please provide a direct link from our online demo for a page where you can identify the problem for sure? Will help solve the issue faster.
Thank you for reporting.
1) use the chrome developer tools 2) simulate a 768×1024 resolution 3) refresh the page 4) take a look to the top dropdown menu color
I think could be other elements broken for the same problem, you should check your media queries, thanks
It’s most likely an isolated issue, but we’ll definitely fix it for the next update.
Thank you for taking the time to provide us with more details.
Hello,
How do you activate chat feature please?
Hi atrejo78,
Not sure what you mean by activate chat feature… can you please give us more details?
mosaicpro.
Please see the answer to your other comment. Thank you
Hello I would like to know how to change the primary color for the theme in css and remove the color picker.
Hi andre4707,
The automated way of changing the primary color is by adding at the end in default.less of any themee.g. dev/app/less/themes/social-1/default.less:
@primary-color: #82b440;Then just run:
grunt --theme social-1 build:distThis will generate your dist/themes/social-1
Note!
The main LESS file of each theme is default.less and can be found in
dev/app/less/themes/[theme_name]/default.less
mosaicpro.
Ok Im only using the html css and js files in the dist folder for social 3. I will not be using grunt is there another way?
Hi andre4707,
You can change the primary color directly from css (which we don’t recommend) or the right way is to change it is through the provided LESS files. If you don’t want to use grunt you can do it like this:
1. Install a less compiler on your machine http://lesscss.org/#using-less
2. Add at the end of dev/app/less/themes/social-3/default.less@primary-color: #82b440;3. Compile the default.less with the following command:
lessc /path-to/default.less default.min.css -x
- lessc (less command)
- /path-to/default.less (your path to the social-3/default.less)
- default.min.css (the generated output css) (the naming is set the same as the css file loaded by social-3 html files)
- -x (minify the output css)
This will generate a css with primary color changed. Take the output (default.min.css) and override your dist/themes/social-3/css/.
mosaicpro.
which php framework can compatible with yur music theme
Hi eyrame,
ThemeKit is a HTML/CSS/JS template which makes it compatible with any framework (PHP,ASP, RUBY ON RAILS, etc..) that renders HTML. You do need to take the necessary files/assets for your app to look like Music.
mosaicpro.
NEW UPDATE: VERSION 3.5.0
We are pleased to announce yet another release of ThemeKit – v3.5.0.
This massive update brings a new Music Theme for all the music enthusiasts out there, many bug fixes covering from small to more important issues, as well as many improvements and new additional components for the vast UI framework included with ThemeKit.
We invite everyone to take a look at the full change log for this release, on ThemeKit’s home page here at ThemeForest.
As always, this update is completely free for existing buyers and available for download now.
Feel free to drop us any suggestions or requests you may have and we’ll do our best to make it happen for the upcoming releases.
Thank you.
FOLLOW UP: BUG FIX RELEASE
There’s a new update available which includes an important fix for a bug affecting several modules in the latest version 3.5.0.
The issue was caused by an “exclude” entry within the _grunt.config.json file, essentially causing vendor-core.js to be omitted from several modules (essential, layout, sidebar, navbar, color), and it was also excluded from the vendor-bundle-all.js bundle, causing errors for missing 3rd party libraries like jQuery and Bootstrap.
The fix update is available for download now. We apologize for the inconvenience.
Thank you.
Hi,
Great template! I am using this to develop my own web application. Could you add upload screens to the template so user will be able to upload images, videos etc during status update.
Thank you!
Hi socialappdeveloper,
Thanks for the suggestion, will definitely add upload screens for users to upload images/videos for the update status box.
mosaicpro.
Hi.
How do you get the chat to actually function?
Thanks
Hi atrejo78,
Unfortunately your question doesn’t have a simple answer.
There are literally countless ways of implementing a fully functional chat system.
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.
Some ideas to get you started for building the backend of a chat system: - you could use any server side scripting language for the backend, such as PHP and then make use of AJAX to communicate and sync data with the user interface; - you could even use node.js - you could built it entirely on Angular and rely on a online backend service such as FireBase (see https://www.firebase.com) for a real time data & sync backend service
Unfortunately, we can’t help you more on the subject, but you can find resources and plenty of tutorials online to get you started.
Thank you.
Hi
I liked Thme Kit as well as Coral. I am planning to use one of these for a social network site for parents and kids. Would you able to provide a color scheme suitable for Kids portal? If “Yes” then please suggest the price for the same.
Hi acesys,
Although you can choose any color from the ColorKit http://cdn.mosaicpro.biz/themekit-3.4.0-rc1/dist/ui/color/index.html in combination with the rest of the themes to suit your purpose even the sidebar colors found within ColorKit.We can craft a custom theme within ThemeKit with your preferred color scheme.
To discuss pricing options, please send us more details by email at contact@mosaicpro.biz with everything you require and we’ll get back to you with a quote as soon as possible.
mosaicpro.
Amazing theme..Any plans for angular?
Hi jamesaps,
Glad you like it.
Angular is on our list but will not be available soon as we plan to expand with new themes and components for the next 5-10 updates.
mosaicpro.
Can this theme be used to skin a social networking script like mooSocial?
Thanks
Hi ojack,
ThemeKit can be used to skin anything. It’s about how flexible mooSocial can be.
mosaicpro.
it is possible to install this theme in wordpress? there is how?
Hi Horeon,
This is not a Wordpress theme.
mosaicpro.
as I do the installation of this template?
Hi Horeon,
This is a HTML/CSS template, there static files which you don’t need to install. You need to take this and implement onto your own app if you want dynamic data such as database etc.
There is a Development Suite which helps you compile the desired or custom theme with minimal required assets.
mosaicpro.
Thank Mosaicpro, good where can I get help? where is this suite? I need to know how to be able to work on this project.
ThemeKit comes with an extensive documentation which we continuously expand & update.
Thanks,
mosaicpro.
Do you work with projects and personal concepts? with all the rights to the project and the site? if I make the request for the construction of a project like this with all bootstrap resources, ready and installed, I already own the domain, the name and logo of the site, good there is a possibility of construction of this functional design? as would be the average cost? you can contact on my email (Horeon@outlook.com.br), or is to do a acessoramento so I can develop the project?
thank mosaicpro
??
Hi Horeon,
Sorry but at the moment our time is fully booked with extending ThemeKIT with new themes and updates.
mosaicpro.
Hello,
I have recently purchased this and i think it’s great. I have a couple of questions.
Firstly, Upon buying this do i have access to all the themes?
Secondly, is it possible to adapt elements from one field into another? For example admin charts into social network theme.
Lastly, how can i accomplish the colour and design of the admin template as demonstated.
Cheers
Hi tyrenzo,
Thank you for your purchase.
1. Yes. Buying once grants you lifetime access to all current and future themes & updates of ThemeKit.
2. Yes it’s possible here is how to do it:
Let’s take social-1 as our main theme. Once you setup your dev there are 3 folders to keep an eye when adapting elements from other themes.
app/html/themes/ app/js/themes/ app/less/themes/
// Now will check the admin for chart assets copy from app/js/themes/admin/main.js:
// Charts
require('../../../vendor/charts/js/main');
then paste it in app/js/themes/social-1/main.js
// Copy & Modify HTMLcopy app/html/themes/admin/charts.html
and paste it to app/html/themes/social-1/charts.html
In app/html/themes/social-1/charts.html change the 1st line from
{% extends "app/html/themes/admin/_layout.html" %}
to
{% extends "app/html/themes/social-1/_layout.html" %}
This will load the social-1 layout on the charts page.
// Copy custom less/css paste it to app/less/themes/social-1/default.less
// Charts @import "../../../vendor/charts/less/main";// Build it You then need to run this command in terminal while being in the dev/ folder:
grunt --theme social-1 build:distCheck your dist/themes/social-1/charts.html
3. Color and Design of Admin is included not sure what you mean.
mosaicpro.
This is great thank you,
To rephrase my third question, can i apply the admin colour and design to the social network theme?
Cheers
Hi tyrenzo,
Yes it’s fully compatible.
In your app/less/themes/social-1/default.less change:// Skin Variables @import "../../common/skins/social/variables/variables";to
// Skin Variables @import "../../../vendor/skin-explore/variables/variables";Then compile:
grunt --theme social-1 build:dist
Done.
P.S. You can have the Social Design in the Admin with the same steps.
Hello, How do I gain access to Tabs from the Social theme?
Cheers
Not sure what you mean, please provide more details. Gain access from where?
Hi! Great theme. Congratz.
The only thing that I really dont like is the way you organize the project (js, css, etc.).
Two questions:
1 – How do I use the Kits (Is there any documentation for those who dont use your Dev enviroment?)
2 – How do I change the blocks width in the timeline?
Hi thiagofuruchima,
Thank you for your purchase.
Regarding your questions:
1. There are regular and minified version of css and js for each kit. But we highly recommend using the dev as you will keep your work significantly cleaner.
2. Increase or Decrease the data-width as with the example below:This will keep a maximum width of 400 px for each block. Meaning when that width is reached it will create grid/blocks.
<div class="timeline row" data-toggle="gridalicious" data-width="400"> // blocks </div>
OK. Thanks.
1 – But the dev version is for Ruby only, right? Or can I use it with PHP?
2 – Could you please provide details on how to use the Color Kit. And how to change the color of my site?
Hi thiagofuruchima,
1. The dev is using nodejs much simpler to setup and use than ruby. The workflow would be to take an existing kit or compile your version (mix of kits), take the files (html, css, js & images) and implement it onto your PHP.
2. Send me your contact details to contact@mosaicpro.biz and will guide your through.
mosaicpro.
There is a problem in the new update. Whenever I type any text in search textbox of the chat slider, the slider hide automatically.
Thanks for reporting. We’ll have a look as soon as possible. There will most probably be another update later this week. If you find anything else let us know.
Please i just bought the team and i am trying to use it on netbeans. please how do i upload the social 3 file on netbeans
Hi luvthrone,
Sorry but we don’t have any experience with netbeans. Send me your contact details on contact@mosaicpro.biz and will try to help as much as I can.
mosaicpro.
