Need help with Product Description and options

Hello, I have purchased a template that I am trying to change. I'm not sure if I have all of the main files that need to be edited i.e. css, tpl_product_info.php ... etc. setup as overides. First question. What are the top 5-10 file names ( and what they control) that most likely I will need to edit in order to change most "normal" things on my web page. If I knew those, that would then narrow things down and make this less intimidating and time consuming. At least I would know where to start.

I have attached a screen shot of a product listing page. I would like to know how to

1. Move the Model # above "Mimi's Chair" at right of image
2. move my product description gibberish gggggggg to the right of the image and underneath "Mimi's Chair"
3. Make option names all the same font size and blue
4. create greater space between option name and option type i.e. dropdown, radio AND also align the left side of the dropdown windows
5. Lastly (I wish) align the left side of my option text boxes

Sorry for the laundry list but I have searched the forums and have not been successful. Thanks for your help :smile:

It's much easier and more reliable to see your site live when advising on styling changes.

1. Move the "product details" section of code to above the product name section in /includes/templates/your_template/templates/tpl_product_info_display.php.

2. In your stylesheet, #productMainImage is by default float: left; this allows the text to flow around it and come up on its right side. Does your template have this?

3, 4, 5. In your stylesheet, h4.optionName controls the names, and you can add font and width properties. Giving this a fixed width takes care of 4 and 5.

gjh42 thanks for your help.

My site is not live and I am only working on it now with localhost setup.

1. That worked. thx
2. I don't think so. Here's a section of my stylesheet

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0 20px 10px 0 ;
}

#productMainImage a:link {
text-decoration: none;
}

#productAdditionalImages a:link {
text-decoration: none;
}

#productMainImage img {
/* border: 1px solid ################; */
}

.categoryIcon {}
#cartImage {
margin: 0.5em 1em;
}

3.,4.,5. here's the stylesheet

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;

Sorry I really don't know code, can you give me an example of the code you are talking about to fix width AND font size AND color so that the option names all appear alike. Mine now appear to be different i.e. some slightly bigger, bolder etc.

Thanks!!!!

I forgot.

When I edit any of my files, is there some note I can put to myself within the code so that I have a reference as to what was done? I tried adding the line //TG moved product details section above product name section but what happened is that the this text appeared on my webpage above my model#.

How would I make a note and not effect any code?

Thanks!

CSS only recognizes /*long form comments*/.
HTML uses <!-- html comments -->.
PHP recognizes /*long form comments anywhere*/ or //short comments at the end of a line.

Add to your Image Display section

Code:

---

#productMainImage {
    float: left;
    }

---

Add a new rule

Code:

---

h4.optionName {
    width: 8em;
    color: #1122ff;
    font-size: 1.1em;
    font-weight: bold;
    }

---

I must be doing something wrong but I struck out on both. I first tried to add this #productMainImage { float: left;} to differing spots in my tpl_product_info_display.php
but nothing worked. I then tried to add it in differing spots in my stylesheet but nothing happen. See code below.


/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0 20px 10px 0 ;
}

#productMainImage a:link {
text-decoration: none;
}

#productMainImage {
float: left;
}

#productAdditionalImages a:link {
text-decoration: none;
}



Then I added your second request as seen below, which did not change any of my option name/value positioning.

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;

h4.optionName {
width: 8em;
color: #1122ff;
font-size: 1.1em;
font-weight: bold;
}

}
#productName {
color: #5D6465;
}

Did I do anything wrong?

Thanks!!!

I realized I pasted and removed a bracket from the previous code. It now works. :clap: Though it seems like "Assembly Options" text is a wee bit smaller than others? Please look at my screen shot.

I have tried to move my add to cart above the "tell a friend/review" but to no avail. Where and how could I do that? :blush:

The differing sizes could be due to some of the optionNames being "labels" while others are not. Ideally all types of attributes would be handled the same way, but there are inconsistencies. It looks like the two radiobutton attributes have smaller names. Perhaps something like

.wrapperAttribsOptions label {font-size: 1.0em;}

would help.

Moving the add to cart code in tpl_product_info_display.php should do it for you. If you are getting them on the same line, add clear: right; to the stylesheet rule of the element that follows the add to cart section in the file.

thanks gjh42, that all worked like a charm. My page is looking great!! :hug:

1. I still can't get my product description to come up at the right of my product image AND below model#??
2. RE: define('PRODUCTS_ORDER_QTY_TEXT','Enter Quantity: '); in the English.php, where can I manage the font type, color and positioning for my 'Enter Quantity:' text? also what is the command to use in place of text if I don't want any text/heading to show up at all?
3. I don't know if this is possible but since zencart has no dependant attributes I would like to enter a display only Option Name like "Conversion Specification" that is in line with but to the right of my "Frame Conversions" to act as a subcategory and to make use of the empty space at right. Then below "Conversion Specification" and indented I would add 4 more Option Names each drop down type
4. Lastly, :blush: I have some dotted type of borders I've added but I would like to be able to add freely under some of my Option Names to make a grid look. Also if #3 above is doable then can a vertical dotted border be created to divide left side of page and right?

THANKS!!!!!!!!

I can't troubleshoot that positioning more without actually seeing it.

To eliminate the qty text completely you would do this:
define('PRODUCTS_ORDER_QTY_TEXT','');
with two single quotes, no space between them.

I think you need the Flexible Attributes mod from Free Addons. That will let you get into the specific layout/styling you are asking for.

The borders would be doable. You might add border-bottom: to .wrapperAttribsOptions for a starter.

You really need to get some developer tools to work on your site. Firefox's Web Developer and Firebug extensions are both fundamental tools we use all the time for debugging and styling. Web Developer's Imformation > Display Element Information and CSS > Edit CSS buttons in particular will become your best friends.