In richfaces has rich:inputNumberSpinner. It has two class following:
.rf-insp-inc {
background-image: url("/test/facesx/rfRes/spinnerArrowTop.png?v=4.2.0.Final&db=eAH7z8DAAAAEAAEA&ln=org.richfaces.images");
}
and
.rf-insp-dec {
background-image: url("/test/facesx/rfRes/spinnerArrowBottom.png?v=4.2.0.Final&db=eAH7z8DAAAAEAAEA&ln=org.richfaces.images");
}
It's quite small if I test it on my Ipad. I want it's more bigger, so How can I override background-image of rich:inputNumberSpinner ?
I already put my background-image in my xhtml file but nothing change, what's wrong or missing ?
<style type="text/css">
.rf-insp-inc{background-image: url(../../pics/icon_up.jpg);}
</style>
Thanks
there are many useful tips on creating mobile applications with RichFaces 4 in Getting Started With Mobile RichFaces document. You could use mobile-optimized skin (see step 3).
Another solution might be using !important in your CSS definition:
<style type="text/css">
.rf-insp-inc{background-image: url(../../pics/icon_up.jpg) !important;}
</style>
Regards,
Palo
Related
Docsify uses prismjs to syntax highlighting. I have tried to insert styles in the index.html but nothing is taking effect (I can modify the font-size with effect in chrome dev tools)
Have tried something like this.
<style>
code[class="lang-python"] {
font-size: 0.5rem;
}
</style>
</head>
See here for the docsify doc of syntax highlighting. I think this should just be direct itnerfacing with prismjs unless docsify is doing something else there.
https://docsify.js.org/#/language-highlight?id=language-highlighting
you can use
<style>
code[class="lang-python"] {
font-size: 0.5rem !important;
}
</style>
I have this 2 option copy from fonts.google.com
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#200;300;400&display=swap" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#200;300;400&display=swap');
</style>
I want to keep this font, but also to copy into my file.css in order to make a class, such as this one?
.doneazab {font-family: sans-serif;color: #343434;}
So, how can I transform that google font style link into a class?
You’ll want to set the font-family, like this:
.doneazab {
font-family: "Source Sans Pro", sans-serif;
color: #343434;
}
If you visit the URL you’re loading from Google Fonts, you’ll see that it’s a CSS file with #font-face declarations. All those declarations define the font-family name as Source Sans Pro, which make it possible for you to reference that name elsewhere in your CSS.
This is also shown underneath the other code snippet for link or #import on Google Fonts, ex:
I write a website with Vue.js and to handle user interface, I want to use Vue Formulate. All in all it works, but I have trouble to style input errors. So, I tried to make a very simple example to change the background color from the error list, but it doesn't work.
That is my easy component:
<template>
<div>
<p>Test for VueFormulate</p>
<FormulateInput
type="text"
validation="required"
/>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
li.formulate-input-error {
background-color:green;
}
</style>
After the site is loaded and the error list element is there, I can change the background-color in the Google Chrome devtools. But not bevor.
I hope somebody can explain what I have to do to make it work.
Your style block is scoped meaning you cannot style elements that are not in your immediate <template> (that's the point of scoping). You have three options:
Remove the scoped portion of your <style> block. I don't really recommend this.
Move your general form styles to a global css file. I would recommend this if you use more than 1 input.
Use a deep selector like ::v-deep. This is great for case-by-case overrides, and allows you to select elements that are deeper than your current "scope". Here's an example:
<style scoped>
.formulate-input::v-deep li.formulate-input-error {
background-color: green;
}
</style>
I am using primefaces schedule, i want to change the color of event header which is saved in DB,
scheduleEvent.setStyleClass(".event-consultation .fc-event-skin .fc-event-head");
using this class i want to change the background-color property with the color saved in DB. how can i change color got from db here?
I don't try it, but I guess the following should work:
<style type="text/css">
.yourclass .fc-event-inner{
background-color: #{yourBackBean.backGroundProperty};
}
</style>
....
scheduleEvent.setStyleClass("yourclass");
This way, you specify in-page CSS style that set as color-background the value of a backBean property that you previously loaded from DB.
Of course, you can create an application scope backBean and hardcode the EL in an external CSS file. Your choice.
Hope it helps!
Edit to clarify
You have to put the <style> html node inside <h:head>. I just tested it in a project to change background color of a <p:menuBar> this way:
<h:head>
... some stuff of mine, not relevant
<style type="text/css">
.ui-menubar,.ui-menu-child,.ui-menu {
background: #{sessionBean.bckgColor} !important;
}
</style>
</h:head>
And it works like a charm. I don't know what css style do you have to adapt to custom the event component of <p:schedule>, I am telling you how to write a custom CSS reading values from DB or whatever, using EL.
Maybe you need to use !importan css attribute to override original values as I did.
Hey everyone, I was just wondering whether anybody had any experience with displaying svg in ie9 using the embed tag. Below is an example of my code:
<!DOCTYPE html>
<html><head><title>Example</title></head>
<body>
<embed id="E" height="50%" width="100%" src="example.svg">
</body>
</html>
Right now this displays just fine in Firefox, ie 8 with the Adobe plugin, however in ie 9 it just pops up a blank box with an image icon in the top left of the box. Does anybody have any ideas how I could fix this problem?
Althought your snippet includes a HTML5 DocType definition there are other factors which affect exactly how IE9 processes your HTML e.g. HTTP Response Headers (see How Internet Explorer Chooses Between Document Modes)
I think if you force IE9 into Standards mode your SVG will be rendered by IE9; to quickly test this just use the Developer Tools to control Browser and Document modes.
So, if your embdeded SVG now shows you're just left with figuring out what's triggering IE9 to select the wrong Document Mode.
I'm not sure if your question means that you're trying to figure out any way to display SVG in IE9, or specifically only with the <embed> tag. If you just want a way to display SVG in IE9, I recommend embedding SVG directly in XHTML5:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>untitled</title>
<style type="text/css" media="screen">
body { background:#eee; margin:1em }
svg { background:#fff; display:block; border:1px solid #ccc; width:100%; margin:1em -1px }
</style>
</head><body>
<svg viewBox="-500 -500 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
<!-- SVG content here -->
</svg>
<script type="text/javascript"><![CDATA[
var svg = document.getElementsByTagName('svg')[0];
var svgNS = svg.getAttribute('xmlns');
// Access/manipulate your SVG here
]]></script>
</body></html>
If you want to test this technique, here are some examples (on my site) using SVG that work in IE9:
http://phrogz.net/svg/rainbowgrid.xhtml
http://phrogz.net/svg/3-point-circle2.xhtml
http://phrogz.net/svg/stirling_numbers.xhtml
http://phrogz.net/svg/soldiers.xhtml
http://phrogz.net/svg/drag_under_transformation.xhtml
http://phrogz.net/svg/complex_butterfly.xhtml
If this is not what you want, please clarify what your needs are.