Theming Forms (Adding classes to form elements)


#1

Hi There,

Is there anyway I can change the look of the forms using a theme? In particular I’m trying to add classes to form elements in the Collecting module.

Thanks,
Monica Wood

PS. The 15 character limit on title is a bit annoying, I wouldn’t let me simply put ‘Theming Forms’ as the title for the topic.


#2

Maybe you can override the partials which display the form.

You copy the needed files (which display the form) from modules/Collecting/view directory to themes/yourTheme/view directory, then you edit them to add specific classes.

I haven’t tried, but I think it is possible.

You can also use other CSS selector (there is not many form tags in a Omeka S site).


#3

I have looked at the partials used for the collecting module.

I believe the one that renders the forms on the page blocks is at:
modules/Collecting/view/common/block-layout/collecting-block-one.phtml

However the line only calls the form (<?php echo $this->form($cForm->getForm()); ?>) , it doesn’t add anything like classes, so this must be done somewhere else.

I could just use CSS selectors, but I am creating a theme based on bootstrap, so it would be much easier to just insert the correct classes for the form and each input type.

Cheers,
Monica


#4

I don’t know Bootstrap very well, but I believe it is not a good solution for Omeka S theming because you will have the same problem for each view Helper.

However, you can set class attribute with Element::setAttribute() method.

<?php echo $this->form($cForm->getForm())->setAttribute('class', 'my_css_class'); ?>

With SASS, you can also use other selectors (like the tag name selector) and import your Bootstrap class.