I am building a cn1 app and was so far using the "Theme" in the GUI Builder to change the look of containers and buttons. I now want to add a specific border to a container and I find it easier to accomplish the border through css, I found the instructions on how to do it and the code here: https://www.codenameone.com/blog/rounded-corners-shadows-and-gradients-with-css.html . I added the .jar, made a css folder and add my theme.css file with the code. In my form's beforeshow method I change the uiid of a container to the uiid defined in my theme.css. However when I run the app the container takes on the default Container uiid, not the one defined in my .css. I feel like this is because I already have a theme defined in my gui builder with my uiids and now I am trying to change a container's uiid to a uiid defined in another theme. Is there something I'm doing wrong here?
If I understand correctly you have two themes and you want to use elements from both in the app. There are two valid scenarios, one where both of the themes are in the same res file and another where both of the themes are in a separate file.
If they are in the same res file do this:
theme = UIManager.initNamedTheme("/theme", "firstTheme");
UIManager.getInstance().addThemeProps(theme.getTheme("secondTheme"));
If they are in a separate files do this:
theme = UIManager.initNamedTheme("/theme", "firstTheme");
Resources otherTheme = Resources.openLayered(("/otherTheme");
UIManager.getInstance().addThemeProps(otherTheme.getTheme("secondTheme"));
This is discussed in the Codename One Developer Guide under Theme Layering.
Related
I can't find how to load my own icons in Flet.
I'm testing Flet with the intention of making a desktop app (pure desktop, not Internet needed), but I'm not able to use my own icons to begin with. I can only use the ones that come inside ft.icons, but I'd rather use my own by loading them from a folder similar to /assets/icons. Can I do that? How?
Thanks.
Currently, I don't see a way of doing this; however, you could use the Image class instead.
I would suggest you create an assets folder under your main project folder.
Let's assume you have the following folder structure on your project:
/assets
/icons/my-icon.png
main.py
When you are running your app, you should provide that folder to the initializer in the following way:
flet.app(target=YourApp(), assets_dir="assets")
Then you can access your images there directly and create an Image instance in the following way:
test_image = flet.Image(src="icons/my-icon.png", width=32, height=32, tooltip="Image Tooltip")
You can nest these Image controls inside of anything you want, so you have a lot of flexibility.
The only downside of doing it this way is if you are using light/dark themes on your app. Compared to the Icon class, you will have to specify the light/dark theme versions yourself and update them manually when you are switching your theme.
Here is the official documentation
I am very new to Angular and currently I am trying to add styling to an existing project.
The project has been constructed using components. So for each page there are 4 files,
mypage.component.css
mypage.component.html
mypage.component.spec.ts
mypage.component.ts
I can easily style the page by adding the styles to the css file in the component and the page style works perfectly.
However the issue is there are many pages that require the same styles again and again.
I can copy and paste the same styles to each css file and it works.
But this is not the most elegant or efficient way to do this.
I want to know what the correct way to add a global.css file so that it can be accessed by each page. So that way the css is only written once.
I have googled but haven't found anything that explains how to do it in simple ways.
Thanks
Angular adds the style.css/scss file by default to your project once you created it using the ng new command, and include it within the angular.json config file to be available across the components of the project.
So you can add any global styles within src/styles.css(or scss) file, to be implemented everywhere.
you can add your generic css into style.css/style.scss.
Django REST framework uses Bootstrap and has its own CSS files in it. It seems like PyCharm imports those files for code completion popups. The things is, I don't want those as I use different CSS framework and in fact, it's confusing me because all those Bootstrap autocomplete popups when I'm trying to set CSS classes and so on.
So my question is, is there any way I can disable code completion popups from certain CSS files?
I did not face with this problem until now,but I think you should disable these folders is Pycharm, try this :
Settings|Directories -> Use Exclude button on folder
I am building an app with theming requirements that can only be determined at run time. At build time it is possible to have theme variables available for all themes.
Is it possible to get webpack to build node modules - in this case bootstrap - with different variables file? I guess at build time I would want it to build multiple versions/themes of bootstrap. Then at run time I could reference the correct css file based on some prefix.
e.g.
theme1.bootstrap.css
theme2.bootstrap.css
theme3.bootstrap.css
I am using bootstrap 4, with webpack 2.
Is possible with webpack and how can I achieve this?
Definitely. I'm assuming you are determining the themes based on a user profile type system. Take a look at below and add an if statement to look for the variable in sql then simply apply the css. simple. Try creating it and if you run into trouble post the code you have on here and i'm sure someone can help. Add stylesheet to Head using javascript in body script-in-body. also if you aren't using already bootstrap allows for theme file so you can keep the overall style loading and simply apply the color scheme you want so that you only need to load the bulkier script once.
You can use the webpack plugin themes-switch, put all your theme files in a directory, the plugin would compile themes to individual files. Then use function changeTheme to switch themes at runtime.
https://github.com/terence55/themes-switch
My goal is to have more themes for my application and if possible, bundle them with the application itself, not load them at runtime using IStyleManager.loadStyleDeclarations().
Using the theme command-line option, you can have more than one "compile-time theme" bundled with your application according to docs:
theme filename [...] Specifies a list of theme files to use with this application. Theme files can be SWC files with CSS files inside them or CSS files.
However, I wasn't able to find an example how to actually do that (use the += syntax on command line?) and switch between those themes at runtime. What API should I use?
Using the theme command-line option, you can have more than one
"compile-time theme" bundled with your application according to docs:
Yes, You can add additional themes using the += in your command line.
I do exactly this for the Flextras mobile demos; including both the generic Spark theme with the Mobile theme to create the app.
However, both themes will be attempted to be used. I believe the second takes precedence. That means for every class where you want to use the "other theme" you have to specify that theme be used manually. This could get pretty complex very quickly; and you'll have to re-create a lot of spark skins in your application. I've done some work for a client around this who wanted to use our mobile DropDownList in both their normal application and in a mobile application from the same code base. I think the appropriate skin is conditionally applied at runtime using CSS; however we had to create a skin for the "non-mobile use" that explicitly specified the non-mobile skins for the individual elements (Such as the scroll bars)