I'm using fullCalendar's resource-timeline views and I have noticed that the event background colors are de-saturated.
I have used different ways to set their color, including setting all event background colors with CSS, and everything works (i.e. I have no problem changing the event colors), except that the colors lack saturation.
For example, using CSS like this:
div#calendar {
background-color: red !important;
}
.fc-timeline-event {
background-color: red !important;
}
I would expect both the table background and the events to be saturated red. The background is, but the events are not. Checking with a color sampler shows that the background is #ff0000, but the cells are #ff5952, which corresponds to red saturated to 68%.
Strangely enough the browser inspector shows the computed background color as #ff0000.
Any ideas on how to achieve a display with fully saturated colors?
I have my solution.
In your CSS style code, you put the code below
.fc-bgevent {
opacity: 1;
}
The number 1 above can be changed to 0.9, 0.8 etc. It will replace the background event style.
And it works for me!
Fullcalendar CSS contains a rule that overlays the calendar with white, opacity 25%. This causes the problem
:
.fc-event .fc-bg {
z-index : 1;
background; #fff;
opacity: 0.25
)
The opacity needs to be set to 0. So Added this in my own stylesheet:
.fc-event .fc-bg {
opacity: 0 !important;
}
Related
I am getting following exception in codename1
CSS> java.lang.RuntimeException: Unsupported CSS property Transparency
Code used by me is as follow :-
Form {
Background Color: 0xffffff;
Transparency: 255;
}
What should I do to fix it ?
Try
Form {
Background Color: rgba(255,255,255,0);
}
or
Form {
Background Color: transparent;
}
One of theses three should do the trick
You can set the color to a value using:
background-color: #ffffff;
Opacity is implicit when you define it this way. You can use transparency using:
background-color: transparent;
You can set the background transparency along with the color name
form{background-color:rgba(255,255,255,0.3);}
RGBA stands for Red Green Blue Alpha. Here the Alpha defines the transparency.
You can set the 0.3 to 0 to make it completely transparent.
Try this
You can learn more about transparency here:
https://www.w3schools.com/cssref/css_colors_legal.asp
if css is the same in java then the correct syntax would be:
Form {
background: #ffffff;
filter: opacity(0.5);
}
the filter property should be between 0 and 1 where 0 is 0% and 1 is 100%
I have a button that changes opacity with :hover, but inside there's an image that shouldn't be affected by the button's opacity change.
For example, something like this:
.expandIMG:hover{
opacity: 0.6;
}
.expandIMG:hover,div,img{
opacity: 1; // this make no opacity but for all the button an i just want
// the image that are inside of some div.
}
I think you're trying to change the opacity of the div containing the image to 0.6 while keeping the image's opacity at 1.
You can accomplish this using background: rgba(0,0,0,1) instead of opacity:
.expandIMG {
background: rgba(0,0,0,1);
}
.expandIMG:hover{
background: rgba(0,0,0,0.6);
}
This way, you're only changing the alpha (opacity) of the div's background while the images inside it aren't affected.
Example: http://jsfiddle.net/2krc5080/
You could also try to set the z-index of the image higher while hovering. And maybe this answer is also useful to you.
.expandIMG:hover img {
z-index: 9999; // more than the expandIMG
}
Come on please give me more downvotes!! Feed me!!
Have a unique issue here. I'm trying to set some text to completely opaque, while still keeping a visible stroke on the text. I'd like to be able to see through the text as the background is dynamic, so I can't simply set it to the color of its backround.
Here's what I've got, but opacity is overwriting the stroke:
#special {
opacity: 0;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
Help appreciated!
The opacity affects all visual properties of the object.
But, what about this?
#special {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
color: transparent;
}
JsFiddle: http://jsfiddle.net/fdLecLan/2/
About the opacity, the W3schools says:
The opacity-level describes the transparency-level, where 1 is not transparant at all, 0.5 is 50% see-through, and 0 is completely transparent.
So setting it to 0 will make it totally transparent, but is important to remember that it stills stay in the View port, and stills interact with user (So, if it's a button or link, it'll still be clickeable...)
I'm using LESS to style a web page (with Bootstrap). What I'd like to do is add a smooth color transition when I hover my mouse over an element. Doesn't this functionality come right out of the box in LESS?
I'm trying to do it like this:
.list-group {
.list-group-item:hover {
background: fadein(#cn-sidemenu-hover-bg, 100%);
}
.list-group-item {
background: #cn-sidemenu-bg;
color: #fff;
}
}
But this has no color animation. But the name kinda implies to me that this should do some sort of color animation?
Otherwise I don't see any difference between fadein and lighten..
How can I do a smooth color transition with LESS?
You will need to add a transition attribute to the .list-group-item class like:
.list-group-item{
background: #cn-sidemenu-bg;
color: #fff;
transition: background 500ms;
}
Transition tells the browser to interpolate between two defined attributes. fadein and lighten are LESS specific functions, that only process the color value resulting in a fixed color value.
i.e. this
lighten(#aa0000, 5) would result in the color value #c30000;
fadein does the same thing of color manipulation, but edits the opacity value.
How can I create a menu which only its background is transparent? The text should keep opaque (opacity: 1)
If I set
li:hover {
opacity: 0.5
}
The whole list item becomes transparent. How do I fix that?
There is a new value in CSS3 called "rgba" that allows you to use a transparent color as a background color. For instance:
li:hover {
background-color: rgba(255, 255, 255, 0.5);
}
I'm fairly sure that should work, though I just wrote the code on the spot so it may not. This will, however, give your menu a white-ish tinge to it. If you want to read more about RGBA, though, go here: http://css-tricks.com/rgba-browser-support/
You’ll need to use either a transparent PNG image, or an rgba colour value, for the <li>’s background, e.g.:
li:hover {
background-color: rgba(0, 0, 0, 0.5);
}
Or:
li:hover {
background: url(a-nice-semi-transparent-png-image.png);
/* Supplying just the image file here will make the browser repeat the image
file vertically and horizontally, thus taking up all the space, just like a
colour would */
}
I don't think, that's possible, try this example: http://jsfiddle.net/578SV/
You can't. The transparency level gets handed down to all child elements.
Your options:
Place another element on top of the li, possibly using position: absolute, that has a normal opacity setting
Use a PNG file with Alpha transparency to create the opacity effect (Will need workarounds to work in IE6)
Use the new rgba colour property as shown by #hatkirby, if you can live with the incomplete browser support