Magento

Hi all,

Well so far I’m both in love with Magento and bruised by hitting my head against it for the last few days.  I admit I’m coming from an HTML and javascript background and I most often use Dreamweaver to build and manage sites.  I’m learning PHP and can read it, but haven’t written much yet.  Same level of XML understanding.  [as a side: Has anyone documented the XML functions yet?  If not, will that be coming, or should we not need to use them?? I swear I’ve looked but I could have missed it.]

I have a template using tables for layout and css pages for everything else.  I want to place those over Magento for the final website. I learned of Magento after building the design and I’m not ready to drop it yet.

=========Please let me know if the following statements are right, before I irreversibly damage my skull.==========
Some of these seem to work, and some haven’t quite seemed right yet (like where CSS is stored and image references)

For “static” type pages (i.e. the Home Page, a Locations page):
   I can use the Manage CMS section and HTML to build the central portion of the page.

For a graphical tab navigation section with roll over ability:
    Old template:  it’s built by completely stylizing an unordered list with CSS
    For Magento: I would need to create something like page/html/header-tabs.phtml to be called within page/html/header.phtml.
        header-tabs.phtml can be html code and will inherit CSS if I have navigation.css included in custom.css ?
                It would not require use of XML or function calls?

For images referenced in a CSS file:
    Magento knows that they are not stored together so I would just need to use url(../images/filename.jpg)

For images referenced in HTML:
    I need to use a full reference like:  http://127.0.0.1/magento/skin/frontend/RC1/default/images/filename.jpg

===========================that’s it to start with========================================================

A general question… If an image is defined in a CSS file instead of in HTML, how can I assign a height to it?  The templates using tables made this easy.. but to add this type of look to Magento, It seems that I can’t or shouldn’t be using table code across all the different sections of the layout.

Replies are appreciated.  I’m not ready to give up on figuring this all out, but I can’t afford the new training and I need to know if I’m heading down the right path before I lose more days.

Thanks!

http://www.webcredible.co.uk/user-friendly-resources/css/css-website-layout.shtml thats a good link as to why you shouldn’t use tables for layout purposes. Tables are great for tabular data but for general websites they should be avoided.

anysupport - 21 March 2008 09:02 AM

For “static” type pages (i.e. the Home Page, a Locations page):
   I can use the Manage CMS section and HTML to build the central portion of the page.

Yes

anysupport - 21 March 2008 09:02 AM

For a graphical tab navigation section with roll over ability:
    Old template:  it’s built by completely stylizing an unordered list with CSS
    For Magento: I would need to create something like page/html/header-tabs.phtml to be called within page/html/header.phtml.
        header-tabs.phtml can be html code and will inherit CSS if I have navigation.css included in custom.css ?
                It would not require use of XML or function calls?

The current category navigation is a list so all you would need to do is to add your custom navigation file and style the list how you want it.

anysupport - 21 March 2008 09:02 AM

For images referenced in a CSS file:
    Magento knows that they are not stored together so I would just need to use url(../images/filename.jpg)

The image path in the css needs to be relative to that css file, so if you add your theme to the skins/frontend/theme_name/ and use the same folder structure as teh default skin then yes the images would be in a folder called images and the css file would be in a file called css and the image path in the css would be ../images/image_name.

anysupport - 21 March 2008 09:02 AM

For images referenced in HTML:
    I need to use a full reference like:  http://127.0.0.1/magento/skin/frontend/RC1/default/images/filename.jpg

IIRC there is a variable which you can use that sets up the beginning of the path for you so you would only have to mething like {IMAGE_PATH}filename.jpg but I am sure someone can confirm or correct me on this.

With regards your other question about sizing image in CSS, its not possible to set the size of an image in css if its being set as a background image (you can limit it by setting teh size of its container). You can set the size of an image by doing something like

Looks like you have a solid grounding mate and will do fine, just stick with it

To create mouseover effects on your tabs with code from Dreawmweaver, you would need to add your DW-created code to ./app/design/frontend/default/default/template/page/whatever-columns.phtml

...at least, that’s the simplest way.  If you’re using it instead of the built-in menu, just add it in the same place.  There’s no absolute NEED to create a sub-template phtml file unless you intend on re-using it somewhere.  In which case, to do it properly, you would in fact need to define that sub-template page (not the official term) in the layout XML as well as where and when to call it.  PRobably more trouble and more work than it’s worth to you.

Regarding your CSS and images question, if you’re just sticking an image on a page, there’s no need to put it in your stylesheet.  That’s really only useful if you’re using it as a background image.  Otherwise, put it in your HTML code as normal and use the stylesheet to...style it.