layout basics

Hi,

I see some zencarts have the leftcolumn and middle section in a whole rounded corner background. Where can you add this and some have the left column staring in from the page about 100px.?

The number of heading bars on top of scrren how can they be changed ?

Post a url to your install with specific issues you want to address

I cna explain it easy enough, as my url is on my local server.
well the default install has left column and middle or main section and right column and top headings.
The middle main section can be changed from getting the id from page source, going to stylesheet and changing it.

Unless there is another easier way?

Hi,

I might ask here about page layout because there is a forum on page layout.

I found out that to change a page layout on some elements eg prod info page what you do is find the id from page source, then on stylesheet.css you can then change position and style with the id name.
I am confused about nested id's as this ssems to be very common and require a different css syntax.

Is this how it is with images,text,buttons on a page which appears in main area ( big middle bit). Or do i move some of these things in admin area.

I am just findout out how to change a prod info page.

Post a url to your page and what you want adjusted

My site on my pc localhost, so i can't post an url .
I have a fairly basic question though, so just a simple example will have to do.

I just want to know about moving things around on the layout, because I have a few elemnts (option drop down box ) in bad positions so i want to move it.

To move things around in prod info do you just get the id in page source and use it in style sheet, is this what you do?

NO this is not to be pasted into a stylesheet. Stylesheets only contain css information

I am talking about a stylsheet though but stylesheets need and id or class to work from. I am wanting to alter the layout position of some items on the page as the dropdown box is in a bad position, so i need to move it up. The prod info image I want moved to center of page more etc

Isn't this how you move things around, as someone else told this earlier for optionbox dropdown.

The first thing you should do is review every single option in the admin menu. Ok, you're not going to remember where everything is, but you'll find a heck of a lot of "switches"

At the very least, view the admin > configuration options.

Rounded corners are a bit further up the learning curve.

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.

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

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

gjh42:

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?

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.

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.

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?

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.

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.

#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;
}

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

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?