Transcript

00:11     In this video I will be showing you how to replace the images inside a QT.

Here we can see that we still have the Reden images.  What we need to do is to locate all images through the QT.  Then find them in our files and replace them.   It is important to note, that we must replace them for the exact size and the exact format.   We must also be careful not to alter their name.

Let's take a look and see where all the images are located.

00:44     Here you can see our first image is a horizontal image.   We also have the small one at the top and this one at the side.   Look at the "about Vision X" tab.   We can see this tiny image needs changing.   And here,  we want to change this image too.

We will now exit the wallet and set to work changing the images.

01:13     Once the wallet has shut down go back to your master folder.  Navigate to src,  qt,  res,  images.   You will see there four folders.  Each folder contains a different style for the QT.   If you edit each folder to have different images,  the user could choose a different style each time they open the QT.   We will just be working with 1 style for this tutorial.   We will be making all the folders contain the same style,  that way we can be sure that the current style stays the same.

02:02     Inside the files you can see the current Reden images.   We have the 'about'  image,  and these are the main images you see when the wallet starts up.   And here is the horizontal image we saw before.   I have created some new images which are the same size, and the same format.   As I have named them the same as these image when I drop and drag them into the folder,  it will ask me if I want to replace.   Click replace.

02:36     For this one I have decided to change it to a square logo,  it will make it look better in the about tab.  I will need to delete the existing image and make sure my new one is called 'about. png'.   I can do that by right-clicking and choosing rename.

03:09     This one called 'wallet frame', is the background image I will leave this the same for this tutorial.    If you choose to change it you will need to locate the text in the CSS file and make it a different color.   By changing the background to a dark color, you will need to change the text color to white.   I will show you where this is located soon.

03:34     Next,  select all the new images,  right click and copy.   Move to the next folder,  and right click and choose,  'paste in the folder'.   Choose apply this action to all files.  Click replace.  Do this for the next two folders.

By doing this we have replaced all the images.  These files will now be identical.   So now we just have to check that we performed the action.

04:12     Happy with that,  let's move back to the master file.   You can see here that we have some Reden images.  We need to change them too.  I'm just going to drop and drag the replacements like I did before.   You may have to copy and paste from the previous file.  Whichever is easier for you.

04:36     So I have replaced the 'about image'.   I also need to replace the 'Splash' images and the 'horizontal logo'.   Basically, all I am doing is locating any Reden image and replacing it with my own.  Making certain the dimensions are the same.  Right click and choose properties if you want to know the size.

05:02     Okay,  that's done.  Now let's go to the 'Share' folder.  Open the folder and go to 'pixmaps'.   Here you will see some Reden images ranging in size from 16 x 16 to 256 x 256.   We need to create our own images of the same size.   You can do this with many online tools for free.   Or you can just use Photoshop or illustrator.   I've already done this so I will drop and drag into the folder.

05:37     I now need to rename the new images with the existing ones.  To do this,  I am just clicking on the current image.  Then clicking on rename.  Right click and copy the name.  Rename the old file to anything.   It doesn't matter as we will be deleting it soon.  Then rename the new image by right clicking.   Choose 'rename'.   Right click again and paste. Do this for all the images.

06:14     Now we have all the images renamed,  we can select all the old images and move them to the trash.  Now we need to replace that .ico image.   This is just our logo in a '.ico' format.  The image size is 48 by 48 pixels.   To make this just create a png and use an online png to ico converter.

I am also adding an image called bitcoin. png.  Its size is 256 x 256.

06:51     Now, let's navigate back to our 'res' folder.  This time we will be going to the folder called 'icons'.   You can see we need to replace two images.  The 'bitcoin.png' and the 'bitcoin.ico' image.  Be sure to drop the right ones in here.

07:23     Now let's move into each file replacing the images with our new ones.  We will do this exactly the same way as before here.   You can see we need to replace the. ico in the .png image.  We did navigate back to our icons folder and copy the images from there.  Paste the images and choose replace.

The next file is an Ico for the Testnet.

08:10     We just need to copy and paste the. ico file and rename the copied version.  Once it has been renamed,  delete the old image file.  We are going to do exactly the same with the .png  file for the Testnet.

09:06     After that is done we are going to select the images and copy them.  Pasting them into the other folders.   Make sure they have been replaced.   I can't stress enough how important it is to double-check what you are doing has worked. Later on down the line, we will be compiling.   It takes a while to complete.   If you miss one image,  you will have to go back and replace it.  And spend the time compiling again.   Check twice and compile once.

09:37     With that done,  let's take a look at the CSS folder.  This is where we can edit the text colors,  as well as other things like; border sizes, labels and tool bar locations.   Like I said before,  if you plan to change the background image to a darker image, you must change the text color to a color that will be visible.   For this video I will not change anything. If you are a creative person, you can play about with the color codes.

10:13     To find the images we may have missed, we need to run a search for ".png".   There is still one more,  so we will right click and choose properties.  We can then look at the image details to know its dimensions.   We can also look at its location in the folders.   You may need to expand the window to see the full file path.

10:42     Once found, we can navigate there.  If you have forgotten the size,  you can search its properties again.  I will be replacing this image with 256 by 256.  I don't actually think this image is used, but it's better to replace it just in case.

11:15     Once this final image is done,  we are going to compile.   Move back to the desktop.  Copy our commands to compile and open the master folder in the terminal again.   This time,  before we compile, we are going to "make clean".  Then enter.  This will clean up all the make files,  and when we compile again we will have all the new images in our QT.

Once that is done,  paste the commands to compile.  Then sit back and wait.

11:55     In our next video,  we will be opening up our new QT to see the changes we have made.