[SOLVED] CSS Styling to Fields (Registration etc)

Hey Guys,

When adding new fields for registration etc, is it possible to add styling right from within CB2? (i.e. padding, spacing etc for say multiple check boxes). The columns options works quite nicely for arranging a set number of columns, but there's seems to be no setting to customize styling. I've reverted to styling CSS straight from the css file (in this case bootstrap.css at line 1928 - I've added a padding-right modification).

I've achieved the desired look I was seeking, but I'm not sure if this is the conventional method for modifying spacing, padding, etc. for fields within CB2.

Question: If there is a setting built into CB2 (maybe a field parameter of some sort that I'm just missing) please inform. I want to customize using the proper and most efficient method. If styling directly from the bootstrap file to customize fields is the correct method, please inform as well.

Thnx
Magic

No, but you can add a CSS class to a field that will be added to the field row by editing the field within CB > Field Management. You then add CSS for that class to your Joomla or CB template CSS file. Do not modify core files as you will lose your changes on upgrade.

Kyle, thanks for getting back but I'm not sure that I follow. I've entered a number of Css Suffix classes etc with a variety of methods (space no space etc) and I can't seem to get it to work. I don't know if I'm making this too difficult or what. I've created a number of custom fields with no problem but when I get to the CSS Class input, I'm not seeing the changes.

I can of course use the long method (source files) that I'm familiar with, but I'd like to familiarize myself with this short cut (and proper CB development). I've already restudied the available Joomla examples and documentation, but If you have some CB tutorials or examples that cover this (particularly field mgmt) please point them out. I'm sure it's something simple that I'm just overlooking. Or better yet, just post a quick example of CB2.0 input in the CSS Class option.

It should be simple, I know but for some reason I can't get it to work.

Thanks Magic

Kyle, thanks for getting back but I'm not sure that I follow. I've entered a number of Css Suffix classes etc with a variety of methods (space no space etc) and I can't seem to get it to work. I don't know if I'm making this too difficult or what. I've created a number of custom fields with no problem but when I get to the CSS Class input, I'm not seeing the changes.

It just adds a CSS class to the container DIV of the field. It's not going to add any styling to it. You need to write the styling and add it to your Joomla template or CB template CSS file as needed. Right click the field on frontend in Chrome or Firefox then check its container div and you should see your CSS class added to it. It does not add the CSS class directly to the input. Example usage as follows.

CSS Class: my_css_class
CSS:

Kyle, thanks for getting back. Clarifying the function of that field option was of great assistance... (kind of hard to get it to do something it can't do - next time I'll seek help a little sooner ) .

One other question though: I don't see the need for a css class added to the field. It already has the class added. I just specify in the css file where I want the modification to take place and, of course, it finds it and makes the designated adjustment. I can do that without adding anything in the CSS Class Option.

Help me out here. I'm sure there's some specific purpose for this option, but I'm just not seeing it. When and why would I use this feature?

Also, if we make modifications to the template or bootstrap .css, wouldn't we lose those modifications on upgrade anyway?

Wouldn't we still need to record and then reapply modifications anyway?

What am I missing?


Thanks
Magic

The CSS class just adds your CSS class to the fields container. The usage is subjective to your need. It's like Joomlas module class suffix basically. Fields don't have specific CSS classes. They have specific IDs and so does their container, but no CSS class that's specific to a field. IDs are not reusable so your CSS selectors would become a nightmare if you wanted for example to style 6 fields in the same way and to do that easily you'd just add the same CSS Class to each of those fields and just style that class.

Also, if we make modifications to the template or bootstrap .css, wouldn't we lose those modifications on upgrade anyway?

You don't modify core files. You use a template override plugin for CB or you use an override.css in your Joomla template (if it supports one). This prevents your changes from being lost on upgrade.