A question about the Matrix layout

lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Mon, 2004-07-26 15:17

Where in the code are the layers position defined? After looking at the code yesterday I pretty much can follow everything else.

Thanks,
Stephen Cupp
 
rossr

Joined: 2002-08-19
Posts: 28
Posted: Mon, 2004-07-26 18:20

The UI team will be creating a reference document defining the css classes soon. This means that categories, naming schemes, etc. will be explained in detail in this document. :)

In the meantime, this forum is an excellent place to ask specific questions about the Matrix css (it is the base css scheme for Gallery and will most likely be used by new theme developers to create new themes and layouts.).

Layers position: I'm not sure exactly what you mean. If you are referring to the z-positioning of divs (css: z-index), generally z-index values were not assigned in the css (this might be addressed in later builds). For now, if you want a specific block to render above another, adding a "z-index" definition to the div should do the trick. Example below:

#gsSidebar { z-index: 100; }

Let me know if this addresses your original question. :)
 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Mon, 2004-07-26 18:37

No I was thinking more x-y positioning. The way I have seen div tags made was like this.

<div id="nav" style="position:absolute; top:150; left:0; width:150px; visibility:visible; height: 417px">

There is probibly other ways to do this I just don't know what they are.

I have another question too. Which file is the <body> tag in. On my page I have the background only show up once and preload the images for the roll over buttons. In g1 I had to edit the php files to get this done. I'm hoping there is a better way in g2. Here is a copy of the body tag that I use.

<body style="BACKGROUND-IMAGE: URL(/photo/stripatnight.jpg) ; BACKGROUND-REPEAT: REPEAT-Y ; background-attachment: fixed" bgcolor="#000000" text="#FFCC00" link="#FFCC00" vlink="#FFCC00" alink="#FFCC00" onLoad="MM_preloadImages('/photo/home-1.png','/photo/gallery-1.png',
'/photo/links-1.png','/photo/equip-1.png','/photo/contact-1.png',
'/photo/locations-1.png','/photo/lvthunder-1.png')">

Thanks,
Stephen Cupp
 
rossr

Joined: 2002-08-19
Posts: 28
Posted: Mon, 2004-07-26 20:09

Ah, I see!

I won't go into too much css detail (as it would go beyond the scope of this forum topic), but I will make a few recommendations:

1) The code you used in the last post is an example of an "inline" style definition. It is a quick way of defining a presentation style "inline" with the code. Modern web developing trends look down upon this method of presentational markup. It is recommended that you adjust all style definitions in a css file. In Gallery's case, this file is "theme.css" located in the themes/matrix/styles folder. I recommend reading the following article for more detailed web standards info:

Developing with Web Standards

2) To edit the <body> tag, look for:

gallery2/templates/global.tpl

This file is the "skeleton" of the gallery page. We recommend that you not edit this file directly. Instead, make a copy and call it 'global.tpl.local' then make changes. When you update Gallery 2 (this is an alpha version, remember?), your modified file should stay intact. (This is mentioned in the comments of this file.)

By the way (more css nudging), all of the attributes in your example (except for the Javascript call) could be handled with a css file. :) Example:

body { background-image: url(/path/to/bg-image.png); background-repeat: repeat-y; background-attachment: fixed; background-color: #000; color: #ffcc00; }

(the link colors, etc. can be defined by adjusting the 'a' tag...)

Hope this answers your question!

Ross A. Reyman
G2 UI Guy
 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Mon, 2004-07-26 21:19

Yes that answers all my questions. Thanks for helping me out. If I have any more I'll be sure to ask. Now it's time to create a new layout.

Thanks again.
Stephen Cupp