How to add <span> tags inside Plone <h1> element

Question

I want to change the standard top of page element so that I can style it.

<h1 class="documentFirstHeading">My Heading</h1>

is the way Plone places this element on each page. I want to add a so that the line reads:

<h1 class="documentFirstHeading"><span>My Heading</span></h1>

It's obvious that this code is generated by a macro - but I have no idea how to modify the macro to add my span tags. Can someone point me to the appropriate Plone file to modify? This sets up a common CSS image replacement technique, and other Plone sites frequently use it, as I see the span tags exactly where I need them to be, on other Plone sites.

TIA for your expertise!

Answer 1

it doesn't really matter (the actions are pretty much the same), but I assume you are creating the theme package. I also assume you're on Plone 4.0 or newer. The actions are:

• Copy over *kss_generic_macro.pt* file, located in *Products.CMFPlone/Products/CMFPlone/skins/plone_kss* to your theme's *skins/your_templates_folder*. In generic terms this is called "customize the template to your theme".

• On line 20 (line number might differ in different Plone versions), you will find the block you need:

  title

To get the span within your h1, replace tal:replace in the snippet above to tal:content.

You might need to restart your Plone site in order to see your change in action. Check your h1 — it should contain the span you need.

Important note! Actions above will give you within for every generic view that doesn't have specific template, overriding . For those cases you will need to customize those particular templates.