Themes

Themes

You will need basic knowledge of using css styles. If you were designing html pages with css, then you will be just fine. To fully utilize Qt stylesheets, you will also need some basic C++ knowledge.
There are, although, some differencies between html stylesheets and Qt stylesheets.

For more informations about Qt stylesheets, please see reference and examples.

Finding type of element

Styling every element depends on its Qt type. You can found it from source.

siteicon.cpp

SiteIcon::SiteIcon(LocationBar* parent)
   : ToolButton(parent)

SiteIcon inherits from ToolButton, and if you look at toolbutton.h, you will see that ToolButton inherits from QToolButton.

Using qproperty-*** properties

In addition to properties found in documentation, you can use also internal Qt properties and even some QupZilla specific.
Take a look at QToolButtom documentation. There are 4 properties (arrowType, autoRaise, popupMode, toolButtonStyle) and you can use them from stylesheets as qproperty-arrowType, qproperty-autoRaise, ...

Unfortunately, it is sometimes hard to found exact syntax how to write some Qt types in stylesheets.

QSize : 10px 10px
QString : "string"
int : 10
QIcon : url(path/to/icon.png)
QPixmap : url(path/to/pixmap.png)

Theme files

Theme must contain main.css and theme.info files. Without this files, theme won't be loaded and listed in Themes in Preferences.
Theme can also contain theme.license file for your licension and theme.png for theme icon (preferably 32×32px).

theme.info template:

Name: Name of your theme   
Author: Your name   
Short Description: Short description of your theme   
Long Description: Long description of your theme

You must NOT use new lines in description.

Theme hierarchy

Look at default themes, they will give you some basic idea.

Basically, it is only required to have theme.info, theme.license and main.css in theme root directory. You may, or may not, put all images in separate folder. But I encourage you to do so as it makes any further edits in theme much easier.

Testing in QupZilla

Theme folder must be moved into Themes location (found from Menu Help -> Informations about application -> Paths -> Themes). Theme will now appear in Theme list in Preferences.
Tip: You don't have to restart browser after you make some changes, just open Preferences and click on Apply.