# Ember 2.4 change main view css class

**URL:** <https://discuss.emberjs.com/t/ember-2-4-change-main-view-css-class/10102>\
**Category:** Ember CLI\
**Created:** [March 10, 2016, 10:51am UTC](https://discuss.emberjs.com/t/ember-2-4-change-main-view-css-class/10102 "2016-03-10T10:51:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![pierred69](https://avatars.discourse-cdn.com/v4/letter/p/ee7513/32.png) [@pierred69](https://discuss.emberjs.com/u/pierred69)\
**Post date:** [March 10, 2016, 10:51am UTC](https://discuss.emberjs.com/t/ember-2-4-change-main-view-css-class/10102/1 "2016-03-10T10:51:45Z")

</div>

I’m looking for a way to change the css classname of the root element of an Ember app in Ember 2.4.

The old way doesn’t work anymore because of deprecation, and now I have :

```
<body class="ember-application">
   <div id="ember414" class="ember-view">
     <!-- THE WHOLE APP -->
   </div>
</body>

```

I’m looking for making something like :

```
<body class="ember-application">
   <div id="ember414" class="ember-view theCssClass">
     <!-- THE WHOLE APP -->
   </div>
</body>

```

Thanks a lot for your help !

---

<div class="post-metadata">

**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\
**Post date:** [March 10, 2016, 11:12am UTC](https://discuss.emberjs.com/t/ember-2-4-change-main-view-css-class/10102/2 "2016-03-10T11:12:50Z")

</div>

The easiest way to do this, without deprecation and/or mega hacks, is to invoke a component from your application template. Something like:

```
{{#app-style-wrapper}}
  {{! Other stuff that is in application template now }}
  {{outlet}}
{{/app-style-wrapper}}

```