Declare Rocket Mode

rev: 20150517-01

In this quick tutorial you’ll learn how to make your product Hero-Ready, it takes no more than 2 minutes and just one line of code.

CSS Hero requires a bit of help to map editable elements on your page and provide a nice user experience to your users. This help is what we call a CSS Hero configuration. A configuration file is a javascript file with some instructions to tell Hero how to behave. Usually CSS Hero configuration files reside on our cloud and are distributed to all users using a specific product but for developing purposes you can place a csshero.js file inside your active theme root folder and define your elements in there. Once done please provide us with that file, we’ll review it and make it available on our cloud.

The declare_rocket_mode() function

  • delimiter (string) – Defines the area within you want CSS Hero to map your editable elements
  • additional_excluded_classes (array | string) – Defines the classes you want to exclude from mapping.
    The elements matching those classes will still be mapped but the specified class will not return in the element scope. This parameter excludes also partially matching elements so don’t use dots to define classes.
  • additional_excluded_ids (array \ string) – Same as additional_escluded_classes but removes IDs instead of classes. Don’t use hashes (#).
  • pseudo_lookup (boolean) – [SPERIMENTAL] – Auto pseudo-mapping, looks for pseudo elements (:before and :after) in the delimiter and auto-maps them.


Mapping a menu plugin. Let’s say your plugin generates an additional menu structure as follows:


csshero.js file

declare_rocket_mode('#myPluginNav','rightaligned, mpnHas-','mpNav-');

Parameters breakdown

  • #myPluginNav – this parameter tells Hero to act inside the #myPluginNav item
  • rightaligned, mpnHas- – Element’s classes matching those will not be returned in the editable object scope
  • mpNav- – Element’s IDs matching this will not be returned in the editable object scope as the user usually wants to customise all menu-items together and not on a ID basis.

This function will return those editable objects:

#myPluginNav ul.mpNav
#myPluginNav ul.mpNav li.mpNav_item
#myPluginNav ul.mpNav li.mpNav_item a.mpNav_link

CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.


Become a CSS Hero affiliate and earn 40% on each sale right now. Spread the CSS Hero word and share the wealth with us!
Start Earning →

Follow the Hero