You need to upgrade your flash player or to allow javascript to enable the menu.
Get Flash Player

AddThis Social Bookmark Button

Using CSS in Q-NewsTicker

Here in Quadroland we really like to use CSS technology. It helps to design pages faster and in more convenient manner. We even cannot imagine any modern website design without using styles.

Q-NewsTicker allows us to adjust texts in usual css way (General Properties\Text Properties\CSS code). However Flash Player supports a limited number of css properties. Let us help you to look into these restrictions. We will use Adobe's Flash help and add some comments.

The following table shows some of the supported CSS properties and values, as well as their corresponding ActionScript property names. Each ActionScript property name is derived from the corresponding CSS property name; if the name contains a hyphen, the hyphen is omitted and the subsequent character is capitalized. Therefore these lines will be equal in the CSS definition:

font-family: Arial, Helvetica, sans-serif;
fontFamily: Arial, Helvetica, sans-serif;

Honestly we prefer to use usual CSS style with the hyphens, because it's rather confusing to mix 2 different ways of spelling.

CSS property ActionScript property Usage and supported values
color color

Only hexadecimal color values are supported. Named colors (such as blue) are not supported. Colors are written in the following format: #FF0000.

Example: color:#dbdbdb;

display display

Supported values are inline, block, and none.

Example: we haven't ever used this property in Flash...

font-family fontFamily

A comma-separated list of fonts to use, in descending order of desirability. Any font family name can be used. If you specify a generic font name, it is converted to an appropriate device font. Be carefull with the device fonts, they can vary on different computers. The following font conversions are available: mono is converted to _typewriter, sans-serif is converted to _sans, and serif is converted to _serif.

Example: font-family:Arial, Helvetica, sans-serif;

font-size fontSize

Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

Equal examples:
font-size:11px;
fontSize:11;

font-style fontStyle

Recognized values are normal and italic.

Example: font-style:italic;

font-weight fontWeight

Recognized values are normal and bold.

Example: font-weight:bold;

leading leading

The amount of space that is uniformly distributed between lines. The value specifies the number of pixels that are added after each line. A negative value condenses the space between lines. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

It works like a usual line-height property. Default value is 0. It will increase by number of pixels.

Example: leading:2px;

margin-left marginLeft

Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

Q-NewsTicker allows to adjust a distance from borders through the application (General Properties\General\Border Distance). If you'd like to change this value for a separate block, than use these examples: margin-left:20px; or marginLeft:20;

margin-right marginRight

The same as margin-left property.

text-align textAlign

Recognized values are left, center, right, and justify.

Example: text-align:center;

text-decoration textDecoration

Recognized values are none and underline.

Example: text-decoration:underline;

text-indent textIndent

The first line indent. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

Example:text-indent:50px;

An example of css definitions for the regular news ticker:

title {
	font-family:arial;
	font-size:13px;
	color:#ffffff;}
description {
	font-family:arial;
	font-size:11px;
	color:#8a7c54;
	leading:2px;}
.date {
	font-family:arial;
	font-size:10px;
	color:#ffffff;}

title, title_mouseover and title_mousedown blocks are responsible for the news titles.

description, description_mouseover and description_mousedown will adjust appearance of the news bodies (short description).

.date is a custom class for the paragraph with the news publication dates. There can be as many custom classes as needed.

Here is an example of the Main text which uses above classes:

<img src="data/01.jpg">See the earliest known photo of Helen Keller and Anne Sullivan, Uncle Sam in a sad state, a groundbreaking space image.
<p class="date">March 07, 2008</p>

That's all for now. We hope that this information was useful for you.
Quadroland Dev Team