| |
| |
If you want to customize the loading indicator that displays for one moment while new panel states are loaded, you have to edit the \includes\jaxon\css\loading.css file. Before editing it though, take a look at the default appearance of the indicator. You can use the site you built in the Build a Company Presentation Website tutorial - click the Company item in the menu on the left, and notice the indicator being displayed while the Company state is loaded:
What you want to change is the loading image and the general look of the loading indicator box:
Learn how to generate a custom .gif loading image by checking out this site (you only have to set three elements: indicator type, background color, and foreground color). You will find in the \tutorials\Loading indicator folder a .gif image generated by using this web application. Copy it in the \includes\jaxon\css\images folder from your site, so that the code below will function properly.
To change the loading indicator box appearance, open the .css file mentioned above and perform the following changes (in bold):
#kore_li {
position: absolute;
text-align: center;
top: -1px;
left: 50%;
margin-left: -400px; - The site generated with the wizard has a 800-pixel width and is horizontally centered. To place the indicator right where it starts, you need to position it in the middle and then shift it to the left with 400 pixels.
z-index: 5000;
}
#kore_li div {
width: 100px;
margin: 0px auto; - Remove this line.
text-align: left;
line-height: 14px;
font-size: 14px;
height: 14px; - Remove this line.
min-height: 14px; - Remove this line.
padding: 8px 8px 8px 46px;
background: url(images/ajax-loader.gif) 7px 7px no-repeat;
background-color: #FFFFE6;
border: 1px solid #3F9F10;
}
body.kore_li_start, body.kore_li_start * {
cursor: progress !important;
}
This is how the loading indicator should look after performing these changes:
You can easily edit this .css file and customize the indicator according to your preferences and site design!