1. Sascha Wener

2.  Definition from Microsoft Developer Network: “A theme is a unified set of design elements and color schemes that you apply to pages to give them a consistent and attractive appearance.” 11/25/2014 2

3. 3

4. 1. Switchable CSS classes Switching class in top-level DOM element to change properties of underlying elements 2. Change class attribute from webpage 3. Save selected theme and apply when browsing to another page However: There are many ways to achieve it 11/25/2014 4

5.  Assign a class to a top-level DOM-element that contains all underlying elements 11/25/2014 5

6.  Create a CSS file which contains different superordinate classes for your themes: 11/25/2014 6

7.  Create Webpages that contain class names which are used in your CSS file  Use classes because element IDs are generated within placeholders ◦ Cannot be accessed through CSS or JS if ID unknown ◦ Elements on outside of the placeholders could use IDs for CSS 11/25/2014 7

8.  Add a Dropdown list or similar control to your Master page  Register an Event for Javascript 11/25/2014 8

9.  Include a Javascript on your Main Master Page or use and embedded one  To query the DOM we will use the jQuery library  Moreover we will use a library based on jQuery to safe and load cookies ◦ No need to reinvent the wheel ◦ Advantage: Makes the Javascript straightforward and easy to understand 11/25/2014 9

10.  Download the libraries: ◦ http://jquery.com/ http://jquery.com/ ◦ https://github.com/carhartl/jquery-cookie https://github.com/carhartl/jquery-cookie  Upload them to your project directory  Include them in your Main Master Page: …  Order is important due to dependencies 11/25/2014 10

11.  The JS code to change class from „body“ 11/25/2014 11

12.  “$(document).ready(function)” is important: „A page can't be manipulated safely until the document is ‘ready.’ jQuery detects this state of readiness for you. ” 11/25/2014 12

13.  The JS code to save and load theme state 11/25/2014 13

14.  Some ASP.NET controls are heavily “translated” to HTML when they are delivered by the webserver  Controls like DetailsView consist of various different HTML elements: linklink ◦ Would need to format every single HTML element since JS and CSS does not run on the server 11/25/2014 14

15. Solution:  Place several identical objects with different predefined themes from VS and utilize visibility in CSS  Visible by default in Webpage aspx file 11/25/2014 15

16.  Different types of layouts can be used ◦ Static (”always positioned according to the normal flow of the page”) ◦ Fixed („An element with fixed position is positioned relative to the browser window”) ◦ Relative („A relative positioned element is positioned relative to its normal position.“)normal position ◦ Absolute (“An absolute position element is positioned relative to the first parent element”)  Everything can be managed in CSS 11/25/2014 16

17.  To center the content of a HTML div tag one can use the "text-align: center“ CSS attribute 11/25/2014 17

18.  This also works with several contained HTML controls 11/25/2014 18

19.  Alternatively one can also use „margin: 0 auto” for the div tag instead of text-align  Important that the div tag has a valid with that should be larger than the contained elements ◦ Otherwise layout wrap-around 11/25/2014 19

20.  You can use margins and sizes with % as an indication of size  Do math or just try different values to position the elements  If the elements should utilize variable size within the div it is important to tell them to use 100% of their available space ◦ Otherwise they dont apply the size properly  Use „display: inline-block“ to prevent incorrect wrap-around 11/25/2014 20

21. 11/25/2014 21

22.  Set ChildenAsTriggers=„true“ in Update Panel ◦ Most easy way to trigger events of all subordinate controls  AutoPostBack=„true“  Define OnSelectedIndexChanged handler in DDL 11/25/2014 22

23. 1. Locate top-level form tag 2. Find placeholder for Masterpage 3. Get Control you want to alter 4. Apply Text from DDL to the target-controls‘ „Text“ attribute 11/25/2014 23

24.  http://msdn.microsoft.com/en- us/library/dd588769(v=office.11).aspx http://msdn.microsoft.com/en- us/library/dd588769(v=office.11).aspx  http://jquery.com/ http://jquery.com/  https://github.com/carhartl/jquery-cookie https://github.com/carhartl/jquery-cookie  http://learn.jquery.com/using-jquery- core/document-ready/ http://learn.jquery.com/using-jquery- core/document-ready/  http://www.w3schools.com/css/css_positioni ng.asp http://www.w3schools.com/css/css_positioni ng.asp  http://stackoverflow.com/questions/104953 /position-an-html-element-relative-to-its- container-using-css http://stackoverflow.com/questions/104953 /position-an-html-element-relative-to-its- container-using-css 11/25/2014 24