Changing the loading icon location,image and background by editing a them
Categories: Themes
|
Tags: Developers, Theme, 2. Intermediate, 3. Advanced, Customization, Layouting, Pre v6.3, v6.3, v6.4 and Later
Revision:
1
Posted:
12/Jan/2009
Updated:
12/Jan/2009
Status:
Publish
Types: Article
|
This sample shows how to change the loading icon layout behavior, such as image,location and background by using the theme editor (available from from v6.4 and above). To change the loading icon just open the theme,navigate to the "Loading" node on the skins three. Select the "images" option on teh Resources panel and override the Loading.gif by right clicking it and selecting the Override menu item. After that you just need to change the Theme.LoadingSkin.Loading.gif to the new icon you want to display. To change the icon location and background, select the "Style Sheets" option on the Resources panel, override the Loading.css file and edit the .Loading-AnimationBox session to reflect the layout you want. On the sample below the session was changed so that the icon is centered and the background is grayed out in the same manner as it happens when a modal form is displayed:
.Loading-AnimationBox
{
[Skin.LoadingAnimationStyle];
}
to
.Loading-AnimationBox
{
BACKGROUND-IMAGE: url(Resources.Gizmox.WebGUI.Forms.Skins.LoadingSkin.Loading.gif.wgx);
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: center center;
FILTER: alpha(opacity=50); BACKGROUND-COLOR: black
}
Note: Codes are submitted as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it. Terms of Agreement:
By using this code, you agree to the following terms... 1. You may use this code in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
2. You MAY NOT redistribute this code (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
3. You may link to this code from another website, but ONLY if it is not wrapped in a frame.
4. You will abide by any additional copyright restrictions which the author may have placed in the code or code's description.
About the author
Related Articles
|
Themes
|
|
|
This code snippet is an alternative "black theme" for Silverlight.
Tags:
Developers, Theme, 1. Beginner, 2. Intermediate, Silverlight, Pre v6.3, v6.3, 3. Advanced
|
|
|
This is the 2nd of 4 webcast series on the new 6.4 version. The webcast will walk through the process of creating a new theme with VWG tools by showing the developer's responsibilities and the graphic design responsibilities (making usage of Adobe Photoshop) in the process. Starting from a default t...
Tags:
Architects, Developers, Graphic Designers, Theme, 1. Beginner, 2. Intermediate, 3. Advanced, Customization, v6.4 and Later
|
|
|
In this How to we are going to learn the basic usage of Visual WebGui RIA Platform Theme & Control designer.
Tags:
Developers, Graphic Designers, Theme, 1. Beginner, 2. Intermediate, Customization, v6.4 and Later, 3. Advanced
|
|
|
Give your application a sleek modern look with this Black theme.
Tags:
Developers, Theme, 1. Beginner, 2. Intermediate, Silverlight, Pre v6.3, v6.3, 3. Advanced
|
|
|
In this code snippet you can see how to modify a button theme in silverlight application.
Tags:
Developers, Theme, 2. Intermediate, 3. Advanced, Silverlight, Pre v6.3, v6.3
|
|
|
Learn how to customize the look & feel of controls in a Visual WebGui Ajax Web or Cloud application using a cutting-edge theme designer that will easily provide the UI with a desired design.
Tags:
Architects, Developers, Graphic Designers, Theme, 1. Beginner, 2. Intermediate, 3. Advanced, Customization, v6.4 and Later
|
|
|
|