Many fields/components of the SSA user interface can be hidden by the use of CSS. This could include an optional field on a form or some display-only component.
As an example, use CSS to hide the name component on the Exhibitor portal seen below:
Identify whether the HTML element in question has an ID on it and, if so, what that ID is.
If the element does not have an ID on it, then it may still be able to be hidden, but it will require a more complete knowledge of CSS, while this guide only covers the most basic scenario.
In the example above (covered in the guide), the ID of that entire line is “aahorizontalexpname”.
The CSS rule to hide the HTML element with that ID is:
#aahorizontalexpname {display:none;}
The leading # indicates that the string “aahorizontalexpname” is an ID as opposed to a class (which would be preceded by a period) or a basic HTML element name (which would be preceded by nothing).
That rule can either be placed in a CSS file which is linked within the page (a linked stylesheet) or put in a style block on the page (embedded stylesheet), which is the scenario covered here.
A stored document should be added to the page or an existing document should be edited. Avoid using the SSA template header or footer stored documents (any document mapped to a HDR or FTR location), as that will result in this CSS being on pages other than this one, which may have unintended consequences (if the same ID is used on another page).
In plain-text edit mode, add the CSS rule defined earlier to an existing style block (like the one seen below) or add a new one, like this:
<style type=”text/css”>
#aahorizontalexpname {display:none;}
</style>
If done properly, when the page is refreshed the change should be visible.
Components can also be hidden by class (also covered in the guide linked earlier). However since classes are generally reserved for multiple uses on the same page (IDs are unique per page), observe what other components of the page will be hidden if a class is used instead of an ID.
For example, the row that was hidden in the example above has a class of “aahorizontalLI” on the same HTML element as the ID used. The name row could have been hidden by using that class, by adding the following to a stored document on that page.
<style type=”text/css”>
.aahorizontalLI {display:none;}
</style>
This will hide the name row. However, it also hides the ID and the Company, since they both use the same class. Sometimes this is desired and can save time allowing many items to be hidden at once. At other times, it can hide things that were not meant to be hidden.