Phantom Shop

1. Open following url: http://cufon.shoqolate.com/generate/
a. Upload a font – you can find many great fonts on www.dafont.com
b. Choose a name for converted font (for example “Tahoma”)
c. Select “The EULAs of these fonts allow Web Embedding (without Adobe Flash)”
d. Choose glyphs. (Also under ”.. and also these single characters” you can put only needed glyphs)
e. Select “I acknowledge and accept these terms” and download converted font.

2. Upload converted font to “catalog/view/theme/phantomshop/js/” folder
3. Open a “catalog/view/theme/phantomshop/template/common/header.tpl” file and replace following line:

catalog/view/theme/phantomshop/js/Bebas_basic.font.js

for file name of your new font (for example tahoma.font.js):

catalog/view/theme/phantomshop/js/tahoma.font.js

Cufon.replace('.box-heading', { fontFamily: 'Bebas', textShadow: '1px 1px 1px #000000' } );
Cufon.replace('h1, h2, h3, h4, h5, h6, #categories ul, #menu ul', { fontFamily: 'Bebas', hover:{'color': '#ffffff'} } );
Cufon.replace('.prie-tag, .home-box-left-title, .home-box-right-title, .product-description-title, .cart-total, .currency-panel #currency a, .currency-panel #currency b', { fontFamily: 'Bebas' } );
Cufon.replace('.page-name, .product-title', { fontFamily: 'Bebas', textShadow: '1px 1px 1px #000000' } );

Done!

Images are displayed as background, so you should change size in the

catalog/view/theme/phantomshop/css/stylesheet.css

You have to edit both following lines:

.box-container, .box-image { width:139px; }
.box-image, .box-star {  height:180px; width:139px; }

Select Content Bottom position for Featured module.

Select Layout: Product, Position: Column Right

Open folowing file:

catalog\view\theme\phantomshop\template\module\featured.tpl

and remove following code:

 
<span class="box-star">
...
</span><!--box-star-->

catalog/view/theme/phantomshop/stylesheet/stylesheet.css

body { ... background:url("http://www.diaboliquedesign.com/demo/psoc/background.jpg") no-repeat; ... }

You have to replace position:absolute for position:fixed inside stylesheet.css for following selectors: .panel, a.trigger, .panel2, .panel3, .currency-panel

Here is the code sample:

/*--------------------------- SEARCH PANEL ---------------------------*/
.panel { position: fixed; top: 100px; left: 0; display: none; background: #000000; font-size:11px;
-webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px;
width:235px; height:auto; padding:10px 20px 7px 50px; filter: alpha(opacity=95); opacity: .95; z-index:100; }

.panel a, .panel a:visited{margin: 0;padding: 0; color: #9FC54E; }
.panel a:hover, .panel a:visited:hover{margin: 0;padding: 0;color: #ffffff;text-decoration: none;border-bottom: 1px solid #ffffff;}

a.trigger{position: fixed;text-decoration: none;top: 104px; left: 0;font-size: 14px;letter-spacing:-1px; color:#fff;padding: 5px 12px 5px 5px;font-weight: 700;background:#000000;
-webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px;display: block;z-index:101; outline: 0!important;}
a.trigger:hover{position: fixed;text-decoration: none;top: 104px; left: 0;font-size: 14px;letter-spacing:-1px; color:#fff;padding: 5px 12px 5px 10px;font-weight: 700;background:#000000;
-moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px;-moz-border-radius-bottomleft: 0px;-webkit-border-bottom-left-radius: 0px;
display: block;z-index:101; }
a.active.trigger {background:#000000 url(../arrow-left.png) 76% 50% no-repeat;z-index:101; }

.panel #search { width:235px; padding-top:2px; height:30px; background-image:url('../image/search-field.png'); background-repeat:no-repeat; }
.panel #search input { background:none; width:190px; border:none; padding:5px 0 4px 4px; color:#646464; font-size:14px; 
-moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;
-moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none}
#search .button-search { float:right; color:#f4f4f4; cursor: pointer; background:none; cursor:pointer; padding:5px 0px 5px 0px; width:33px; height:20px; border:none; font-size:12px; }

.panel2 { position: fixed; top: 155px; left: 0; padding: 10px 11px 5px 5px;font-weight: 700;background:#000000;
-webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px;display: block;z-index:101; outline: 0!important; }
.panel2:hover { padding: 10px 11px 5px 10px; }

.panel3 { position: fixed; top: 204px; left: 0; padding: 7px 13px 2px 5px;font-weight: 700;background:#000000;
-webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px;display: block;z-index:101; outline: 0!important; }
.panel3:hover { padding: 7px 15px 2px 10px; }

/*--------------------------- CURRENCY PANEL---------------------------*/
.currency-panel {position: fixed; top: 254px; left: 0; padding: 7px 13px 2px 5px; width:23px; background:#000000;
-webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px;display: block;z-index:101; outline: 0!important;}
.currency-panel:hover { padding: 7px 15px 2px 10px; }
#currency { font-size:32px; color: #d7d7d7;line-height: 17px; padding:0 2px 0 2px; }
#currency a { color: #454545;text-decoration: none; cursor:pointer; line-height: 32px; }
#currency a b {color:#ffa200;text-decoration: none; cursor:text; line-height: 32px; }