Web edits

From MediaSmartServerWiki
Jump to: navigation, search

Some things you need

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

Software that would be helpful


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.

  1. i_topbar.png, which is spanned across 2/3rds of the page
  2. 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 topbar.png

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

I Qlogo r.png


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

Whilst not prefixed with a period as per the preceding examples, this Selector deals with the links underneath the Website banner controlled by Websites.xml. There are two sections of code that deal with this part, and they also conflict a little with values.

Although the first entry sets Font Size, Colour and Font-Family only the Font Size and Font-Family are applied as they are overwritten by the next value.

A {
	FONT-SIZE: 11px; COLOR: #505050; FONT-FAMILY: Tahoma
 }


The second deals with link text colour. You will see by default both, A and A:visited use the same colour.

 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