I am wondering what is the right way to make a css-styled application user-configurale by Preferences/ Settings?
I would like to give the user a choice to define some colors via the application's preferences menu which are right now defined via css.
For example, I have a 'warning' color defined: (root.css:)
.warning {
-fx-background-color: coral;
}
Now I would like to add a color picker to let the user override this setting.
Related
I have read this document https://www.tiny.cloud/docs/advanced/creating-custom-notifications/ but i have not found where i can change the text color, icon color, background color. Currently the background and text are so light that users cannot read anything in the notification box, so i need to make some changes. But i have not been successfull.
First I added this code to my site css. (it is what i see in the console)
.tox .tox-notification--info {
background-color: #d2cbcb; /* off white */
border-color: #000000;
color: #000000;
}
.tox .tox-notification--info p {
color: #000000;
}
.tox .tox-notification--info svg {
fill: #000000;
}
And no effect even after hard cache clear. Then i put that same code in a custom css file and used the tinymce content_css: like so
content_css: 'sbc_custom.css',
if found the file but still no change. I can change the values in the console only. How do i get the css to work? (i am using TinyMCE version 5)
The proper way is to build a custom skin either by building it yourself as outlined in the docs, or use the TinyMCE 5 skin tool. The TinyMCE styles are written in LESS and you basically modify variables to customize the look and feel of TinyMCE. To style the notifications, the following variables are available to you.
If you're using the skin tool, switch to the advanced mode and copy & paste the following into #notification-warn-background-color: red; at the end of the existing variables which should turn the yellow notification red in the preview.
I am writing code that allows a user to build a theme for the application, so they need to be able to effectively communicate that they want to change something about some element of JavaFX.
Suppose I have a bar on the top of every view that lets a user change the way some set of things look: button, label, text, and so on.
Here is a basic stylesheet that I am working with. It just puts style on root and button.
basetheme.css
.root {
-fx-background-color: "teal";
}
Button {
-fx-background-color: "orange";
-fx-font-size: 2em;
-fx-text-fill: #0000ff
}
Right now, all the views I have would load this sheet each time they are loaded:
view.getStylesheets().add("views/basetheme.css");
The Button class and its fx properties here would apply to all buttons in the view.
This is the behavior I want. I want the user to have leverage over Button and its properties during runtime.
For instance, if they want to change Button's -fx-font-size property from -fx-font-size: 2em to -fx-font-size: 3em, they can do that. Is this possible?
Currently, I know setStyle will set properties on some elements, but I am looking for a way to do this for not just a single Button, Label, and so on, but for all them. I want there to be run-time changes. For instance, after a user changes some element like button and one of its properties, it reloads that view and the change is applied.
I want to do something like view.setStyle("Button: some properties") and then it add those properties to Button class or overrides it, instead of view.setStyle("some properties") adding properties to root. The latter would not recognize that the property goes on a button, let alone all Buttons in view.
The obvious reason why this might not work this way is that we are not really changing the css file when we do those inline setStyle calls, just setting over the existing property and thus that inline has higher precedence and is updated.
I know I could technically do somebutton.setStyle("some properties"), but I want the user to be able to modify properties for all Button elements by specifying it at the root of a view so the styles trickle down to subelements in the view. This makes things easier.
You could use CSSFx to constantly pull in a CSS file that has bee written by your app.
We are building a prototype shop using Squarespace with the four pages:
Home, Store, About, Contact.
Unfortunately all pages inherit the same style from the site's design templates. What we would like to do is something similar to this where the colour of the link on certain pages could be changed.
Is there a method of overcoming the fact that the same class class="header-nav-item header-nav-item--collection"is being used for all pages in order for this type of solution using custom CSS can be applied?
Yes, this is possible. Using nth-child() selectors is an option, though you might consider referencing the element via its href attribute instead, like so (of course, substituting the color of your choice):
.header-nav-item a[href='/about'] {
color: red;
}
If you choose to use nth-child(), do like so:
.header-nav-item:nth-child(3) a {
color: red;
}
Finally, to edit the color of the nav item that corresponds to the active page (whatever page the user is on), you'd write something like:
.header-nav-item.header-nav-item--active a {
color: blue;
}
Finally, if you'd like to change the color of all navigation items when the user is on a specific page, you can do so by using the collection ID, which is used as the id attribute on the body element in most if not all Squarespace templates:
#collection-5d7ef2011673f45f239d1c51 .header-nav-item a {
color: green;
}
As a helpful tip (which you may already be aware of), you can use your browser's developer tools web inspector to inspect the element and then write your own CSS according to the rules generated by Squarespace.
I am currently styling my App with the css plugin for codename one and I cannot figure out why the default look of the Button is different for android and IOS.
In IOS it looks like this:
In Android it looks like this:
It should look like it does in IOS for all devices.
In the Css file, I have this entry for Button:
Button {
cn1-derive: Button;
background-color: #005EA8;
color: white;
}
Button.unselected {
cn1-derive: Button.unselected;
background-color: #005EA8;
color: white;
}
Button.pressed {
cn1-derive: Button.pressed;
background-color: white;
color: #005EA8;
}
Its not just the Login Button that should look like this, but All buttons. None of the Buttons looks like they should on Android, but all look like it in IOS.
In Addition, as you might notice, the look changes on click. In IOS this works as expected, In Android the text color changes on click to #0005ea8, but the background is still this grey.
What am I missing here?
This is one of the ugly parts of CSS meets CN1 themes. The problem is that your CSS theme is being applied over top of the CN1 native theme. Any properties that you set on Button will override whatever those properties were in the native theme, but there are other properties of Button from the native theme that you are not overriding.
Further, CN1 styles offer three ways to set the "background" of the component. In ascending order of priority, they are:
Background color
Background (image)
Border (9-piece borders effectively set the entire background).
If you apply two of these in the same style, then the one lower on the list (higher in number) will take priority. E.g. if you set both the background color and a 9-piece border, then you won't see the background color at all - you'll just see the 9-piece border.
So what is happening here is that you've set the background color for your button in CSS, but the native theme likely set a background image, or a 9-piece border on the Button style which is still overriding your settings.
There are a couple of solutions to your problem:
Solution 1: Override the other "background" properties
Set border: none (to ensure that you override any 9-piece border) (or set border to something). And specify the cn1-background-type: none to ensure that there isn't an image background being applied to it:
Button {
background-color: #005EA8;
color: white;
border: none;
cn1-background-type: none;
}
NOTE: You also don't need to specify cn1-derive: Button because your style name actually is Button.
Solution 2: Create your Own Button classes from the ground up
If you don't want the baggage of the native theme, just create your own style, and set it exactly how you want.
e.g.
MyButton {
...
}
And in your Java code:
btn.setUIID("MyButton");
I have a GWT application,
I created appBlueTheme.jar,appOrangeTheme.jar and added to BuildPath of project.
My module.gwt.xml file has
....
<inherits name='appBlueTheme.appBlueTheme'/>
<inherits name='appOrangeTheme.appOrangeTheme'/>
...
But in my app i see the effect of appBlueTheme as GWT doc say
"inherited modules will be cascaded in the order they are listed"
I want theme to be changed based on user response.
How do i achieve this?
If by "theme" you mean styling, the right approach is not to create a separate jar for each theme, but to use CSS instead.
A. If you use CSSResource, you can use conditional CSS:
https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Conditional_CSS
B. If you use an external CSS file, instead of
.headerPanel {
background: blue;
}
you can specify a different background based on a theme selected:
.orangeTheme .headerPanel {
background: orange;
}
.blueTheme .headerPanel {
background: blue;
}
Note that your code (or Ui:Binder) should only assign class "headerPanel" to a widget. When you start your app, you assign a default theme to your outmost widget (the one you add to the RootPanel). For example, you set
myAppPanel.addStyleName("blueTheme");
This will give a blue background to all widgets with "headerPanel" class. When a user chooses a different theme, you remove "blueTheme" class and add "orangeTheme" class. It will automatically refresh the page (no need to reload it) and all styles will change.
EDIT:
If you need to apply a theme to the entire app, including PopupPanel and dialogs, use this code to apply your theme:
Document.get().getBody().setClassName("blueTheme");