Is there any way to add custom resize icon?
I didn't find any suitable solution in the docs. I've tried to add custom CSS rules for ag-header-cell-resize without any success.
That is just a div element with a gray background color, not an icon. You can customize it using css. The example below changes the resize div color to red and increase its size:
.ag-header-container .ag-header-cell-resize {
width: 15px;
}
.ag-header-container .ag-header-cell .ag-header-cell-resize::after {
background-color: red;
height: 100%;
top: 0;
width: 100%;
}
Live Demo
https://plnkr.co/edit/V7rbCuvYCVjkJIOb
Related
I have an arrow image, I would like to make its background color to be equal to default background which is lightblue. Also at the border of the image there are some white spaces which I am trying to remove. I used opacity property but that is not helping in achieving this styling.
Here is my css code
.rm-section .rm-links .m .rm p:after {
overflow: hidden;
border-radius: 150px;
content: url(/etc/designs/fai/clientlibs/base/images/down_arrow_icon.jpg);
display: inline-block;
vertical-align: middle;
padding: 24px;
margin: 0px;
}
Follow these steps it's very simple
Burn the background image online at the following website
link
Download it from png
Do not set the background of the image in css
Example Image See the Next and Back buttons link
I'm having some trouble getting a specific look that I am after.
I have the basic Wordpress Twenty-Fifteen theme applied and I'm trying to get a 200px wide red bar to appear down the right hand side of the screen.
The bar is made of a 200x1px image that is repeated.
The problem is:
A.) If I set this as a "Background-image" then the repeat works, but
I cannot get the image on top.
B.) If I set the image as an IMG
inside of a DIV, then I can get the image on top, but not to repeat.
Can anyone help me combine these 2 into one result, repeated image-y and image on top?
You can see my site here: http://u64.ca/
Try this, add it to your css.
This will affect everything the comes directly inside the #main tag.
#main > * {
margin-right: 200px;
}
Or you could apply a border right to the .site-content and lose the background iamge.
.site-content {
border-right: 189px solid #db0f12;
}
I'd use a pseudo-element something like:
main {
position:relative;
}
main:after {
content: "";
width: 189px;
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: #DB0F12;
}
Hey guys i need help with some css i have some images that expand when i hover over them but it pushes everything away at the same time
<style>
.box
{
width: 750px;
height: 1000px;
border:1px solid green;
}
.enlarge-onhover {
width: 125px;
height: 125px;
}
.enlarge-onhover:hover {
width: 225px;
height: 225px;
}
</style>
I dont want it to do that i want it to just overlap the rest of the images and to expand on a left click rather than hover
One way you can do this is to use Absolute positioning.
The problem is, as you're hovering, your changing the sizes (width and height), so it will move everything across and re-render the page.
You could use javascript (jquery to do this for you) if you wanted it to happen onclick.
You would have to put position: absolute; on your image for it not to disturb other elements.
$(".enlarge-onhover").click(function() {
$(this).css({width: 255, height: 255});
});
If you just want it to happen on hover then just add position: absolute; to your image's css.
If you are not using jquery and just pure javascript you can achieve the same thing by doing;
var img = document.getElementById("myImg");
img.addEventListener("click", function() {
img.style.width = "255px";
img.style.height = "225px";
}, false);
The above assumes of course that your image has an id of myImg.
As well as positioning the images along the X and Y axes, you can also set Z axis to make elements appear one on top of another.
I think the solution is to increase the z-index of the element on hover as
z-index: 50;
You will need to reset the z-index to 0 once the user un-hovers
This when combined with setting the position of the hovered/enlarged image to look like the thumbnail is enlarging, will do the trick for you.
You can read more about z-index here:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I am developing a website and the problem is that when I resize the browser (horizontaly), my HOME link from the menu gets broken. It's harder to explain in words what happens, so check it out here: http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html.
The grey background is an image, having the up-right corner cut. After I cut that area, I made the area transparent. So, it is a trapezoid on transparent background.
My question is: what to do to prevent the trapezoid transforming into a rectangle when resizing?
If you want something like that.
Where the diamond is in between the two tabs then you should give particular width to your li elements(All).not use percentages for that. Like this
.menu > li#home {
display: inline;
float: left;
background: none;
background-image: url(../img/home.png);
width: 273px; /* same as your image size */
}
and also to both of your header images
img#logo {
position: absolute;
top: 10px; /* Change it as it sets in the gap */
left: 250px; /* Change it as it sets in the gap */
width: 140px;
height: 90px;
}
Instead of using an image, create the shape you want right in the file. Try this link:
Using the Area Shape Attribute
I am using HTML and CSS to create a webpage. I want to create buttons that are of a .gif file that I already have. I am using div to place items in the page itself. How do I use the image, and also use the rollover features so that the image changes to a different image I have that is a different color.
Thanks.
Changing the image url works, but can be a nuisance if the images are not preloaded or the user's cache is disabled.
Check out sprites FTW.
http://css-tricks.com/css-sprites/
A quick definition of a sprite is a large image, containing several smaller images. So a 10x20 image, with the normal state being the upper 10x10, and the hover state being the lower 10x10. The user only sees the upper 10x10 due to the CSS:
.button
{
display: block;
width: 10px;
height: 10px;
background-image: url(to-image.gif);
background-repeat: no-repeat;
background-position: top left;
}
then on hover, it shifts to the bottom part of the image
.button:hover
{
background-position: bottom left;
}
Make the button element a fixed size, and set the .gif file as the element background in CSS. Then you can use a :hover class on the element to change the image. Here I'm using an "A" tag so it works on IE6.
<a class="button"></a>
.button {
display: block;
background-image: url(default.gif);
width: 100px;
height: 20px;
}
.button:hover {
background-image: url(hover.gif);
}