Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Tutorial: Editing Google Chrome Theme

  1. #1
    Join Date
    Sep 2008
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Tutorial: Editing Google Chrome Theme

    Hey all,

    Thought I'll write a quick tutorial on how to edit the Google Chrome default theme. This is probably not the best method but it is a simple one I have used successfully and can act as a starting point for new people wanting to edit themes themselves. So lets get started,

    Tools Required:
    *Resource Hacker (free download from http://angusj.com/resourcehacker/
    *Image editing utility capable of editing png files. (M$ Paint will do for now)

    So extract resource hacker to a folder on your pc. Then find out your windows username that you are logged in as an find the chrome theme default.dll file.

    This can usually be located in:

    c:\document and settings\*username here*\Local Settings\Application Data\Google\Chrome\Application\0.2.149.27\Themes\d efault.dll

    **Do note that the version numbering can change current version is 0.2.149.27 I believe**
    **Also if you can't seem to locate the Local Settings folder make sure that you can see hidden files and folders, this can be changed by going to Tools --> Folder Options --> View and changing the radio button to: Show hidden files and folders **

    Copy this file to the same folder where you extracted the reshacker.exe.

    1. Start up Reshacker and navigate to File --> Open...
    2. Select the default.dll and click Open
    3. Now expand the BINDATA folder and right click on it.
    4. Select Save [ BINDATA ] resources ...
    5. I recommend creating a new folder such as ChromeImages and as filename type in definitions and hit Save
    6. Reshacker will extract 551 resources to the specified folder once that is done you may close the resource hacker utility.
    7. Navigate to your Chrome Images folder and open a command line prompt
    8. On the command line prompt if not already at your new ChromeImages folder navigate to that location.
    9. then run the following command: ren *.bin *.png
    This will rename all the data files extracted to png files.

    10. Now open the PNG files you wish to edit with your favourite image editing tool and make the changes required.

    11. Open the definitions.rc file in notepad
    12. Now lets say you edited a file called Data_272.bin what you want to do is in the definitions.rc file find the corresponding 4 digit code which in case of this file is 9380

    Make a note of all of the files you have edited and the corresponding reference numbers.

    13. Copy all the images you have edited to the same folder where reshacker.exe and default.dll are.

    14. This step is a little tedious but run the following command line commands for each of the files you have edited:

    Reshacker.exe -addoverwrite default.dll, default.dll, Data_XX.png, BINDATA, XxxX,

    You need to run this command for each image you have edited and replace Data_XX.png with the corresponding file so in my case Data_272.png and XxxX with the 4 digit reference code which is in my case 9380 so for me the above line would be:

    Reshacker.exe -addoverwrite default.dll, default.dll, Data_272.png, BINDATA, 9380,

    This will create a file called ResHacker.log which you may open in notepad to see whether any errors were encountered. If everything went fine it will state Commands Completed at the end of the file.

    Now take a backup of the original default.dll which you have stored in:

    c:\document and settings\*username here*\Local Settings\Application Data\Google\Chrome\Application\0.2.149.27\Themes\

    Close down Chrome and replace the default.dll file located in the above folder with the newly created one residing in your resource hacker folder.

    Restart Chrome and enjoy the fruits of your labour


    *******
    Please note that I take no responsibility at all for any damage caused by following the above instructions and you do so at your own risk.

    Also I am aware that the above instructions are not comprehensive and may have errors. I have quickly typed this up at work and will make a better version once I get home. I will also be creating a set of tools to help make editing all of this a nicer experience for everyone

    I would like to thank Vhanla at this forum for the Reshacker command line and all other posters who contribute.

    Any questions, suggestions, fixes, tips, tricks, flame, negative feedback etc please reply to this post. Moderators feel free to move, edit, delete or whatever with this post as you see fit I just ask that you leave it as intact as possible.

    Enjoy and lets see some great themes being created.

    .:FxN:.


  2. #2
    Join Date
    Sep 2008
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Tutorial: Editing Google Chrome Theme

    I found the following tool nice for extracting the "Other Binary Resources" (i.e. the .png's)

    http://www.nirsoft.net/utils/resources_extract.html

    Select the default.dll in Filename/Wildcard: and the output location in Destination Folder: and tick the Other Binary Resources box.

    Using the above tool, you don't have to refer to the definitions.rc file, as the file names that are generated get the correct BINDATA number.

    This replaces what is done in step 4 and eliminates the need for steps 11 and 12 in the above tutorial.

    Should speed things up a bit

  3. #3
    Join Date
    Sep 2008
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Tutorial: Editing Google Chrome Theme

    Thanks for this fxn.
    I'll be sure to give this a try.

  4. #4
    Join Date
    Sep 2008
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Tutorial: Editing Google Chrome Theme

    Updated to include short instruction for viewing hidden files and folders as some people have had trouble seeing the Local Settings folder which is hidden by default in Windows.

  5. #5
    Join Date
    Sep 2008
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Tutorial: Editing Google Chrome Theme

    fxn, how do you navigate to a folder in the command line prompt

  6. #6
    Join Date
    Sep 2008
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Tutorial: Editing Google Chrome Theme

    Easiest way to get there quickly would be to create a file called test.bat and in the file add the following line:
    cmd

    then just execute that file in the folder you want to be in, otherwise you would have to use normal CD command. The above method works brilliantly though.

  7. #7
    Join Date
    Sep 2008
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Tutorial: Editing Google Chrome Theme

    Ermm, let's just say, hypothetically, that you're speaking to an idiot here. How does one create a bat file? haha.

  8. #8
    Join Date
    Sep 2008
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Tutorial: Editing Google Chrome Theme

    1. Open notepad
    2. type in cmd
    3. Go to save as
    4. Browse to the directory where you have resource hacker etc and save the file as test.bat make sure that on the drop down list you have all files selected rather than .txt files.

    Now if you go to the directory and double click on the test.bat it should get you to the command prompt...or you wait till later when i should have some tools to do this with or try using Vhanla's theme creator

  9. #9
    Join Date
    Sep 2008
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Tutorial: Editing Google Chrome Theme

    Bingo, I got it, thanks.
    For some reason I was trying to create the bat file with the command prompt screen. Didn't think of using notepad duuuh.

  10. #10
    Join Date
    Sep 2008
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Tutorial: Editing Google Chrome Theme

    Whats the top bar called?

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search Engine Optimization by vBSEO 3.6.0