I am using Twitter Digits embedded widget and would like to theme it dynamically depending on the theme that the user selects for the main portal. The only way that you can theme it according to their documentation at https://docs.fabric.io/web/digits/embeddable.html is as follows (which is pretty much hardcoded):
Digits.embed({
container: '.my-digits-container',
theme: {
accent: '315B7F', /* Buttons & Links */
background: '002747', /* Transparent by defaul */
label: 'FFF', /* Titles and text */
border: '324F67' /* Input fields borders */
}
})
Can anyone tell me whether there is any other way to update these hex values depending on some classes set in the CSS (in order to have different colors depending on the theme selected)?
I was thinking maybe for example i have this class in the CSS and I want to extract that value and apply it to the accent in twitter code snippet:
.accent { color: #FF0000; }
However im looking for anything simpler or neater.
Kindly note that the embeddable widget creates an iframe, and therefore it does not inherit the styling. I am using AngularJS throughout the app.
Assuming theme is rendered when the page loads, you could get the colors using this answer and store colors in variables. Then use those variables in the Digits.Embed().
PS: Set Variables with initial values.
Related
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.
Similar to the question referenced below, I am trying to set the background and foreground color of the active tab label using theme colors. I mostly expected referencing the theme colors identifiers in CSS to not work. Is there a proper way to do so?
AngularJS Material Design : Different colors for different tabs in md-tabs
works:
.md-tab.md-active
{
background: green;
}
doesn't work:
.md-tab.md-active
{
background: accent;
}
The md-colors directive works with either value within an html tag, but they don't apply to the specific portions of md-tabs or md-tab that I would like:
<div md-colors="{color: 'accent', background: 'green'}">My Text</div>
What I'm trying to do is avoid hard coding the color that happens to be the accent (or could be primary) in the CSS. I'm thinking there is a way to programmatically determine the colors of accent/primary and then apply the colors. I haven't figured it out yet.
I think the issue is that you are trying to set the color to 'accent' which is not a color. As a variable it works in an Angular directive, but not is vanilla css.
I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.
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");
I have few questions on styles (Themes). Presently i get a blue colored theme in all my window and panels. I want to change this to Pink. How can i do that ?
I read about swapStyleSheet( String id, String url) : Void but, i am not sure how to use it.
2.) I also need to know how to change the colors of labels/form panels etc, I want all the styles to be on 1 page, rather than adding it as an attribute in labels/form panels. (eg: fieldStyle: 'background-color: #ddd; background-image: none;')
Although I have not created a custom theme, there is a themeing guide located here: http://www.sencha.com/learn/theming/ that will give you very powerful tools to create your theme instead of styling individual components.