Как добавить регулировку цветов (фона, границы, шрифта) в дизайнер шаблонов Blogger

При вставке js меню Sooperfish в "родной" шаблон Блоггера ("Простой", если не путаю) захотелось настроит автоматический подбор цветов (такой же, как и для виджетов). Заодно дошли, наконец, руки до того, чтобы разобраться с тем, как использовать   переменные Blogger для CSS-стилей. Внизу результаты работы. В видео ролике подробности.

<Group description="SfTitle" selector="ul#nav li a ">
<Variable name="SF.text.font" description="Font" type="font"
default="normal bold 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>
<Variable name="SF.text.color" description="Text Color" type="color" default="$(body.text.color)" value="$(link.color)"/>
</Group>
<Group description="SFishMain" selector="ul#nav li">
<Variable name="SFishM.background.color" description="Background Color" type="color" default="$(widget.background.color)" value="$(widget.background.color)"/>
<Variable name="SFishM.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="$(widget.border.color)"/>
<Variable name="SFishM.border.bevel.color" description="Bevel Color" type="color" default="$(widget.border.bevel.color)" value="$(widget.border.bevel.color)"/>
</Group>