Support for Phantom Shop

Diabolique supports this item

Supported

Popular questions for this item

How to change Cufon font?

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

4. In the header.tpl you will find following code:

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' } );

You have to replace Bebas keyword for your new font’s name (1b step).

Done!

How to change image sizes on category page?

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; }

My featured products are under welcome message, how to move it lower?

Select Content Bottom position for Featured module.

How to display manufacturers logos on the right column like on the live demo?

Enable “Welcome” module, add new module and paste following static HTML into text area: http://www.diaboliquedesign.com/demo/psoc/brands.txt

Select Layout: Product, Position: Column Right

How to remove the star strip on the featured product image?

Open folowing file:

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

and remove following code:

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

How to change the big background image?

You should open following file:

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

and change image path to your image here:

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

How do i make the left panel scrolls whenever I scroll down with the page?

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; }

Is it possible to reduce size of the related products without affecting the featured ones?

Open:

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

...and add following styling:

#related .box-container, #related .box-image { width:100px; }
#related .box-image, #related .box-star { height:150px; width:139px; }

Is it possible to reduce the frame of the related products without affecting the featured ones?

Open:

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

...and add following styling:

#related .box-container { padding:5px 5px 3px 5px; }

Could you please let me know how do i have the product’s image shows in full in the featured products in the main page as well as in the product’s page? What i am facing is, the image of the product is not showing properly in in both places and in the product page sometimes i see the picture is repeated within the frame vertically.

Do i need to reduce the size of the image itself or what is the best size for the image to be uploaded to a certain product to be shown in full in the featured products and while clicked on in the product page, it shows big? What is the best pixels (Y x Z) of an image to be uploaded please bearing in mind i am following the same sizing you have mentioned in your message below?

The perfect width-height proportion for images is 1×1.29

Thumbnails on the single product page have a little different width-height proportion but you can fit it changing height here:

.product-info .image a { ... height:300px; }
.product-info .image-additional .small-image a { ... height:60px; ... }

inside stylesheet.css

If i increase the header size for like 110px for example, it touches the search panel. What is the code to push the panel down as to be in the same level of the main child background?

Open stylesheet.css and increase spacing for following selectors:

.panel { ... top: 100px; ... }
a.trigger{ ... top: 104px; ... }
a.trigger:hover{ ... top: 104px; ... }
.panel2 { ... top: 155px; ... }
.panel3 { ... top: 204px; ... }

How to change black background color?

You should open:

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

and change background in 2 following places:

#main-child { ... background:#000000; ... }

#account-account #main-child, #account-address_form #main-child, #account-address_list #main-child, #account-download #main-child, #account-edit #main-child, #account-forgotten #main-child, #account-login #main-child, #account-newsletter #main-child, #account-order #main-child, #account-order-info #main-child, #account-password #main-child, #account-register #main-child, #account-return #main-child, #account-return #main-child, #account-return #main-child, #account-reward #main-child, #account-transaction #main-child, #account-wishlist #main-child, #affiliate-login #main-child, #affiliate-register #main-child, #affiliate-forgotten #main-child, #affiliate-payment #main-child, #affiliate-edit #main-child, #affiliate-tracking #main-child, #affiliate-transaction #main-child, #affiliate-account #main-child, #product-product #main-child { background-image:url(../image/bg-main-child.png); background-position:645px 0px; background-repeat:repeat-y;  }

The top category links on the home page (Accessories, jackets, Jeans etc), how can I move them more to the left/central in the top bar?

Open:

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

...and increase 15px parameter:

#categories { margin:25px 15px 0 0; ... }

I’d like to change the font type and background color on the shopping cart popup notification. How can I do that?

Open stylesheet.css and change:

#notification .attention, #notification .success, .success, .warning { ... color:#d8d8d8; background:#151515; ... font-style:italic; font-size:20px; font-family:Georgia, Tahoma; ... }
#notification .attention a, #notification .success a { color:#bbbbbb; }

Contact the author

This author will respond to buyers' questions and provides limited support through their own support system.

Item support includes:

Availability of the author to answer questions
Answering technical questions about item’s features
Assistance with reported bugs and issues
Help with included 3rd party assets

However, item support does not include:

Customization services
Installation services

View the item support policy

Go to item support

$21

Included: Quality checked by Envato
Included: Future updates
Included: 6 months support from Diabolique
What does support include?

Extend support to 12 months $2.25

Get it now and save up to $3

Elite Author

Diabolique

View Portfolio

Created	12 July 11
Last Update	31 August 13
Compatible Browsers	IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome
Software Version	OpenCart 1.5.6.x, OpenCart 1.5.5.x
ThemeForest Files Included	Layered PNG, CSS Files, JS Files
Columns	2
Documentation	Some Help
Layout	Fixed
Tags	black, cool, dark, ecommerce, fashion, gallery, modern, opencart, photography, universal

Support for Phantom Shop

Diabolique supports this item

Popular questions for this item

Contact the author

Item support includes:

However, item support does not include:

Diabolique

Follow us

Meet Envato

Need Help?

Join our Community

Email Newsletters