I wish there were better instructions for installing and getting started with Semantic-ui on Meteor....please see below.
Any improvements/feedback welcome.
I just decided to post these because of some difficulties I had getting semantic-ui to work with Meteor. I figured out the few things I was not getting from various answers across various forums:
Install via CLI: meteor add semantic:ui flemay:less-autoprefixer (You don't need to worry about LESS)
Create an empty custom.semantic.json file in /client/lib/semantic-ui/custom.semantic.json. (Note this is NOT the lib folder that is outside the client and server folders - make a new lib folder. Putting it in the original lib will cause your app to crash because jQuery hasn't been loaded
Start meteor - the custom.semantic.json file will populate and all the semantic-ui files will be added to your project in the same folder.
Edit the file custom.semantic.json to select only the definitions and themes you want
If you are happy with the default values you will need to remove .custom.semantic.json to generate Semantic UI - in all likelihood you will want to delete this file.
Save the file and it will generate Semantic UI
It hasn't been an issue for me yet but it appears that if you are changing theme you still need to leave the default theme setting as true. This seemed to be causing people confusion.
I wanted to use the accordion and couldn't figure how to get it working. The HTML from the docs is very straightforward but I needed this JS to get me going:
Template.yourTemplate.rendered = function() {
$('.ui.accordion').accordion();
}
If anyone knows a better way, please jump in.
Hope this helps someone avoid the minor frustrations I had earlier today.
Related
I would like to make a custom dark theme for a web client.
I tried everything but no matter what I changed I cannot get any changes to take effect. I found out this page in the documentation but I cannot get it to work:
https://afterlogic.com/docs/webmail-lite-8/developers-guide/creating-new-skin
Does anyone have some experience with this webmail client?
The recommended option for creating a new skin is to clone and rename one of the existing skins, and upon making changes to it, run gulp styles --themes YOUR_THEME_NAME command. Once this operation is performed, check static/styles/themes/YOUR_THEME_NAME and see if you get your changes reflected there. If the changes are in place, then it's probably browser cache causing it, try clearing it and see if that helps.
In fact, it's not required to deal with .less files, you can simply create a copy of an existing theme under static/styles/themes directory - but in either case, you need to make sure the new theme is listed in ThemeList section of data/settings/modules/CoreWebclient.config.json configuration file.
Enviroment
I have an extjs 6 application which is already compiled and the css files like they should be. This application wasn't compiled for a while and now it's generating a different (wrong) css file. Since someone else changed the app, I have no clue what has changed since the last compilation. I compile with sencha app build development and the following CSS files change:
build\development\MyApp\classic\resources\MyApp-all_1.css
build\development\MyApp\classic\resources\MyApp-all_2.css
There are a few more files in the folder which do not change.
Versions:
Sencha Cmd 6.1.3.42
SDK Version (if neccessary) 6.0.2.407
Problem
I want to generate the same css like before. It seems there are just a few files which are not included within the compilation process, like:
ext/classic/theme-base/sass/etc/mixins/frame.scss
ext/classic/theme-base/sass/etc/mixins/slicer.scss
ext/classic/theme-neutral/sass/src/tab/Tab.scss
Question
What do I have to do, to get the old css? Is there some file with includes? Like classic\sass\src\view\main\Main.scss or something? I guess those includes are somewhere (since it already worked at least once) and maybe commented out or something.
What I've already tried
I tried to compile with different themes refered by the app.json attribute was builds->theme. I also tried a lot of playing around stuff, which I can't describe here in detail.
Any advice would be greatly appreciated!
Thanks in advance!
If you have any questions leave a comment and I'll try to add it to my text!
I'm trying to troubleshoot a LESS issue with my Meteor code..
I have bootstrap3-less package installed but I don't know where Meteor is getting it's LESS files from. This whole time I thought it was coming from a .less file in my client/ folder but I removed that entirely but for some reason my Meteor CSS file does not change once I remove that. But yet, when I inspect the compiled CSS file, it stayed exactly the same.
However, when I make changes to my .css file Meteor picks that up right away..
Anyone have this experience? thanks
The bootstrap3-less package contains the less code inside itself. If you want to use your own less code instead of the code inside bootstrap3-less, you should remove bootstrap3-less.
Here you can see the code that the bootstrap3-less package adds to your app: https://github.com/simison/bootstrap3-less
They suggest that you can customize bootstrap by adding the less file to your client folder, but even if you don't have that file the app will load all of the less content from the package.
A skin.css file has been updated on a DotNetNuke website, but the updated change to the file has not yet come through on the main css file.
Tried clearing the cache within DNN and no luck...
I'm not overly familiar with DNN and how it works, but isn't it supposed to get merged into the rest of the CSS files with the DependencyHandler.axd. This does not seem to have happened.
Anyone any ideas?
When you say it isn't showing up in the Main.CSS file, I am going to assume you are using the CDF functionality in the platform. If so, you can go to the Host/Host Settings page, and look for the Client Dependency Framework portion of the settings.
In those settings you can "increase" the version number, which should cause the files to be regenerated, you can also turn off CDF to allow DNN to just load the CSS and JS files normally which generally makes debugging things a little bit easier.
I recently setup django-grappelli on my first django app. While I like the way it looks I want to customize the colors, and other CSS.
From my research, it looks like I will have to use Compass but I've never used Compass before and want to double check that this is the best method before I embark on that path!
Is Django-grapelli even the right choice for some one that wants to customize the color theme?
Things I tried
Modify the CSS in the Grappelli stylesheets but they are formatted in a way that makes it tedious.
Extend the style sheet but I am not sure where to do this for the admin.
Create a custom.css but could not figure out where to put the path
Thanks for your advice!
It seems to me like Compass is just a tool to write CSS. I've never used it, but at the moment I don't see how it could make modding the admin interface any easier than doing it manually!
Whenever I make changes to the admin (I've made changes to Grappelli, like you're trying to do), I always use what you've listed as number 2. I've never had any troubles! I can try to help you out, if you'd like to try again.
What I do first is go to my Python install directory and copy the Grappelli source from Lib/site-packages. I put this code in my project directory as a project-level app. So, if you're using Django 1.4, you'll have a folder that has your project folder as well as manage.py in it. Put the code there.
Then, using your favorite web developer tools (I prefer Chrome's), figure out which stylesheet you need to modify and which css file it's in. I do this by right-clicking the element and selecting Inspect Element. This brings up the dev tools, and at the right it tells you the css file its referenced from as well as which line its on. If you open up that css file in your favorite text editor and make changes to it, it should work!
Let me know if you're having any trouble with this. I can try to help you out further.
(and, P.S., I wasn't trying to be pedantic with a basic overview of the use of Chrome's developer tools. I was just trying to be helpful by not assuming anything. I hope you don't take it as an insult.)