So, about the problem.
I use Vaadin 7.4.3. I want to use declarative UI but i haven't right way with CSS using.
For example, i have MainView.html file with mapping:
<!DOCTYPE html>
<html>
<head>
<meta name="package-mapping" content="auth:my.widget.package.web.main.auth" />
<link href="./styles/common.css" rel="stylesheet" type="text/css">
</head>
<body>
<v-vertical-layout size-full style-name="marginTop">
<auth-login-panel :right/>
</v-vertical-layout>
</body>
</html>
Java mapping:
#Theme("valo")
#Widgetset("my.package.MyAppWidgetset")
public class MainView extends UI {
#WebServlet(value = "/*", asyncSupported = true)
#VaadinServletConfiguration(productionMode = false, ui = MainView.class)
public static class Servlet extends VaadinServlet {
}
#Override
protected void init(VaadinRequest request) {
DesignContext context = Design.read(getClass().getResourceAsStream("MainView.html"), null);
setContent(context.getRootComponent());
}
}
Simple CSS (common.css) for test:
#marginTop {
margin-top: 20px;
}
.marginTop {
margin-top: 20px;
}
But... css not works.
Any ideas?
You should not attach css stylesheets like this. You should put your CSS in a theme.
Good way is to create your custom theme as an extension of a existing Vaadin theme such as Valo or Reindeer and then add only your custom styles which you need to adjust your application. Book of vaadin has a great section dedicated to Creating and using themes and also How to create a theme in Eclipse. There is also a Vaadin Wiki Post regarding Creation of Sass Themes.
Also, Valo theme in particular can be greatly adjusted in very simple way by just changing value of some predefined variables which define colors, margins etc. You can find an example here.
$v-app-loading-text: "Dark & Flat Valo";
$v-background-color: #000;
$v-focus-color: #ffa500;
$v-font-size: 15px;
$v-font-weight: 600;
$v-unit-size: 42px;
$v-bevel: false;
$v-shadow: false;
$v-gradient: false;
$v-textfield-bevel: false;
$v-textfield-shadow: false;
$v-border-radius: 0;
$v-border: 2px solid v-tone;
$v-overlay-shadow: 0 0 0 2px (v-tint 10);
$v-focus-style: $v-focus-color;
$v-font-family: "Lato", sans-serif;
$v-font-weight--header: 600;
#import "../valo/valo";
Related
I'm trying to achieve those theme change solutions: https://www.baeldung.com/spring-mvc-themes or http://acodigo.blogspot.com/2017/04/spring-mvc-themeresolver.html but with Thymeleaf instead of the .jsp.
But I can't see any style change on my application.
I think the problem is href/th:href attribute.
I have tried many solutions but can't change href="<spring:theme code='styleSheet'/>" from .jsp in a valid Thymeleaf expression.
And this bellow is the only solution that works.
th:href="${#environment.getProperty('stylesheet')}"
But there are still no styles in HTML, and when I run inspect element there are no .css files included.
Here is the code example:
#Configuration
public class ThemeConfig implements WebMvcConfigurer {
#Bean
public ThemeResolver themeResolver() {
CookieThemeResolver themeResolver = new CookieThemeResolver();
themeResolver.setDefaultThemeName("light");
return themeResolver;
}
#Bean
public ThemeChangeInterceptor themeChangeInterceptor() {
ThemeChangeInterceptor interceptor = new ThemeChangeInterceptor();
interceptor.setParamName("theme");
return interceptor;
}
#Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(themeChangeInterceptor());
}
}
Html
<head>
...
<link rel="stylesheet" type="text/css" th:href="${#environment.getProperty('stylesheet')}">
...
</head>
<body>
...
<div class="dropdown-container ms-4">
<a th:href="#{?theme=dark}">[[#{dashboard.theme-dark}]]</a>
<a th:href="#{?theme=light}">[[#{dashboard.theme-light}]]</a>
<a th:href="#{?theme=blue}">[[#{dashboard.theme-blue}]]</a>
</div>
...</body>
dark.properties (I have also tried: stylesheet=dark.css, stylesheet=/themes/dark.css, etc..)
stylesheet=/css/themes/dark.css
background=black
dark.css
footer{
height: 100px;
background-color: red;
}
Since Theme support is deprecated in Spring 6 I will use JavaScript as an easy workaround.
I need to make fonts for some of my components bigger when my app is in full screen mode. In my App.jsx I have variable that triggers me adding "fullscreen" class to the root DIV of the whole app. I can go brute force and override it like * { font-szie: 18px; } but thats too simple. I want to override certain classes only (like .some-class * { font-size: 18px; }). Of course React hash stands in my way so here is question: how do I apply my font size to all components in the app?
If you have hashed classes (i.e some-class-[hash]), you can use CSS selector to deal with it.
Like this:
[class^="some-class-"]
The above CSS selector will select all classes which start with "some-class-".
You can read more about CSS selectors here: https://www.w3schools.com/cssref/css_selectors.asp
You can use General Classes like Bootstrap or Tailwind, then you should use it in your public folder and use linkcss`
<head>
<link rel="stylesheet" href="..." />
</ head>
.text-sm {
font-size: 1rem !important;
}
import hashed_classes from "./file.css";
const Component = () => {
return (
<div className={`${hashed_classes.class} text-sm`} />
)
}
I am using Polymer 2 to build a library of components, but I am having issues with css variables in browsers other than Chrome.
I have a wrapper component (x-page) and it has a theme property that can be either light or dark. My css looks similar to this:
:host([light]) {
---color-1: rgb(200,200,200);
---color-2: rgb(210,210,210);
}
:host([dark]) {
---color-1: rgb(10,10,10);
---color-2: rgb(20,20,20);
}
I now want to use these variables in all components inside this wrapper (not only directly slotted, all of them including their shadow-root.
In Chrome this works fine, as the children will read the variables from the wrapper, but in other browsers it doesn't seem to work even though I am using the apply-shim polyfill and tried with the custom-styles as well.
I appreciate your help :)
In order that CSS styles can be applied with the Shadow DOM polyfill, at first you must prepare the <template> you append to the shadow root with the ShadyCSS.prepareTemplate() function, as explained in the ShadyCSS polyfill page:
ShadyCSS.prepareTemplate( template1, 'x-page' )
Example:
ShadyCSS.prepareTemplate( template1, 'x-page' )
class XPage extends HTMLElement {
constructor() {
super()
this.attachShadow( { mode: "open" } )
.appendChild( template1.content.cloneNode( true ) )
}
}
customElements.define( 'x-page', XPage )
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-bundle.js"></script>
<template id="template1">
<style>
:host([light]) {
---color-1: red;
---color-2: pink;
}
:host([dark]) {
---color-1: yellow;
---color-2: black;
}
span {
color: var(---color-1);
background-color: var(---color-2);
}
</style>
<span><slot></slot></span>
</template>
<x-page light>Light</x-page>
<x-page dark>Dark</x-page>
I have a dialog as you can see here:
<template >
<ux-dialog >
<ux-dialog-body>
<div t="logbook.delete-logs">Möchten Sie alle Logbücher löschen?</div>
</ux-dialog-body>
<ux-dialog-footer>
<button attach-focus="true" click.trigger="controller.cancel()" t="logbook.cancel">Abbrechen</button>
<button click.trigger="controller.ok()" t="logbook.ok">Ok</button>
</ux-dialog-footer>
</ux-dialog>
</template>
and related view-model:
import { inject } from 'aurelia-dependency-injection'
import { DialogController } from 'aurelia-dialog'
#inject(DialogController)
export class DeleteLogbook {
public controller: DialogController
constructor (controller: DialogController) {
this.controller = controller
}
}
I want to change the colour of dialog's border.
I want to use Aurelia concept for this purpose. Could you please tell me the solution?
As #Jesse suggested in his comment, you can override the styles of certain elements.
in this case, you simply add the following to your stylesheet
ux-dialog {
border: 5px solid #fff700;
}
however one thing to note is that, if you are to load the stylesheet containing the above in your aurelia main which is very common (or in any other way before loading aurelia-dialog), you will have to add !important to your styles.
ux-dialog {
border: 5px solid #fff700 !important;
}
it's because the actual package is been loaded after your own styles and they will naturally override yours.
however, it's better to load your styles in app or by component (such as each component having it's own stylesheet) to avoid !important in your styles
I am looking to create a dynamic coloring system with Angular. I created a service that has 4 strings,success, info, warning, danger with defaults of their color codes. I want to at the root of my application which I assume is at app.component because I am using routing to inject this service and override globally
.btn-warning {
color: #fff; <-- Inject my own color like so (color: AppSettings.ColorSettings.Warning)
background-color: #f0ad4e; <-- Inject my own color
border-color: #f0ad4e; <-- Inject my own color
}
I want this to be dynamic so that if the user went into a settings panel could change these colors and in real time see the effect in every place that uses those classes.
I see [ngStyle] but that applies specific things like colors to just one element.
I also see [ngClass] but I don't know how to create class that is more like a way to apply a class to an element.
Could I do something like so?
<html>
<!-- Junk ^ with bootstrap up here -->
<style>{{GetColorSettings()}}</style>
<!-- More stuff -->
</html>
This may not be the most elegant solution however I really like it for how easy it will be to setup. Inside of my app.component I have this setup. Within the GenerateColorSettings method you will need to define all the different colors, which will require me expanding my classes inside of ColorSettings further. Some of the effects are default, :hover, :disabled
constructor(public infoService: InformationService, private configSettings: GlobalConfigSettings)
{
var style = document.createElement('style');
style.innerHTML = this.GenerateColorSettings();
style.id = "DynamicColors"
document.body.appendChild(style);
setTimeout(() =>{
configSettings.ColorSettings.warning = "#fff";
configSettings.ColorSettings.ColorsChanged.emit();
}, 25000);
configSettings.ColorSettings.ColorsChanged.subscribe(() =>
{
var style = document.getElementById('DynamicColors');
style.innerHTML = this.GenerateColorSettings();
});
}
private GenerateColorSettings(): string
{
console.log("Getting color");
return `.btn-warning{
color: #fff;
background-color: ${this.configSettings.ColorSettings.warning};
border-color: ${this.configSettings.ColorSettings.warning};
}
.btn-warning:hover{
color: #fff;
background-color: ${this.configSettings.ColorSettings.warning};
border-color: ${this.configSettings.ColorSettings.warning};
}
`;
}