Print Page - How to modify the look bitcoin GUI Client.

Title: How to modify the look bitcoin GUI Client.
Post by: chicodosbitcoin on April 11, 2018, 10:13:16 PM

I was playing in the file:

Code:

bitcoingui.cpp

but I still can't find where I could change the whole background of the GUI.

any ideas guys?

Title: Re: How to modify the look bitcoin GUI Client.
Post by: HCP on April 13, 2018, 03:14:11 AM

As per the README here: https://github.com/bitcoin/bitcoin/tree/master/src/qt

Quote from: https://github.com/bitcoin/bitcoin/tree/master/src/qt#forms

forms

Contains Designer UI (http://doc.qt.io/qt-5.9/designer-using-a-ui-file.html) files. They are created with [Qt Creator](#use-qt-Creator-as IDE), but can be edited using any text editor.

The UI stuff for the forms is in the "forms" folder here: https://github.com/bitcoin/bitcoin/tree/master/src/qt/forms

Follow the "Designer UI" link for more info (http://doc.qt.io/qt-5.9/designer-using-a-ui-file.html)

Title: Re: How to modify the look bitcoin GUI Client.
Post by: MiningCoinsPool on April 28, 2021, 08:44:33 PM

Quote from: chicodosbitcoin on April 11, 2018, 10:13:16 PM

I was playing in the file:

Code:

bitcoingui.cpp

but I still can't find where I could change the whole background of the GUI.

any ideas guys?

Hi, have you find out for changing the whole background? I'd like to make a white background instead of basic system default one (grey ugly for Windows)

Title: Re: How to modify the look bitcoin GUI Client.
Post by: NotATether on April 29, 2021, 09:01:09 AM

Quote from: MiningCoinsPool on April 28, 2021, 08:44:33 PM

Hi, have you find out for changing the whole background? I'd like to make a white background instead of basic system default one (grey ugly for Windows)

For the main window (and this only changes the main window) you open the overviewpage.ui file in the src/qt/forms folder in a text editor and right below the line <widget class="QWidget" ... line at the top, add the following lines:

Code:

     <property name="styleSheet">
      <string notr="true">QWindow { background-color: color:#FFFFFF; }</string>
     </property>

The color is in hex notation so in this case the background will be white.

Repeat this process for all the other dialogs whose background you want to change by editing their respective files in that folder.

Title: Re: How to modify the look bitcoin GUI Client.
Post by: MiningCoinsPool on April 30, 2021, 03:53:38 AM

Quote from: NotATether on April 29, 2021, 09:01:09 AM

Quote from: MiningCoinsPool on April 28, 2021, 08:44:33 PM

Hi, have you find out for changing the whole background? I'd like to make a white background instead of basic system default one (grey ugly for Windows)

Code:

     <property name="styleSheet">
      <string notr="true">QWindow { background-color: color:#FFFFFF; }</string>
     </property>

Hey, thank ive found out already, i use Qt Creator it 's much easier!

Unfortunately the .ui files from /qt/forms folder don't include the possibility of modifying the header menus.

I keep looking for!

Thank you for responding btw

Title: Re: How to modify the look bitcoin GUI Client.
Post by: NotATether on April 30, 2021, 10:54:39 AM

Quote from: MiningCoinsPool on April 30, 2021, 03:53:38 AM

If you are talking about the menu bar widget that looks like this:

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6vR49oOs6DHCROg0YlyN7hE0Yan2aXjXObw&usqp=CAU

Then you can skin that by replacing the style sheet with QMenuBar ... instead of QWindow.

Title: Re: How to modify the look bitcoin GUI Client.
Post by: MiningCoinsPool on May 01, 2021, 09:05:55 PM

Quote from: NotATether on April 30, 2021, 10:54:39 AM

Then you can skin that by replacing the style sheet with QMenuBar ... instead of QWindow.

Hi

Oh okkk, i didn't quite understand sorry.

What is QMenuBar? Is this a part of Qt Creator or something? And which file would it be to be modified, in the bitcoin source code for example?

Thanks

Title: Re: How to modify the look bitcoin GUI Client.
Post by: NotATether on May 02, 2021, 11:08:21 AM

Quote from: MiningCoinsPool on May 01, 2021, 09:05:55 PM

What is QMenuBar? Is this a part of Qt Creator or something? And which file would it be to be modified, in the bitcoin source code for example?

QMenuBar is the Qt widget that draws the long menu strips at the top of the screen (see above image).

You place a line like this in the same file, right between the <property> tag like this:

Code:

     <property name="styleSheet">
      <string notr="true">QMenuBar { background-color: color:#FFFFFF; }</string>
      <string notr="true">QWindow { background-color: color:#FFFFFF; }</string>
     </property>

QMenuBar class documentation for anyone interested in reading (https://doc.qt.io/qt-5/qmenubar.html)

Title: Re: How to modify the look bitcoin GUI Client.
Post by: MiningCoinsPool on May 02, 2021, 02:32:26 PM

Quote from: NotATether on May 02, 2021, 11:08:21 AM

QMenuBar is the Qt widget that draws the long menu strips at the top of the screen (see above image).

You place a line like this in the same file, right between the <property> tag like this:

Hi, thank you!

What i meant also is, what file exactly? Like you said " you place a line in the same file " But, which file?
That's the thing, there is no .ui file for the menu bar.

It is only mentioned in the bitcoingui.cpp, it explains in which order are placed the functions:

Code:

    // Configure the menus
    QMenu *file = appMenuBar->addMenu(tr("&File"));
    if(walletFrame)
    {
        file->addAction(openAction);
        file->addAction(backupWalletAction);
        file->addAction(signMessageAction);
        file->addAction(verifyMessageAction);
        file->addSeparator();
        file->addAction(usedSendingAddressesAction);
        file->addAction(usedReceivingAddressesAction);
        file->addSeparator();
    }

But the bitcoingui.cpp cannot contains any <property> functions which works only with XML code like in the .ui files :-[ :-[

Title: Re: How to modify the look bitcoin GUI Client.
Post by: NotATether on May 02, 2021, 07:59:00 PM

Quote from: MiningCoinsPool on May 02, 2021, 02:32:26 PM

Quote from: NotATether on May 02, 2021, 11:08:21 AM

You're actually not supposed to put it in the C++ file. You're supposed to place it in here https://github.com/bitcoin/bitcoin/blob/master/src/qt/forms/overviewpage.ui

Where is has these lines at the very beginning:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>OverviewPage</class>
 <widget class="QWidget" name="OverviewPage"> <-- insert code block below this line
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
...

Code:

insert below lines --v
    <property name="styleSheet">
      <string notr="true">QMenuBar { background-color: color:#FFFFFF; }</string>
      <string notr="true">QWindow { background-color: color:#FFFFFF; }</string>
     </property>

The way UI files are composed, is that they represent whole windows and dialog boxes (the kind that your window manager can minimize and maximize) So this includes the body of a window, the status bar, all the buttons and radios and input boxes inside the entire window, and so on. This means all these parts can be styled just for that window in the respective UI file.

The c++ files are just for connecting functions that run on button presses and displaying text.

Title: Re: How to modify the look bitcoin GUI Client.
Post by: MiningCoinsPool on May 03, 2021, 12:45:39 AM

Quote from: NotATether on May 02, 2021, 07:59:00 PM

Quote from: MiningCoinsPool on May 02, 2021, 02:32:26 PM

Quote from: NotATether on May 02, 2021, 11:08:21 AM

Code:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>OverviewPage</class>
 <widget class="QWidget" name="OverviewPage"> <-- insert code block below this line
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
...

Code:

insert below lines --v
    <property name="styleSheet">
      <string notr="true">QMenuBar { background-color: color:#FFFFFF; }</string>
      <string notr="true">QWindow { background-color: color:#FFFFFF; }</string>
     </property>

Hi! And thanks again for your reply

AAAaaah ok i see! Just by mentioning "QMenuBar " in the styleSheet function is enough for the code to know it will be the modifications going to the menubar directly?

This is awesome lol, ok i'll test it right away thanks man!

Title: Re: How to modify the look bitcoin GUI Client.
Post by: NotATether on May 03, 2021, 09:14:02 AM

Quote from: MiningCoinsPool on May 03, 2021, 12:45:39 AM

Just by mentioning "QMenuBar " in the styleSheet function is enough for the code to know it will be the modifications going to the menubar directly?

Yes.

Title: Re: How to modify the look bitcoin GUI Client.
Post by: MiningCoinsPool on May 06, 2021, 01:40:45 AM

Quote from: NotATether on May 03, 2021, 09:14:02 AM

Quote from: MiningCoinsPool on May 03, 2021, 12:45:39 AM

Just by mentioning "QMenuBar " in the styleSheet function is enough for the code to know it will be the modifications going to the menubar directly?

Yes.

Hi okk, sadly it didn't work, I keep looking for a solution, i'll share here everything i'll find :)

Bitcoin Forum

Bitcoin => Development & Technical Discussion => Topic started by: chicodosbitcoin on April 11, 2018, 10:13:16 PM