prod info

Hi

How do you add css to the product info page?
What about javascript can that be added ( I forgot I reason why you would )?
The add to cart button how do you move that?

You don't exactly add CSS to the product info page. You find tags (IDs, classes, img or a links...) in the code for the page, and change or add declarations in your stylesheet.css to affect them. It is possible to add new tags to the code if there is none available to work on.
Javascript can be added. Look at some of the existing examples to guide you.

Admin > Catalog > Product Types > Product-General > edit layout and most elements can be moved. It is also possible to move many elements using CSS.

For example how do i get the tags for combo boxes or the cart buttons in the prod info page. From there I can change in a style sheet?

Ok If i set a background color to a prod info page, I set a <div> at top and bottom on information in product information page. I set the color easy enough but it ony appears in the description and not the whole prod content page.
I am still lokking butI want the whole prod info page to look as a 1 block of background color.

Try a view source on your page. You will see

I suggest you get the Firefox browser and its Web Developer extension. That will allow you to see and manipulate many aspects of your site. Try the Outline > Outline current element button, or Information > Display element information. CSS > Edit CSS will allow you to see effects of stylesheet edits instantly.

I thought you just edit the stylesheet.css in your customs folder?

I know what you are saying as I am setting the style for every prod info page, as I modify that page with the id under where the page starts.

That file when I page source isn't a single file is it , as it is pulled from a collection of files.

mex:

I thought you just edit the stylesheet.css in your customs folder?

I know what you are saying as I am setting the style for every prod info page, as I modify that page with the id under where the page starts.

That file when I page source isn't a single file is it , as it is pulled from a collection of files.

No, you do not need to set the style for every product info page. You actually could not do that.

Right click on your page, and choose "view source". This section:

will be in the "view source" for every product page. This is the css tag that you would edit in the stylesheet, that would give you a background color for every product page.

You can open up your stylesheet.css and add something like this
#productGeneral {
background-color:#333333;
}

Ok that works thanks. I soent 30 mins on firefox firebug where the CSS file works and can be edited with changes then suddenly fails to load css code on firebug....your way is good.

The background color is changed on every prod info page now, can you add stylesheets to specific prod information?

There are a few combo boxes i want moved which from the source file has it id='atrrib-4', so do I just add the id to the style sheet and change location for it there? (it looks like it is nested in a dozen other tags).

I wouldn't add javascript to the style sheet and still not sure about that yet.

mex:

can you add stylesheets to specific prod information?

Yes, there is a way, here is a little bit on it, but you may want do a search on "product specific stylesheet" or "Page specific stylesheet"
http://www.zen-cart.com/forum/showpost.php?p=329433&postcount=15

mex:

There are a few combo boxes i want moved which from the source file has it id='atrrib-4', so do I just add the id to the style sheet and change location for it there? (it looks like it is nested in a dozen other tags).

May be silly of me to ask, but what are combo boxes? Can you be more specific? I don't know what you're speaking of.

mex:

I wouldn't add javascript to the style sheet and still not sure about that yet.

No. javascript goes in your includes/templates/YOUR_TEMPLATE/jscript/ folder. What do you need extra jscript for?

Hi,

combo boxes are option boxes and are drop down boxes where you click on them and other option values drop down appear in . eg in default install graphic cards the prod items have these at bottom of the page . They are defined in option name and values in admin.
On the page view source i get the id of them so i take it i can change them from
stylesheet.css

I need javascript for a drop down menu (suckerfish type).

So all i need is the id from the page source, goto stylesheet.css to edit css from anywhere.

mex:

Hi,

combo boxes are option boxes and are drop down boxes where you click on them and other option values drop down appear in . eg in default install graphic cards the prod items have these at bottom of the page . They are defined in option name and values in admin.
On the page view source i get the id of them so i take it i can change them from
stylesheet.css

I need javascript for a drop down menu (suckerfish type).

So all i need is the id from the page source, goto stylesheet.css to edit css from anywhere.

I don't know if using the id='attrib-4' will style anything for you... I would style dropdown menus with the 'select' tag, and style radio boxes with the 'radio' tag. Could I see a link with more specific details as to what you'd like the drop down menus to do differently?

Hi,

No I just want to move them (I didn't know you could style them).

I have 1 dropdown box then a large space for button on right then another dropdown box. It looks messy.

Did I get this right the id=attrib-4? to just set in stylesheet. Is this how it is done?

To style anything I do just edit the stylesheet.css with a tag from page source, this is a major question of mine.

I goto the stylesheet and add this. Now this is from default install on graphics cards Matrox G400 32MB prod info page.

#attrib-4 {position: relative: left :100px;} This should move it 100 px to the right from where it currently is, but fails to move.

Now since this id is nested in about a dozen other id's do I include this. I forget how to do this within a complicated id structure.

mex:

I goto the stylesheet and add this. Now this is from default install on graphics cards Matrox G400 32MB prod info page.

#attrib-4 {position: relative: left :100px;} This should move it 100 px to the right from where it currently is, but fails to move.

Now since this id is nested in about a dozen other id's do I include this. I forget how to do this within a complicated id structure.

I don't think you can use the attrib-4 to style things (and moving things is considered styling them, by the way) as I mentioned before. The divs I would try are:
#productAttributes
.wrapperAttribsOptions
.optionName back

I could really help you a lot more if your site was online. Its probably a spacing issue.

Here's a copy and paste from another post where I helped someone who didn't like the spacing on their attributes, perhaps changing the following sections will help:

.wrapperAttribsOptions {
margin: 0em;
padding:0;
}

label, h4.optionName {
line-height: 1em;
padding: 0em;
margin:0;
}

I got webdeveloper as advised. Now how to use this for say wanting to style things around a prod info page. Will this make things easier as i don't know how best to get the spcific id's to style.

I will play around with what you said as well.

jettrue:

I don't think you can use the attrib-4 to style things (and moving things is considered styling them, by the way) as I mentioned before. The divs I would try are:
#productAttributes
.wrapperAttribsOptions
.optionName back

I could really help you a lot more if your site was online. Its probably a spacing issue.

Here's a copy and paste from another post where I helped someone who didn't like the spacing on their attributes, perhaps changing the following sections will help:

.wrapperAttribsOptions {
margin: 0em;
padding:0;
}

label, h4.optionName {
line-height: 1em;
padding: 0em;
margin:0;
}

Hi ,

well tried the above code with different values to see what happens and nothing did happen. How do you get those id's to change ?

I have spent so long with ZC (days) and i can't even move and img or a few elements anywhere.
I appreciate your help but at the moment i can't make heads or tails of moving anything at all with ZC.

Maybe explain and img or just how to go about with webdeveloper how to mod any imge/buton/element.

Solved the atrribute problem and you do use this name but my code had an error in it, it now works. (and i thought i was going a little crazy):smile:

mex:

Solved the atrribute problem and you do use this name but my code had an error in it, it now works. (and i thought i was going a little crazy):smile:

Well, I'm glad it worked, but by using the attrib-4, that won't work for all product pages or for different attributes drop down boxes. So if you only want it to work for that product (or perhaps all products with the same drop down) then that's great!