Eclipse css styling: override layout SWT.HORIZONTALE? - css

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.

Related

QPushButton stylesheet when setCheckable(true)

When I use
myButton->setCheckable(true);
There is -I don't know how to call it- a sort of grid :
Is it possible to not have this grid and here just my green background ?
Use the checked property:
QPushButton:checked{
background-color: ...
border: none;
}
Same applies for pressed if you want to alter that too.
Note: You can read all about the properties here (just search for QPushButton to find the properties that are part of the button. Removing the border seems to be necessary based on the documentation (otherwise the background colour might not be applied).

QComboBox become ugly when changing main windows background

Before changing:
After changing parent widget styleSheet property to this:
background-color: rgb(5, 34, 78);
I see this:
QComboBox become really different. What happens? How to use regular QComboBox on dark background?
I am using Qt 5.5 without QML.
You have to set it to the main window only
yourWindow->setStyleSheet("{background-color: #HexNumber}");
or tell the QComboBox to not have style:
yourWindow->setStyleSheet("QComboBox{background-color:none}");
or
yourWindow->setStyleSheet("QComboBox#ComboName{background-color:none}");
According to manual:
When a style sheet is active, the QStyle returned by QWidget::style()
is a wrapper "style sheet" style, not the platform-specific style. The
wrapper style ensures that any active style sheet is respected and
otherwise forwards the drawing operations to the underlying,
platform-specific style (e.g., QWindowsXPStyle on Windows XP).
If all you want is to change some colors, leaving selected style unchanged, the better solution would be to use QPalette.

QT Stylesheet for HLine/VLine color

I'm pretty new to this Qt thing and its whole stylesheet system. My background of HTML/CSS helps a little to understand the system, but a lot of things just happens for no apparent reason....or don't happen.
Anyway, the mystery of the HLINE and the VLINE and how to change the lines' color is just a mystery for me. I learned from other questions and various fora that it's linked to the QFrame elements. And I can change the color of the line if I just use something like
QFrame
{
color: red;
}
But this of course changes the color of tons of other things that uses a QFrame as well. I could of course go into the HLINE element and put color: red; in there and that works fine, but my app requires that I put everything in a single stylesheet that gets loaded into the app. So styling individual elements is not an option.
A solution would look something like
QFrame HLine, QFrame VLine
{
color: red;
}
QFrame[frameShape="4"] /* QFrame::HLine == 0x0004 */
{
color: red;
}
QFrame[frameShape="5"] /* QFrame::VLine == 0x0005 */
{
color: green;
}
HLine and VLine are tricky to style. It's worth taking a look at the "Detailed Description" section of the documentation. For a quick fix, I found that this set of rules allows customizing the appearance of such lines via stylesheet in a reliable and relatively clean manner:
QFrame[frameShape="4"],
QFrame[frameShape="5"]
{
border: none;
background: red;
}
This works regardless of the frameShadow property, which otherwise affects their appearance and the effect of style rules. Keep in mind that the width of the lines are not 1px by default -- this can be changed using the min-width, max-width, min-height or max-height properties, as appropriate.
For a more detailed overview of my findings, read along.
Most QFrames have the QFrame::Plain frameShape by default, but HLine and VLine's default frameShape is QFrame::Sunken. This means that they are not really lines, but thin boxes that contain a mid-line that's used to provide the 3D effect. From the documentation:
The mid-line width specifies the width of an extra line in the middle of the frame, which uses a third color to obtain a special 3D effect. Notice that a mid-line is only drawn for Box, HLine and VLine frames that are raised or sunken.
If you set the frameShape to Plain, this midline is still visible, and can be styled with the color property (note: that's not a background-color or border-color!)
But this doesn't work for a HLine/VLine that's left with the default Sunken appearance. One way to fix this could be to set separate styles for Plain and Sunken QFrames by using attribute selectors with the decimal values of the property enums (which are described in the documentation in hehadecimal), like so:
/* Reference (from doc.qt.io/qt-5/qframe.html#types):
* - frameShape[4] --> QFrame::HLine = 0x0004
* - frameShape[5] --> QFrame::VLine = 0x0005
* - frameShadow[16] --> QFrame::Plain = 0x0010 (default for most widgets)
* - frameShadow[48] --> QFrame::Sunken = 0x0030 (default for HLine/VLine)
*/
QFrame[frameShape="4"][frameShadow="16"],
QFrame[frameShape="5"][frameShadow="16"]
{
...
}
QFrame[frameShape="4"][frameShadow="48"],
QFrame[frameShape="5"][frameShadow="48"]
{
...
}
but since the styles that work for HLine/VLine with QFrame::Sunken also work for those with QFrame::Plain, it's usually a waste to do so. I show them above for educational value only about how to use attribute selectors.
The best approach is to treat the QFrame as the box that it is, and either (1) set border-top or border-right coupled with a max-height: 0px (or max-width for a VLine), to ensure the inside of the box doesn't take up space in the layout; or (2) use a background color coupled with border: none (in which case, max-height/width should be 1 or larger, otherwise the QFrame is invisible). The latter is the solution I'd recommend, as shown in the first code block above.
Hope this helps!
According to QDarkStyleSheet issue, You could use:
QFrame[width="3"], QFrame[height="3]
These selectors, they seem to work cross-platform, and they are unlikely to change.
Probably better than using enum values as ints, as they are likely to change with Qt versions, and line styling are not, as they fulfill certain requirements.
but my app requires that i put everything in a single stylesheet that
gets loaded into the app.
You can use Conflict Resolution. Suppose that you have a QMainWindow object with lots of widgets on it . Set these style sheets for the maindionw style sheet :
QLabel#label{
background-color: rgb(255, 170, 255);
}
QPushButton#pushButton{
color: rgb(0, 0, 255);
}
QFrame#line{
background-color: rgb(0, 170, 255);
}
The first css just changes a QLabel name label on your mainwindow and set its back color to rgb(255, 170, 255). The next will change text color of a QPushButton named pushButton to (0,0,255);. The third one change property of a line.Lines are just a QFrame.
So the solution that I can offer is to place your css in a file and then load this file using QFile and QTextStream and then set the contents of the file for css of your main winodw or main widget using setStyleSheet ( const QString & styleSheet ) function. or If you are using creator just right click on your main window and select change stylesheet and then paste your css. But bear in mind that you should use conflict resolution.
You can leave Qt's hlines and build up your own very easy. For frames you want looks like hline add property "class" as "HLine" (for example), in designer or in c++ code:
frame->setProperty("class", "HLine")
.
Then, you can define in main view's or in global app stylesheet something like this:
QFrame.HLine {
border: none;
border-bottom: 2px solid red;
}
and you will get horizontal two pixels red line.

Make the modal transparency background absolutely transparent.

I am using the below given code to try to make the transparency 0, but I still am unable to make the background become absolutely transparent.
<mx:Style>
global {
modalTransparencyBlur: 0;
modalTransparency: 0.0;
modalTransparencyColor: black;
modalTransparencyDuration: 0;
}
</mx:Style>
How can I fix this.
Regards
Zee
Have you tried setting the backgroundAlpha to 0?
backgroundAlpha is a property of your modal component, rather than a css style.
See here for some backgroundAlpha examples:
Flex Examples: backgroundAlpha
Also, a useful tool for playing around with styles and visual properties is FlexSpy. It's a lot like Firebug, in that you can modify styles and properties in real time while your app is running. Download here: FlexSpy

How can I make a Qt widget ignore style sheets set on parent widgets?

When adding a QComboBox control in Qt Designer, I get a terrible looking, non-native control:
On digging further, it turns out that two of the parent controls, QParentWindow and QStackedWidget, have style sheets that QComboBox is inheriting. If I delete the custom styles, then I get a native QComboBox like the one on the left.
How can I have QComboBox (and widgets generally) NOT inherit parent styles? Or, how can I create a style for, say, QParentWindow, and do it so that it's local only and does not cascade?
I don't think you can prevent it from cascading. But by using more specific selectors in your stylesheet, maybe you could define properties only for your QParentWindow class or specific object.
you need to define a style and then assign it to that object:
QString settingStyle = " QGroupBox#groupBoxSettings {\
background-color: rgb(248,248,248);\
border: 1px solid rgb(170, 170, 255);\
border-radius: 3px;\
border-color:rgb(170, 170, 255);\
}";
ui->groupBoxSettings->setStyleSheet(settingStyle);
here "groupBoxSettings" is the object name. This way any thing inside the groupbox they'll have their own style.

Resources