Customize all the Things!

How to brand Web and Windows UI

jason@jasonconger.com / jason.conger@splunk.com

http://www.JasonConger.com

@JasonConger

http://www.linkedin.com/in/JasonConger

About Me

History

History

History

E U L A

History

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. 

Demo |Changing pictures, buttons, and menus with Resource Hacker

Resource Hacker – http://www.angusj.com/resourcehacker/

Resource Editor – http://melander.dk/reseditor

Demo |Real world example – adding helpdesk numbers

Ctrl-Alt-Del CAD Pack – http://www.ctrl-alt-del.com.au/CAD_TSUtils.htm

How Microsoft .Net Works

MSIL(Microsoft Intermediate

Language)

ildasm / ilasm

Demo |Disassemble, change, and reassemble .Net applications

Resourcer - http://www.lutzroeder.com/

CSS

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" />

CSS :: Specificity Calculations

p {font-size: 12px}p.bio {font-size: 14px}

<p class=“bio”>Bio text</p>

Which one wins?

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.

CSS :: Specificity CalculationsSpecificity 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>

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.

Y U No work CSS!?!?!

CSS :: Layers

AJAX & REST

User Styles

Bootstrap & jQueryUI

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