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.
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";
I am using ASP.NET MVC 3 with the Razor engine together with the newest version of the Telerik MVC controls.
In telerik.webblue.min.css there are 2 styles, namely t-button and t-state-default. It is implemented on a button element like this:
<button class="t-button t-state-default" type="submit">Apply</button>
I don't want to use a class attribute to specify which styles to use, I want to specify it in my own stylesheet that all button elements must use these 2 styles. I tried the folowing in my stylesheet but it doesn't work:
button,.t-button,.t-state-default{}
So all that I want to have in my markup is:
<button type="submit">Apply</button>
How would I do this?
UPDATE
When I view source this is what I see:
<link href="/Assets/yui_2.9.0/yui/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet" type="text/css">
<link href="/Assets/telerikaspnetmvc/2011.2.712/Content/telerik.common.min.css" rel="stylesheet" type="text/css">
<link href="/Assets/telerikaspnetmvc/2011.2.712/Content/telerik.webblue.min.css" rel="stylesheet" type="text/css">
<link href="/Assets/Stylesheets/hbf.css" rel="stylesheet" type="text/css">
In Firebug when I select the button it shows the top most style for this button as:
button, .t-button, .t-state-default {
}
hbf.css (line 26)
This should work.
However, you could place all the styles from
.t-button,.t-state-default {}
into a single rule labeled
button {}
EDIT
I think I see the problem, based on your update. (If I understand it correctly)
This
button, .t-button, .t-state-default {
}
appears in your hbf.css
However, it is styling nothing. button is not able to reference the other styles that way.
The .t-button, .t-state-default are still receiving styles from the telerik.webblue.min.css stylesheet.
In order to make it work, you need to add button to the telerik.webblue.min.css stylesheet.
Updated:
button,
.t-button,
.t-state-default {
border: 1px solid red;
background: #ccc;
width: 100px;
height: 25px;
}
See Demo: http://jsfiddle.net/rathoreahsan/Q2JwE/
I need to change the width of the table while printing the page using
<link rel="stylesheet" type="text/css" href="../css/reportPrint.css" media="print" />
Can I change the width of the table while printing from the CSS file?
Any help would be appreciated.
You can use a print stylesheet to set additional CSS properties when printing, by adding into the head element:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Then in the print.css file, set out your additional/different properties, e.g.:
table {
width:80em;
}
edit: original post had invisible code until edit after I posted, so I don't know if this answers your question.
Actually, if you want to override inline CSS in the HTML markup. Do this:
#divShowTable {
width:100%!important;
}
You can use print media query:
Example:
#media print {
.print-table {
width: 100% !important;
}
}
I have a link on my webpage to print the webpage. However, the link is also visible in the printout itself.
Is there javascript or HTML code which would hide the link button when I click the print link?
Example:
"Good Evening"
Print (click Here To Print)
I want to hide this "Print" label when it prints the text "Good Evening". The "Print" label should not show on the printout itself.
In your stylesheet add:
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Then add class='no-print' (or add the no-print class to an existing class statement) in your HTML that you don't want to appear in the printed version, such as your button.
Bootstrap 3 has its own class for this called:
hidden-print
It is defined like this:
#media print {
.hidden-print {
display: none !important;
}
}
You do not have to define it on your own.
In Bootstrap 4 and Bootstrap5 this has changed to:
.d-print-none
The best practice is to use a style sheet specifically for printing, and set its media attribute to print.
In it, show/hide the elements that you want to be printed on paper.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Here is a simple solution
put this CSS
#media print{
.noprint{
display:none;
}
}
and here is the HTML
<div class="noprint">
element that need to be hidden when printing
</div>
CSS FILE
#media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}
HTML HEADER
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >
ELEMENT
<div class="no-print"></div>
You could place the link within a div, then use JavaScript on the anchor tag to hide the div when clicked. Example (not tested, may need to be tweaked but you get the idea):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
The downside is that once clicked, the button disappears and they lose that option on the page (there's always Ctrl+P though).
The better solution would be to create a print stylesheet and within that stylesheet specify the hidden status of the printOption ID (or whatever you call it). You can do this in the head section of the HTML and specify a second stylesheet with a media attribute.
#media print {
.no-print {
visibility: hidden;
}
}
<div class="no-print">
Nope
</div>
<div>
Yup
</div>
The best thing to do is to create a "print-only" version of the page.
Oh, wait... this isn't 1999 anymore. Use a print CSS with "display: none".
The accepted answer by diodus is not working for some if not all of us.
I could not still hide my Print this button from going out on to paper.
The little adjustment by Clint Pachl of calling css file by adding on
media="screen, print"
and not just
media="screen"
is solving this problem. So for clarity and because it is not easy to see Clint Pachl hidden additional help in comments.
The user should include the ",print" in css file with the desired formating.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
and not the default media = "screen" only.
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
That i think solves this problem for everyone.
If you have Javascript that interferes with the style property of individual elements, thus overriding !important, I suggest handling the events onbeforeprint and onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
As Elias Hasle said, JavaScript can override !important. So, I extended his answer with a theoretical implementation.
This code identifies all elements with the class no-print, hides them with CSS before printing, and restores the original style after printing:
var noPrintElements = [];
window.addEventListener("beforeprint", function(event) {
var hideMe = document.getElementsByClassName("no-print");
noPrintElements = [];
Array.prototype.forEach.call(hideMe, function(item, index) {
noPrintElements.push({"element": item, "display": item.style.display });
item.style.display = 'none'; // hide the element
});
});
window.addEventListener("afterprint", function(event) {
Array.prototype.forEach.call(noPrintElements, function(item, index) {
item.element.style.display = item.display; // restore the element
});
noPrintElements = []; // just to be on the safe side
});