Customize the current app's themes and create new ones

I want to inquire about how to create themes or css that can set some standard styles for my apps

I know there are included and optional themes. They seem to affect the fonts and some other features. Some even change background colors.

What is the best method to edit or create themes that would allow me to customize them with different colors and even change the font colors, types etc. Also so they care not overwritten when installing a new AB revision.

I don't have a lot of css background but would like to hear what is possible and the best way to do it. Do the themes reside somewhere that they can be edited?

Any reponse is appreciated.

Hello Donald,

Thanks for posting. App Builder's themes can be found in the below directory path:

They are all Bootstrap CSS themes from Bootswatch. Every CSS file placed in the refered directory is taken as a theme by App Builder and then listed in the app's options dialog and elegibles to be included and used.

CSS is an entire world... and Bootstrap CSS offer a way to be customized has we can read in their website:

http://getbootstrap.com/customize/

Maybe you can wanted to modify an existing theme or create a new one by yourself. If you need some further help you know can post here whatever you wanted sir.

Thanks David, that is what I was looking for.

Few more on this subect:

Are the css files from a library of css files that you used? I'm assuming you did not create them yourself. (nobody has that much time)

Is there certain criteria involved with using a public or purchased css file? Would any that claim to be a bootstrap based css file work?

Which is higher on the list for final results, the css file or inlinecss? I assume the latter.

Also it appears the Bootstrap customizer allows you to create your own css file. Is that how you created them? Can a current theme be uploaded and modified?

I guess I am editing this as I go. Sorry

I see there there are bootstrap themes available on the web. Most look like they are for websites, do they still work with the apps?

Also I did find the ones included as well. Very nice ones and would make a good link:

https://bootswatch.com/

Thanks

Hello Donald,

Few more on this subect:

Are the css files from a library of css files that you used? I'm assuming you did not create them yourself. (nobody has that much time)

The default app's theme is Bootstrap CSS with very little modifications. The other includes themes are downloaded from Bootswatch.com and used again with very little modifications. These modifications are basically changing the icon's fonts location.

Is there certain criteria involved with using a public or purchased css file? Would any that claim to be a bootstrap based css file work?

I think that depends on the CSS author. Both Bootstrap CSS and themes from Bootswatch.com exists under the MIT license, and open source license which also allow us to use it in commercial projects, for example.

The better choice is to maintain all the required stuff in just one CSS file, just like the default Bootstrap CSS theme and also the Bootswatch.com includes themes. Other projects like "templates" can contains stuff we really don't need.

Which is higher on the list for final results, the css file or inlinecss? I assume the latter.

For little modifications, hacks, media queries (to react on different screen sizes) I think "Inline CSS" can be good. In fact there is a problem with that name. "Inline CSS" is not placed "inline" in the app's index.html file, but in a CSS file, just like if we include one of them. So we can use "Inline CSS" without space limitations or something like that.

If we plain, however, to modify a theme not only for one application, or just want to use certain complete CSS file(s), well, we can do it without problems. And therefore both options are not exclusives, then we can include CSS files and also write some specific "hacks" in the "Inline CSS" app's option.

Also it appears the Bootstrap customizer allows you to create your own css file. Is that how you created them? Can a current theme be uploaded and modified?

About the first question the answer is no: for App Builder I use the Bootstrap CSS the Bootswatch.com themes with very little modifications as I mentioned above. Honestly I don't know if we can upload a theme to be modified: probably not, since the tools works in the contrary way: they produces themes from certain code/variables, but probably the generator can't parse an already produced theme to obtain their sources/variables. Really I don't know.

I see there there are bootstrap themes available on the web. Most look like they are for websites, do they still work with the apps?

Yes, in principle, it's no reason to use it. However, CSS is very powerful, in the sense that CSS can change enterily the apparence of a control, etc. Then some themes can be more "usables" in applications. I think we can play with the fact that we can add CSS files as themes in the AB's themes directory, then we can take a look at the results very quickly. But a site like Bootswatch.com is appreciated, since they include in the website the final apparence of the available themes.

Also I did find the ones included as well. Very nice ones and would make a good link:

https://bootswatch.com/

Thanks

Yes; certainly we need certain "don" to produce these kind of stuff. I means that when I start a webpage, commonly, I start with "black and white" or maybe some "gray scale". Why? Because my "don" to play with colors, etc., is very limited, I recognize that. The guy beyond bootswatch.com can play with colors, etc., then can provide various useful themes ready to be used in our applications.

Hello to all,

Ok. The current App Builder release include a new feature based in certain class added to the BODY of our applications. Please, take a look at the also new Themes2 app sample, which show us how we can, thanks to this new feature, hack certain application's themes and not others. In a few words we can apply certain CSS rules only for certain views, controls, etc., only if the application use certain theme, so that CSS rules are not applied for other themes.

Hello to all!

Just an update to this thread. The "themes" directory is, from some releases ago, placed in the User Documents folder, no more in the "AppData" folder. You can find your App Builder files (Themes, Plugins, I18n and Samples) in your User Documents folder, under an "AppBuilder" subdirectory.

That's all! :)