Sascha Wener
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
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
Assign a class to a top-level DOM-element that contains all underlying elements 11/25/2014 5
Create a CSS file which contains different superordinate classes for your themes: 11/25/2014 6
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
Add a Dropdown list or similar control to your Master page Register an Event for Javascript 11/25/2014 8
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
Download the libraries: ◦ ◦ Upload them to your project directory Include them in your Main Master Page: … Order is important due to dependencies 11/25/
The JS code to change class from „body“ 11/25/
“$(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/
The JS code to save and load theme state 11/25/
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/
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/
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/
To center the content of a HTML div tag one can use the "text-align: center“ CSS attribute 11/25/
This also works with several contained HTML controls 11/25/
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/
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/
11/25/
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/
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/
us/library/dd588769(v=office.11).aspx us/library/dd588769(v=office.11).aspx core/document-ready/ core/document-ready/ ng.asp ng.asp /position-an-html-element-relative-to-its- container-using-css /position-an-html-element-relative-to-its- container-using-css 11/25/