Formatting text with CSS Stylesheets
The Imagevue X2 CSS theme stylesheets are used for formatting text in your gallery. With the stylesheets, you can change font, size, color, weight and style of any text item in the flash gallery. See the stylesheet for the default theme here:
/demo/x2/iv-admin/themes/default/imagevue.css›
To edit your current theme stylesheet, go to admin -> themes -> edit your theme -> edit theme stylesheet.
Useful CSS links:
Adobe Supported CSS properties›
Actionscript.org Flash CSS tutorial›
CSS Styles
Below is a list of CSS styles supported in flash textfields:
- font-family – A comma-separated list of fonts to use, in descending order of desirability. Any font family name can be used.
- font-size – Only the numeric part of the value is used; units (px, pt) are not parsed; pixels and points are equivalent.
- font-weight – Recognized values are normal and bold.
- font-style – Recognized values are normal and italic.
- color – Only hexadecimal color values are supported. Named colors (like blue) are not supported.
- text-decoration – Recognized values are none and underline.
- text-align – Recognized values are left, center, and right. Only works for full paragraphs.
- margin-left – Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
- margin-right – Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
- text-indent – Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
- display – Supported values are inline, block, and none.
- kerning – Recognized values are true and false.
- leading – Space after end of line
Example
Below is an example of a CSS class with all the styles applied. Usually, you only fill in the styles you need to use/change. Mostly this is color, font-size and perhaps font-family. In Imagevue, the classes are already pre-defined in the stylesheet, and the themes are pre-made with styles. All you need to do is edit a style in a specific class, or add another style to the class. Each class in the Imagevue stylesheets represent a specific text.
.className{
font-family: Candara, Arial, Verdana;
font-size: 13;
font-weight: bold;
font-style: italic;
color: #990000;
text-decoration: underline;
text-align: right;
margin-left: 10;
margin-right: 10;
text-indent: 5;
display: none;
kerning: true;
leading: 1;
}Tip! Some classes are recursive. For example, styles in .textpage {} will affect all text in textpages, while .textpage_title{} will only affect specifically the title text in the textpage. You may for example want to set a specific font for all text elements in textpages, while only settings the titles to bold.
Imagevue V2 CSS stylesheet reference list
Global
The classes below set styles globally for all textfields in the gallery:
body {
/*Sets global text formatting properties for the entire gallery. Any styles set here will be inherited in all textfields, unless specified explicitly in other classes*/
}
a:link {
/*Sets global style for all links in textfields*/
}
a:hover {
/*Sets global style for links on mouse rollover/hover*/
} mainmenu
The classes below set styles for the gallery main menu(top left corner):
.mainmenu {
/*Sets global styles for all items in the main menu*/
}
.mainmenu_menubutton {
/*Styles for the "Gallery Menu" button when the menu is collapsed*/
}
.mainmenu_node {
/*Styles for the [+]/- character which implifies a subfolder. We recommend using fonts like "Courier New" here because it has static letter-spacing*/
}
.mainmenu_title {
/*Styles for the actual text-title of the menu item*/
}
.mainmenu_amount{
/*Styles for the file counter item(ex. foldertitle[32])*/
}
.mainmenu_textPage{
/*Styles for all main menu items that represent textpages*/
}
.mainmenu_link{
/*Styles for all main menu items that represent an external link*/
}
.mainmenu_filemod{
/*Styles for all main menu items that represent a filemod*/
}
.mainmenu_hasFiles{
/*Styles for all main menu items that have files in the folder*/
}
.mainmenu_hasFolders{
/*Styles for all main menu items that have sub folders inside*/
}
.mainmenu_password {
/*Styles for menu items that are password protected*/
}
.mainmenu_share {
/*Styles for the special "share" menu item*/
}
.mainmenu_level1 {
/*Styles for level 1 menu items*/
}
.mainmenu_level2 {
/*Styles for level 2 menu items*/
}
.mainmenu_level3 {
/*Styles for level 3 menu items*/
}
.mainmenu_level4 {
/*Styles for level 4 menu items*/
}
.mainmenu_level5 {
/*Styles for level 5 menu items*/
}Folderdescription
The classes below set styles for the folderdescription tooltip that pops up when rolling over a gallery menu item:
.folderdescription_title{
/*Styles for the main title of the folder description*/
}
.folderdescription_amount{
/*Styles for the filecount/amount text in the folder description*/
}
.folderdescription_date{
/*Styles for the folder date text in the folder description*/
}
.folderdescription_description{
/*Styles for the main description text in the folder description*/
}Thumbnails
The classes below set styles for the text above the main thumbnails layout:
.thumbnails{
/*Sets global styles for all items in the thumbnails text*/
}
.thumbnails_breadcrumbs{
/*Sets styles for the 'breadcrumbs' folder path of the current gallery*/
}
.thumbnails_title{
/*Sets styles for the main title of the current gallery*/
}
.thumbnails_description{
/*Sets styles for the folder text description in the thumbnails layout*/
}
.thumbnails_page{
/*Sets styles for the 'pagecount' text in the thumbnails layout*/
}Thumbnails tooltip
The classes below set styles for text that displays in the thumbnail rollover tooltip. This tooltip is available for main thumbnails and thumbnailscroller thumbnails:
.tooltip{
/*Sets global styles for all items in the thumbnails tooltip*/
}
.tooltip_title{
/*Sets styles for the main title in the thumbnails tooltip*/
}
.tooltip_description{
/*Sets styles for the main description in the thumbnails tooltip*/
}
.tooltip_name{
/*Sets the styles for the filename in the thumbnails tooltip*/
}
.tooltip_date{
/*Sets the styles for the date in the thumbnails tooltip*/
}Main control
The class below set styles for the text that appears in the maincontrols below the image- or thumbnails. Various help text appears when rolling over the controls:
.maincontrols {
/*Sets styles for the maincontrols*/
}Image text 1
The classes below sets styles for text module 1 that by default displays above the image:
.text_1 {
/*Sets global styles for all items in this text module*/
}
.text_1_imageindex {
/*Sets styles for the imageindex, or imagecounter*/
}
.text_1_title {
/*Sets styles for the main image title*/
}
.text_1_filename {
/*Sets styles for the file name*/
}
.text_1_dimensions {
/*Sets styles for the 'dimensions' output for the file*/
}
.text_1_filesize {
/*Sets styles for the 'filesize' output for the file*/
}
.text_1_date {
/*Sets styles for the 'date' output for the file*/
}
.text_1_exif {
/*Sets global styles for all EXIF metadata items displaying with the image*/
}
.text_1_description {
/*Sets styles for main file description*/
}
.text_1_folderdescription {
/*Sets styles for folder description*/
}
.text_1_filelink {
/*Sets styles for external file link*/
}
.text_1_download {
/*Sets styles for download link*/
}
.text_1_folderpath{
/*Sets styles for folderpath*/
}
.text_1_foldername{
/*Sets styles for folder name*/
}
.text_1_abslink{
/*Sets styles for absolute link*/
}
.text_1_custom{
/*Sets styles for custom text item*/
}
.text_1_link{
/*Sets styles for link item*/
}
.text_1_purchase{
/*Sets styles for purchase item*/
}Repeat the above for text_2 and text_3
EXIF metadata
The classes below set styles for EXIF metadata across all image text modules:
.exif_name {
/*Sets the styles for all EXIF names/properties. For example "Brand:" or "Exposure"*/
}
.exif_value {
/*Sets styles for all EXIF values. For example "Canon Digital EOS 450" or "1/60"*/
}
.exif_model{
/*Sets styles specifically for the metadata with name "model". Classes can be added for other EXIF values also - For example .exif_exposure{}*/
}
.exif_name_model{
/*Sets styles specifically for the propertyname of metadata with name "model". Classes can be added for other EXIF values also*/
}
.exif_value_model{
/*Sets styles specifically for the value of metadata with name "model". Classes can be added for other EXIF values also*/
}Textpage
The classes below set styles for textpages:
.textpage{
/*Sets global styles for all items in the textpage*/
}
.textpage_title{
/*Sets styles for the title of the textpage*/
}
.textpage_body{
/*Sets styles for the main body/content of the textpatge*/
}
.textpage_form{
/*Sets styles for descriptive texts with input fields. For example the contactform*/
}
.textpage_forminput{
/*Sets styles for textpage form input fields. Make sure you use "0x123456" instead of "#123456" for color style because of some flash restriction*/
}
.textpage_forminputback{
/*Sets styles for the background of textpage form input fields. Make sure you use "0x123456" instead of "#123456" for color style because of some flash restriction*/
}Filemod
The classes below set styles for filemod page(photoblinds, randomimage or custom files):
.filemod {
/*Sets the global styles for all items in the filemod page*/
}
.filemod_title {
/*Sets styles for the filemod title*/
}
.filemod_description {
/*Set styles for the filemod description text*/
}Imagebuttons
The class below sets styles for the help text in the imagebuttons that appear on image rollover:
.imagebuttons_help {
/*Sets styles for the imagebuttons help text*/
}Audioplayer
The classes below set styles for the audioplayer. Includes all text except the main “Audio” text button:
.audioplayer {
/*Sets the global styles for all items in the audioplayer*/
}
.audioplayer_id3 {
/*Sets styles for the ID3 tags displaying with the current track being played*/
}
.audioplayer_id3_first {
/*Sets styles for the first ID3 tag(usually track title)*/
}
.audioplayer_tracklist {
/*Sets styles for the tracks in the playlist*/
}Various
Various classes below:
.unsupported_items {
/*Text for unsupported filetypes*/
}
.unsupported_items_heading {
/*Text headings for unsupported filetypes*/
}
.unsupported_items_content {
/*Text content for unsupported filetypes*/
}
.filename_extension {
/*Sets style for extension in titles*/
}
.sharemenu {
/*Sets style menu items in the sharing menu*/
}
.fotomotomenu {
/*Sets style for menu items in the Fotomoto product menu*/
}
