I love to have a very compact theme for eclipse. It use to be simple with GTK2, but now with oxygen, I've more and more things that are broken and I'm trying to get an ok compact style with GTK3.
I read a lot of things on it and the main win was to just use "minwaita" theme. It helps a lot!
But I still have an horrible 16px width lost due to perspective swticher.
I found it thanks to the "e4 spies" plugin and I even succesfully set some properties as can be seen on the following image:
So, the problem is the green part. And I see that it is due to some SWT property, as reported by e4 css spy on the element:
CSS Properties:
eclipse-perspective-keyline-color: rgb(88, 88, 88);
handle-image: none;
color: rgb(255, 255, 255);
background-color: rgb(0, 255, 0);
CSS Classes:
MToolControl
Draggable
HIDEABLE
SHOW_RESTORE_MENU
CSS ID:
PerspectiveSwitcher
SWT Style Bits:
SWT.LEFT_TO_RIGHT
SWT.DOUBLE_BUFFERED
CSS Class Element:
org.eclipse.e4.ui.css.swt.dom.CompositeElement
SWT Layout: RowLayout {type=SWT.HORIZONTAL marginLeft=8 marginTop=6
marginRight=8 marginBottom=4 spacing=3 wrap=true pack=true
fill=false justify=false}
Bounds: x=1877 y=190 h=154 w=43
I tried to override that last part with margin-left and/or padding-left, with value of 0 and -8px, on it, on parent, on children. Nothing seems to work.
So, does anybody know if it's possible, and if so how to override the SWT Layout marginLeft and margingRight properties ?
Looking at the Eclipse CSS element definitions 'padding' values are only available on CTabFolder.
'margin-xxx' values can be set for any control but the Composite containing the control must be using GridLayout and a flag called CSSSWTConstants.MARGIN_WRAPPER_KEY must be set in the composite's data.
Since the composite you are looking at seems to be using RowLayout the margins can't be set (unless you write your own property handler).
Note: CSS element properties are defined using the org.eclipse.e4.ui.css.core.elementProvider extension point and are mostly in the org.eclipse.e4.ui.css.swt plugin. The 'margin-xxx' properties are dealt with by the org.eclipse.e4.ui.css.swt.properties.css2.CSSPropertyMarginSWTHandler class.
I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.
I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.
I'v based mine off this one.
<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">
In order to avoid using !important you could add your styles with jQuery and override them in that way.
$('ul.ui-autocomplete').css({
color: 'red'
});
Another solution would be to remove the style attribute from the ul.
$('ul.ui-autocomplete').removeAttr('style');
Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.
Ex.
ul.ui-autocomplete {
color: red !important;
}
The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.
The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.
Try to add margin-top and margin-left in your css
Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.
I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.
http://docs.jquery.com/UI/Menu#theming
You will be able to customize the look and feel of your dropdown in these class.
«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.
try using position or append to option...
you can refer here...
http://jqueryui.com/demos/autocomplete/#option-position
Check out the file jquery.ui.theme.css,
the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.
Using CSS, i can set the corner radius of the top corners of a tab in a tabnavigator:
<mx:Style>
.tabstyle
{
corner-radius: 10;
}
</mx:Style>
<mx:TabNavigator tabStyleName="tabstyle" />
However, I also want the bottom corners to have a radius. Does anyone know how to do that??
Assuming that the items you're putting in the TabNavigator are part of the standard Flex control set, you can have them use a custom programmatic skin that draws their background/border to match your desired look. Luckily, it's relatively easy to make a programmatic skin that grabs style information (like the corner-radius value) and uses that to control how the graphics are drawn -- just poke around the internet, and you're bound to find tutorials on skinning in Flex 3.
The answer by ZackBeNimble worked well, but I actually had the additional requirement that any layout should be easy to change. So what I've done now is set the skin of the tabs to an image that has the corner-radius I want.
<mx:Style>
.tabstyle
{
skin: Embed(source="../images/corner_radius_tabs.png", scaleGridLeft="44", scaleGridRight="45", scaleGridTop="1", scaleGridBottom="2");
padding-left: 44;
padding-right: 44;
}
</mx:Style>
<mx:TabNavigator tabStyleName="tabstyle" />
expanding on the answer from #ZackBeNimble
It might be easier to use degrafa:
skin component:
<degrafa:GraphicBorderSkin xmlns:degrafa="namespaceLovin">
<degrafa:geometry>
<degrafa:GeometryComposition>
<degrafa:RoundedRectangleComplex topLeftRadius="0" topRightRadius="0" bottomLeftRadius="5" bottomRightRadius="5"
height="{skinHeight}"
width="{skinWidth}"
fill="{someFill}" />
</degrafa:geometry>
</degrafa:GraphicBorderSkin>
you'll need a fill. also, skinWidth and height are degrafa internal vars that they added in the beta -- you'll have to override updatedisplaylist if you're using an older version to get the unscaledwidth and unscaledheight.
then in the component you're skinning, set this style: borderSkin="package.class.location"
Might be a bit quicker if you're not familliar with traditional programmatic skinning... i'm more a fan of el degrafa.
I'm trying to create a QPushButton that's just got an icon and a constant background color.
So that I can swap out the icon when the user clicks it, without any other apparent effects (this is for a roll-up/roll-down feature). I've added an entry like this to my stylesheet:
QPushButton.ToggleButton {
background-color: #8af;
}
and set the button's class to match, and this does indeed give me the look I want, except that when I click on it the background color changes to a lighter blue, which I don't want. What am I missing?
Edit: I guess I should mention I'm using Qt 4.5 and PyQt 4.6 to do this...
I know people like using stylesheets, but in this situation I think it is just as easy to make a custom button. Define a class that inherits from QAbstractButton, and override the paint() method. In the paint method, fill the rect with your desired background color, and then paint the current icon on top. It might be slightly more complicated if you want the border around the button as well, but not a lot.
Alternately, you could also look at the roles for QPalette, specifically QPalette::Light and QPalette::Midlight, which might be used to adjust the color of the button when pressed.
Answer
Try giving the button an ID with QObject::setObjectName and then applying the style with #idSelector?
In Python the code would probably look something like this:
button = QPushButton(self)
button.setObjectName("ToggleButton")
and stylesheet like this:
#ToggleButton:pressed {
background-color: #8af;
}
Further reading
The QFriendFeed example application at Forum Nokia is using Qt style sheets heavily to customize the UI.
I'm guessing doing background-color: #8af !important; would be too obvious so I'm assuming that doesn't work. It's worth a try if you haven't done it yet.
Otherwise, as noted in this question, there are specific states you can style. Try setting the same background color for the pressed state:
QPushButton.ToggleButton:pressed { background-color: #8af; }
Sorry if I misunderstood. Hope that helps.
open the button's stylesheet in Qt designer and try this:
QPushButton:pressed {
image: url(/path/to/your/file/fileName.png);
}
I'm having trouble getting jquery cycle to work when I have transparent png files in IE7
It's fine in Firefox and Chrome but in IE (version 7) I get a black colour where
the png transparency is during the fade.
Can this be made to work right?
unfortunately, though IE7 supports transparent PNG's, only one filter can be applied to an element at a time.
What is happening in your application is that IE7 is applying the alpha filter to your PNG, and is then asked by jQuery to apply another alpha filter for the fade. This has visible results like you said.
The way to get around this is to nest your png inside a container and then fade the container. Sort of like this:
<div id="fadeMe">
<img src="transparent.png" alt="" />
</div>
Another way to get around this is this simple jQuery plugin that i used because i couldn't change the structure. I would give attribution but I honestly cant remember where i found it.
/* IE PNG fix multiple filters */
(function ($) {
if (!$) return;
$.fn.extend({
fixPNG: function(sizingMethod, forceBG) {
if (!($.browser.msie)) return this;
var emptyimg = "empty.gif"; //Path to empty 1x1px GIF goes here
sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
this.each(function() {
var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
if (isImg) this.src = emptyimg;
else this.style.backgroundImage = "url(" + emptyimg + ")";
});
return this;
}
});
})(jQuery);
NOTE Originally the plugin was written to fix PNG transparency in IE6 but I modified it to work with your problem in IE6+.
Sidenote: I cant remember off the top of my head but i think that IE8 may have the same problem. Correct me if i'm wrong :)
This has been driving me mad for the last few days! Finally found a decent solution that works pretty well.
Add this to your CSS:
img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}
Credit: Dan Tello
Try adding
cleartype: true,
cleartypeNoBg: true
to your cycle jquery arugments.
It should be fine now :)
Coupled with the "wrap the image in a div / fade the div" tactic previously mentioned, using this line of CSS will fix the IE issue:
#div img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/bubble_intro_ph1.png');
}
For me it worked to just include the filter property with blank value in jQuery's .animate()function
Maybe this will work for you, too.
$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});
Internet Explorer 7 has some issues
with fading transparent PNGs. If
you've gotten to the this page because
you're seeing a black border where the
transparent edges in your PNG are,
then here are some tips for fixing the
problem:
Do not fade the element directly, but fade a parent container
holding the PNG. This may mean you
need to add a wrapper element to your
code.
Give the parent element a background color.
Lastly, if you're still having problems, try giving your parent element
the old zoom: 1 trick. Give the
parent element a style declaration of
zoom: 1 (either via CSS or an inline
style.) This will force IE to give the
element hasLayout—which tends to fix
all sorts of weird display issues in
IE.
Source: Fading a 24-bit transparent PNG in IE7+
Unfortunately, this means that it’s impossible to have transparent PNGs fading in over a transparent background, since you have to apply a background color to the parent element in order for the transition to go smoothly, i.e. without the black pixels. background: transparent won’t work (since transparent isn’t really a color). :(
I'm loading some png's dynamically into the DOM... this worked for me: http://www.twinhelix.com/css/iepngfix/
I had this problem with Drupal Views Slideshow using the Fade transition on transparent PNGs.
I stumbled across the following quasi-solution totally by chance. I don't know why it works, but the drawback is it essentially removes the cross-fade envelope in IE (it doesn't appear to visibly affect FF or Safari):
Views Slideshow will print something like the following as part of its output:
<div class="views-field-field-photo-fid">
<span class="field-content"><img height="433" width="834" src="http://devel.acupuncture2.polishyourimage.com/sites/acupuncture2.polishyourimage.com/files/pain_splash.png?1292552784" alt="" class="imagefield imagefield-field_photo"></span>
</div>
I hid views-field-field-photo-fid:
.views-field-field-photo-fid { width: 0px; }
Not perfect but maybe good enough till I find a better solution. You can take a look at the development site: http://acupuncture2.polishyourimage.com/
I'm also using Weezy's solution but doesn't play nice with IE7. The effects is even worse.
When assigning jQuery opacity-property to animate-function instead of Black-Border-Bug it generates a Black&White-Border-Bug :-P So I did the following for IE8;
In the head IE8 conditional comment with the HTC behavior on class .fixpng especially for htc.
<!--[if IE 8]>
<style type="text/css">
.fixpng {
/* this fixes transparency in IE8 ONLY! */
behavior: url(css/IE8pngfix.htc);
}
</style>
<![endif]-->
changed HTC-file to IE8pngfix.htc. Changed line 75 in the .htc to
!/MSIE
(8)/.test(navigator.userAgent
It's actually double-filtered, first IE conditional and then in htc, but what the hell!
I found that because htc could interfere with jQuery. Example;
[div id="tooltip" class="fixpng"]
Had to change $(div#tooltip).css({opacity: 0}) to display:none in CSS and set display: 'block' in hover-event.
So if anybody has found a working solution for IE7 I would be really happy. All the workarounds /hacks above don't work for me. About IE6 I don't care any second.
Ok so I took Darko Z suggestion about the div. In the end this is what I had to do to be able to get jQuery Cycler fadeing FX to work on IE with drupal 7. Instead of placing an tag I used divs and applied the.png to the background of the image along with
So I changed this:
<div class="fademe">
<a href="http://mysite/node/1">
<img class="firstTAB-phase2" src="http://mysite/IMG/bio_640x330.png" height="330px" width="640px" />
</a>
to this:
<a href="http://mysite/node/1">
<div class="fademe" id="TAB1"></div>
</a>
then in the css I did:
.fademe{ width:640px; height:330px;}
#TAB1{ background: #999 url(http://mysite/IMG/bio_640x330.png) no-repeat;}
and it works for now =D.
Hope it helps,
Defigo
I've got the ultimate solution for this damn IE-PNG-BlackBorderProblem when using fading or other jQuery effects. It is working in every IE > 6 even in IE8!:
Download jQuery's pngFix at: http://jquery.andreaseberhard.de/pngFix/
Modify this script by searching:
if (jQuery.browser.msie && (ie55 || ie6)) {
and replace it with:
if (jQuery.browser.msie) {
create a blank.gif (1x1 transparent gif)
put a:
.pngFix( {blankgif: '< relative location to the blank.gif >'} );
at the end of the line where you perform jQuery effects eg.
$('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500 ).pngFix( {blankgif: './library/img/blank.gif'} );
make sure that all pictures have been loaded before you use jQuery effects within your document ready function by using the .load event on the window DOM-Element:
$(document).ready( function() {
$(window).load( function() {
$('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500).pngFix( {blankgif: './library/img/blank.gif'} );
});
});
Load page in IE8 and feel happy ;-)
You can see it in action on http://www.claudworks.net
No ugly dark borders anymore around some animated PNGs in IE.
I found the fix to this bug, simply add the following to the wrapping div and to the img and other elements (e.g. h1,h2,p)
#div, #div img {
background:none !important;
filter:none !important;
}
This will fix it
This drove me mad for a couple of days and I finally stumbled across Unit's PNG fix. http://labs.unitinteractive.com/unitpngfix.php - works with Cycle and stopped me from switching to a JPEG solution!
It needs a bit of tinkering to target specific PNGs in the cycle div, but she works!
Hoping to help somebody else who encounters this problem:
I had transparent .png backgrounds (tiled) on a few divs on my page and when I activated the jquery cycle plugin, those transparent areas became screwy. They lost some of their transparency.
My solution was to simply make the tiles much bigger, so there really is no tiling at all. There is a small trade off for file size, but it fixed the problem.
I rewrited the fadeIn and fadeOut methods. It seems I don't get the black color on PNG image. No parent div is needed. Still you use as jQuery.
http://www.pagecolumn.com/javascript/fade.htm
If you can afford to sacrifice a bit of image quality, you can save the images as PNG-8 instead of PNG-24, then apply the fix mentioned by Prosini, i.e.
cleartype: true, cleartypeNoBg: true
and that should work. With PNG-24, I was still getting a bit of black border during the transitions.
While not specifically limited to the cycle plugin, this may help others. I came across this stream in my attempt to find a solution to .animate() transparent/translucent png files. I had the issue of a black border occurring in both IE7 and IE8. The images appear fine until I attempted to use JQuery to animate the opacity...
$('#my-png-img').stop().animate({opacity:0.0},3000);
I went thru a number of the solutions and unfortunately, none of them were ideal. While this stream is a bit dated, it may help someone else still searching to piece together a solution. I ended up using the Twin Helix solution (http://www.twinhelix.com/css/iepngfix/) with a bit of a tweak. I'm not a huge fan of .htc files but that's beside the point. I edited the iepngfix.htc file (~line 75) to trap for IE7 and IE8. I changed...
!/MSIE (5\.5|6)/.test(navigator.userAgent) ||
to
!/MSIE (5\.5|6|7|8)/.test(navigator.userAgent) ||
From there I followed the general instructions (see demo) including adding this bit to my CSS
/* IE PNG Fix */
img, div, a, input {
behavior: url(/_css/iepngfix.htc)
}
In addition and as others have mentioned, I had to nest my image in a container...
<div id="img-container"><img src="/images/my_semi_trans_png24.png" /></div>
Then I applied .animate() effect to the containing div. A bit constraining however, this was the only way I was able to get fading to work consistently. In one case, I even found that the transparency issue affected animating the opacity on a transparent .gif file. Oh and, whether I used .fadeIn()/.fadeOut rather than .animate() made no difference.
This is all pretty hectic stuff you're being asked to do. All very coding codingsky.
Here's my suggestion. IE will not allow a png background above a colored background to live in peace, like so...
<div style="background:url('something.png') no-repeat 0 0 scroll; position:absolute; z-index:2;"> </div>
<div style="background-color:#fa0237; position:absolute; z-index:1;"> </div>
Notice the first div is z-index 2(on top of 2nd div).
This can be simplified by putting your bgColor in the background css in the 1st Div and doing away with the second div. This solves the problem of the black areas. I had this problem myself.
The only way I can see you having a problem where you can't use this method is where you have the need to overlay two png background images over one another and fade simultaneously. Don't do that. You'll need to animate each one after one another.
Define a solid background color to your image:
.container img {
background-color: white;
}
Define the background-image css property of your image to its src attribute:
$('.container img').each(function() {
$(this).css('background-image', $(this).attr('src'));
});
Advantage: you don't need to change your markup
Disadvantage: sometimes applying a solid background color is not an acceptable solution. It normally is for me.
To solve this issue simply add:
"filter" : ""
to your .css() or .animate() and it'll fix a number of IE related issues.
The most reliable solution is to not use pngs in fading style animations in <IE9 browsers.
I tried nearly every "fix" and variation of a fix available that I could find for this issue and had no success. The solution I used was to export pngs that were going to have fading-style animations applied to them (ie, fadeIn/fadeOut) to gifs and do a conditional replacement for <IE9. Although the gifs don't look as good as pngs in a modern browser, they look a hell of a lot better than the way IE8 and earlier render pngs, and this method works reliably. You still get to display nice pngs for capable browsers and when the fix is applied nothing else gets broken; most of the png hacks are known to break other css properties. Your code might look something like this:
$(document).ready(function ()
{
if ($.browser.msie && parseInt($.browser.version, 10) < 9)
{
$(".myClass, .myOtherClass").each(function (val)
{
var backgroundValue = val.css("background-image");
backgroundValue.replace('.png', '.gif');
$(this).css("background-image", backgroundValue);
//you could just as easily do this with 'img' tags
});
}
}
Weezy's solution worked for me!
I tweaked the .htc file further, and changed this line:
var bgPNG = bgSrc.match(/url[("']+(.*\.png[^\)"']*)[\)"']/i);
to:
var bgPNG = bgSrc.match(/url[("']+(.*\.fixme.png[^\)"']*)[\)"']/i);
By doing this, the .htc script will ignore all .png files unless they end with .fixme.png (for example "transparant.fixme.png"). I intended this to speed up the script a little and ensure that only problem .pngs are fixed (the ones you must have transparant).
I use other .pngs which are not transparant, and therefore don't need this script to run against them.
The best fix is unitpngfix.
Include it in your script and be sure to provide the path to your 1px by 1px transparent gif. Voila!