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.

you are the man! :bigups: home run on all:D

Regarding product description positioning problem, anything I could copy you on that might give you some clues?

I have downloaded the Flexible Attributes mod and I know who to call with any questions :yes: Thanks for developing this, I think it is exactly what I need. Question on how to install since I am not using FTP as I am on a local host (which means very little to me, but all is working) I have renamed the your_template files to my template name. Where should I drag the Includes folder to and do I need to worry that it will replace something it shouldn't as there is the zencart>includes folder? Will this effect any of the work we have done so far?

I have downloaded firefox web developer and firebug. Looks cool, I just need to figure it out. Where do you recommend I start in order to get a grasp on it? :wacko:

I am working on a Mac Mini intel core duo based that has a CD-Write: -R, -RW
DVD-Write: -R, -RW, +R, +RW, +R DL
any recommendations as to quick and easy backup procedure for the work being done in zencart and my web page?

I really appreciate the time you've spent helping me out, thanks!! :clap:

I think I may have followed your lead and installed Flexible Attributes successfully. I will start to rename the attributes with correct ID's and then copy and paste into the original style sheet?? :blink:

"Rename"? Most if not all of the IDs would not have existed before so there is nothing to rename... There may be a few generic classes/ids that will need the selectors in their rules renamed.

As you found, copying the /includes/ folder over the existing site's /includes/ will only replace exact duplicate paths. If you have any override copies of files in the mod already, they would need to be winmerged to keep your existing edits. Most if not all of the mod's files will be new and unique.

I am confused what exactly I need to do with the Flex Attri stylesheet.

Still not sure what's embedded comments or code. What exactly and where would I need to cut and paste into my templates css sheet if I want to : (see screenshot)

1. Have "Conversion Specification" (I used the comment field for Seat Height option name. I originally created a read only option name Conversion Specification with one option value but neither show up??) Anyhow I want "Conversion Specification" in line but to the right of "Frame Conversions" with same size/color font and the word Conversion over the word Specification. This would act/look like a normal Option Name.
2. Then next to this to the right, just like other options list my other options, specifically Seat Height, Back Height, Stretcher and Footrest in a slightly smaller and black color font, one on top of the other like they were a list of option values.
3. Move "Frame Conversions" dotted bottom-border lower to be below the last option to the right (Footrest) so that both "Frame Conversions" and "Conversion Specification" looks like they are in the same category.

Thanks!!!

Sorry, I forgot to ask if the dropdown windows can all be of the same length irregardless of the length of dropdown value text amount?

To make dropdowns uniform width:

.wrapperAttribsOptions select {width: 15em;}

Since I can't see the page live, I don't know any of the attribute ids to give exact individual rules. All of the dimensions are guesses since I can't test them on your page. Adjust to suit.

Code:

---

#wAttrib[Frame Conversions] {width: 49%; height: 13em;}
#wAttrib[Seat Height] {float: left; width: 49%; border: none;}
#wAttrib[Seat Height] h3 {font-size: 1.1em; color: #0000ff; width: 15em;}
#wAttrib[Back Height] {float: left; width: 49%; border: none;}
#wAttrib[Stretcher] {float: left; width: 49%; border: none;}
#wAttrib[Footrest] {float: left; width: 49%;}

---

Thanks, I'll give it a try but I am still confused if I am supposed to copy all of your code lines and paste them into my style sheet? Or does your stylesheet talk somehow with my original one?


Thanks for the help and this would probably be easier my site was live

Well this is what I pasted into my original stylesheet. Frame Conversion is #34, Seat Height is 36, Back Height is 37, Stretcher is 38, Footrest is 39. As you can see Assembly Options (27) is over to the right now.

Should I assign a #wAttrib- to all my attributes for full control?

Thanks!

Just a note ... when testing, do not make words bigger than real life ... they need air in them or they cannot wrap properly and will throw off things you are testing as they cannot breathe ... :blink:

Hi Ajeh, That must be sensei talk, I'm sure gjh42 will know exactly what you mean. But for the white belt in training, like myself, it's over my head :dontgetit Can you translate? :smile:

I forgot to put this into my previous post. Here is what I pasted into my style sheet which bore the results of the screenshot.


/*attribute layout*/
.wrapperAttribsOptions label {font-size: 1.0em;}/*make "label" elements match other text*/
h3#attribsOptionsText {display: none;}/*hide the "Please Choose:" heading*/
h4.optionName {font-size: 1.0em;}
.wrapperAttribsOptions+br.clearBoth {display: none;}/*allow floated attributes to sit side by side if desired*/
#wAttrib-34 {width: 49%; height: 13em;}
#wAttrib-36 {float: left; width: 49%; border: none;}
#wAttrib-36 h3 {font-size: 1.1em; color: #0b6fa0; width: 15em;}
#wAttrib-37 {float: left; width: 49%; border: none;}
#wAttrib-38 {float: left; width: 49%; border: none;}
#wAttrib-39 {float: left; width: 49%;}

OK maybe I'm ready for the Orange belt test:D I think I am getting the concept of "float". I added float left to my Frame Conversion which brought the Seat Height next to it, which is what I wanted. The for the heck of it I added a #wAttrib-27 (Assembly Options) and removed any floats. :clap:

I used the comment field of my Seat Height option to get the text Conversion Specifications but I did create a display only Option for the same but it does not show on my web page? I am unfamiliar with this option but I thought it would act as fixed text. But what I really want is that Conversion Specifications be the same font/size/color as my other options and also stack the words on top of each other as my other option names appear.

Quote:

---

Originally Posted by TonyG485

Hi Ajeh, That must be sensei talk, I'm sure gjh42 will know exactly what you mean. But for the white belt in training, like myself, it's over my head :dontgetit Can you translate? :smile:

---

Look at the image you posted and where you have your garbage text with the words of 25+ characters long ...

Break them up into shorter words with spaces so that they are not forcing distortion issues by being so long that they cannot wrap on the page ...

Alright I understand now, I've made the changes and added ProductDescriptiion code float left in my stylesheet see below. But I still can't get my product name and description to come under model# at right of image???

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

#productMainImage {
float: left;
}
#productDescription {
float: Left;
}

There is no need to have a float on the description. You may have a <br class="clearBoth" /> between the image and description - check your "view source". That would keep the description from wrapping around the image.

Hi gjh42, thanks for checking back in.

You are right,

<br class="clearBoth" />
<?php
}
?>
<!--eof Product details list -->

I've tried every combo I can think of and still nothing works. Here is some of my code:
<!--bof Main Product Image -->
<?php
if (zen_not_null($products_image)) {
?>
<?php
/**
* display the main product image
*/
require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php
}
?>
<!
--eof Main Product Image-->

<!--bof Product Name-->
<h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
<!--eof Product Name-->

<!--bof Product description -->
<?php if ($products_description != '') { ?>
<div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?><div style='font-size:12px;width:100%;height:18px;'></div>
<?php } ?>
<!--eof Product description -->


<!--bof Product details list -->
<?php if ( (($flag_show_product_info_model == 1 and $products_model != '') or ($flag_show_product_info_weight == 1 and $products_weight !=0) or ($flag_show_product_info_quantity == 1) or ($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name))) ) { ?>
<ul id="productDetailsList" class="floatingBox back">
<?php echo (($flag_show_product_info_model == 1 and $products_model !='') ? '<li>' . TEXT_PRODUCT_MODEL . $products_model . '</li>' : '') . "\n"; ?>
<?php echo (($flag_show_product_info_weight == 1 and $products_weight !=0) ? '<li>' . TEXT_PRODUCT_WEIGHT . $products_weight . TEXT_PRODUCT_WEIGHT_UNIT . '</li>' : '') . "\n"; ?>
<?php echo (($flag_show_product_info_quantity == 1) ? '<li>' . $products_quantity . TEXT_PRODUCT_QUANTITY . '</li>' : '') . "\n"; ?>
<?php echo (($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name)) ? '<li>' . TEXT_PRODUCT_MANUFACTURER . $manufacturers_name . '</li>' : '') . "\n"; ?>
</ul>
<br class="clearBoth" />
<?php
}
?>
<!--eof Product details list -->

stylesheet: I added clear for image and put in #productdetailslist which wasn't there before.


#productMainImage {
clear: left;
}
#productDestailsList { float: Left;}

#productName {
float: left;
}

I did notice this for Model#/productDetailslist in Web Developer display element under Ancestors
html
body #productinfoBody
div #mainWrapper
table #contentMainWrapper
tbody
tr
td
div #productGeneral .centerColumn
form
div #productDescription .productGeneral biggerText
ul #productDetailsList .floatingBox back

not sure if the "floatingbox" is doing anything?

My desired order to the right of the image would be starting from the top:
Model#
Product Name
Product Description

I wanted to show you the progress I made with your great Flexible Attributes mod. :flex:

Thanks!

I still have tons of other stuff to do yet but seeing this progress keeps my motivation going which really helps. That web developer seems like a great tool. I am stumbling my way through it and finding some really useful stuf. I guess there is no manual though for beginners?

I forgot to attach a screenshot for product description wrap problem, see below.