Hi,
since you can access the HTML-Header of your Webapp, it is possible to add your own Stylesheets to your Xojo Webapp. I wanna give you some tips how you can use CSS to make your Webapps more beautiful.
I use CSS in every Webapp, because I’m not satisfied with the styling- and animation possibilities in XojoWE.
1. How to include a custom CSS
- Create a file with the file-extension “.css”, for example “stylesheet.css”. you need to know some things about CSS.
- place the file on your webserver. for local testing, it’s also possible to copy the stylesheet.css in a buildstep to your debug-folder.
- go into the App.HTMLHeader property and add the following:
<link href="[your link to the stylesheet.css file]" type="text/css" rel="stylesheet">
- insert the link to your stylesheet.css
-> now you have access to the styles of the Webapp
-> for example add a containercontrol to your Webapp and add this code in the Stylesheet.css:
div{border: 10px solid;}
(and upload the new Version of the CSS to your server)
-> Your containercontrol has now a big black border.
2. How to customize the styles of your controls
The Xojo-Webstyle-control is a great way to style your controls in the basically way. If you add some properties to a xojo-web-style-control, this will be translated into CSS on the running WebApp. When you apply a style to a control in the inspector, it is like you add a custom css class to an element of webpage, like:
<div class="your_xojo_webstyle_name"></div>
This gives you the ability to overwrite the “your_xojo_webstyle_name”-class, which you’ve created in Xojo at designtime.
If you add the following code to your Stylesheet.css, all elements with the applied “your_xojo_webstyle_name”-style will be changed:
.your_xojo_webstyle_name{
border: 12px solid;
background: #f3f3f3;
[other CSS properties]
}
Test it!
3. what is is good for?
CSS is a mighty instrument in the web-development. Whith the new CSS-standards you can replace a lot of JavaScript-Styling-functions with only a few CSS-Lines, for example animations.
Also Xojo-Webstyle-control don’t support some CSS-Rules like inset shadows or animations. Sure there is the animator-control, but the handling in code is sometimes very poor. For example if you need a fade-in-effect of your in-runtime-added-controls.
I also use CSS to hide scrollbars in containercontrols (="
Also you can style the Xojo-given-controls like WebListboxes, WebDialogs, WebUploader. Or your can change the appereance of the ImageWell-Control (image resizing, grayscale, fade-effects).
The possibilities are awesome. With Xojo you are able to create stunning Webapp-functionalities, with CSS you can make them look more beautiful. You can enhance the user-experience by adding effects, fades, shadows. You can improve the Xojo-Controls and so on.
With ExecuteJavascript you can add your own custom CSS-Classes to all elements, or remove them at runtime. You can be even more a Webdesigner.
4. some CSS-Examples of mine
- Fade in-Effects of your controls:
[code].[your_Style_Name]]{
-webkit-animation: move_eye 0.1s linear 0s alternate;
-moz-animation: move_eye 0.1s linear 0s alternate;
-o-animation: move_eye 0.1s linear 0s alternate;
animation: move_eye 0.1s linear 0s alternate;
}
@-webkit-keyframes move_eye { from { margin-left:-20px; opacity: 0; } to { margin-left:0%; opacity: 1;} }
@-moz-keyframes move_eye { from { margin-left:-20px; opacity: 0; } to { margin-left:0%; opacity: 1;} }
@-o-keyframes move_eye { from { margin-left:-20px; opacity: 0; } to { margin-left:0%; opacity: 1;} }
@keyframes move_eye { from { margin-left:-20px; opacity: 0; } to { margin-left:0%; opacity: 1;} }[/code]
- Style the Scrollbars of your container-controls: (works only in chrome)
div::-webkit-scrollbar {
width: 7px;
height: 7px;
}
div::-webkit-scrollbar-track {
/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
background-color: rgba(255,255,255,0);
}
div::-webkit-scrollbar-thumb {
background-color: rgba(183, 183, 183, 0.2);
border-radius: 5px;
border: 0px solid;
}
div::-webkit-scrollbar-thumb:hover {
background-color: #d1d1d1;
}
- Only show the Scrollbars of containercotrols, when the mouse is over:
.noscroll:hover{
overflow: auto !important;
}
.noscroll{
overflow: hidden !important;
}
- nicer horizontal lines:
hr{
background-color: #DAE0E7; /* Farbe für Opera und Firefox */
color: #DAE0E7; /* Farbe für Internet Explorer (IE) */
border: 0;
height: 1px;
background-image: none;
}
- nicer Dialogs:
div.palette{
-webkit-box-shadow: 0 4px 16px rgba(0,0,0,.2);
-moz-box-shadow: 0 4px 16px rgba(0,0,0,.2);
box-shadow: 0 4px 16px rgba(0,0,0,.2);
background: #fff;
background-clip: padding-box;
outline: 0;
position: absolute;
}
div.palette table.title{
z-index: 1;
background: #FFFFFF;
border-bottom: 1px solid #DADADA;
box-shadow: 0px 0px 10px #DBDBDB;
}
div.sheet, div.modal{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:none;
overflow: hidden;
background-color: rgba(186, 186, 186, 0.2);
}
div.sheet > div.body, div.modal > div.body {
background-color: rgb(255,255,255);
position: absolute;
-webkit-box-shadow: 0px 4px 16px rgba(0,0,0,0.20);
-moz-box-shadow: 0px 4px 16px rgba(0,0,0,0.20);
box-shadow: 0px 4px 16px rgba(0,0,0,0.20);
}
body{
box-shadow: 0px 0px 0px rgba(0,0,0,0);
}