styling with css #60

loicknuchel opened this Issue Jul 27, 2012 · 7 comments

5 participants


Hi needim,

I just look to your new version of noty. It's a complete refactoring of the plugin !
It looks always really good but I have 2 comments :

  • it's quite bad to loose all previous themes (I really like twitter and growl)
  • with the js theming, it's more difficult to change theme :
    • I'm unable to find theme origin with the chrome inspector (I have to look everywhere in default.js)
    • theme is dispach in default.js and all layouts

For exemple, I had some trouble to find how to change top position of container...

Well done for the new modal fonctionnality, it's really good :-)

raad commented Jul 27, 2012

This is effectively a duplicate of #54.


@raad my bad. I confess I didn't really look others issues.

raad commented Jul 27, 2012

@loicknuchel - no problem =)
I think needim is working on a solution, so that's good!

Craga89 commented Nov 1, 2012

Hi all, as this issue seems to have gone stale, I've refactored the themes code to use CSS instead myself. You can grab it on my fork here:


The correct link is
If your feature is completed please make a pull request to integrate it to noty repository.


Craga89 commented Nov 22, 2012

The changes to the original repository are pretty substantial, and replace a lot of current functionality with breaking changes, so I'd consider this a forked project at this point. Not sure a pull request is appropriate in this case?

@Craga89 I think you need a rebase and test again first

@needim needim closed this Aug 28, 2013
@needim needim added a commit that referenced this issue Dec 9, 2013
@needim v.2.2.0 - back-to-the-css for themes
Related issues #54 #60 #162

noty is not forcing you to include theme.js now. If your theme-name doesn't have a equal theme.js; noty will use your theme-name as a css className.

Check this demo page: demo/themeCss.html

Also; there is no backward compability issue about that. Everything works fine. But I deleted BC option overriding control in noty helper function. So you must use noty with 2.0.x options. (1.0.x options support dropped now)

Structure will be like this;
<li class="yourCustomThemeName noty_container_type_alert">
	<div class="noty_bar noty_type_alert">
		<div class="noty_message">
			<span class="noty_text">noty text/html</span>
			<div class="noty_close"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment