Navigation

    Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Search
    1. Home
    2. Tags
    3. css
    Log in to post

    • UNSOLVED QTabWidget style the top buttons...
      General and Desktop • qtabwidget css qstyle qstylesheet • • Dariusz  

      8
      0
      Votes
      8
      Posts
      60
      Views

      @Ketan__Patel__0011 said in QTabWidget style the top buttons...: @Dariusz said in QTabWidget style the top buttons...: FUSION If you want to set "FUSION" Style for your application add this line in your main function qApp->setStyle(QStyleFactory::create("Fusion")); Hey Yeah that's the style im using. I'm trying to reproduce in css the button style now with black outline, then the white "ping" of border and gradient background. Are there any more style presets I can download? I know there is also windows/windowvista ones but... more ? There seem to be a large preset/plugin system build for styles but I dont see any on web available for use... mhmm ?
    • SOLVED How to set StyleSheet for an specific label in QMessageBox?
      General and Desktop • c++ stylesheet css qmessagebox • • Muhammad Mirab Br.  

      8
      0
      Votes
      8
      Posts
      317
      Views

      Thanks @Bonnie, You are AWESOME!
    • SOLVED QTableWidget's width behaves strangely when applying any CSS
      General and Desktop • qtablewidget css width • • SnuggleKat  

      6
      0
      Votes
      6
      Posts
      190
      Views

      @A-A-SEZEN said in QTableWidget's width behaves strangely when applying any CSS: Check QTableWidget font, before css and after. Just changed the font to Consolas. Anyways, adding ui->tableWidget_memory->horizontalHeader()->resizeSections(QHeaderView::ResizeMode::ResizeToContents); to my code solved this problem.
    • UNSOLVED Confused about how style sheet inheritance works
      Qt WebKit • stylesheet qwebview css qt 4.8 • • define-qt  

      5
      0
      Votes
      5
      Posts
      1167
      Views

      @define-qt You can be more specific using the name of object as identifier in style sheet sintaxe QLineEdit#ObjectName { border:0; }
    • UNSOLVED CSS: dynamic properties and (pseudo) states
      General and Desktop • css properties states • • tgru  

      1
      0
      Votes
      1
      Posts
      399
      Views

      No one has replied

    • SOLVED Customizing QMainWindow by style sheet
      General and Desktop • stylesheet qmainwindow css qt5.8 • • eDeviser  

      5
      0
      Votes
      5
      Posts
      7477
      Views

      @eDeviser said in Customizing QMainWindow by style sheet: Yes, this helps! I see the QMainWindow holds a QWidget which is set as cetralWidget. So It would be necessary to set the QMainWindow as centralWidget or to apply my css for the QWidget. Thank you for this hint. You have to apply your css in your qwidget ! Your css should be : centralWidget { background: yellow; width: 10px; /* when vertical / height: 10px; / when horizontal */ } centralWidget:hover { background: red; }
    • UNSOLVED Can we use CSS on QPushButton
      General and Desktop • stylesheet qt 5.7 css • • Swapnil_Shelke  

      6
      0
      Votes
      6
      Posts
      5394
      Views

      @Swapnil_Shelke To create those kind of buttons you need more than CSS. You must go into button's paintEvent and then draw what you need (there are 3 simultaneous animation BTW) : #include <QtCore/qvariantanimation.h> #include <QtCore/qvariant.h> #include <QtWidgets/qabstractbutton.h> #include <QtWidgets/qapplication.h> #include <QtWidgets/qlayout.h> class Animation : public QVariantAnimation { Q_OBJECT public: Animation(QObject *parent = 0) :QVariantAnimation(parent) { setTargetWidget(qobject_cast<QWidget*>(parent)); setAutoUpdateEnable(true); } void setAutoUpdateEnable(bool a) { if (targetWidget()) { a ? QObject::connect(this, SIGNAL(valueChanged(QVariant)), targetWidget(), SLOT(update())) : QObject::disconnect(this, SIGNAL(valueChanged(QVariant)), targetWidget(), SLOT(update())); } } QWidget *targetWidget() const { return _target; } void setTargetWidget(QWidget *w) { _target = w; } QVariant value() const { return _value; } void setValue(const QVariant &variant) { if (_value == variant) return; _value = variant; } protected: void updateCurrentValue(const QVariant &value) override { setValue(value); } private: QVariant _value; QWidget *_target = nullptr; }; class SampleButton :public QAbstractButton { public: struct ButtonStyle { qreal border_radius = 4.0; QColor background_color = QColor("#f4511e"); QColor text_color = QColor("#ffffff"); int font_size = 28; QString font_family = "Arial"; int width = 200; int padding = 20; qreal hover_padding = 25; int duration = 600; QIcon icon = QIcon("next.png"); // http://www.flaticon.com/free-icon/double-angle-pointing-to-right_25358 @16x16 qreal pixmap_padding = 20; }; SampleButton(const QString &text, QWidget *parent = 0) :QAbstractButton(parent), _textEff(new Animation(this)), _pixmapEff0(new Animation(this)), _pixmapEff1(new Animation(this)) { setFont(QFont(_st.font_family, _st.font_size)); setText(text); } QSize sizeHint() const override { return QSize(_st.width, _st.padding + fontMetrics().height() + _st.padding); } protected: void paintEvent(QPaintEvent *) override { QPainter p(this); // draw background p.setPen(Qt::NoPen); p.setBrush(_st.background_color); p.setRenderHint(QPainter::Antialiasing, true); p.drawRoundedRect(rect(), _st.border_radius, _st.border_radius); p.setRenderHint(QPainter::Antialiasing, false); // draw text if (!text().isEmpty()) { p.setFont(font()); p.setPen(_st.text_color); p.setRenderHint(QPainter::TextAntialiasing, true); p.drawText(QRectF(rect().x() - _textEff->value().toReal(), rect().y(), rect().width(), rect().height()), Qt::AlignCenter, text()); p.setRenderHint(QPainter::TextAntialiasing, false); } // draw icon if (!_st.icon.isNull()) { p.setRenderHint(QPainter::SmoothPixmapTransform, true); auto s = _st.icon.availableSizes().at(0); p.setOpacity(_pixmapEff0->value().toReal()); p.drawPixmap(QPointF(rect().right() - (_st.pixmap_padding * 2) - _pixmapEff1->value().toReal(), rect().center().y() - s.width() / 4), _st.icon.pixmap(s)); } } void enterEvent(QEvent *e) { _textEff->setStartValue(0.0); _textEff->setEndValue(_st.hover_padding); _textEff->setDuration(_st.duration); _textEff->setEasingCurve(QEasingCurve::OutCubic); _textEff->start(); _pixmapEff0->setStartValue(0.0); _pixmapEff0->setEndValue(1.0); _pixmapEff0->setDuration(_st.duration); _pixmapEff0->setEasingCurve(_textEff->easingCurve()); _pixmapEff0->start(); _pixmapEff1->setStartValue(0.0); _pixmapEff1->setEndValue(_st.pixmap_padding); _pixmapEff1->setDuration(_st.duration); _pixmapEff1->setEasingCurve(_textEff->easingCurve()); _pixmapEff1->start(); QWidget::enterEvent(e); } void leaveEvent(QEvent *e) { _textEff->setStartValue(_st.hover_padding); _textEff->setEndValue(0.0); _textEff->setDuration(_st.duration); _textEff->start(); _pixmapEff0->setStartValue(1.0); _pixmapEff0->setEndValue(0.0); _pixmapEff0->setDuration(_st.duration); _pixmapEff0->start(); _pixmapEff1->setStartValue(_st.pixmap_padding); _pixmapEff1->setEndValue(0.0); _pixmapEff1->setDuration(_st.duration); _pixmapEff1->setEasingCurve(_textEff->easingCurve()); _pixmapEff1->start(); QWidget::leaveEvent(e); } private: ButtonStyle _st; Animation *_textEff = nullptr; Animation *_pixmapEff0 = nullptr; Animation *_pixmapEff1 = nullptr; }; int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget *dialog = new QWidget; dialog->setWindowFlags(Qt::FramelessWindowHint); QHBoxLayout _Layout; dialog->setLayout(&_Layout); SampleButton *sb = new SampleButton("Hover"); _Layout.addWidget(sb); dialog->show(); return app.exec(); } #include "main.moc"
    • UNSOLVED Application wide stylesheet with different styles for menu and context menu?
      General and Desktop • stylesheet css qmenu styles • • dentist  

      6
      0
      Votes
      6
      Posts
      3886
      Views

      You can define an accessibleName for your objects and distribute different StyleSheets. either via the designer or QWidget::setAccessibleName(const QString &name); e.g. QPushButton{ background-color: blue; } QPushButton[accessibleName="SpecialButton1"] { background-color: red; }
    • SOLVED Using unic Stylesheet file and Qt Designer
      Tools • stylesheet qtdesigner css qss • • Romain C  

      9
      0
      Votes
      9
      Posts
      3423
      Views

      @Romain-C Well it still confused me sometimes :)
    • UNSOLVED QComboBox with transparent dropdown
      General and Desktop • qt5 stylesheet qcombobox css drop-down • • Sebbo  

      5
      0
      Votes
      5
      Posts
      3482
      Views

      @VRonin With the provided code the whole dropdown list will be invisible. Do you know how to keep the items unaffected?
    • SOLVED Using Qt private CSS parser
      General and Desktop • qt5 css parser qcssparser • • IMAN4K  

      12
      0
      Votes
      12
      Posts
      758
      Views

      @Devopia53 Excellent answer :) Not recommended... Yeah know it and i make these files local in my project (not include from <private/qcssparser_p.h>): qcssscanner.cpp qcssparser_p.h qcssparser.cpp Thank you
    • UNSOLVED Implement stylesheet feature with CSS file for custom widgets
      General and Desktop • stylesheet css qss parse parser • • IMAN4K  

      14
      0
      Votes
      14
      Posts
      569
      Views

      @raven-worx Oh.. Sorry i think that was qt-bug (getter return invalid) but now it's work For last question ! Could i use qcssparser_p.h for retrieving values for my purpose ? (i'm a lover of parsing :) ) Thanks.
    • UNSOLVED How to use QGraphicsScene::setStyle()?
      General and Desktop • qgraphicsscene css qss • • LoPiTaL  

      4
      0
      Votes
      4
      Posts
      2370
      Views

      @LoPiTaL you could still combine both styles in one CSS. You just need to adapt your selectors. E.g. you could set an property to your widgets and only apply certain styles to them.
    • UNSOLVED Rotating Rich Text using CSS for Document Column Headings
      General and Desktop • css rich text • • mikeosoft  

      1
      0
      Votes
      1
      Posts
      566
      Views

      No one has replied

    • UNSOLVED HighDPI Displays Font Scaling / CSS
      General and Desktop • css scaling high dpi • • the_  

      1
      0
      Votes
      1
      Posts
      448
      Views

      No one has replied

    • UNSOLVED QWebView - Pb to display HTML table with rowspan with QT5.5
      General and Desktop • qt5.5 qwebview css html table • • Morgar  

      1
      0
      Votes
      1
      Posts
      933
      Views

      No one has replied

    • UNSOLVED QTextCursor and CSS: Problem with text-indent property
      General and Desktop • css qtextcursor • • Tyras  

      15
      0
      Votes
      15
      Posts
      4379
      Views

      Done. https://forum.qt.io/topic/64346/qtextdocument-and-multithreading
    • UNSOLVED How to style QTreeView items by role with CSS ?
      General and Desktop • qtreeview model-view css qtwidgets styles • • Zylann  

      9
      0
      Votes
      9
      Posts
      6819
      Views

      I finally managed to get custom colors. I gave my QTreeView an object name to be able to write this in CSS: m_treeView->setObjectName("MyTreeView"); m_treeView->setStyleSheet("QTreeView#MyTreeView::item {color: none;}"); basically now my model controls text color through Qt::ForegroundRole regardless of the application's CSS. I feel like it's the wrong place to put theming, but it works for me at the moment. Well... until we decide to have different themes :-°
    • UNSOLVED Qt Stylesheets to inherit previous attributes.
      General and Desktop • stylesheet qt4 css qss • • Streakflash  

      5
      0
      Votes
      5
      Posts
      1661
      Views

      Which border are you referring to ? Can you post an image of how you would like your QTabBar to look exactly ?
    • UNSOLVED QtDesigner for Android - I'm not getting what I see at all, padding has no effect
      Mobile and Embedded • android designer css • • MXXIV  

      2
      0
      Votes
      2
      Posts
      1087
      Views

      Try to load another style of Qt. QApplication a; a.setStyle(QStyleFactory::create("Fusion")); Maybe then it will be more obedient.
    • UNSOLVED CSS padding inside QTabWidget tabs hiding text
      General and Desktop • qtabwidget css qtabbar • • drdydx  

      6
      0
      Votes
      6
      Posts
      1686
      Views

      @Chris-Kawa Maybe you can ping @AndyS again so we can take a look on it. I had no time for it to think about an own patch.
    • Photoshop CSS to Qt Stylesheet
      General and Desktop • qtcreator stylesheet gui css style guistyle photoshop • • Filippo_Rossi  

      1
      0
      Votes
      1
      Posts
      772
      Views

      No one has replied

    • Use LESS or similar to generate a Qt Stylesheet
      General and Desktop • css qss • • melevine  

      2
      0
      Votes
      2
      Posts
      1760
      Views

      @melevine Hi and welcome Since the parser of QSS knows nothing of CSS from LESS / Compass, it can not be used directly. http://doc.qt.io/qt-4.8/stylesheet-syntax.html As far as I can see both uses css/extended css and knows nothing of Qt. So I guess its a no. sadly. But you can somewhat easy use "variables" for colors if you hax it a bit you self http://stackoverflow.com/questions/10898399/using-variables-in-qt-stylesheets by writing some code to do some string replacements. https://forum.qt.io/topic/17318/solved-using-variables-in-style-sheets-qss/2
    • Css in middle of a text makes "\n" not work
      General and Desktop • qlabel css font settext • • roseicollis  

      1
      0
      Votes
      1
      Posts
      486
      Views

      No one has replied

    • Parsing Cascading Style Sheet like file
      General and Desktop • css parsing parse • • Ralf  

      4
      0
      Votes
      4
      Posts
      2063
      Views

      @Ralf Oh, :( Well in that case I would download source code for whole Qt and have a look of what they use for the qss (css) parsing and see if some could be reused. ( i have no idea) Also http://www.codeproject.com/Articles/20450/Simple-CSS-Parser is a good read (IMO) for toughs about writing such parser. Good luck
    • QtWidgets: Is it possible to apply flat main window style (Visual Studio-like) via QSS?
      General and Desktop • css qtwidgets qss • • Violet Giraffe  

      15
      0
      Votes
      15
      Posts
      7838
      Views

      @Chris-Kawa I just have to say this is hilarious and spot on. I did this same thing in wxWidgets a couple years ago and this was my experience verbatim. In the end I went on to use the same basic technique that is described here: https://github.com/deimos1877/BorderlessWindow. Thanks for making me feel less stupid.
    • Qt CSS :!hover seems to override defaults
      General and Desktop • stylesheet css styles styling hover negation • • Huulivoide  

      1
      0
      Votes
      1
      Posts
      1118
      Views

      No one has replied

    • How to add a mouse hover property in style sheet in qt designer widgets
      General and Desktop • qt designer css • • John R  

      3
      0
      Votes
      3
      Posts
      20172
      Views

      @sneubert , Thanks a lot it works really nice to me, great help!!!!!
    • Handle pixel density in css.
      General and Desktop • stylesheet css scaling resolution • • PharmAccess  

      8
      0
      Votes
      8
      Posts
      3924
      Views

      CSS lets you use relative length units, see this: http://www.w3schools.com/cssref/css_units.asp As suggested in that link before, em and rem create perfectly scalable sizes. Don't let the name and description fool you: although the size refers to the size of the M character, they can be applied to width, height and any other CSS property as well. Also, if you use a main CSS class like this: main_class { width: 1em; height: 1em; font-size: 10em; } and all the other objects (or CSS styles) are childs of this class: main_class.div { .... } // or something like this in HTML <BODY class="main_class"> <div class="other_class">something</div> </BODY> // in C++ the BODY widget would the parent of the div widget You can then only change the main_class sizes, and all the child items of that class will scale accordingly to their parent. Suppose you have this CSS for that div element before: other_class { width: 10em; height: 4em; font-size: 1.3em; } and suppose that the main_class CSS is this: main_class { width: 3em; height; 3m; font-size: 10em; } then the real sizes of that other_class are actually: width: 30 em; // 3 * 10 height: 12 em; // 3 * 4 font_size: 13 em; // 10 * 1.3 because they have been scaled by 3, 3 and 10ems, respectively. Using ems is for sure the best way in CSS to scale items proportionally. I hope this helps :)
    • View CSS
      General and Desktop • stylesheet css • • whitecastleroad  

      4
      0
      Votes
      4
      Posts
      1290
      Views

      AFAIK, no, you didn't miss anything. Maybe KDAB's GammaRay has an option for that
    • QMdiSubWindow with transparency and opacity
      General and Desktop • css transparency qmdisubwindow qmdiarea opacity • • scastiello  

      6
      0
      Votes
      6
      Posts
      2664
      Views

      Yes of course
    • [Solved]Select QListWidgetItem with css property selector.
      General and Desktop • qlistwidget css qlistwidgetitem icons selectors • • Socapex  

      7
      0
      Votes
      7
      Posts
      4909
      Views

      For that kind of things the combo: QListView QStringListModel QIdentityProxyModel << Customize the icons here would do it in a simpler way. As for items being QObject derived classes, rather not. The various QXXXItem classes must be as lightweight as possible since there can be several thousands of them and QObject has a cost and constraints. Except maybe in a few corner cases there would be no real benefit to have it there for the common usage.