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.
Related
There is a pre-made color palette in WordPress that are applied to the website elements. I want on a website that on each reload the color palette changes. I would predefine circa 5 color palettes, and it will always select a random one each time the page is reloaded.
Is this possible with a javascript code or with a plugin? By the way, my page editor is Nicepage.
I have already searched the internet for a solution, but have not found anything suitable.
IF you creating entire stylesheet, yu can have
:root {
--accent-one: #F7586B;
--accent-two: #F79D71;
}
colors set and use them in styles as
color: var(--accent-one);
background-color: var(--accent-two);
when you want to change it on every page reload just dump inline styling settting and new colours.
I am using a plugin on a wordpress site which operates in light/dark mode where I can set the colours manually. However the headers are automatically inheriting the theme colours.
I have tried inspecting the code on the grid to try and isolate the class and create a custom CSS code to remove the inherit property.
The code that the issue exists in is
.tg-barking-mouse a:not([class*="tg-element-"]),
.tg-barking-mouse a:not([class*="tg-element-"]):active,
.tg-barking-mouse a:not([class*="tg-element-"]):focus,
.tg-barking-mouse [class*="tg-element-"] *:not(del) {}
Within this bracket, the margin, padding, color etc exist. When I remove color it does exactly what I would like it to.
However when I paste the same code listed above in CSS and write color:none within the bracket, it doesn't seem to add to the element and overwrite the current color settings.
I believe there is a simple solution which will allow me to isolate the correct element but I'm not too sure what I'm missing.
Is it only the header that has the issue?If it is then you can use css to set your preferable color choice. try include important property like color: #000 !important; or any color of your choice to see if it can do the trick.
Thanks everyone for your help, I was able to work it out by targetting h2 within the class and resolved the issue with the inherit property:
h2.tg-item-title {
color: inherit !important;
}
And it has inherited the plugin's text style rather than the Wordpress theme.
How to change the background and text color of every read more button on my website?
The site has "swift" theme.
There should be a option in Wordpress admin panel to edit website's appearance, including font size, color and stuff like that. I have not worked on the Swift theme but from the little experience I have, theme's options have such features to modify color/size/font without having to write CSS for it.
OR you can add custom CSS to your website, but for that you will need to write CSS which may overlap with other settings on the website if not done carefully.
The 'Read More' element has 'moretext' class, so you need to work on CSS to customize it. Something like this:
.moretext { background: #ffffff; color: 000000; }
Here's the documentation https://codex.wordpress.org/Customizing_the_Read_More
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.
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");