St.TextureCache overflowing St.Bin in gnome-shell JS - gnome-shell

I'm trying to make a gnome-shell extension where I need to load an image from an URL / URI.
I can do that with St.TextureCache and that works great. I then try to put it in an St.Bin container, but the texture overflows the container (as shown in the screenshot). Is there a way (CSS maybe?) such that this does not happen?
The reason I want that is to give the image rounded corners, with the idea that I can give rounded corners easily to the St.Bin with CSS but it seems I can't style the texture directly. If there is another way to round the corners of the image that is also fine
A screenshot showing the problem. The St.Bin has a red border, but the texture clearly overflows it
The relevant code:
let file = Gio.File.new_for_uri(url_to_picture);
let bin = new St.Bin({
style_class: 'icon-custom',
y_expand: false,
y_align: Clutter.ActorAlign.START,
visible: true,
});
let texture = St.TextureCache.get_default().load_file_async(file, -1, 120, 1, 1);
bin.set_child(texture);
and CSS:
.icon-custom {
border: 3px solid red;
border-radius: 20px;
}

Related

Using a CSS image sprite for hover effect without the scrolling animation

I'm using a sprite image to change the background on hover and click (the .keepImage class is for the click). It all works, but when the background picture changes it scrolls over to the correct position. Is there a way to do it without the scrolling motion?
JS:
<script>
$(document).ready(function(){
$("a.doing").click(function() {
$(this).siblings(".keepImage").removeClass("keepImage");
$(this).addClass("keepImage");
});
});
</script>
CSS:
a.doing {
width: 229px;
height: 202px;
margin-right: 8px;
background: url(http://localhost:8000/img/manifesto/spr_doing.png) 0 0;
}
a.doing:hover, a.doing.keepImage {
background: url(http://localhost:8000/img/manifesto/spr_doing.png) -229px 0;
}
I think, somewhere in your css you have the transition property specified. Usually when you have a transition property specified like this: "transition: all 500ms ease;", the background position will change with a scrolling effect. If you want to prevent this scrolling from happening, then you can either remove the transition property completely, or you can use transition only for the properties you want to animate like - border, color etc.. but not background. If you can somehow provide a link to your page, or give the html mark up and css, it will help. Thanks.

Wordpress: Make Text max-width:660px an images max-width:1000px

I would like to have in Wordpress the normal text width 660px and the images between text wider than the text (max-width:1000px).
How can i handle that?
You could give images negative left and right margins. In order to work, though, they shouldn't be max-width, but just width:
.container {
width: 660px;
}
img {
width: 1000px;
margin-left: -170px;
margin-right: -170px;
}
Another alternative, use a grid system and great a new .row or whatever your grid system calls it for each image, with columns that are wider than the one used for the text.

How can I make the expand/collapse triangles bigger?

Kendo UI treeview triangles are too tiny for my users.
I want to make them bigger.
If those are the only icons that you want to make bigger, you can try creating two images with the desired size and then define the following styles:
#grid .k-hierarchy-cell > .k-icon.k-plus {
background-image: url('/images/plus.png');
background-position: 0 0;
width: 32px;
height: 32px;
}
#grid .k-hierarchy-cell > .k-icon.k-minus {
background-image: url('/images/minus.png');
background-position: 0 0;
width: 32px;
height: 32px;
}
Here I create an image and saved in /images/plus.png for expanding the details and size 32x32 pixels and another saved in /images/minus.png for collapsing it.
With the CSS selector I'm limiting its scope to a grid which id is grid.
You will need to manually edit 'Default/sprite.png' located in you styles folder together with other kendo styles. This post should get you started >> http://www.kendoui.com/forums/ui/general-discussions/using-the-kendo-ui-theme-builder.aspx#Bi_T-0dZtEuYNyT-ypDIlA , use attached *x2.psd sprites or edit files further in photoshop.

IE8 Transparent PNG problems in Nivo Slider using background-image for Prev and Next Buttons

I'm using the nivo slider on our site
It's working great on all devices except for IE8 on XP, which due to the infamous IE transparent png issue, I get black borders around the prev and next buttons on rollover. The prev and next buttons need to be transparent pngs as they have a drop-shadow and are placed on top of transitioning images.
The Arrows
The Problem IN IE8 XP
The HTML
<div class="nivo-directionNav">
<a class="nivo-prevNav" style="display: none;"></a>
<a class="nivo-nextNav" style="display: none;"></a>
</div>
The CSS
.nivo-directionNav a {
position:absolute;
z-index:9;
cursor:pointer;
}
/* the arrows are taken from a single sprite with a standard and active image
for prev and next with the background-position changed on rollover */
.nivo-prevNav, .nivo-nextNav {
width: 80px;
height: 100%;
}
.nivo-prevNav {
left:0px;
background: url("images/nivo_4_arrows.png") no-repeat 0 0;
}
.nivo-prevNav:hover {
background: url("images/nivo_4_arrows.png") no-repeat -80px 0;
}
I have tried to implement this javascript as a fix:
var i;
for (i in document.images) {
if (document.images[i].src) {
var imgSrc = document.images[i].src;
if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
}
}
}
...as well as this plugin found on a similar post on this forum but neither have proved successful.
Been wasting lots of time on this so I'd really appreciate anyone that can shed some light on a fix!
Try to insert the following lines into 'nivo-slider.css' (a style for no theme specified):
.nivo-slice
{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)" !important;/* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF) !important;/* IE6 & 7 */
zoom: 1;
}
It works for the slice effect, but put this for the other effects, however in my case this solution changes the fade effect into a simple changing pictures effect (without fading). Maybe it'll help you.
This javascript script will not work with images on backgrounds, only "img src"...
there are 2 ways to solve:
use "img src" and put "position:absolute" and positioning the image in the background.
OR
Make an if IE and instead of background-image use:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='link-to-image');
keep using backgroung-image for other browsers..

fix image size without re-sizing

I have a div which is width:500px; and height:170px;
The div contains a jquery slideshow which gets random images from my database and displays them.
Problem is that the images are uploaded by users and can be any aspect-ratio/any size.
I need the images to fit the div without being resized using
style='height:x; width:x;
Basically, I want all images to be displayed properly and in acutal quality.
I don't want to restrict which sizes of images can be uploaded as they as displayed in other parts of the site in full size/quality.
Can any provide a solution?
You could use CSS to set the size of the images in the slideshow without necessarily changing the aspect ratio of the image.
set the height of the image to the height of the slideshow container
make the width auto so it maintains its aspect ratio
set a max-width so it doesn't get wider than the slideshow
slideshow.img{
height:170px
width:auto;/*maintain aspect ratio*/
max-width:500px;
}
Note the images might be slimmer than the slideshow if the original size is small.
You should be able to use CSS's max-width property. You won't want to specify the width or height if you do this.
Your HTML:
<div id="yourContainer">
<img src="imagePath" />
</div>
And your CSS:
#yourContainer {
width: 500px;
height: 170px;
}
#yourContainer img {
max-width: 100%;
max-height: 100%;
}
This won't centre your image inside of the container, but it should get the job done for you.
I have figured out how to accomplish image resize keeping aspect ratio and centering the image with simple piece of CSS code as follow:
width: auto !important; /*Keep the aspect ratio of the image*/
height: 140px !important;
margin: 0 auto 1em auto; /*Center the image*/
Hope this help someone :)
Use the below combination of height and width
style="height:271px; max-height: 336px; max-width:336px; width: 263px;"

Resources