layout basics

[mex]

I saw the switches and they help a bit.

What about changing the header background color or positioning of elements is this again just as other pages, get the id and change in style sheet?

Admin is OK but I am talking about changing the layout to something quite different than the default ( just normal css though).

[Ryk]

Most of it can be done with css, but there will probably be occasions when you need to go in and edit the tpl_ files. Just remember to ALWAYS backup a file you're about to change and to use the template overrides structure correctly.

Advice on that is in the Tutorials/FAQs

[mex]

Yes you do get the id from view source and use it in the stylesheet. You don't just cut & paste - the syntax is different. Where you see <div id="asdf"> in the php file, you use
#asdf { border: 2px #00aaff;} or whatever
in the stylesheet.

So to change say position of id='atrrib-4' which is an option drop down box on prod info page, in css i, i add this in stylesheet

#attrib-4 {position:relative: left: 50px;} //fails

Nothing happens, but i can change other things like color on the whole page so i have referenced it right?

[mex]

To add an img though I need to put it in a file to say <img src....

Now do i write this where and I give it an id to use css.

It is the specifics of it i am unsure of, but i get the overall idea.

To specifically an a img or 2 with a few links I just add htmlcode or php code ?
I checked the tuts for didn't find much yet.

[Ryk]

Virtually everything has an id already - try examining a few pages in View Source to get the idea of how ZC works... or better still, use Firefox with the Web Developer Toolkiit, Firebug , Xray and Aardvark add-ons and then you can examine all aspects of the page.

Once you have identified a class/id you can usually use the ZC Developer Tool Kit (admin > tools > developer toolkit ) to locate a template file.

You perhaps need to be a bit more specific about exactly what you are trying to do - it's very difficult trying to answer generalities.

[birdoasis]

Mex,

You say you want to move the drop down atrib box. How do you want to move it? Do you want to bring it up a few lines, or do you just want to move it to the left or right? Setting the position left may not be enough, since there may be something else to the left of it.


What template are you using?

[mex]

Hi,

I have FF webdeveloper as I have just downloaded it.

I don't think I can be more specific about what I want and I will type it out more clearly.

I am trying to learn how to style (move and style) things around a page in ZC on a prod info page specifically.
If you lo0k at a specific prod info page in default zc
eg yourpath/zen/index.php?main_page=product_info&cPath=1_4&products_id=1

which is 1 graphics card item. A picture is on the top of the main section and we have2 option boxes (drop down) near the bottom spaced badly.

Now you can't simply goto admin and click a button it seems to move things around or style them where you want specifically..

To move the image or to move the option boxes around on that page requires CSS. The id for the optionbox is attrib-3 but I am told this fails to work. As I need other id's.

It is a very specific question about moving images and elements on a default layout .

How can i get the specific id's to style i the stylesheet as just getting an id=attrib-3 for 1 element to move fails. So that is why I am asking here because it looks complicated . I can't se anything on the tut's for specific examples either.

So it isn't a general question but the ZC is hard to understand by me with the nested id structure for css.

[mex]

well I said in anothe post( sorry for double posting ), I wanted it to move up and right 50 pixels, I will have to see how it looks.

I am modifying the prod info page with graphic card prod item 1 on default layout. I don't believe I need modify template for the whole page as i was told to check the id in the source.

Also I want the image moved but i can't work out heads or tails how to move anything with ZC. The admin section doesn't style things. I get the id of say the optionbox by going to page source and spending a while getting the id=attrib-3.
Now I am told this isn't want to change to move?



I know css and have webdeveloper but I need a more specific direction on how to do specific page layout styling.

[gjh42]

#attrib-4 {position:relative: left: 50px;} //fails

This isn't going to do anything because it's written wrong. You don't use three colons in succession; you need to make separate elements:
#attrib-4 {position:relative; left: 50px;}
or for better appearance
#attrib-4 {
position:relative;
left: 50px;
}

[mex]

#attrib-4 {position:relative: left: 50px;} //fails

This isn't going to do anything because it's written wrong. You don't use three colons in succession; you need to make separate elements:
#attrib-4 {position:relative; left: 50px;}
or for better appearance
#attrib-4 {
position:relative;
left: 50px;
}

Ok thanks for that, the example i copied from also had this mistake, and i was starting to think this is impossible and (going stir crazy).

Does the webdeveloper find error s like this though as I expect i will make more errors?

NOw using webdevelper is there a way to click on something and get its id?
eg on an img I want moved with css when i can fid its id?