I have an html form that is submitted to a JSP. The form has an input that specifies background color preference. On the JSP page, I am trying to use the background color specified by the user, or, if they do not enter anything, use a color specified in a CSS file. Is this possible?
I have a in my jsp that specifies the location of the CSS file, so I know I can get to the css background color, but if the user specifies a color, I want to 'ignore' that, and use the color they chose.
Is that possible?
You could load the default css via a <link href...>, and then add the overrides in a <style> block on the page. Since the styles defined on the style block will have precedence over the other ones it will successfully override the default values. You can see more about how CSS "cascades" the styles on the W3C specs.
Try something like this in the <head>
<link href="default.css" media="all" rel="stylesheet" />
<style>
/* Define custom CSS by the user here */
body{
background-color: <% ... %>;
}
</style>
I suppose there are many ways of producing the correct output in JSP, but using JSTL Core IF Tag you could do something like the following:
<style>
/* Define custom CSS by the user here */
body{
<core:if test="${param.backgroundColor!= null}">
background-color: <%=request.getParameter("backgroundColor")%>
</core:if>
}
</style>
This way if the user has selected a custom background-color for the h1 element, it will override the default.
Related
I'm trying to add a background-image to a view in vue vite. I don
't want to set this background-image on every view so I tried to add it inside the views site using a scoped css style.
But once I assign scoped to the style tag it won't use the style...
Example code which doesn't work:
<style lang="css" scoped>
body{
background: url("../../assets/images/background.jpg") !important;
}
</style>
Once I remove the scoped it would work but it would add the background to every view which shouldn't happen. Does anyone know why this happens?
From the docs
When a <style> has the scoped attribute, its CSS will apply to elements of the current component only.
This means thst only the elements in your <template> will get the style and since there is no <body> in your template, then it doesn't get style.
im trying to learn Polymer, but i cannot understand how to style elements in version 1.0.
The exemple just show this..
Custom property | Description | Default
----------------|-------------|---------- --paper-tabs-selection-bar-color | Color for the selection bar |
--paper-yellow-a100 --paper-tabs | Mixin applied to the tabs |
{}
But i cannot to undderstand wher i use this, or how i use. Someone can give me a basic example?
thanks in advance
Polymer 1.0 introduced the concepts of custom CSS properties and custom CSS mixins.
Custom CSS properties
Rather than exposing the details of an element’s internal
implementation for theming, instead an element author defines one or
more custom CSS properties as part of the element’s API.
These custom properties can be defined similarly to other standard CSS
properties and will inherit from the point of definition down the
composed DOM tree, similar to the effect of color and font-family.
Custom CSS mixins
It may be tedious (or impossible) for an element author to anticipate
and expose every possible CSS property that may be important for
theming an element as individual CSS properties (for example, what if
a user needed to adjust the opacity of the toolbar title?).
For this reason, the custom properties shim included in Polymer
includes an experimental extension allowing a bag of CSS properties to
be defined as a custom property and allowing all properties in the bag
to be applied to a specific CSS rule in an element’s local DOM. For
this, we introduce a mixin capability that is analogous to var, but
allows an entire bag of properties to be mixed in.
Checkout the links to learn more. Below you will find a simple example that contains the paper-tabs element and custom styles.
<!DOCTYPE html>
<html>
<head>
<title>Paper Tabs Style Example</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html" />
<style is="custom-style">
:root {
--my-custom-color: red;
--paper-tab-ink: var(--my-custom-color);
/* custom CSS property */
--paper-tabs-selection-bar-color: blue;
/* custom CSS mixin */
--paper-tabs: {
color: var(--default-primary-color); /* variable defined in default-theme.html */
font-size: 20px;
}
}
</style>
</head>
<body>
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
</body>
</html>
Key parts to this example:
For styles in the main document you can use <style is="custom-style">.
You can create your own custom CSS variables like --custom-color: red; and use them like --paper-tab-ink: var(--custom-color);.
You can assign any valid, appropriate CSS to a defined custom CSS property like --paper-tabs-selection-bar-color: blue; or --paper-tabs-selection-bar-color: rgba(0,255,0,0.5);.
Many elements include predefined CSS variables. paper-styles, for example, includes color.html and default-theme.html. These files define various CSS variables for colors that can be used to customize the style of elements. --default-primary-color is one of these variables. See below.
/* custom CSS mixin */
--paper-tabs: {
color: var(--default-primary-color); /* variable defined in default-theme.html */
font-size: 20px;
}
Is it possible to load external Style Sheet after Internal (or embedded) styles get loaded. I mean, say I have a div with Yellow background color, set using embedded style in a page, like;
<style type="text/css">
div{
background-color: yellow;
}
</style>
And can I change the background color to green using an external style sheet like;
<link rel="stylesheet" href="style.css" type="text/css" />
If this is possible, show me an example.
I know this is possible with inline style, but I don't want to use that.
Yes.
Just put the <link> tag after the <style> tag, or make the selector in the external stylesheet more specific.
To answer your question, yes you can. The styles will be applied in a specific order. See here for precedence rules in CSS.
if you want to overwrite a css with same class, you can use 'important' in that class. Study more about important in css.
offcourse you can just place the external style sheet after the internal style sheet in HTML head section to override the internal style sheet!
CSS ORDER
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
I have some reports in HTML format and want print them in my web application. The problem I have is that I can not force printing operation to apply css properties to coloring header and footer.
<td style="background-color:gray">Total</td>
I expect to see a gray background color row in the printed paper, but everything is white as cells background color.
What do I have to do ?
Have you tried adding the styles via a media query? Either like this in a <style> block:
#media print {
td { background-color: gray; }
}
Or like this in a link in the <head>:
<link rel="stylesheet" type="text/css" media="print" href="your/print/css.ss" />
In case you're not aware of print stylesheets here's a good article on it http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
This is most likely a setting with whatever software you are using to print this page.
If you are using a web browser, the browser may be removing the colours to save ink etc.
These settings can usually be changed within the browser software itself. I don't think there is anything you can change on your web application to force this background-color.
I have a requirement to print only part of a page. I cannot use css(media=print) to do this since I have no clue what the page contains. All the html in the page is dynamically generated.
Also is there any limitation on the css properties that are recognized in Print mode. Many of my css properties like background-image are not applied on the generated preview.
You can dynamically create a css and insert or switch in your html document (see http://docs.jquery.com/Tutorials:5_Quick_jQuery_Tips#Switch_A_Stylesheet).
You can also define a CSS like
<style type="text/css" media="screen">
#printableButNotVisible { display:none }
#visibleButNotPrintable { display:block }
</style>
<style type="text/css" media="print">
#printableButNotVisible { display:block }
#visibleButNotPrintable { display:none }
</style>
and add dynamically classes "printableButNotVisible" or "isibleButNotPrintable" to all elements which need be either printable or visible. You can do this for example with respect of jQuery.
You can aslo use jqPrint plugin to print selected part of the page.