Customized way to add class selection in Aloha

Out of the box, the aloha editor uses a file named styleconfig.js to allow you to select styles and classes via the Advanced Inspector plugin to insert into your content. In previous versions, the content designer editor offered a way to add in classes to content by using a dropdown and the css provided by the folder. This sample illustrates how you can achieve something like that in Aloha by dynamically loading and populating the the values from your folder's stylesheet property in the editor.

*Please note that this is a sample and is something that should be reviewed and may need to be tweaked to function in your environment. The support team will not be able to assist with support, customizations, or installations of this sample. Please also note that any CU's or site upgrades can wipe out this functionality.

Open the bin folder and copy the ExCSS.dll into your site's bin folder
Dll is from https://github.com/TylerBrinks/ExCSS which may require a rebuild depending on your version.

Open your web.config file and locate the tag. Paste in the following line

In your site root folder, add a folder named "handlers" if no folder exists.

Copy the file located in the handlers folder from the zip into the newly created or existing handlers folder of your website.

This step will setup the ability to generate and apply styles to elements in Aloha. Skip if you don't want to set this up.
In your site root folder on the webserver, open the following path:
\Workarea\FrameworkUI\js\Ektron\Controls\EktronUI\Editor\Aloha\plugins\ektron\general\lib\general-plugin.js

This step will setup the ability to generate and apply classes to elements in Aloha. Skip if you don't want to set this up.
In your site root folder on the webserver, open the following path:
\Workarea\FrameworkUI\js\Ektron\Controls\EktronUI\Editor\Aloha\plugins\ektron\advancedinspector\lib\advancedinspector-plugin.js

Clear your browser's cache. You may also need to recycle the site's application pool as the js may be cached there as well.

Login to the workarea interface and edit your folder properties in the workarea to make sure there is a valid css stylesheet for the folder you have selected. You can have the stylesheet inherited as well.

Using the Aloha editor you should now add a content item and notice that the style selector should be populated with styles from your stylesheet as well as the advanced inspector should have a listing of your classes. If you are not seeing some, there is logic in the handler file that can be updated to your liking to return what you want.