.. include:: /Includes.rst.txt .. _user-various: ======= Various ======= .. _user-data-popover: Popover ======= .. figure:: /Images/User/Various/PopoversFe.jpg :alt: A popover in the front end A popover in the front end Popovers show additional information in a small window. Mainly they are associated with a link (see `popovers component from bootstrap framework `__). Create a popover ---------------- This extension provides an easy way to use popovers by defining them in the RTE editor: 1. Select the text that should be associated with a popover 2. Click the create link button 3. In the link browser dialog select the register `Popover` 4. Select the class `Popover` and define the title and content .. figure:: /Images/User/Various/PopoversLinkBrowser.jpg :alt: Register popover in link browser Register popover in link browser Adjust a popover ---------------- To adjust a popovers behaviour related attributes might be added to the link tag. The following link results in a popover showing up when hovering over the link text where clicking on it loads the TYPO3 home page. .. code-block:: html item .. note:: The popover content is parsed the same way as the RTE text by using the configuration from `lib.parseFunc_RTE` hence TYPO3 specific links can be used (e.g. `t3://page?uid=6`). .. _user-data-getText: Data from type getText ====================== The `getText data type `__ can be enabled for the RTE editor. It allows to get various data from a web site. As an example a translated text might be retrieved depending on the currently selected page language. For this users might reference data by using curly brackets within the editor (`see example `__): .. figure:: /Images/User/Various/InlineLocalization.jpg :alt: Use of localized text within the editor Use of localized text within the editor .. tip:: You might reference other content as defined by the `"getText" data type `__. The feature can be enabled through the constant editor selecting the category `PIZPALUE: CUSTOMER EXTENDED` (constant: `pizpalue.features.content.insertData`). .. warning:: Enabling this feature allows editors to output sensitive data. Enable it only if security isn't compromised. .. _usr-ppClasses: Pizpalue classes ================= General ------- ============================= ==================================================================== Class Description ============================= ==================================================================== pp-margin Applies a margin to the container pp-margin-sm Applies a small margin to the container pp-padding Applies a padding to the container pp-padding-sm Applies a small padding to the container pp-panel pp-panel-[key] Sets the background and text for the container. Replace [key] with one of the branding colors (e.g. primary). pp-bg-gray-[value] Applies a gray background. Replace [value] with a number from 100 to 900. ============================= ==================================================================== Content element --------------- These classes act on content element wrappers. ============================= ==================================================================== Class Description ============================= ==================================================================== pp-frame-collapsible Applies a negative top margin to compensate the top padding ============================= ==================================================================== Gallery / Image --------------- These classes are used in conjunction with galleries (images, text & images) ============================= ============================================================================= Class Description ============================= ============================================================================= pp-gallery-item-center Center align gallery items (e.g. images) and don't scale images pp-gallery-item-left Left aligns gallery items and don't scale images pp-gallery-item-right Right aligns gallery items and don't scale images pp-gallery-item-join Joins the gallery items by removing any margin and padding pp-gallery-item-shadow Adds a shadow to the gallery items pp-image-overlay Overlays the heading to the image. Used with image content element ============================= ============================================================================= Utility ------- These classes are used in templating or together with JS. ============================= ============================================================================= Class Description ============================= ============================================================================= pp-label-dataprotection Used in content element to define a replacement text for a data protection notice check box (see contact page). pp-row-height Elements in a row using this class will have the same height (wrapping containers). pp-below-header Used to shift a content element below the page header by applying a negative top margin. pp-extend-link Assign this class to a link to make the closest ancestor container with class `frame-container` linked to the same url. Alternatively the ancestor container can be defined by the class `ppc-el-[ancestorclass name]`. ppc-el-[ancestor class name] Used in conjunction with the class `pp-extend-link`. Overwrites the default link ancestor. Replace `[ancestor class name]` with the class used in the ancestor container. As an example when assigning the classes `pp-extend-link ppc-el-up-my-container` to an a-tag the closest ancestor from the link having the class `up-my-container` assigned to will be linked to the same url as defined in the a-tag. ============================= ============================================================================= RTE --- The following classes are used in the context of the real text editor. ============================= ============================================================================= Class Description ============================= ============================================================================= pp-popover Used to control the behaviour from popovers. Popovers that were triggered from elements having this class close when the user clicks outside the popover. ============================= ============================================================================= Various ------- ============================= ====================================================== Class Description ============================= ====================================================== pp-panel pp-panel-[key] Sets the background and text as for frames. Replace [key] with one of the branding colors (e.g. primary). Handy to be used with cards to define the card background by assigning the classes to the card body. ============================= ======================================================