Editing the Footer in a stock magento build

The items in the footer area are in two different locations. One part is a static block created within the magento admin area (CMS > Static Block). The other part is held in the related .phtml / .php / .xml files within the design files.
First off, the XML files

app/design/frontend/*/*/layout/page.xml
Here you will find some footer reference:

<block type="page/html_footer" name="footer" as="footer" 

template="page/html/footer.phtml">
<block type="page/switch" name="store_switcher" 

as="store_switcher" template="page/switch/stores.phtml"/>
<block type="page/template_links" name="footer_links" 

as="footer_links" template="page/template/links.phtml"/>
</block>

app/design/frontend/*/*/layout/cms.xml

<reference name="footer">
<block type="cms/block" name="cms_footer_links" before="footer_links">
<!--
The content of this block is taken from the database by its block_id.
You can manage it in admin CMS -> Static Blocks
-->
<action method="setBlockId"><block_id>footer_links</block_id></action>
</block>
</reference>

You can see that the footer area of each page (page.xml) adds footer links via:
app/design/frontend/*/*/template/page/html/footer.phtml
This file (footer.phtml) contains a method to get it’s children HTML as referenced in the page.xml file – ($this->getChildHtml();)
-app/design/frontend/*/*/template/page/switch.phtml
-app/design/frontend/*/*/template/page/template/links.phtml
footer.phtml is basically a “shell” which includes the “report bugs to magento” text. It also calls the getChildHtml method to get the rest in there.
One important part of the footer’s children HTML are the links:
The .phtml file , however, grabs links from the method “$this->getLinks()” found in the Block .php file controlling the template…. so the hunt begins.
The Block file controlling this template is:
app/code/core/mage/page/Template/Links.php
However, here you will find that this only has generic code for entering links! Where, then, are these links coming from? Well…a lot of places

<!--contacts.xml-->
<reference name="footer_links">
<action method="addLink" translate="label title" module="contacts" 

ifconfig="contacts/contacts/enabled"><label>Contact Us</label>

<url>contacts</url><title>Contact Us</title><prepare>true</prepare></action>
</reference>

<!--rss.xml-->
<reference name="footer_links">
<action method="addLink" translate="label title" module="rss" 

ifconfig="rss/config/active"><label>RSS</label><url>rss</url>

<title>RSS testing</title><prepare>true</prepare><urlParams/>

<position/><li/><a>class="link-feed"</a></action>
</reference>

<!--catalogsearch.xml-->
<reference name="footer_links">
<action method="addLink" translate="label title" 

module="catalogsearch" ifconfig="catalog/seo/search_terms">

<label>Search Terms

</label><url helper="catalogsearch/getSearchTermUrl" />

<title>Search Terms</title></action>
<action method="addLink" translate="label title" 

module="catalogsearch"><label>Advanced Search</label>

<url helper="catalogsearch/getAdvancedSearchUrl" /><

title>Advanced Search</title></action>
</reference>

<!--catalog.xml-->
<reference name="footer_links">
<action method="addLink" translate="label title" module="catalog" 

ifconfig="catalog/seo/site_map"><label>Site Map</label>

<url helper="catalog/map/getCategoryUrl" /><title>Site Map</title></action>
</reference>

Now, as for the other links (About Us and Customer Service) they are 
merely created in the Admin section as mentioned. Admin > CMS > 
Static Blocks.

They are referenced in cms.xml as shown above. You can use this method to

 show static blocks creating in the CMS area of the admin section anywhere (the
 much-repeated emphasis on being able to use PHP code to do the job of 
the XML (or visa versa) is handy to add a static block somewhere in your
 code instead of using xml).

For More Details

ref - 

http://www.exploremagento.com/magento /editing-the-footer-in-a-stock-magento-build.php

Magento: Add Javascript or CSS to Home Page Only (Or Any CMS Page)

CMS pages in Magento allow you to modify the layout XML specific to that page. So, all you need to do is open up the CMS page in Magento that you want to add the javascript to, click on the “Custom Design” tab on the left, and in the “Layout Update XML” field add the following:

“Custom Design” tab on the left, and in the “Layout Update XML” field add the following:

<reference name="head">
  <action method="addItem">
    <type>skin_js</type><script>yourfile.js</script>
  </action>
</reference>

Or, if you want to just put the javascript in the /js/ directory of your app, you can change the “skin_js” to just “js”.

Ref - http://prattski.com/2010/03/08/magento-add-javascript-to-home-page-only-or-any-cms-page/

Alternatives to innerHTML

the focus of this article will be to show you ways of doing things commonly reserved for innerHTML with only DOM methods. In each example, the innerHTML method will be shown, followed by its DOM based alternative.

What's wrong with innerHTML?

A few things:

• It's not a standard. It's a proprietary property that Microsoft introduced (along with the less popular outerHTML) that the other browser makers picked up.
• Since it's not a standard, it isn't terribly future proof. It's not supposed to work under the application/xhtml+xml MIME type that XHTML documents are supposed to be served under. (Firefox 1.5 changed this by allowing it for some reason)
• innerHTML is a string. The DOM is not a string, it's a hierarchal object structure. Shoving a string into an object is impure and similar to wrapping a spaghetti noodle around an orange and calling it lunch.
• It makes for some nearly illegible code in a lot of instances, with escaped quotes and plus signs all over the place appending data to the string, which in my opinion makes it difficult to maintain.

Ok...anything good about it?

Sure. Don't get me wrong, I had a long and productive love affair with innerHTML, using it in everything from favelets to games.

• It's faster than DOM methods. By a lot. [ http://www.quirksmode.org/dom/innerhtml.html ]
• It's less verbose than DOM methods.
• It allows you to take arbitrary chunks of markup and drop them into a document without having to parse them.

It was when my favelets stopped working for people when they were invoked on application/xhtml+xml sites that I decided to wash my hands of it (and do a lot of re-coding).

Example One

[1a] Creating an element.

This example introduces three DOM methods. The first is createElement, a method of the document object. It does exactly that - creates an element. It's argument is the name of the element you want created.
The second is the setAttribute method. This method is the equivalent of object.attributeName = "value";.
The last is the appendChild method. This method will append your newly created element to the element it is invoked on. The element will be the newest child of the parent element, and appear last in the element.

innerHTML

document.getElementById("mContainer").innerHTML = "<div id=\"myDiv\"></div>";

DOM

// create a DIV element, using the variable eDIV as a reference to it
eDIV = document.createElement("div");
//use the setAttribute method to assign it an id
eDIV.setAttribute("id","myDiv");
// append your newly created DIV element to an already existing element.
document.getElementById("mContainer").appendChild(eDIV);
	

[1b] Creating an Element with Text

In this example you'll use the createTextNode method of the document object. This method will -- you guessed it -- create a text node. It's important to note that a text node is just that: text. Any markup that you pass to createTextNode will be rendered as text, not as HTML.

innerHTML

document.getElementById("mContainer").innerHTML = "<div id=\"myDiv\">hello world</div>";

DOM

// create a DIV element, using the variable eDIV as a reference to it
eDIV = document.createElement("div");
//use the setAttribute method to assign it an id
eDIV.setAttribute("id","myDiv");
// add the text "hello world" to the div with createTextNode
eDIV.appendChild(document.createTextNode("hello world"));
// append your newly created DIV element to an already existing element.
document.getElementById("mContainer").appendChild(eDIV);
	

[1c] Creating an Element Containing Hyperlinked Text

In this example, you'll create two elements. The div element as you did before, in addition to an anchor element. You'll then append the text node ("hello world") to the anchor element rather than the div element since that's the text you want hyperlinked (the text node is a child of the anchor) and finally you'll append the anchor to the div.

innerHTML

document.getElementById("mContainer").innerHTML = "<div id=\"myDiv\"><a href=\"http://slayeroffice.com\">hello world</a></div>";

DOM

// create a DIV element, using the variable eDIV as a reference to it
eDIV = document.createElement("div");
//use the setAttribute method to assign it an id
eDIV.setAttribute("id","myDiv");
 // create your anchor element
eAnchor = document.createElement("a");
// set its href attribute with the setAttribute method
eAnchor.setAttribute("href","http://slayeroffice.com");
// add the text "hello world" to the anchor element
eAnchor.appendChild(document.createTextNode("hello world"));
 // append your newly created anchor element to the div
eDIV.appendChild(eAnchor);
// append your newly created DIV element to an already existing element.
document.getElementById("mContainer").appendChild(eDIV);
	

[1d] Creating an Element Containing Hyperlinked Text and an Event Handler

innerHTML

document.getElementById("mContainer").innerHTML = "<div id=\"myDiv\"><a href=\"http://slayeroffice.com\" onmouseover="doStuff();">hello world</a></div>";

DOM

// create a DIV element, using the variable eDIV as a reference to it
eDIV = document.createElement("div");
//use the setAttribute method to assign it an id
eDIV.setAttribute("id","myDiv");
 // create your anchor element
eAnchor = document.createElement("a");
// set its href attribute with the setAttribute method
eAnchor.setAttribute("href","http://slayeroffice.com");
// add our event handler to the anchors mouseover event
eAnchor.onmouseover = doStuff;
// add the text "hello world" to the anchor element
eAnchor.appendChild(document.createTextNode("hello world"));
 // append your newly created anchor element to the div
eDIV.appendChild(eAnchor);
// append your newly created DIV element to an already existing element.
document.getElementById("mContainer").appendChild(eDIV);
	

[1e] Creating an Element Containing Hyperlinked Text and an Event Handler that Takes an Argument

innerHTML

document.getElementById("mContainer").innerHTML = "<div id=\"myDiv\"><a href=\"http://slayeroffice.com\" onmouseover=\"doStuff('foo');\">hello world</a></div>";

DOM

// create a DIV element, using the variable eDIV as a reference to it
eDIV = document.createElement("div");
//use the setAttribute method to assign it an id
eDIV.setAttribute("id","myDiv");
 // create your anchor element
eAnchor = document.createElement("a");
// set its href attribute with the setAttribute method
eAnchor.setAttribute("href","http://slayeroffice.com");
// add our event handler to the anchors mouseover event
eAnchor.onmouseover = function() { doStuff("foo") };
// add the text "hello world" to the anchor element
eAnchor.appendChild(document.createTextNode("hello world"));
 // append your newly created anchor element to the div
eDIV.appendChild(eAnchor);
// append your newly created DIV element to an already existing element.
document.getElementById("mContainer").appendChild(eDIV);
	

Note: Simon Willison points out that the above example is a circular reference that will cause memory leaks in Internet Explorer. See this article by Mark Wubben for one solution, and be sure to unattach your event handlers when your document unloads

Web Safe Fonts

Serif Fonts

font-family	Example text
Georgia, serif	This is a heading This is a paragraph
"Palatino Linotype", "Book Antiqua", Palatino, serif	This is a heading This is a paragraph
"Times New Roman", Times, serif	This is a heading This is a paragraph

Sans-Serif Fonts

font-family	Example text
Arial, Helvetica, sans-serif	This is a heading This is a paragraph
Arial Black, Gadget, sans-serif	This is a heading This is a paragraph
"Comic Sans MS", cursive, sans-serif	This is a heading This is a paragraph
Impact, Charcoal, sans-serif	This is a heading This is a paragraph
"Lucida Sans Unicode", "Lucida Grande", sans-serif	This is a heading This is a paragraph
Tahoma, Geneva, sans-serif	This is a heading This is a paragraph
"Trebuchet MS", Helvetica, sans-serif	This is a heading This is a paragraph
Verdana, Geneva, sans-serif	This is a heading This is a paragraph

Contentpresenter Foreground, Font-Size, Font-Family Change inside Style (WPF / XAML)

To change Font Size, Foreground or Font Family

1) Directly Assign Property to Content-presenter 
 - XAML

<ContentPresenter TextBlock.FontFamily="Tahoma"
                  TextBlock.FontWeight="Bold"

                  TextBlock.Foreground="Red"
                  VerticalAlignment="Center"
                  RecognizesAccessKey="True" />

  OR

2)Adding Setter To the Style-

                      <Trigger Property="IsSelected" Value="true">
     <Setter Property="TextBlock.Foreground" TargetName="TabHeadetText"     Value="white"/>

     <Setter Property="TextBlock.FontFamily" TargetName="TabHeadetText"     Value="Tahoma"/>
</Trigger>

How to Disable the default Dashed Focus Rectangle on WPF Controls

When a WPF control gains the focus, it displays a dashed box around itself to indicate that it has the focus. In some cases, the focus rectangle can detract from the design of the program.

To disable this box, add the attribute FocusVisualStyle="{x:Null}" to a control.

To re-enable it, set that attribute to a Style of your choice.
example:
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
</Style>

-------- nJoy :-)