NEW (TUT) Style Modding the x64dbg

[Storm Shadow]

This is a small tut of how to mod the style of x64dbg with help of stylesheets.

First you have to go get the newest source.
https://github.com/x64dbg/x64dbg/
You extract the build to any location.

Then grap the prebuild version of Qtx64 that @mr.exodia made.

http://sourceforge.net/projects/x64dbg/files/qt/
install
both versions x64 and x86 one.


we dont need to build all of the debugger only the GUI
goto folder
x64dbg-master\x64_dbg_gui\Project\

open Qt creator lets use the x64 we just installed open taht, and open new project>>>x64_dbg.pro from
x64dbg-master\x64_dbg_gui\Project\

windows looks like this.

goto

projcts in the left side menu.Or use tools menu at top end then options. and then build and run.

Under Qt versions see if everything is correct.
Qt version is the one you install from.
http://sourceforge.net/projects/x64dbg/files/qt/

it uses the qmake.exe from bin folder of the qt installaion.
Its the qt version of make.exe.
if no errors
then
select kits in same window.

everything should look like this.(dont worry the red triangle is just a missing icon)

ok all done

we have to locate the designer files in the build, those have the extension *.ui
Go out of options and choose edit in left menu.
the designer files are always under forms.

Double click the click the mainwindow.ui
Your now in the GUI designer. of that ui file.

right clik on the GUI where the little dots are or in the very edge of the gui.
This is to ensure we dont make a stylesheet for a button or a object in the GUI.

we choose change stylessheets window.

Now this is where the fun begin.
welcome to the world off css.

You can mod so much stuff here that its usefull looking at the Qt stylesheet ref.
http://doc.qt.io/qt-4.8/stylesheet-reference.html

i have a style i use for most of my apps.
there are 100 ready css files on web.
but you can create your own with help of the qt stylesheet ref link

paste into stylesheet

QWidget {
background-color: #363636;
color: #ddd;
}
 
QCheckBox {
background-color: rgba(0, 0, 0, 0);
}
 
QTextEdit {
background-color: #2d2d2d;
border: 1px solid #363636;
}
 
QMenuBar, QMenuBar::item {
background-color: #444444;
color: #ddd;
}
 
QLineEdit {
border: 1px solid #474747;
min-height: 20px;
}
 
QLineEdit:hover, QLineEdit:focus {
border: 1px solid #00aaaa;
}
 
QTabBar::tab {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
									  stop: 0 #555555, stop: 1 #444444);
}
 
QTabBar::tab:selected {
background-color: #777777;
}
 
QTreeView::item {
font-size: 8px;
}
 
QHeaderView::section {
background-color: #444;
border-left: 3px solid #666;
 
}
 
QTableView {
border: 1px solid #474747;
}
 
QTableView {
background-color: #2d2d2d;
}
 
 
 
QScrollBar {
background-color: #363636;
width: 20px;
margin: 0 0 0 0;
}
 
QScrollBar::sub-line, QScrollBar::add-line {
background: none;
}
 
 
 
QScrollBar::add-page, QScrollBar::sub-page {
background: none;
}
 
QScrollBar::handle:vertical {
min-height: 20px;
}
 
QScrollBar::handle:horizontal {
min-width: 20px;
}
 
QScrollBar::handle {
background-color: #585858;
margin: 3px;
border-radius: 7px;
}
 
QToolBar {
border: none;
}
 
QPushButton {
border: 1px solid #077;
text-align: center;
min-height: 20px;
min-width: 50px;
 
padding: 0 6px 0 6px;
}
 
QPushButton:hover {
border: 1px solid #0aa;
}
 
QPushButton::text {
background-color: red;
}
 
QComboBox {
border: 1px solid #474747;
}
 
GraphQObject {
background-color: red;
padding: 100px;
}
 
ChooserContainer {
border: 1px solid green;
border-radius: 4px;
}
 
QPushButton {
color: #333;
border: 2px solid #555;
border-radius: 6px;
padding: 5px;
background: qradialgradient(cx: 0.3, cy: -0.4,
fx: 0.3, fy: -0.4,
radius: 1.35, stop: 0 #fff, stop: 1 #888);
min-width: 80px;
}
 
QPushButton:hover {
background: qradialgradient(cx: 0.3, cy: -0.4,
fx: 0.3, fy: -0.4,
radius: 1.35, stop: 0 #fff, stop: 1 #bbb);
}
 
QPushButton:pressed {
background: qradialgradient(cx: 0.4, cy: -0.1,
fx: 0.4, fy: -0.1,
radius: 1.35, stop: 0 #fff, stop: 1 #ddd);
}

nice.

we do this for all the *.ui gui files.

then we save all files under menu.

We then build the gui.dll in my case the x64gui.dll one, uses for x64dbg.exe.
build for x32dbg.exe the x32gui.dll

copy then

x64gui.dll to C:\x64dbg\x64
x32gui.dll to C:\x64dbg\x32


fire up X64dbg and see how your style turned out.

Done concrats you have made your first style mod of x64dbg.
This applies to almost all qt apps

there are several ways of using stylesheets using Qrc files etc.
But hardcoded stylesheets somehow works much better with qt apps.