Sascha Wener. Definition from Microsoft Developer Network: “A theme is a unified set of design...
24
Implementation of switchable Webpage Themes by using CSS and Positioning of Elements Sascha Wener
-
Upload
antony-hart -
Category
Documents
-
view
214 -
download
0
Transcript of Sascha Wener. Definition from Microsoft Developer Network: “A theme is a unified set of design...
Implementation of switchable Webpage Themes by using CSS
and Positioning of Elements
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.”
What is a Theme?
11/25/2014
4
1. Switchable CSS classesSwitching class in top-level DOM element to change properties of underlying elements
2. Change class attribute from webpage3. Save selected theme and apply when
browsing to another page
However: There are many ways to achieve it
An easy 3-Step Implementation Approach
11/25/2014
5
Assign a class to a top-level DOM-element that contains all underlying elements
1. Switchable CSS classes
11/25/2014
6
Create a CSS file which contains different superordinate classes for your themes:
1. Switchable CSS classes
11/25/2014
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
1. Switchable CSS classes
11/25/2014
8
Add a Dropdown list or similar control to your Master page
Register an Event for Javascript
2. Change class attribute from webpage
11/25/2014
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
2. Change class attribute from webpage
11/25/2014
10
Download the libraries:◦ http://jquery.com/◦ 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
2. Change class attribute from webpage
11/25/2014
11
The JS code to change class from „body“
2. Change class attribute from webpage
11/25/2014
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. ”
2. Change class attribute from webpage
11/25/2014
13
The JS code to save and load theme state
3. Save selected theme and apply when browsing to another page
11/25/2014
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: link◦ Would need to format every single HTML element
since JS and CSS does not run on the server
Problem with ASP.NET controls
11/25/2014
15
Solution: Place several identical objects with different
predefined themes from VS and utilize visibility in CSS
Visible by default in Webpage aspx file
Problem with ASP.NET controls
11/25/2014
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.“)◦Absolute (“An absolute position element is
positioned relative to the first parent element”) Everything can be managed in CSS
Positioning of Elements
11/25/2014
17
To center the content of a HTML div tag one can use the "text-align: center“ CSS attribute
11/25/2014
Positioning Textboxes
18
This also works with several contained HTML controls
11/25/2014
Positioning Textboxes
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
Positioning Textboxes
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
Variable-size textboxes with variable margins
2111/25/2014
Variable-size textboxes with variable margins
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
DropDownList Bonus Points Lab 9
23
1. Locate top-level form tag2. Find placeholder for Masterpage3. Get Control you want to alter4. Apply Text from DDL to the target-controls‘
„Text“ attribute
11/25/2014
DropDownList Bonus Points Lab 9
24
http://msdn.microsoft.com/en-us/library/dd588769(v=office.11).aspx
http://jquery.com/ https://github.com/carhartl/jquery-cookie http://learn.jquery.com/using-jquery-core/do
cument-ready/
http://www.w3schools.com/css/css_positioning.asp
http://stackoverflow.com/questions/104953/position-an-html-element-relative-to-its-container-using-css
Sources
11/25/2014
