Customize all the Things! How to customize Windows and Web applications.
•Download as PPTX, PDF•
0 likes•274 views
This document discusses how to customize user interfaces by modifying binaries and CSS. It provides tips on modifying copyrighted software for personal use versus commercial distribution. A demo shows changing pictures, buttons and menus in Windows applications using Resource Hacker. Another demo demonstrates adding helpdesk numbers by modifying application resources. The document also covers CSS topics like style sheet precedence, specificity calculations, and layers. It includes links to tools and articles for further reading on these customization techniques.
Report
Share
Customize all the Things! How to customize Windows and Web applications.
- 1. Customize all the Things! How to brand Web and Windows UI
- 4. History
- 5. History
- 6. History E U L A
- 7. History
- 8. EULA Notes If you modify copyrighted software for which you own a valid license for personal use, you should be OK. If you modify copyrighted software and then sell the new program as your own creation or distribute that software to the public without the copyright holder's permission, you can probably expect the copyright holder to bring legal action against you. If you modify copyrighted software for which your organization has valid licenses and then distribute that software to your end users, you may or may not be violating copyright law. Speak with your organization's legal department to protect yourself and the organization.
- 10. Demo | Changing pictures, buttons, and menus with Resource Hacker Resource Hacker – http://www.angusj.com/resourcehacker/ Resource Editor – http://melander.dk/reseditor
- 11. Demo | Real world example – adding helpdesk numbers Ctrl-Alt-Del CAD Pack – http://www.ctrl-alt-del.com.au/CAD_TSUtils.htm
- 15. How Microsoft .Net Works MSIL (Microsoft Intermediate Language)
- 16. ildasm / ilasm
- 17. Demo | Disassemble, change, and reassemble .Net applications Resourcer - http://www.lutzroeder.com/
- 21. CSS :: Sheet Precedence The last style sheet loaded overrides the others*<link rel="stylesheet" href="stylesheet1.css" type="text/css" /> <link rel="stylesheet" href="stylesheet2.css" type="text/css" /> <link rel="stylesheet" href="stylesheet3.css" type="text/css" />
- 22. CSS :: Specificity Calculations p {font-size: 12px} p.bio {font-size: 14px} <p class=“bio”>Bio text</p> Which one wins?
- 23. CSS :: Specificity Calculations div p.bio {font-size: 14px} div#sidebar p {font-size: 12px} <div id="sidebar"> <p class="bio">Bio text</p> </div> Which one wins? See the demo.
- 24. CSS :: Specificity Calculations Specificity is calculated by counting various components of your CSS and expressing them in a form (a,b,c,d). • Inline Style: a = 1 – (1,0,0,0) • <p style=“font-size: 12px”>…</p> • Id: b = 1 – (0,1,0,0) • <p id=“bio”>…<p> • Class, Pseudo class, Attribute: c = 1 – (0,0,1,0) • <p class=“bio”>…</p> • Element, Pseudo Element: d = 1 – (0,0,0,1) • <p>…</p>
- 25. CSS :: Specificity Calculations div p.bio {font-size: 14px} // (0,0,1,2) div#sidebar p {font-size: 12px} // (0,1,0,2) <div id="sidebar"> <p class="bio">Bio text</p> </div> Which one wins? See the demo.
- 27. Y U No work CSS!?!?!
- 28. CSS :: Layers
- 32. Further Reading Modifying binaries http://thelegendofrandom.com/blog/sample-page CSS Specificity http://www.vanseodesign.com/css/css- specificity-inheritance-cascaade/ General CSS - http://www.css-tricks.com
Editor's Notes
- To understand how to change things, we need to understand how they are built.
- Multiple programming languages like C#, VB.NET, C++ and more, can be used to create MSIL. The .Net framework understands this language.If we can change the MSIL resources, we can change the resulting program.
- Remember, this was for educational purposes.
- The easiest way to modify existing web interfaces is to modify or add your own Cascading Style Sheet (CSS). However, CSS rules can be tricky to understand and you will get frustrated if you do not understand them.
- Would you expect the text in your paragraph to be 12px or 14px? You can probably guess in this case it will be 14px. The second line of css (p.bio) is more specific than the first when it comes to your class=”bio” paragraph. However, sometimes the specificity isn’t so easy to see.
- The first line of css might seem more specific at first glance, but it’s actually the second line above that would be more specific to the font-size of your paragraph. Why is that?
- p: 1 element – (0,0,0,1)div: 1 element – (0,0,0,1)#sidebar: 1 id – (0,1,0,0)div#sidebar: 1 element, 1 id – (0,1,0,1)div#sidebar p: 2 elements, 1 id – (0,1,0,2)div#sidebarp.bio: 2 elements, 1 class, 1 id – (0,1,1,2)
- All elements are 3D in HTML. Using the specificity rules and z-index can help you determine what is actually shown.
- Adding information from other sources is easy with AJAX.
- What if you do not have control of the source and you still want to add some customizations? User styles can help you out. These can be deployed with AD as well.
- Adding information from other sources is easy with AJAX.