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.

The red is just a fill-in to help highlight what's going on. And the normal background is NSFW
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.