5 APEX_CSS

The APEX_CSS package provides utility functions for adding CSS styles to HTTP output. This package is usually used for plug-in development.

Topics:

ADD Procedure
ADD_3RD_PARTY_LIBRARY_FILE Procedure
ADD_FILE Procedure

ADD Procedure

This procedure adds a CSS style snippet that is included inline in the HTML output. Use this procedure to add new CSS style declarations.

Syntax

APEX_CSS.ADD (
    p_css          IN    VARCHAR2,
    p_key          IN    VARCHAR2 DEFAULT NULL);

Parameters

Table 5-1 describes the parameters available in the ADD procedure.

Table 5-1 ADD Parameters

Parameter	Description
`p_css`	The CSS style snippet. For example, `#test {color:#fff}`
`p_key`	Identifier for the style snippet. If specified and a style snippet with the same name has already been added the new style snippet will be ignored.

Example

Adds an inline CSS definition for the class autocomplete into the HTML page. The key autocomplete_widget prevents the definition from being included another time if the apex_css.add is called another time.

apex_css.add (
    p_css => '.autocomplete { color:#ffffff }',
    p_key => 'autocomplete_widget' );

ADD_3RD_PARTY_LIBRARY_FILE Procedure

This procedure adds the link tag to load a 3rd party css file and also takes into account the specified Content Delivery Network for the application. Supported libraries include: jQuery, jQueryUI, jQueryMobile.

If a library has already been added, it is not added a second time.

Syntax

add_3rd_party_library_file ( 
    p_library in varchar2, 
    p_file_name in varchar2, 
    p_directory in varchar2 default null, 
    p_version in varchar2 default null, 
    p_media_query in varchar2 default null );

Parameters

Table 5-2 describes the parameters available in the ADD_3RD_PARTY_LIBRARY_FILE procedure.

Table 5-2 ADD_3RD_PARTY_LIBRARY_FILE Parameters

Parameters	Description
`p_library`	Use one of the c_library_* constants
`p_file_name`	Specifies the file name without version, .min and .css
`p_directory`	Directory where the file `p_file_name` is located (optional)
`p_version`	If no value is provided then the same version Application Express ships is used (optional)
`p_media_query`	Value that is set as media query (optional)

Example

The following example loads the Cascading Style Sheet file of the Accordion component of the jQuery UI.

apex_css.add_3rd_party_library_file (
    p_library   => apex_css.c_library_jquery_ui,
    p_file_name => 'jquery.ui.accordion' )

ADD_FILE Procedure

This procedure adds the link tag to load a CSS library. If a library has already been added, it will not be added a second time.

Syntax

APEX_CSS.ADD_FILE (
    p_name           IN    VARCHAR2,
    p_directory      IN    VARCHAR2 DEFAULT WWV_FLOW.G_IMAGE_PREFIX||'css/',
    p_version        IN    VARCHAR2 DEFAULT NULL,
    p_skip_extension IN    BOOLEAN DEFAULT FALSE
    p_media_query    IN    VARCHAR2 DEFAULT NULL,
    p_ie_condition   IN    VARCHAR2 DEFAULT NULL);

Parameters

Table 5-3 describes the parameters available in the ADD_FILE procedure.

Table 5-3 ADD_FILE Parameters

Parameter	Description
`p_name`	Name of the CSS file.
`p_directory`	Begin of the URL where the CSS file should be read from. If you use this function for a plug-in you should set this parameter to `p_plugin.file_prefix.`
`p_version`	Identifier of the version of the CSS file. The version will be added to the CSS filename. In most cases you should use the default of NULL as the value.
`p_skip_extension`	The function automatically adds ".css" to the CSS filename. If this parameter is set to TRUE this will not be done.
`p_media_query`	Value set as media query.
`p_ie_condition`	Condition used as Internet Explorer condition.

Example

Adds the CSS file jquery.autocomplete.css in the directory specified by p_plugin.image_prefix to the HTML output of the page and makes sure that it will only be included once if apex_css.add_file is called multiple times with that name.

apex_css.add_file (
    p_name => 'jquery.autocomplete',
    p_directory => p_plugin.image_prefix );