$overlay{_template.html#body} $begin{content} ${gizmo.ScramblingLinks('scl', base_phrase='manageable web user interfaces', links=[ dict(name='home', url='', text='Home', phrase='manageable web user interfaces'), dict(name='doc', url='', text='Documentation', phrase='how to grind your coffee beans'), dict(name='weblog', url='', text='Weblog', phrase='occasional quasi gizmo-related blurbs'), dict(name='download', url='', text='Download', phrase='be wise, join the clique'), ], render=False, )} ${% # Example of adding custom inlined CSS (in HEAD) dhi.add_css_codes(''' p { border: 1px solid gray; padding: 1em; width: 60%; } ''') %}

${dhi.gizmos.scl.render_links('
')}

This ScramblingLinks rendering offers an example of how a Gizmo instance may be rendered in sperate steps. Here (see the template source), the gizmo is first created, then the target scrambled link and the originating scrambler action links are rendered separately, in different places on the page. Note also the page-specific CSS added during the template processing that is written out in the html/head/style element in the in the page received by the client.

${dhi.gizmos.scl.render_scramble()}

$end{content}