Click here for information about NEW Imagevue X3

Gallery CSS Stylesheets

Formatting text in your gallery with CSS Stylesheets

Gallery 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:

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*/
}

25 Responses to "Gallery CSS Stylesheets"

  1. something wrong with my stylesheet, i set on Arial the menu font , but it’s not, no matter size font I choose, nothing change.
    thanks

    • Your CSS file is slightly corrupt:
      http://www.albertobernasconi.com/iv-config/themes/mywhite/imagevue.css

      I am not sure exactly what part, but you would want to correct the following:

      Line 23, always use # in front of color:
      color:dec3c4;

      Line 27, remove the “display:” style, which is not even defined:
      display:

      Line 51, you have some incorrect style-name, that is not even inside a class:
      .mainmenu_filemod {
      } font-syze: 12
      .mainmenu_hasFiles {
      }

      I believe if you fix the above, it will work properly. Remember to empty your browser cache after fixing CSS files, or else older cached versions are often loaded.

  2. i have tried absolutley everthing with the css and none of it workd in any shape or formm…what am i doing wrong

    i just need to increase the text size of text 1 meta description/ caption

  3. The penny has dropped…

  4. This is the url that appears in the address bar..but when use it (cut and paste)and link to it from another web page in my site it always shows a first page and not the page i want which is parades ..im stumped and cant get this to work

    http://www.east-durham.co.uk/imag/#/Seaham/Parades/

    • It works perfectly fine here … I see the “parades” gallery … See screenshot:
      http://d.pr/i/Y4UG

      • yes it works but when i put that same url address on a link in my web site it always comes up with the start page..really puzzled why its doing this..

        is the fact that im opening it in a frame got something to do with it..

        http://www.east-durham.co.uk/
        open site click on the seaham link its the top one of the bulleted list then go down to parades i have put the link here to open the parades gallery but as you can see it opens the start page..ive exhausted every thing and dont know why its doing this…it only happens with that gallery all my normal links work fine…

        cheers keith

        • At least now it opens in a new window and Parades work, but I don’t say that it can’t be affected by iframes. As a side note I think you should remote this text on Seaham page “The site is best viewed with Internet Explorer 5. >”

  5. i cant seem to get the button available to allow me to add news ..it was there now its gone

    • I believe I answered you on another page? That question is related to a 3rd party module, and has nothing to do with CSS in the Imagevue.
      /documentation/powerpack/#comment-745

      • keith duffy Posted 4 years ago

        i have used my own logo on the menu…how do i get this logo to dissapear like other sites i have looked at when i open menu….?

        • That is because you are using the CORRECT and newer method for adding a logo at top of menu, and it is not supposed to disappear. May I see a link to your website and a link to the one you are referring to please?

          Would be preferable if you could post in the forums, because we cannot provide effective support in a blog post, especially as the topic of this page you are replying to is unrelated.

  6. Roberto Tatangelo Posted 4 years ago

    I tried to edit css style in Settings » Custom CSS but do not work.
    Is that the right place to edit css style?
    This docs seems very old and need to update.

    • No that is not the right place. At the top of this documentation page, it says: “To edit your current theme stylesheet, go to admin -> themes -> edit your theme -> edit theme stylesheet.” … The docs are not outdated, and that is correct.

  7. Mihhail Tverskoi Posted 3 years ago

    Dear:
    I am trying to change font size and color on the very front page of my site: tverskaja.com but no luck. Could you be so kind to tell me exactly which parameters I need to change in the stylesheet to have white font and size 25 for all letters.

    Thank you.

    • You already have white font there http://d.pr/i/oUsH … Sorry, I am not sure how you want it to look. After you change CSS, you should empty your browser cache to make sure you see new results. Your text is inheriting the general class from the BODY tag, except for where you have set FILEMOD:

      .filemod {
      }
      .filemod_title {
      font-size: 18px;
      color: #FFFFFF;
      }
      .filemod_description {
      }

      • Mihhail Tverskoi Posted 3 years ago

        Yes indeed, Marina Tverskaja is in white but 2 lines of text under the title are in gray color (except link) so they blend with the background. I want to make them also in white but do not know what parameter to change for these particular lines.

        Thank you.

        • thats because, as in the code I pasted, you have set the color white only for FILEMOD_TITLE … so the rest of the text inherits the color from your BODY class, which is set to grey. If you want all the text white, you need to set not only the TITLE white, but the entire filemod item or filemod_description … Ttry this:

          .filemod {
          color: #FFFFFF;
          }
          .filemod_title {
          font-size: 18px;
          }

          • Mihhail Tverskoi Posted 3 years ago

            Yes! It worked! Thank you!

          • Mihhail Tverskoi Posted 3 years ago

            Just one more question. In the folders with photos, there is the same problem. The folder description is in gray which is blended with the background. Do I need to change this:
            .folderdescription_description {
            }

            to this:
            .folderdescription_description {
            color: #FFFFFF;
            }

            ??

        • if you want generally all text to be white instead of grey, then you should be changing the BODY class at the top of document, as this sets the global value:
          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*/
          }
          If you want to apply to separate elements in the folder description, there are several items you may need to apply it to. Text displaying alongside your image is TITLE+DESCRIPTION, and often you are only using the TITLE, so that would be sufficient:
          .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*/
          }


Comments are closed in preparation for new website. Use the forum or contact page.