[Solved] Style Class per Item

edited June 2018 in Developers

I need admin to optionally add css classes to specific items while creating items.
I have followed these guides and resources

I play around CSS SDK and was able to create Item theme and it appears in item preview, however my need is Style per Item code snippets/per-item-styles

"Style per Item" which should as described add checkboxes area in item creater properties window for admin to choose from, I have done the following steps:
1. Get "per-item-styles" code/scripts and add them to my extension each in their corrosponding place
2. Update manifest Install/Update lines as described in the sample
3. Modify "blocks" array in cssConfig.js to include { className: 'my-class-name', label: ('The Label') }
4. Change __ExtensionId
to my extension name "taoDoc" in all places including AddCssBlocksHook.php
5. Rename "AddCssBocksHook.php" to "AddCssBlocksHook.php" as github files missing the "l" letter
6. UnInstall/Reinstall my extension
7. Installed and hook registered successfully
8. Try to create new Item, but no checkbox appear for configured blocks class
9. Debug the CreatHook code while click Authoring on Item, and it shows that it's calling $config->addHook('taoDoc/cssBlocks/hook');
10. and the "config" of taoQtiItem/controller/index contains my extension registered hook. However, nothing appears on properties panel of QTI Item.
11. Browser console log after load Item authoring is
VM6326 customInteractionRegistry.js:24 deprected use of "taoQtiItem/qtiCreator/editor/customInteractionRegistry", please use "taoQtiItem/portableElementRegistry/ciRegistry" now

What have I missed? Why css blocks aren't appear in the properties of Qti Item?

Tao 3.2 RC2/Windows
Thanks in Advance.


  • You can actually associate item-level CSS from the TAO BackOffice:
    - When in Authoring mode, click on "Style Editor" on the top right
    - On the top, click "Add Style Sheet"
    - Upload or select a CSS file and you should be set

    Good luck!


  • Hi Mark, Thanks for your prompt support.
    Actually, this method requires admin to upload CSS file for every item and requires them to save CSS file somewhere on their computer.
    I need a method to make adding CSS to an item a 1 button click and no need for admin to have CSS file stored on their machine.
    Any way to do this?
    Thanks in advance.

  • Hi Mark,
    I have found a workaround which is registering ItemCreated event to callback that copy the CSS into the item directory and it works fine.
    That's fine for now. However, CssBlocks is still more user friendly and more extensible.
    Thanks a lot.

This discussion has been closed.

We use cookies on our website to support technical features that enhance your user experience. Cookie Policy Privacy Policy