Changing the site theme not possible? about semantic-ui-ember

[charlwillia6]

So I was checking out your example, and I get what you have done, but is there any documentation for this anywhere, or how to actually theme and override using semantic-ui-ember? Since your README.md said that this project was a "extension" of semantic-ui, I was trying to install semantic-ui via npm, and gulp-build, then add this extenstion to ember, and then I read this in the issues. It seems you don't have to do any of that. Even though I can understand what you did in your example project, is there anything, anywhere, that documents the proper way to customize semantic-ui in ember? I still don't understand how you change the theme. Obviously just changing the theme.config in the root of the project doesn't do it.

Also, even if I add style changes to app.less, nothing works unless I put !important with the style. How do you configure so that app.less overrides semantic-ui styles? And the icon issues mentioned above by @jayphelps is not fixed in my project. I still get errors in the console regarding fonts. I am using the most recent semantic-ui-ember package.

[arnodirlam]

I've managed to make it work in ember 2.8.0 and semantic-ui 2.2.6 using symlinks. It's not ideal, but at least it can be checked into git without the sources (and still reproduced on other machines) and doesn't involve bower_components manipulation.

This basically sets up ember-cli-less and symlinks/copies semantic-ui src parts into your ember styles directory:

npm install --save-dev ember-cli-less
cd app/styles
mv app.css app.less
mkdir semantic-ui
cd semantic-ui
ln -s ../bower_components/semantic-ui/src/definitions .
ln -s ../bower_components/semantic-ui/src/themes .
cp ../../bower_components/semantic-ui/src/theme.config.example theme.config
cp ../../bower_components/semantic-ui/src/theme.less .
cp ../../bower_components/semantic-ui/src/semantic.less .
cp -r ../../bower_components/semantic-ui/src/_site site

Install semantic-ui-ember if you haven't. Then, disable its CSS importing in your ember-cli-build.js file:

  var app = new EmberApp(defaults, {
    // Semantic UI config
    // ref: http://semantic-org.github.io/Semantic-UI-Ember/#/modules/usage
    SemanticUI: {
      import: {
        // don't auto-import css as we import it from app/styles/app.less
        css: false
      }
    }
  });

Then, add the following line on top of your app.less file: @import 'semantic-ui/semantic';

Finally, in order to load icons correctly, add the following to your app/styles/semantic-ui/site/elements/icon.variables (and don't forget to git add it):

// Adjust fontPath to load from the same folder as semantic UI files reside
// default: "../../themes/basic/assets/fonts"
@fontPath: "themes/default/assets/fonts";

The same probably applies to images, altough I haven't tried that yet.

Now you can edit the files in app/styles/semantic-ui as you please and watch your layout change via livereload (after it compiled less for 20 seconds on a quad-core i7 :P).

Of course, you can use a different directory than app/styles/semantic-ui, also just app/styles, if you adjust the commands above, but I like to keep my concerns separated.

[ankit-izap]

theme customization is not working in semantic ui

[nathanpalmer]

Unfortunately Gulp + Ember (which uses Broccoli) isn't a good match. See the issue I created for some info on where I'd like Semantic to go to stay build-tool agnostic. When we first put this together it wasn't even possible to pull in the .less files directly. @jlukic has just finished refactoring the build system with 1.9.0, however, so I'm hoping in the next month to take a closer look at that work to see if we can integrate it better.

[Panoplos]

Shouldn't it be possible to require('gulp') inside the Brocfile.js and import the specific build task?

[nathanpalmer]

Possibly. I'm not as familiar with gulp. However, if the 1.9.0 changes mean we can import the less files directly that may be a better way. That way we can integrate directly in the ember asset pipeline. (there are other ways to plugin to the pipeline but we haven't explored them yet.)

[Panoplos]

In that case, you could just use Semantic UI LESS?

[nathanpalmer]

Yup. However you'll miss out on the module wrappers that make it easy to use as first class components within ember.

[jlukic]

You should be able to import gulp tasks directly without getting into any of the details of gulp. Check the readme in src/ of main repo.

[Panoplos]

What I have done is used a Promise to spin off a child process inside semantic-ui-ember's index.js (which is really just a hack!). This process runs gulp to build the new assets. What I would like to do is register a couple directories with ember-cli's file system watcher so that we get run whenever a file is updated. Anyone know how to do that?

One reason I like this approach is I do not have to futz with importing gulp and configuring to run the gulpfile.js.

[Gaurav0]

Have you looked at the simple way I change themes in ember-cli-jquery-ui? I just use an option to change the files imported. It does require you to restart ember server, but usually people don't need more than one theme.

[listepo]

See README "This setup is made so you don't have to worry about how to customize Foundation, but just lets you do it. Furthermore ember-cli-sass helps that the foundation import statements (in the _foundation.scss) 'just' work."
Need to implement the same functionality for Semantic-UI less
https://github.com/artificialio/ember-cli-foundation-sass

[nathanpalmer]

I've created an example repository to show the steps necessary to get semantic importing through less and allow for full theme support. It's referencing a prep-1.0 branch that we're using to get things ready for a release so some parts may change.

https://github.com/nathanpalmer/example-semantic-ui-ember-cli/commits/master

I'm going to be looking into how we can automate this though so it's easier to get started for those that want to use less as their pre-processor (hoping we can also get sass/scss support as well as soon as semantic supports it.)

[oliverbarnes]

+1 on support for selecting a theme. thanks for the addon!

[jayphelps]

@nathanpalmer note that your reference repo does not correct for the loading of the icons font-face, which attempts to load when used, at the wrong location: https://github.com/Semantic-Org/Semantic-UI/blob/0359dd12ecfdf5c0263c63bc9ea615429d33d105/dist/components/icon.css#L19-L20

[Beck89]

Has there been any progress on this recently? I'm looking for a simple way to select themes without hacking the build process.

+1

[nathanpalmer]

@jayphelps This problem was fixed with later versions of jQuery and Semantic-UI-Ember.

@Beck89 & @onceatime This was a proof of concept that was created last July. Everything is functional within that sample repository. I've gone ahead and updated it to the latest version of Ember and Semantic. Once it's all in there I assume ongoing development on your project will work just fine so the only possible addition would could have is a way to automate the initial file copies that have to be done from the semantic install. We'd welcome a pull request around this part.

@nathanpalmer Thx, yes i already adopted it and updated to the latest semanti-ui version.

[zcharli]

I think this worked for me with ember 2.6 and the latest semantic-ui 2.1, get npm install ember-cli-less, change app/styles/app.css to app.less. Write @import "semantic.less"; at the top of the file. Now go into your ember-cli-build.js files and enter the following:

var app = new EmberApp(defaults, { outputPaths: { app: { css: { 'app': 'assets/app-name.css' } } }, lessOptions: { paths: [ 'bower_components/semantic-ui/src' ] } });

Now that your ember is set up, you can change themes using themes.config. Mark each field with what you want. Then go into top level of bower_component/semantic-ui and type gulp build.

Note: there are a few errors you may need to resolve such as running npm install in the directory and moving sematic*.js and semantic*.css to the /dist folder. Yes, * means wild card. Basically the error messages are good and just do what they ask then you'll be be able to finish the build.

After gulp build finishes, run ember server.

[khornberg]

Instead of hacking away at something in bower_components would it be more helpful to change the bower component installed?

One could then install something from the local file system or a published customized version of SUI.

I think ember cli blueprints can take input (though I don't know how it would work on install when it automatically runs). Or perhaps if that doesn't work, a setting in config/environment would suffice.

[aaronbhansen]

Going to release beta 2 today. After that, all paths should be customizable. See the documentation commit c7aa66f and the actual change for more information 9cc8eed.

You should be able to configure each of the settings as needed for your local repos.

[aaronbhansen]

@ankit-izap please open a new issue and include your ember-cli-build semantic config information and your local setup. We need more information to determine why it isn't working as people have tried setting it up locally multiple different ways.