Difference between revisions of "Web edits"

Revision as of 11:21, 2 February 2009

Some things you need

Basic html skills
Basic photo editing skills
Ability to Remote Desktop onto your MSS

Software that would be helpful

Photoshop or similar photo software
HTML Editor
Page viewer like http://www.winsyntax.com/

Default locations

Home Page

C:\Inetpub\home\default.aspx

Images location

C:\Inetpub\home\images\

Style Sheet

c:\Inetpub\home\css.css

Basic Page changes/edits

Top Bar

By far the simplest changes you can make on the web pages are by changing the stock images.

The pages that are served by default, are stored in C:\Inetpub\home\images\ on the server. So you need to Remote Desktop onto the server to replace these.

The entire top bar of the web page, consists of two images.

i_topbar.png, which is spanned across 2/3rds of the page
i_Qlogo_r.png which is shown in the top right hand corner

By changing the following image alone, you can dramatically change the whole look and feel of the website, and make it much more personal.

i_topbar.png <----- Topbar image (across top of page)

i_Qlogo_r.png <--- Logo on top right of top bar

Change Copyright

C:\Inetpub\home\App_GlobalResources/GlobalResources.resx

Line 127 you can edit the value to make your own copyright

<value>Copyright &copy; 2007 Microsoft Corporation. All Rights Reserved.</value>

Note: It is very important to backup any changes to the default images you make, as when PP1 was launched the images were reset to the defaults and no doubt PP2 and future releases could do the same.

Dissecting the Style Sheet

The Style Sheet (c:\inetpub\home\css.css) controls amonst other things, the font and colour scheme used on the page. The sections we are interested in changing are prefixed with a period, i.e. .LandingHeaderStyle, .LandingFamilyStyle etc

FONT-SIZE

This value, represents 24 pixels and can be increased or decreased as required.

COLOR

The colour setting is a hexadecimal representation of the colour chart, a clear example of some of the options can be obtained from here. You can also use that link to generate your own codes.

font-weight

The font-weight specifies how thick or thin the text is.

Possible Values
Value	Description
normal	Default. Defines normal characters
bold	Defines thick characters
bolder	Defines thicker characters
lighter	Defines lighter characters
100	Defines from thin to thick characters.
200
300
400	Same as Normal
500
600
700	Same as Bold
800
900

FONT-FAMILY

The font-family property is a prioritized list of font family names and/or generic family names for an element. The browser will use the first value it recognizes.

There are two types of font-family values:

family-name: The name of a font-family, like "times", "courier", "arial", etc.
generic-family: The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

text-decoration=

Possible Values
Value	Description
none	Default. Defines a normal text
underline	Defines a line under the text
overline	Defines a line over the text
line-through	Defines a line through the text
blink	Defines a blinking text (does not work in IE)

CSS.CSS

Armed with the basic property value information above, you can change the look and feel of your landing page quite easily by editing the relevant sections of CSS.CSS. We have decoded some of the items below.

.LandingHeaderStyle

This section controls the font, colour and placement of the Web Site Title, the part you specified through the Windows Home Server Console, Settings, Remote Access. Under the Web Site Headline box. i.e. Cougars Family Web Site. This text is displayed on top of the i_topbar.png image.

.LandingHeaderStyle
 {
	FONT-SIZE: 24px; COLOR: #ffffff; 
	font-weight: normal;
	FONT-FAMILY: Verdana;
	position:relative;right:-24px;	
 }

With a few simple changes, we can change the font size and colour of the heading text.

.LandingFamilyStyle

This section controls the font, colour and placement of the link box title (to the right of the large family image)

.LandingFamilyStyle
 {
	FONT-SIZE: 16px; COLOR: #83a1bf; 
	FONT-FAMILY: Verdana;
 }

.LandingWebsiteStyle

This section controls the font, colour and placement of the link box subtitle, usually called Websites.

.LandingWebsiteStyle
 {
	FONT-SIZE: 13px; COLOR: #336698; 
	FONT-FAMILY: Verdana;
 }

A

Although not prefixed like a period in preceding examples, this entry deals with link text colour. You will see both, A and A:visited use the same colour in the stock style sheet.

 A {
	COLOR: #2782c9; TEXT-DECORATION: none
 }

A:visited

As per A above, this entry deals with link text colour, specifically those already visited.

 A:visited {
	COLOR: #2782c9
 }

A:hover

This entry directly controls the text colour when you hover over the link text in both A and A:visited.

A:hover {
	COLOR: #f66936; TEXT-DECORATION: underline
 }

References

@@ Line 120: / Line 120: @@
 *generic-family: The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
+==text-decoration===
-==.LandingHeaderStyle==
+{| border="1" cellspacing="0"
+|+Possible Values
+||Value||Description
+|-
+||none||Default. Defines a normal text
+|-
+||underline||Defines a line under the text
+|-
+||overline||Defines a line over the text
+|-
+||line-through||Defines a line through the text
+|-
+||blink||Defines a blinking text (does not work in IE)
+|}
+==CSS.CSS==
+Armed with the basic property value information above, you can change the look and feel of your landing page quite easily by editing the relevant sections of CSS.CSS. We have decoded some of the items below.
+===.LandingHeaderStyle===
 This section controls the font, colour and placement of the Web Site Title, the part you specified through the Windows Home Server Console, Settings, Remote Access. Under the Web Site Headline box. i.e. Cougars Family Web Site. This text is displayed on top of the i_topbar.png image.
@@ Line 146: / Line 169: @@
   }
 </nowiki>
+===.LandingWebsiteStyle===
+This section controls the font, colour and placement of the link box subtitle, usually called '''Websites'''.
+ <nowiki>.LandingWebsiteStyle
+ {
+	FONT-SIZE: 13px; COLOR: #336698;
+	FONT-FAMILY: Verdana;
+ }
+</nowiki>
+===A===
+Although not prefixed like a period in preceding examples, this entry deals with link text colour. You will see both, A and A:visited use the same colour in the stock style sheet.
+ <nowiki> A {
+	COLOR: #2782c9; TEXT-DECORATION: none
+ }</nowiki>
+===A:visited===
+As per A above, this entry deals with link text colour, specifically those already visited.
+ <nowiki> A:visited {
+	COLOR: #2782c9
+ }</nowiki>
+===A:hover===
+This entry directly controls the text colour when you hover over the link text in both A and A:visited.
+ <nowiki>A:hover {
+	COLOR: #f66936; TEXT-DECORATION: underline
+ }
+ </nowiki>