How to use CSS files and classes

Hello,
another - may be stupid - question of a newbie: How do I use or implement CCS files I created i.e general settings for the whole (!) app > i.E. backgroundcolor, font, logo url and position navigation elements etc. If I check the sourtce code of an open view in Firefox I understand that there are 2 general css files included. Do I have to modify these manually?
AND
I just learned something about classes but how do i use your AddClass action?
Sorry again for all these questions, but I hope other newbies also profit of these!

Thanks again,
Walter

Hello Walter,

From the app file's manager you can add CSS stylesheet files and Javascript, which are not only included along your app files but also linked into the app HTML. Then you can prepare a CSS file for your app and then add it using the app file's manager.

Note that App Builder store the added styles into the folder "\www\app\styles\", then you can use relative paths from this folder to refer, for example, to added image files, from your CSS stylesheet.

For example, suposing you add a "Background.png" image from the app file's manager. To add this image as the background for every app view we can write something like this in our CSS stylesheet:

All app views have the class "appView". Also the app views have an ID which you can use from a CSS stylesheet. Such ID is the view name, for example, you can apply styles for some "AboutView" using the "AboutView" ID.

The same can be said about the app view controls. Every control have their own ID, which is the same than the control name. For example, a "Button1" control can be matched using the "Button1" ID.

The "AddClass" action add one or more CSS classes for an app view and most commonly for app view controls. For example, if we want to add the CSS class "myClass" for a "Button1" control we can code something like:

We can also use the action to add various CSS classes at a time, separating the classes by spaces:

Remember we count with related actions like "RemoveClass" and "HasClass". The first one allow us to remove one or more CSS classes from a control and the second one tell us if some specific class exist in certain control.

Also remember that behind our apps we have available the Bootstrap CSS framework and therefore we can use all available CSS classes declared in such framework further orther great stuff.

Again and again ... thanks a lot!

Walter

You're welcome Walter! :)

Hello David,
is it possible to set the background of a specific view with SetStyle? Like I can do with
SetStyle "[App.CurrentView]" "background-image" "url(app/images/cxx.png)"
I want to preload backgrounds for certain views.
Thanks!

Hello Walter,

Yes; is possible to use the SetStyle action just like you suggest.

Just assert you use an URL or a previously added app image file.

Take a look at this app sample.

Hello David,
thank you for your help. But I don´t understand the sense of

SetStyle "NewView2" "background-image" "url(app/images/bg1.png)"

in your sample. If I change with ShowView to NewView2 the view it has no background. Do I misunderstand something?
Thank you again.

Hello David,
now I understand! Thank you!

Hello Walter,

In fact they are a mistake of mine. Yes I try to set the backdround in other than the current view, which is something that do not work, and have some sense. But by mistake I leave the "NewView2" and the action in the button.