Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 2 of 2
Where is the first template? 
 
-martin-
Jr. Member
 
Total Posts:  1
Joined:  2007-09-02
 

Im willing to do some design, though im not such a good programmer. smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
mckooter
Sr. Member
 
Avatar
Total Posts:  91
Joined:  2007-08-31
 
A.Piotrowski (Lento.pl) - 01 September 2007 11:20 PM

@mckooter

If you want to change default layout of page you must see and analyse all files in /app/design/frontend/default/default/template/page

In subfolder named html you can change the deafult footer, header, columns structure of the page.

Then you can modify the main content files for example 3columns.phtml or 2columns-right.phtml. Most of layout is set by css so you must refer also to skins/css folder. Simple changes could be done by modyfing CSS.

Although there is simply to change actual files I think that implementing osC template into M isn’t good idea because of use old HTML 4.0 (tables mostly).

In next few days (maybe a week) i’ll try to post a simple tutorial about skinning Magento.

yeah, i didnt mean just reskin, i meant to recode completely, just use some designs i have lying around, I could create something now, but it would be definately the first and worst design released for magento, i understand basic design principals, just tying my ideas together can be a disaster,

 
Magento Community Magento Community
Magento Community
Magento Community
 
_
Sr. Member
 
Total Posts:  152
Joined:  2007-08-31
 

@mckooter

Now with Scott (nick : scottrageous) and SKacperski we are writing a tutorial about changing design in M. It will show how to completely change the layout not only reskin the default template. I think it could be ready end of this week (maybe weekend).

Now there is only table of contents wink ready : http://www.magentocommerce.com/wiki/Designing-for-Magento/

 
Magento Community Magento Community
Magento Community
Magento Community
 
Brandon
Sr. Member
 
Avatar
Total Posts:  76
Joined:  2007-08-31
Web Developer
 

I’m confused about your JavaScript lines.  Is there a problem with the forum script or is this really how it looks??

getJsUrl()?>varien/js.js” >

1) I don’t see an opening php tag.
2) Does getJsUrl() write the opening HTML tag?

That just doesn’t sound right at all.  I’m assuming it’s the forum or a typo....

 
Magento Community Magento Community
Magento Community
Magento Community
 
_
Sr. Member
 
Total Posts:  152
Joined:  2007-08-31
 

Yes , there is a problem with posting tags on forum. With Wiki too. Please give me your email address so I can send it to you directly.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

I hate Lightbox. There, I finally said it.
Its’ overused, it loads slow and it’s of little use for a eCommerce site. With Magento built in enlarge feature, who needs a Lightbox flashy toy?

Confession: I did a lightbox galllery for a client site. It was good then when it wasn’t overly use smile I don’t even want to look at that gallery now smile

tgp

 
Magento Community Magento Community
Magento Community
Magento Community
 
SimpleHelixcom
Enthusiast
 
Avatar
Total Posts:  906
Joined:  2007-08-31
Huntsville, AL
 

but still, atleast they are better than popups =)

 
Magento Community Magento Community
Magento Community
Magento Community
 
_
Sr. Member
 
Total Posts:  152
Joined:  2007-08-31
 

Updated instructions for Lightbox.

Instead of changing .phtml files we can simply use xml techniques.

Step A. Download Lightbox from http://www.huddletogether.com/projects/lightbox/

Step B. Copy lightbox.js and effects.js to js\varien directory where ale .js are located and lightbox.css to skin/frontend/default/default/css/lightbox.css

Step C. Add 3 lines to app/design/frontend/default/default/layout/catalog/product/view.xml so the reference for head looks like below

Because in forum there are script tags stripped from code. Use a normal script tag < script > (without spaces) and close it < / script > where it’s necessary (marked by ! )

<reference name="head">
<
action method="addJs">!script!varien/effects.js!/script!</action>
<
action method="addJs">!script!varien/lightbox.js!/script!</action>
<
action method="addJs">!script!varien/product.js!/script!</action>
<
action method="addCss"><link>lightbox.css</link></action>
</
reference>

Step D. The next step is changing the app/design/frontend/default/default/template/catalog/product/view.phtml

From

<?foreach ($this->getGalleryImages() as $_image):?>
<li>
<
a href="#" onclick="popWin('<?=$this->getGalleryUrl($_image)?>', 'gallery', 'scrollbars=yes,width=300,height=300,resizable=yes');return false;">
<
img src="<?=$_image->setType(1)->getSourceUrl();?>" width="68" height="68" alt=""/>
</
a>
</
li>
<?endforeach;?>

to

<?foreach ($this->getGalleryImages() as $_image):?>
<li>
<
a href="<?=$_image->setType(0)->getSourceUrl();?>" rel="lightbox[roadtrip]" title="">
<
img src="<?=$_image->setType(1)->getSourceUrl();?>" width="68" height="68" alt=""/>
</
a>
</
li>
<?endforeach;?>

Step E. Simple change to lightbox.css to set proper display over zoom-box

In lightbox.css change z-index to 10010 in

#lightbox{
    positionabsolute;
    
top40px;
    
left0;
    
width100%;
    
z-index100;
    
text-aligncenter;
    
line-height0;
    
}

That’s all 

 
Magento Community Magento Community
Magento Community
Magento Community
 
RoyRubin
Enthusiast
 
Avatar
Total Posts:  968
Joined:  2007-08-07
Los Angeles, CA
 

Adam - is the wiki updated with this (or should I updated it)?

 
Magento Community Magento Community
Magento Community
Magento Community
 
_
Sr. Member
 
Total Posts:  152
Joined:  2007-08-31
 

I’ll update it as soon as i receive reply from Moshe about setting a media parameters in <action method="addCss"><link>lightbox.css</link></action> . If this would not be possible i’ll rewrite the code and put changed version into Wiki.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dscho
Sr. Member
 
Avatar
Total Posts:  236
Joined:  2007-10-05
Singen, Germany
 

Hi,

i tried to add lightbox2.03.3 in my testshop on http://www.magento-shopping.de/catalog/product/view/s/olympus-stylus-750-7-1mp-digital-camera/id/46/category/12 .

i added

<script type="text/javascript" src="<?=$this->getJsUrl()?>varien/prototype.js" ></script>           
    
<script type="text/javascript" src="<?=$this->getJsUrl()?>varien/scriptaculous.js?load=effects" ></script>                
    
<script type="text/javascript" src="<?=$this->getJsUrl()?>varien/lightbox.js" ></script>

and

<link rel="stylesheet" href="<?=$this->getSkinUrl('css/lightbox.css')?>" type="text/css" media="screen"/>

into 2columns-right.phtml

On IE i get a javascript error: Prototype.BrowserFeatures.XPath is NULL or no Object

Do you have any idea to solve this Problem?

Best Regards
Dscho

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 2 of 2