It is currently Fri Aug 07, 2026 8:24 am


All times are UTC - 5 hours [ DST ]



Post new topic Reply to topic  [ 3 posts ] 
Author Message
 Post subject: CSS/Qt conundrum
PostPosted: Sun Nov 27, 2016 11:07 pm  (#1) 
Offline
GimpChat Member

Joined: Jul 17, 2016
Posts: 293
Location: Arlington, TX
This may not be strictly CSS, it's a Qt stylesheet for my browser. But it follows CSS syntax pretty closely. I'm hoping somebody here can help me sort it out. I thought this would be the best sub-forum for it.

This is a trimmed-down picture of a theme I'm working on for the browser I run, QupZilla. It's a mozilla/Qt hybrid of sorts.Image
The red is just a fill-in to help highlight what's going on. And the normal background is NSFW :mrgreen: :oops:
I've gotten all the menu buttons, text windows, tabs, and bars to be transparent so the picture is largely uninterrupted.
I've added a slight background to most of the items so they stand out a bit without being obtrusive.
I've gotten the tabs and navigation buttons to respond to hovering.

But I still have a few things I just can't sort out. And I'm betting it's because there are things missing from the stylesheet. I've tweaked just about everything I can find in the sheet. By now, it's a patchwork of my additions, the original bits, and stuff I've removed without thinking.

Per the numbers on the picture:
1) I can't get the menu items to respond to hovering. I use the exact same syntax I used on the tabs, but nothing changes.
2) I can't find the bookmarks to do anything with them. The only mention of the bookmark bar is where I can set the background transparent. I'm sure the rest of it is in another stylesheet or the CPP somewhere. But this sheet can override that, I think.
3) I can change the "add tab" icon, but I can't find any way to change the background on it like I haveon everything else.
4) This is the one that is driving me absolutely insane-- I can't get rid of this one little line running across the picture. I know it's attached to the tab bar because when I move the tabs to the bottom the line goes with them. But I have tried everything I can think of to get rid of it. I have no idea where it's coming from.

There is one other problem that isn't in the picture. There are bits in the stylesheet that don't show up. Mainly, the buttons to scroll through the tabs when tabs run off the screen. But that may be because the browser doesn't call for them. I don't know how this all works behind the scenes.

Here's the stylesheet as it stands at the moment.
/****************************
* Default Theme * * Author: nowrep *
  ****************************/

*[html-link-look="true"] {
    color: palette(link); text-decoration: underline;
}


QTabWidget::tab-bar {
left: 5px; /* move to the right by 5px */
border: none;
margin: none;
padding: none;
}

/* Style the tab using the tab sub-control. Note that
it reads QTabBar _not_ QTabWidget */

QTabBar::tab {
background: rgba(058, 045, 045, 0.3);
border: 1px outset #8e7f7f;
border-radius: 6px;
min-width: 8ex;
padding: 3px;
}

QTabBar::tab:hover {
background: rgba(180, 170, 170, 0.8);
}

QTabBar::tab:selected {
border-color: #8f8080;
background: rgba(160, 145, 145, 0.5);
}

QTabbar::tab:hover:selected {
background: rgba(150, 140, 140, 0.7);
}

QTabBar::tab:!selected {
margin-top: 2px; /* make non-selected tabs look smaller */
}

/*MainWindow*/
#mainwindow
{
background-image: url(images/background.png); background-position: top right; background-repeat: no-repeat; background-color: transparent;
border: none;
}
#mainwindow-menubar
{
background-color: transparent; border: none;
}

#mainwindow-menubar::item
{
color: black; spacing: 1px; padding: 2px 6px; background: rgba(58, 45, 45, 0.3); border: 1px outset #8e7f7f; border-radius: 4px;
}

#mainwindow-menubar::item:hover
{
background: rgba(180, 170, 170, 0.8);
}

#mainwindow-menubar::item:pressed
{
    background-color: transparent; border: none; border-radius: 4px;
}

#mainwindow-statusbar
{
    background-color: transparent; border:none;
}

#statusbar-ip-label
{
    color:*USER-TEXT-COLOR*; padding-right: 5px;
}

/*NavigationBar*/
#navigationbar
{
    qproperty-layoutMargin: 2; qproperty-layoutSpacing: 3; border: none;
}

#navigationbar QSplitter::handle
{
    background-color: transparent;
}

#navigation-button-back
{
    qproperty-icon: url(images/navigation-back.png);
}

#navigation-button-next
{
    qproperty-icon: url(images/navigation-forward.png);
}

#navigation-button-stop
{
    qproperty-icon: url(images/navigation-stop.png);
}

#navigation-button-reload
{
    qproperty-icon: url(images/navigation-reload.png);
}

#navigation-button-home
{
    qproperty-icon: url(images/navigation-home.png);
}

#navigation-button-addtab
{
    qproperty-icon: url(images/navigation-addtab.png);
}

#navigation-button-supermenu
{
    qproperty-icon: url(images/navigation-supmenu.png);
}

#navigation-button-exitfullscreen
{
qproperty-themeIcon: "view-restore";
}

ToolButton[toolbar-look="true"]
{
qproperty-iconSize: 16px 16px;
qproperty-fixedsize: 25px 25px;
border: 1px outset #8e7f7f;
border-radius: 4px;
background: rgba(58, 45, 45, 0.3);
}

ToolButton[toolbar-look="true"]:hover
{
background: rgba(180, 170, 170, 0.8);
}
/*TabWidget*/
#tabwidget-button-opentabs
{
    qproperty-icon: url(images/tabs-list-button.png); qproperty-fixedsize: 20px 27px;
}

#tabwidget-button-closedtabs
{
    qproperty-themeIcon: "user-trash-full"; qproperty-fixedsize: 22px 25px;
}

#tabwidget-button-addtab
{
    qproperty-icon: url(images/navigation-addtab.png); qproperty-fixedsize: 25px 27px;
}

#tabbar-button-right
{
    qproperty-icon: url(images/tab-right-arrow.png); qproperty-fixedsize: 15px 25px;
}

#tabbar-button-left
{
    qproperty-icon: url(images/tab-left-arrow.png); qproperty-fixedsize: 15px 25px;
}

/*IconProvider*/ IconProvider {
    qproperty-bookmarkIcon: url(images/star.png);
}

/*LocationBar-address field*/
#locationbar
{
    background: rgba(58, 45, 45, 0.3); border: 2px outset #8e7f7f; border-radius: 4px; color: black; padding-right: -2px; padding-left: -2px; padding-top:
    -2px; padding-bottom: -2px; qproperty-fixedheight: 25; qproperty-leftMargin: 35;
}

#locationbar-bookmarkicon
{
    margin-bottom: 2px; qproperty-pixmap: url(images/starg.png);
}

#locationbar-bookmarkicon[bookmarked="true"]
{
    qproperty-pixmap: url(images/star.png);
}

#locationbar-siteicon
{
    border-image: url(images/siteicon-bg.png); margin-left:2px; qproperty-fixedsize:35px 25px;
}

#locationbar-siteicon[secured="true"]
{
    border-image: url(images/siteicon-bg-secure.png);
}

#locationbar-goicon
{
    margin-bottom:2px; qproperty-pixmap: url(images/gotoaddress.png);
}

#locationbar-down-icon
{
    qproperty-pixmap: url(images/arrow-down.gif);
}

#locationbar-autofillicon
{
    qproperty-pixmap: url(images/key.png);
}

/*WebSearchBar*/
#websearchbar
{
    background: rgba(58, 45, 45, 0.3); border: 2px outset #8e7f7f; border-radius: 4px; color:black; padding-right: -2px; padding-top: -2px; padding-bottom:
    -2px; qproperty-fixedheight: 25; qproperty-leftMargin: 34;
}

#websearchbar-searchbutton
{
     margin-bottom:2px; margin-left: 2px; qproperty-pixmap: url(images/search.png);
}

#websearchbar-searchprovider-comobobox
{
    border-image: url(images/websearchbar-bg.png); padding-left:-6px; margin-left:2px; qproperty-fixedsize: 35px 25px;
}

/*BookmarksToolbar*/
#bookmarksbar QToolButton
{
    border-image: url(images/transp.png); border-width: 0px; height: 15px;
}

/*SideBar*/
#sidebar
{
    background: transparent;
}

#sidebar-splitter::handle
{
    background-color: transparent;
}

/*SourceViewer*/
#sourceviewer-textedit
{
    border: none;
}

/*SourceViewerSearch*/ SourceViewerSearch #lineEdit[notfound="true"] {
    background: #ff6666;
}

/*SearchToolbar*/ SearchToolBar #lineEdit[notfound="true"] {
    background: red;
}

/*Click2Flash*/
#click2flash-frame
{
    border: 1px solid red;
}

#click2flash-toolbutton
{
    background: url(images/flash.png) no-repeat; background-position: center; border: none;
}

#click2flash-toolbutton:hover
{
    background: url(images/flashstart.png) no-repeat; background-position: center; border:none;
}

/*AboutDialog*/ AboutDialog #label {
    background: url(images/semi transp.png);
}

AboutDialog #textBrowser {
    border:none; margin-top: -2px; /* Workarounding rounded border on KDE */
}

/*DesktopNotification*/ DesktopNotification {
    background: transparent;
}
DesktopNotification #frame {
    border: 2px solid darkblue; border-radius: 20px; background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 #e4ecf1, stop:1 #d3e5f1);
}

DesktopNotification #heading {
    font: bold; font-size: 13pt;
}

/*BrowsingLibrary*/ BrowsingLibrary #tabs {
    qproperty-bgPixmap: url(images/semi transp.png);
}

BrowsingLibrary #frame {
    background: url(images/semi transp.png);
}

/*Downloads*/ DownloadItem #fileName {
    font-size: 13pt;
}

DownloadManager #list {
    border: none; background: rgba(80, 60, 60, 0.4);
}

/*JavaScript Dialogs*/
#jsFrame
{
    background: url(images/semi transp.png);
}

QFrame[js-frame="true"] {
    border: 1px solid black; border-bottom: 0px; background-color: white;
}

\QFrame[js-frame2="true"] {
    border: 1px solid black; border-top: 0px; background-color: #f3e8e8;
}
Like I said, it's a cobbled-together frankenstein of code. I've pasted in bits from blogs and from official Qt docs trying to get this the way I want it. Feel free to point out anything I can do to tidy it up. I plan to release this theme into the wild once I'm finished. It would be nice to have correct code rather than what I have now.

_________________
Just a short while ago I was a complete idiot when it comes to GIMP. Today, after many hours of practice, reading, and watching tutorials, I am proud to say I am an incomplete idiot.

Image


Share on Facebook Share on Twitter Share on Orkut Share on Digg Share on MySpace Share on Delicious Share on Technorati
Top
 Post subject: Re: CSS/Qt conundrum
PostPosted: Mon Nov 28, 2016 2:41 am  (#2) 
Offline
GimpChat Member

Joined: Jul 17, 2016
Posts: 293
Location: Arlington, TX
I may be narrowing down the problem with that horizontal line. I switched desktops to get a different look at it. I was using a tiling window manager, so there was no way to minimize the window. Anyhow, the darker GTK theme on the "regular" desktop resulted in that line being a thin (1px) dark line instead of a thicker light line. I'm still not sure what that means exactly. I have Qt set to pick up colors from GTK on this desktop. So it could be the same problem just picking up the color instead of using a default image or something. Even minimized, there's no sign of that line belonging to anything.

The bookmark bar is also affected by the switch. On the tiling desktop the buttons looked straight out of Windows 95 when I hovered over them. Now they look more in line with the GTK theme. The rest of the layout is unaffected.

_________________
Just a short while ago I was a complete idiot when it comes to GIMP. Today, after many hours of practice, reading, and watching tutorials, I am proud to say I am an incomplete idiot.

Image


Top
 Post subject: Re: CSS/Qt conundrum
PostPosted: Mon Nov 28, 2016 3:06 am  (#3) 
Offline
GimpChat Member

Joined: Jul 17, 2016
Posts: 293
Location: Arlington, TX
Here's a closeup of the offending line.Image
It looks to be part of a 1px line that goes around the entire interior of the frame. But that's probably coincidence. Still, maybe that has something to do with padding, or margin, or something.

_________________
Just a short while ago I was a complete idiot when it comes to GIMP. Today, after many hours of practice, reading, and watching tutorials, I am proud to say I am an incomplete idiot.

Image


Top
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC - 5 hours [ DST ]



* Login  



Powered by phpBB3 © phpBB Group