Skip to content

CSS widget

Jump to bottom Edit New page
Elena Ganeva edited this page May 1, 2015 · 7 revisions

Use the CSS widget to refer Cascading Style Sheets (CSS) resources in your pages. The widget provides capabilities for refering both inline styles and refernces to css files into the the page head tag.

After you have dragged the CSS widget on your page you can configure which css to include.

To do this, click Edit button in the upper-right corner of the widget. In the CSS window that appears, configure the following:

###Add CSS

Radio buttons allows you to choose from differnt options to add CSS on your page.

  • Write CSS

Choose Write CSS radio button, to directly type the css into the code area. The CSS written in the code area will be included in the HTML <head> tag. You do not need to add <style> tag, since it will be added automatically, therefore start writing CSS rules directly. For example:

body {
background: #fff;
font-size: 12px;
}
  • Link to CSS file

Choose Link to CSS file radio button in order to select already prepared .css file from your file system. You will see Url field where you can directly type the path to the CSS file, or press the Select button to browse the file system. You are able to choose file from the your web application folder and its children.

###Media

In Media radio button, select the media type for which the CSS is intended. Select one of the following:

  • All
    Includes all types of media.
  • Selected media types...
    A list of checkboxes appears. For more information about different media types, see Recognized media types. You can choose from the following options:
    • braille
    • print
    • speech
    • embossed
    • projection
    • tty
    • handheld
    • screen
      • tv

###More options

Expand More options section for the following:

  • Description...
    Enter free text description for the referenced css. This field is added for your convenience only and is displayed only while page is in edit mode. You can type description of the CSS file in order to distinguish it easily.

###Advanced settings

In Advanced settings, you specify individual properties of the widget:

####Model settings

Model settings display all properties directly bound to the CSS widget model. Access these properties by clicking the Model button in Advanced settings.

  • Description
    Gets and sets the description of the CSS that is referenced. This field is for your convenience only.

  • InlineStyles
    Gets and sets inline styles that are displayed in the code area while widget is in "Write CSS" mode. The content of this field will be rendered in the head of your HTML inside <style> tag.

  • MediaType
    Gets and sets the media types to which the CSS will be applied.

  • Mode
    Defines the supported ways to refer CSS through the widget. There are two possible options:

    • Inline
      This is the default option. It is used when entering CSS directly into the code area. Refer to the Write CSS tab. While this mode is enabled any URL selected thoug Link to CSS file will not be added.
    • Reference
      It is used for referring resource from your file system. This refer to the Link to CSS file tab. While this mode is enabled any CSS typed directly into Write CSS code area will not be included.

  • ResourceUrl
    Gets and sets resource URL which will be refernced in the page <head> tag. This ResourceUrl will be used only when widget is in Refernce mode.

Home | What's new | FAQ

Home
What's new
FAQ

Clone this wiki locally