I want to use the following style in GWT client bundle:
.myClass tr:hover {
background: url("myImage.png") 185px 2px no-repeat;
}
I declared the image as follows:
#Source("resources/myImage.png")
#ImageOptions(repeatStyle = RepeatStyle.None)
ImageResource myImage();
and changes the style to:
#sprite .myClass tr:hover {
gwt-image: "myImage";
background-position: 185px 2px;
}
But it does not work. There are several images in the generated XYZ.cache.png. So if I change the background-position in firebug I see the complete image bundle.
How can I move the background image to the right position?
#sprite .myClass tr:hover {
gwt-image: "myImage";
}
div.myClass tr:hover{
background-position: 185px 2px;
}
As you noticed, gwt-image will be default remove 'background-position' along with some other ones. To override the default position of 0 0, add a more specific css rule with the position you desire.
The generated width property of ImageSprite does not work because the width of tr element is fix. It is better zu create a td with an image element (as ImageResource) on the right side of table row. CSS looks like:
<code>
div.myClass img {
visibility: hidden;
}
div.myClass tr:hover img {
visibility: visible;
}
</code>
So solution assumes there are no more images in the table.
Related
Hi I have this current CSS for fullCalendar (v 1.6.4):
.full-calendar .fc-content .fc-event-container .fc-event {
background: #ef6262!important;
border-color: #eb3d3d!important;
color: #fff!important;
border-radius: 0;
}
When I add a new Class to an event (based on some programming calculations) I do this:
event.className = 'paused-event';
calendar.fullCalendar('updateEvent', event);
My paused-event CSS is this:
.paused-event,
.paused-event div,
.paused-event span {
background: #71CCBF;
border-color: #65B7AB;
}
The background color changes correctly, the border stays the same as the default CSS.
Expectancy:
The event color AND border should change when the paused-event class is present.
The !importants are overriding the latest class properties. You could try to add !important to .paused-event properties as well, but the best would be to avoid any !importants and simply override by impacting with a deeper selector (although it's weird the background does change considering the important):
.class1 vs div.class1.class2 (deeper one)
Anyways, if you simply need to solve that and fast you can try:
.paused-event,
.paused-event div,
.paused-event span {
background: #71CCBF;
border-color: #65B7AB !important;
}
I'm using carousel slider more than two times and its .item height is 100%. I had to adjust the main slider on specific height, so i added a class .custom-slider in header tag put the style with !important tag, because there was already 100% height .
.custom-slider {
height: 645px !important;
}
Its adjusted and working fine. Now I have to adjust the on different resolution, so i have to reduce the height 645px to 496px, but due to !important property new added height does not working.
I'm trying following style on 1024 reslution, but its not working.
.custom-slider {
height: 496px !important;
}
This accepted answer is well explained, but i didn't resolve my issue, can any guide me regarding this. I would like to appreciate.
Change the style to max-height and remove the important!
.custom-slider {
max-height: 645px;
}
You could also make the selector more specific by adding the tag or a parents id/class. This would give the style a higher priority.
body div.custom-slider {
max-height: 645px;
}
If your trying to do this within the same resolution ( without using media queries ) you should be able to add a second class and give that a defined height as well - it should overwrite the first one. For example:
<div class="custom-slider secondary-height"></div>
.custom-slider.secondary-height {
height: 496px !important;
}
please check this: http://codepen.io/anon/pen/LGmrwZ
when you define a media query, it will catach the relevant one.
if you go from bottom up, only the relevant !important will catch.
and since they have same "cascading juice" the winner will be:
the one that have the appropriate media trageting and the one that comes last, so combining them will solve the issue.
scss example
.custom-slider{
width:100px;
border:1px solid red;
#media (min-width:700px) {
height: 20px !important;
border:1px solid green;
}
#media (min-width:900px) {
height: 80px !important;
border:1px solid blue;
}
}
by the way, if your css is loaded after the slider's css, you do not need !important.
same goes if you add a parent container to your css.
I'm trying to change img src (not the background img src) with css
<img id="btnUp" src="img/btnUp.png" alt="btnUp"/>
#btnUp{
cursor:pointer;
}
#btnUp:hover{
src:img/btnUpHover; /* is this possible ? It would be so elegant way.*/
}
You can use :
content: url("/_layouts/images/GEARS_AN.GIF")
There is another way to fix this : using CSS box-sizing.
HTML :
<img class="banner" src="http://domaine.com/banner.png">
CSS :
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://domain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
http://css-tricks.com/replace-the-image-in-an-img-with-css/
you could try something like this
<img id="btnUp" src="empty.png" alt="btnUp" />
or
<div id="btnUp" title="btnUp"> <div/>
#btnUp{
cursor:pointer;
width:50px;
height:50px;
float:left;
}
#btnUp{
background-image:url('x.png')
}
#btnUp:hover{
background-image:url('y.png')
}
You can use CSS to a) make the original image invisible by setting its width and height to 0, or moving it off-screen etc, and b) insert a new image in its ::before or ::after pseudo-element.
That will be a performance hit though, as the browser will then load both the original and the new image. But it won't require Javascript!
You can't set the image src attribute via CSS. you can get is, as if you wanted to set use background or background-image.
No - CSS can only be used to change CSS background images, not HTML content.
In general UI elements (not content) should be rendered using CSS backgrounds anyway. Swapping classes can swap background images.
You can use a mixture of JavaScript and CSS to achieve this, but you can not do this with CSS alone. <img id="btnUp" src="empty.png" alt="btnUp" onmouseover="change(img)" onmouseout="changeback(img)" />
Instead of img you would put file name sans file type.
function change(img){
document.getElementById("btnUp").src= img + ".png";
}
function changeback(img){
document.getElementById("btnUp").src= img + ".png";
}
Then you use CSS to modify the img tag or the id to your liking.
You could set the image to a completely transparent image, then change the background image like so:
img {
background-image: url("img1.png");
}
//For example, if you hover over it.
img:hover {
background-image: url("img2.png");
}
The images do have to be the same size though. :(
Hope this helps!
content:url('imagelinkhere');
This is working, I tested it
I am trying to change the default image in select field with my custom image. Below are the classes declared in sencha-touch-debug.css which needs to be overriden for this change.
.x-selectmark-base, .x-field-select .x-component-outer:after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 50%;
left: auto;
right: 0.7em;
-webkit-mask-size: 1em;
**-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA....');**
margin-top: -0.5em;
}
/* line 634, ../themes/stylesheets/sencha-touch/default/widgets/_form.scss */
.x-field-select .x-component-outer:after {
**background-color: #dddddd;**
}
The highlighted red lines are responsible for applying the image and background respectively.
I tried to override these styles in my css class file by declaring them once again in my css class but these 2 highlighted properties are getting the priority anyhow and in spite of giving priority = important in my custom css file, I am not able to override them in my custom css files. Please see, If I comment the highlighted lines in sencha-touch-debug.css then only custom css classes are applied.
My Css class
.x-selectmark-base,.x-field-select .x-component-outer:after {
webkit-mask-image: url("../../resources/images/main_menu_arrow.png") !important;
margin-top: -0.5em;
}
.x-field-select .x-component-outer:after {
content: url("../../resources/images/main_menu_arrow.png") !important;
margin-top: -35px !important;
margin-right:8px !important;
}
Any ideas?
Thanks
Gendaful
I was able to overcome this issue and applied following stylings to override the default styling by sencha and applied custom image on select field as below.
User Defined CSS >> Applied following styling to override the default sencha style for select field
.x-selectmark-base,.x-field-select .x-component-outer:after {
webkit-mask-image: none !important;
margin-top: -0.5em;
}
.x-field-select .x-component-outer:after {
content: none !important;
}
// Applied this user defined class to specify the background color and background image on select field
.chooseCountrySelectField {
background: url('../../resources/images/main_menu_arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%, #faebb0),
color-stop(100%, #f3ce72));
}
Hope this sollution will be useful to others.
to change to
when mouse over.. like you can do with a:hover, how can i do this?
I tried
addFriend img:hover{
background: url(images/addFriend_hover.png);
}
Ditch the img tag, and do it without javascript
(off the top of my head, untested)
HTML
<div class="addFriend">Add Friend</div>
CSS
.addFriend { background: url(images/addFriend.png); }
.addFriend:hover { background: url(images/addFriend_hover.png); }
For it to work in all browsers with the least amount of code you can do it with CSS.
Add A Friend
.icon {
display: block;
width: (width of image);
height: (height of image);
text-indent: -9999px; /* hides the text 'Add A Friend' */
background: url(url of image) no-repeat center center;
padding-right: 55px;
}
.icon:hover {
background: url(url of new image) no-repeat center center;
}
You could also use jQuery.
$('img.addFriend').hover(function() {
$(this).attr('src','images/addFriend_hover.png');
}, function() {
$(this).attr('src','images/addFriend.png');
});
Edit
You could also do non-jQuery, I assume you don't want a background-image or an href
<img src='images/addFriend.png' onmouseover='this.src="images/addFriend_hover.png"' onmouseout='this.src="images/addFriend.png"' />
You have to use a container with a background image, e.g. a div with a specified height and width. Then you can use the background image and a :hover-pseudo-class.
This tutorial might be useful: http://www.w3schools.com/js/js_animation.asp
To see if it does what you want, scroll down to "The Entire Code" and click "Try it yourself".