Difference between revisions of "Web edits"
(→A) |
(→text-decoration=) |
||
| Line 120: | Line 120: | ||
*generic-family: The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace". | *generic-family: The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace". | ||
| − | ==text-decoration=== | + | ===text-decoration=== |
{| border="1" cellspacing="0" | {| border="1" cellspacing="0" | ||
| Line 136: | Line 136: | ||
||blink||Defines a blinking text (does not work in IE) | ||blink||Defines a blinking text (does not work in IE) | ||
|} | |} | ||
| − | |||
| − | |||
==CSS.CSS== | ==CSS.CSS== | ||
Latest revision as of 16:16, 2 February 2009
Contents
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 © 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.
| 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
| 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
}
