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 1 of 2
Where is the first template? 
 
DaveTheAve
Jr. Member
 
Total Posts:  25
Joined:  2007-08-31
Kentucky
 

Come on guys, it’s been 24 hours were is the first community released template?

Getting slow are we? rasberry

... perhaps a lack of documentation is to blame more but come on! Some kinda template hacks should have been posted already!

FYI: I’m just razzing… I’m not trying to be a jerk.... I’m naturally one.

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

Dave,

the template structure is very simple. You should check http://www.magentocommerce.com/wiki/Magento-folder-structure/

/skin//<theme>/ - is where design package css and images are

/app/design is location of design packages (layouts, templates, translations)
/app/design//<theme> - theme customizations
/app/design//<theme>/layout - .xml files that define block structure for different cases in website flow
/app/design//<theme>/template - .phtml (html with php tags) templates
/app/design//<theme>/translate - Zend_Db compatible translation files

The simpliest way to change the template is making a duplicate from default template and changing its contents.

 
Magento Community Magento Community
Magento Community
Magento Community
 
DaveTheAve
Jr. Member
 
Total Posts:  25
Joined:  2007-08-31
Kentucky
 

Funny you should mention that, sense I was the creator of that whole topic.

Anyways yea, I already looked at the css and all, I wasn’t saying I wanted to create one; I was just stating I’m surprised no-one has posted even a small UI/style hack.

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

After one day ? Let us sleep smile

Hacks will come for sure because my graphic designers are working on new polish template so we must append our hacks into template smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
DaveTheAve
Jr. Member
 
Total Posts:  25
Joined:  2007-08-31
Kentucky
 

Sleep? pfft. Sleep is for humans.... we’re better then those carbon-based lifeforms!

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

Ok ok you won smile

Maybe this isn’t a hack but it can show where to dig.

Lesson 1: How to implement Lightbox into Magento

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

Step C. Open 2columns-right.phtml in /app/design/frontend/default/default/template/page and add 2 lines

after

getJsUrl()?>varien/menu.js" >

add

getJsUrl()?>varien/lightbox.js" >
getJsUrl()?>varien/effects.js" 
>

and then we must add css to our page layout. We make this very simple by adding

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

after

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

so that the whole section looks like this

<head>
    
<?=$this->getChildHtml('head')?>
    
<link rel="icon" href="<?=$this->getBaseUrl()?>favicon.ico" type="image/x-icon"/>
    <
link rel="shortcut icon" href="<?=$this->getBaseUrl()?>favicon.ico" type="image/x-icon"/>
    
getJsUrl()?>varien/js.js" >
    getJsUrl()?>varien/form.js" 
>
    
getJsUrl()?>varien/menu.js" >
    getJsUrl()?>varien/lightbox.js" 
>
    
getJsUrl()?>varien/effects.js" >
    
        var BLANK_URL = '<?=
$this->getJsUrl()?>blank.html';
    
    <link rel="
stylesheet" href="<?=$this->getSkinUrl('css/styles.css')?>" type="text/css" media="all"/>
    <link rel="
stylesheet" href="<?=$this->getSkinUrl('css/lightbox.css')?>" type="text/css" media="screen"/>
    <!--[if IE]> <link rel="
stylesheet" href="<?=$this->getSkinUrl('css/iestyles.css')?>" type="text/css" media="all"/> <![endif]-->
    <!--[if IE 7]> <link rel="
stylesheet" href="<?=$this->getSkinUrl('css/ie7.css')?>" type="text/css" media="all"/> <![endif]-->
    <!--[if lt IE 7]>
        <link rel="
stylesheet" href="<?=$this->getSkinUrl('css/ie7minus.css')?>" type="text/css" media="all"/>
        getJsUrl()?>lib/ds-sleight.js" 
>
        
getJsUrl()?>varien/iehover-fix.js" >
    <![endif]-->

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

Step D. The last step is changing the

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

in app/design/frontend/default/default/template/catalog/product/view.phtml

Working example on http://demo.lento.pl/catalog/product/view/s/coalesce-functioning-on-impatience-t-shirt/id/119/category/4/

I didn’t found a way to show lightbox over zoom div. This is probably set in css so i must look further.

I hope you are satisfied now smile

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

Very cool Adam! Any change you can post this on the Wiki as well? We’d love to get a central resource together so people won’t have to search through the forums to find cool stuff like this smile

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
DaveTheAve
Jr. Member
 
Total Posts:  25
Joined:  2007-08-31
Kentucky
 

Your a genius! Lightbox for Magento! Why didn’t they have that in the first place!!

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

I changed source so we can see the code
I’m glad you like it

Added: Because EE strips tags from code, if you have any problems don’t hestitate to PM me.

 
Magento Community Magento Community
Magento Community
Magento Community
 
73inches
Sr. Member
 
Avatar
Total Posts:  109
Joined:  2007-08-31
Germany, Hannover
 

I’m not sure the world needs it but… ehm… yeah… thanks wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
DaveTheAve
Jr. Member
 
Total Posts:  25
Joined:  2007-08-31
Kentucky
 

73inches your just a party-pooper!

<thirdGrade reason="childish" type="offensive" doYouMeanIt="No, I’m joking.">
Besides, you’re no 73 inches, its more like 2inches!
</thirdGrade>

Edit: Installed the mod myself; however, I noticed some simple mistakes like reversing what I need to enter with what to add after it after and such.

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

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;
    
}
 
Magento Community Magento Community
Magento Community
Magento Community
 
DaveTheAve
Jr. Member
 
Total Posts:  25
Joined:  2007-08-31
Kentucky
 

Is there a reason for such a high z-index?

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

Yes because of

.product-img-box .main-product-img {
    position
:relative;
    
overflow:hidden;
    
width:265px;
    
height:265px;
    
z-index:9999;
    
}

in main boxes.css

Of course we could use 10000 but i’m a little bit lazy wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
mckooter
Sr. Member
 
Avatar
Total Posts:  91
Joined:  2007-08-31
 

okay, ive got the base scripting down, ... well, kind of , im not a designer though, so im not sure what i should do,

im thinking maybe an oscommerce design i have, but i dont want to rip off someone elses work, (even though my company has paid for a ton of em, they were for oscommerce and they are paid so i cannot release them publically)

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

@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.

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