[Tutorial] Using CSS in WebApps to make your WebApp more beautiful

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

  1. Create a file with the file-extension “.css”, for example “stylesheet.css”. you need to know some things about CSS.
  2. 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.
  3. go into the App.HTMLHeader property and add the following:
<link href="[your link to the stylesheet.css file]" type="text/css" rel="stylesheet">
  1. 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 (="

") when the mouse is not over the container.
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

  1. 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]

  1. 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; }

  1. Only show the Scrollbars of containercotrols, when the mouse is over:

.noscroll:hover{ overflow: auto !important; } .noscroll{ overflow: hidden !important; }

  1. 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; }

  1. 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); }

2 Likes

Thank you Lars, your Howto helped me out in creating nice animated fade-ins!

Here are some nice CSS-Tools:

https://coveloping.com/tools/css-animation-generator
https://coveloping.com/tools/border-radius-generator
https://coveloping.com/tools/css-box-shadow-generator

Lars, maybe you may answer this strange issue I’ve encountered:

When using URL (e.g. http://domainname/filename.css) in App.HTMLHeader it works fine.
But when using “/filename.css” it won’t work why? I am using Build Step / Copy files to place my CSS it in the Apps Parent Folder or shall I use something else?

First you have to look, in which folder your App is created.
Then look, if the CSS is on the right place. If you copy your CSS over a build step, it’s often in the same folder like the app.

Use the Developer-Tools of your Browser and take a look at runtime in the HTML-Header of your App. So you can check, if the CSS is in the right place.

Also check, if the app has the right permissions.

I also often struggled with this, so I mostly place the CSS on a different location than the app.

Having a problem with the Copy File / Build Step for a custom css stylesheet.

The Web Inspector (Developer Tools) says file not found!

I tried the App Parent Folder and Bundle Parent Folder
[Error] Failed to load resource: the server responded with a status of 404 (NOT FOUND) (“webtest.css”, line 0)

In the Copy File step I have (after the drag) …/webtest.css
Permissions are 644 (read everyone)

In app.HTMLHeader I have:

The file gets copied to the debug folder ( it sits in the directory with the app webtest.debug) but doesn’t get loaded? Any ideas?

Just because they’re next to your app doesn’t mean they’ll be served. You’ll need to add some code to HandleUrl, to return the contents when they’re requested.

Thanks for the reply Greg. Could use a little more help :wink:

Trying to follow the Tutorial above, but instead of deploying custom css to web, need to run it on mac.
Where should the custom css (wettest.css) be copied?
How do it get it to work with Web target?

@Jordan Davis You have three possibilities:

01 One way is to upload the stylesheet to your webserver and to add the link to html-header. You can use Filezilla for example to edit the stylesheets. Filezille will automaticly upload the file if you save it.

02 If you want to use the file local, you need a webserver to supply the app with the file. You can use a webserver like MAMP, XAMPP, WAMP or LAMP.

03 Another way is to add this (or something like this) code to your app.handlespecialurl event:

Select Case Request.Path
  Case "your_sheet.css"
    Request.Print(your_sheet)
    Return( True )
  Case ...
  End Select

Alternatively, you can also inject .css into a page via the WebPageSource control and its EditSource event.

Hi @Lars Lehmann
can you post one simple project using css on webapp here please. Thank you kind sir

yes good idea Nie

So, basically, you did not understand the detailed tutorial Lars posted ?

Maybe this one might help you a bit…

https://github.com/codesurge-xyz/xojo-metro

Thanks