Themes

Themes

To create a theme for QupZilla you will need a basic knowledge of using css styles. If you have already designed html pages with css, you will be just fine. You will achieve much better results by using Qt stylesheets. Here, you will also need some basic C++ knowledge.
There are, although, some differences between html stylesheets and Qt stylesheets.

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

Finding type of element

The styling options of each element depend on their Qt type. You will find it in the source code.

siteicon.cpp

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

The element SiteIcon inherits its properties from ToolButton. If you look at toolbutton.h, you will see, that ToolButton inherits its properties from QToolButton.

Using qproperty-*** properties

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

Unfortunately, it is sometimes hard to find the exact syntax about 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

A theme must contain the main.css and theme.info files. Without these files, a theme will not be loaded and listed in Preferences -> Themes.
A theme can also contain a theme.license file for licensing and a theme.png as a 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

Please do NOT add new lines to the description.

Theme hierarchy

Look at the default themes included in QupZilla to get some basic ideas for creating themes.

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

Testing in QupZilla

The theme folder must be moved into the themes location (found from Menu Help -> Configuration Information -> Paths -> Themes). Your theme will now appear in the Theme list in Preferences.
Tip: You do not have to restart QupZilla after you made some changes. Just open the Preferences and click on Apply.