jerseyjoe Posted March 17, 2006 Share Posted March 17, 2006 Please see this CC site under construction, particularly this page: http://www.vikolya.com/store/index.php?act...rod&productId=5 I'd like to move the image to the left and bring the product descrption up so it is along side the image. How to, please? Thanks Quote Link to comment Share on other sites More sharing options...
convict Posted March 17, 2006 Share Posted March 17, 2006 Use table with two colum or two DIVs with style property float: left in viewProd.tpl TABLE: <!-- BEGIN: prod_true --> <strong>{LANG_DIR_LOC}</strong> {CURRENT_DIR} <form action="{CURRENT_URL}" method="post" name="addtobasket" target="_self"> <p class="txtContentTitle"><strong>{TXT_PRODTITLE}</strong></p> <table><tr><td> <div style="text-align: center;"><img src="{IMG_SRC}" alt="{TXT_PRODTITLE}" border="0" title="{TXT_PRODTITLE}" /></div> <!-- BEGIN: more_images --> <div style="text-align: center;"><a href="java script:openPopUp('extra/prodImages.php?productId={PRODUCT_ID}', 'images', 548, 455, 0);" class="txtDefault">{LANG_MORE_IMAGES}</a></div> <!-- END: more_images --> </td><td> <p> <strong>{LANG_PRODINFO}</strong> <br /> {TXT_DESCRIPTION} </p> <p> <strong>{LANG_PRICE}</strong> {TXT_PRICE} <span class="txtSale">{TXT_SALE_PRICE}</span> </p> <ul> <li class="bulletLrg"><a href="index.php?act=taf&productId={PRODUCT_ID}" target="_self" class="txtDefault">{LANG_TELLFRIEND}</a></li> </ul> <!-- BEGIN: prod_opts --> <br /> <strong>{TXT_PROD_OPTIONS}</strong> <table border="0" cellspacing="0" cellpadding="3"> <!-- BEGIN: repeat_options --> <tr> <td><strong>{VAL_OPTS_NAME}</strong></td> <td> <select name="productOptions[]"> <!-- BEGIN: repeat_values --> <option value="{VAL_ASSIGN_ID}"> {VAL_VALUE_NAME} <!-- BEGIN: repeat_price --> ({VAL_OPT_SIGN}{VAL_OPT_PRICE}) <!-- END: repeat_price --> </option> <!-- END: repeat_values --> </select> </td> </tr> <!-- END: repeat_options --> </table> <!-- END: prod_opts --> <br /> <strong>{LANG_PRODCODE}</strong> {TXT_PRODCODE} <div> {TXT_INSTOCK}<span class="txtOutOfStock">{TXT_OUTOFSTOCK}</span> <!-- BEGIN: buy_btn --> <div style="position: relative; text-align: right;">{LANG_QUAN} <input name="quan" type="text" value="1" size="2" class="textbox" style="text-align:center;" /> <a href="java script:submitDoc('addtobasket');" class="txtButton">{BTN_ADDBASKET}</a> </div> <!-- END: buy_btn --> </div> <input type="hidden" name="add" value="{PRODUCT_ID}" /> </form> </td></tr></table> <!-- END: prod_true --> DIvs code is almost the same. Quote Link to comment Share on other sites More sharing options...
jerseyjoe Posted March 17, 2006 Author Share Posted March 17, 2006 Use table with two colum or two DIVs with style property float: left in viewProd.inc.php What is the path to that file? I'm using the killer skin if that matters. Quote Link to comment Share on other sites More sharing options...
convict Posted March 17, 2006 Share Posted March 17, 2006 Ooops sorry bad name . I had to edit my last post. Template file is the right one: skins/Killer/styleTemplates/content/viewProd.tpl Quote Link to comment Share on other sites More sharing options...
markscarts Posted March 17, 2006 Share Posted March 17, 2006 :) This is more difficult than it first appears, if you wish to do it without tables - but depending on what you're doing with the layout, may not matter. I reworked all the divisions in viewProd.tpl to make it work properly for a client awhile back. It looked like it worked when I first did a simple revision, but in fact when adding borders to certain elements the layout was screwed up, until I went through and revised the structure of most of the divisions. Please feel free to use and adapt my version of this - just remove the .txt extension from the file. Quote Link to comment Share on other sites More sharing options...
jerseyjoe Posted March 21, 2006 Author Share Posted March 21, 2006 This is more difficult than it first appears, if you wish to do it without tables - but depending on what you're doing with the layout, may not matter. I reworked all the divisions in viewProd.tpl to make it work properly for a client awhile back. It looked like it worked when I first did a simple revision, but in fact when adding borders to certain elements the layout was screwed up, until I went through and revised the structure of most of the divisions. Please feel free to use and adapt my version of this - just remove the .txt extension from the file. I mis-spoke when I said "Killer Skin". I'm actually using Legend but I think that's not an issue. However I am having a nasty problem with this. I downloaded your file, renamed it to remove the txt extension and FTPed it, overwriting the existing file in Legend. After a few futile tries, I deleted the original and then uploaded your version. As a result, the product page is blank. http://www.vikolya.com/index.php?act=viewProd&productId=1 I'm not worrried about the lost display. I know that my bottom line is I can simply restore the original TPL from the CC 3.0.10 download zip. But if I could install your mod, I really wish to do that. May I send you the admin codes for the store - and for the FTP and ask that you take a look at what might be wrong? TIA Quote Link to comment Share on other sites More sharing options...
markscarts Posted March 21, 2006 Share Posted March 21, 2006 I see you have it offline now - so I guess that would be the only way I can see it. Sending PM, Joe. Quote Link to comment Share on other sites More sharing options...
markscarts Posted March 22, 2006 Share Posted March 22, 2006 Dang, Joe! I don't know if that was the easiest fix I've ever done, but it ranks right up there - As a result, the product page is blank. Yes, but when I looked at the server, there was no viewProd.tpl there at all! I uploaded the file I shared with you, and this is how it looks: http://www.vikolya.com/index.php?act=viewProd&productId=1 :) Quote Link to comment Share on other sites More sharing options...
jerseyjoe Posted March 22, 2006 Author Share Posted March 22, 2006 Dang, Joe! I don't know if that was the easiest fix I've ever done, but it ranks right up there - No fair! I promise next time I'll come up with something to test your skills. Now, why the hell did I think that the upload had worked - but it hadn't? I may have to stop taking these little blue pills that make my eyes blurry and . . . and . . . hmmm, never mind. I'll get glasses. Thanks for the beautiful fix. It's the perfect thing for products whose aspect ratio requires a tall vertical photo as did those. Quote Link to comment Share on other sites More sharing options...
jerseyjoe Posted April 7, 2006 Author Share Posted April 7, 2006 I had to reinstall that mod because - well, don't ask. Just accept that I did a reinstall of the store. A few mins ago I took a fresh copy of your mod, renamed it properly and FTP'd it to overwrite the default in the Legend skin. This time, the upload is definitely on the server, in the right folder: (skin > legend > style templates > content) But it's not showing up in the browser. I appreciate you doing it for me - but I'd much rather find out what I've done incorrectly. Any idea? The access codes have not changed since I PMd them to you. I just put the store back online for a while to make it easier for you to see (www.vikolya.com - especially the Jewelry Stands). OOPS - by the way - I'd like that mod even more if it also would put the "(+) More Images" link directly under the prod description. I think that link is not easily seen tucked under long images such as this site needs. Can you do that? I'll pay you for it. Thanks. Quote Link to comment Share on other sites More sharing options...
markscarts Posted April 7, 2006 Share Posted April 7, 2006 Hmm, I swear, Joe, last time the file wasn't there and all I did was add my file. Obviously a different prob this time. I'll see if I can spot it. Quote Link to comment Share on other sites More sharing options...
markscarts Posted April 7, 2006 Share Posted April 7, 2006 Joe, I have looked at your site, and I see that you have a number of display problems - but the product page appears to be working fine, e.g.: http://www.vikolya.com/index.php?act=viewProd&productId=115 I looked at this in both FF and IE, and I do not get a blank page. If you have a blank page, you'll need to empty cache. Here is what I see, and I've reviewed my code in the mod . . . 1. Image left, Product info and "more" and "buy" buttons are alongside on the right. On your page, the buttons do not appear because the item is out of stock. 2. Text description goes below image. I did that purposefully, but you can change that by removing the <br clear="all" /> that is coded above the text description code. 3. To move the + More Images, you simply move this entire block: <!-- BEGIN: more_images --> <div style="text-align: left;"><a href="java script:openPopUp('extra/prodImages.php?productId={PRODUCT_ID}', 'images', 548, 455, 0);" class="txtDefault">{LANG_MORE_IMAGES}</a></div> <!-- END: more_images --> IMO, the best place for it would be just before <!-- BEGIN: prod_opts --> The key is not to place that block inside another set of tags (like the one I just copied above for prod options) or outside the set of tags for <!-- BEGIN: prod_true --> and <!-- END: prod_true --> Remember, these may look like html comment tags, but in XML XTemplate they are cues for PHP Quote Link to comment Share on other sites More sharing options...
jerseyjoe Posted April 8, 2006 Author Share Posted April 8, 2006 POST POST EDIT - ignore this. I now realized I didn't read well enough. Put this on hold until I try what you advised. I'm stuck at a basic level. It seems that you are seeing the p[age with the description nexrt to the image but even after clearing my cache, I am not. The attched screeshot of http://vikolya.com/index.php?act=viewProd&productId=3 shows what I am seeing. Note that the description text is below the image, not to its right, which is where I think it should be. Any idea what's happening? Also, you said you see other display problems. The only other one I'm seeing, other than this Product Descrition issue, is that in FF, the Category display needs to be fixed. That's on my punch list but I'm not aware of others. If you are seing something, please tell me? TIA Quote Link to comment Share on other sites More sharing options...
jerseyjoe Posted April 8, 2006 Author Share Posted April 8, 2006 Once I started paying attention to what you actually said - but not what I wanted to think you said - it worked! See: http://vikolya.com/index.php?act=viewProd&productId=38 Thank you for your generous help. You've not only helped my make the page look the way I wanted it to, you've taken my understanding of how these things work one step further. Now, what other display issues did you see (other than the FF handlling of Categories, which I think I can find in an existing thread)? Regards, Joe Quote Link to comment Share on other sites More sharing options...
markscarts Posted April 8, 2006 Share Posted April 8, 2006 Hi Joe, that is exactly the issue I saw (FF & cats). I'm glad you got it working. I'd have gladly done it for a few pence as you suggested, but it needed so little work you know . . . and if you've gained a greater understanding of the code, the teacher in me is satisfied :P Quote Link to comment Share on other sites More sharing options...
jerseyjoe Posted April 10, 2006 Author Share Posted April 10, 2006 Hi Joe, that is exactly the issue I saw (FF & cats). I'm glad you got it working. I'd have gladly done it for a few pence as you suggested, but it needed so little work you know . . . and if you've gained a greater understanding of the code, the teacher in me is satisfied Well, I'm stuck on one thing. Take a look at : http://www.vikolya.com/index.php?act=viewCat&catId=2 in both IE (where it's fine) and FF (where it isn't). I had the FF version looking good. But somehow, I've changed something that I can't find. Any ideas? Joe Quote Link to comment Share on other sites More sharing options...
markscarts Posted April 11, 2006 Share Posted April 11, 2006 "Any ideas?" Sure, Joe. IE is ignoring your CSS rules because your images are too wide for the boxes you have set in CSS. FF is following the CSS rules and created boxes of 150px width, trying to squeeze images of 175px width into the boxes. Change the width of your boxes in the CSS rules so that the width is greater than 175px (the width of those images). Experiment with the width until IE and FF look the same. Here is where you need to make the change in CSS (layout.css): .subCat { text-align: left; padding: 5px; float: left; width: 150px; height: 360px } Quote Link to comment Share on other sites More sharing options...
jerseyjoe Posted April 11, 2006 Author Share Posted April 11, 2006 Sounds right. I'm too pre-occupied now to try it but maybe by morning. I'll post after I try that. Joe Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.