VirtueMart Forum

VirtueMart 1.1.x [ Old version - no longer supported ] => Themes & Layout Problems and Customization VM 1.1 => Topic started by: strebblo on January 16, 2009, 13:04:17 pm

Title: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: strebblo on January 16, 2009, 13:04:17 pm
Hi Everyone

I really need some help with this quite urgently, so that I have enough time to finish the rest of the site.

The issue seems to be that the items when you either list all products or look at items in their categories, they display differently to the way I thought I'd styled them in the CSS.

They were fine a few weeks ago, then I started styling other parts of the site, and when I came to look at the way the items were listed, they were styled ...strangley!
I'm not sure when it happened, or what I've changed to make the difference, but I can't seem to change it back.


The way it should be (items listing) is:

Item image in top left of the 'box', then the price in top right, THEN description below these, followed by the price and add to cart buttons.

Now, somehow, even though the image comes first in the php code, the item description is at the top and I can't get back the nice even layout I had before.

Please look here:

http://bm-camping.co.uk/jvmc/index.php?orderby=product_cdate&DescOrderBy=DESC&Itemid=1&option=com_virtuemart&page=shop.browse&category_id=&manufacturer_id=0&keyword=&keyword1=&keyword2= (http://bm-camping.co.uk/jvmc/index.php?orderby=product_cdate&DescOrderBy=DESC&Itemid=1&option=com_virtuemart&page=shop.browse&category_id=&manufacturer_id=0&keyword=&keyword1=&keyword2=)


Please try and help if you can, I'm DESPARATE to get this sorted and the site has to go live in less than 2 weeks, so I am panicking now!

I can happily post up any code that is needed, I think I just need someone to point out the offending code - I'm sure it's been over ridden somewhere by conflicting code.

Many thanks - Fred
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: Dave Withnall on January 19, 2009, 12:30:23 pm
Your code does not output the content as you describe.
It comes out as Title, Price, Description, Image, Rating, AddToCart

Secondly, you are using id tags for styling when you should be using classes. Ids are for unique elements on your page only.

You have some bizarre floats & margins in your css, and the css is declared incorrectly. You are missing closing } on some of the elements.

Change your code so that image comes out before description and use css like this

.browseProductTitle { width: 100%; }
.browsePriceContainer {width: 49%; border: 0; margin: 0; padding: 0; float: right; }
.browseProductImageContainer {width: 49%; border: 0; margin: 0; padding: 0; float: left;}
.browseProductDescription {width: 100%; margin: 0;}
.browseRatingContainer {width: 100%; text-align: center; }
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: strebblo on January 19, 2009, 12:36:07 pm
Firstly, a huge thanks Dave, this is a pretty sparse forum!!

Would you mind checking back? I'll have a good look through my code and make some changes as you suggest, I'll post back here this eveing if I get anywhere, or get stuck.

Thanks again - a fresh pair of eyes makes a big difference ;)
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: strebblo on January 21, 2009, 12:52:44 pm
That did do something, but I think that as I started off with a joomla skeleton template that came with css, plus all of the cr*p that VM shoves in there, I'm on to a bit of a loser here.

I think I'll just have to strip the code right back to basics and almost start again. I cannot believe how much mess and crud there is in there... :(
Why on earth is there CSS strewn throughout the VM code? Why the hell isn't everything located in one place?? Grr!!
Granted, I couldn't do better at the moment, but then I'm not writing and offering this for general consumption.

Thanks for the help, though I don't think I'll be using VM again after this project... this has not been a good experience for me.
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: Dave Withnall on January 21, 2009, 13:01:33 pm
I've had the same thoughts on numerous occasions.
Everytime I've used Joomla/VM I've started from scratch. It's just easier than trying to adapt the existing bits.

Unfortunately I haven't found a cart/cms combo that works as well as this.

If you find one I wouldn't mind knowing about it.

D.
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: strebblo on January 21, 2009, 13:04:02 pm
Well I'm glad I'm not on my own there then!!
That makes me feel a bit better - thanks..

Fred
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: strebblo on January 21, 2009, 13:17:52 pm
I am right in thinking that "browse_1.php" is the file with the code that relates to the item layout pages, aren't I?

It seems that the image/description and other bits have moved around! Unless I looked at a different file (that looked the same as this?!) it has changed somehow!

Well I've put the order as:

Title
Image container
Price container
Product container
Rating container
Add2cart container

Does that seem right? I'll try and move them around a bit.

Cheers
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: strebblo on January 21, 2009, 13:31:19 pm
Infact in addition to the above, if that IS the right page, when I take my n00b glasses off, I can see that all of the divs are ID's! That may be why I'm having some trouble?
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: hellodave on January 21, 2009, 13:35:23 pm
Well, ID`s are ok sometimes :)
The rule is, if there is only 1 of it on the page, use ID, if there are more than one, use class. Hope that helps.
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: strebblo on January 21, 2009, 13:55:16 pm
Good advice it seems - annoying that this is the virgin VM code though.
In your opinions, should I keep the "browseProductContainer" DIV as an ID, and all the rest (in this file) as classes?

As below (browse_1.php):

Code: [Select]
<?php if( !defined'_VALID_MOS' ) && !defined'_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
mm_showMyFileName(__FILE__);
 
?>

 <div id="browseProductContainer">
       
       
        <div class="browseProductTitle">
<a title="<?php echo $product_name ?>" href="<?php echo $product_flypage ?>">
            <?php echo $product_name ?></a>
        </div>

        <div class="browseProductImageContainer">
        <script type="text/javascript">//<![CDATA[
        document.write('<a href="javascript:voclass window.open(\'<?php echo $product_full_image ?>\', \'win2\', \'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,wclassth=<?php echo $full_image_wclassth ?>,height=<?php echo $full_image_height ?>,directories=no,location=no\');">');
        document.write( '<?php echo ps_product::image_tag$product_thumb_image'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ?></a>' );
        //]]>
        </script>
        <noscript>
            <a href="<?php echo $product_full_image ?>" target="_blank" title="<?php echo $product_name ?>">
            <?php echo ps_product::image_tag$product_thumb_image'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ?>
            </a>
        </noscript>
        </div>

        <div class="browsePriceContainer">
            <?php echo $product_price ?>
        </div>
        <div class="browseProductDescription">
            <?php echo $product_s_desc ?>&nbsp;
            <a href="<?php echo $product_flypage ?>" title="<?php echo $product_details ?>"><br />
<?php echo $product_details ?>...</a>
        </div>
       
        <div class="browseRatingContainer">
        <?php echo $product_rating ?>
        </div>
<br />
        <div class="browseAddToCartContainer">
        <?php echo $form_addtocart ?>
        </div>

</div>
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: Dave Withnall on January 21, 2009, 14:10:18 pm
Replace it with a class.
Each product that shows up in a category listing is contained within a browseProductContainer. id's are only for unique page items.
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: Nirm on January 21, 2009, 14:14:37 pm
Dave

Quote
Unfortunately I haven't found a cart/cms combo that works as well as this.
If you find one I wouldn't mind knowing about it.

You may want to look at www.magentocommerce.net, however, learning curve is steep!
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: hellodave on January 21, 2009, 14:18:16 pm
Yeah I agree with Mr Withnall, they all need to be classes.
Unless you only have one product on your browse page!
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: strebblo on January 21, 2009, 14:24:10 pm
hmm.. did that, and it made no difference, so I checked, and I hadn't even written CSS for it yet.

Did a quick check to see if it was referenced anywhere else, and surprise, surprise - it's nestled with a load more CSS that refers to this page in
Code: [Select]
"..\components\com_virtuemart\themes\default\theme.css"!!

Typical VM I'm finding..
no wonder it was giving strange results. Good God this makes your head hurt



Dave
Quote
Unfortunately I haven't found a cart/cms combo that works as well as this.
If you find one I wouldn't mind knowing about it.
You may want to look at www.magentocommerce.net, however, learning curve is steep!


As opposed to VM!!?!
Will have a look for next time - Thanks.
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: Dave Withnall on January 21, 2009, 15:49:59 pm
I have to say one of the more annoying things VM does is the way it switches between MVC & old style html/php coding.

Take the checkout process for instance.

You start off fine with the shop.cart template which loads one of the basket templates.

But the next stage dumps you straight into the admin component stuff which gets updated. That follows through up until the thankyou page which jumps back to the templates.

Things like that, along with the css assigned directly to page elements in the code, are incredibly frustrating. As soon as you change it, you pretty much lose your ability to upgrade.

Meh, enough whinging.
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: strebblo on January 21, 2009, 15:59:10 pm
true enough I guess, I'd love to be able to help sort out some of these problems, but it just won't happen.

VM does have lots of problems, but I can't see anyone giving it the time needed to sort them out properly.
Joomla is the same - a good friend of mine wanted to use Joomla as a base CMS to use for his customers. I think he tried fixing and working around things for a month or two, and then started from scratch and wrote a CMS from the ground up without any of the legacy cr*p, and standards compliant too.

Frankly I don't have that special combination of desparation and talent, so I'll have to suffer open source CMS's and carts!
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: Nirm on January 21, 2009, 16:43:31 pm
1. Can i suggest that you install Firebug and Web Developer extensions for Firefox. They will save you HOURS in trying to debug and find referenced CSS files buried in the depths of your server.

2. browse pages related to layouts of categories, flypages refer to layout of product detail pages

3. Ref Magento - I think its MVC but you will have to hand code all your landing pages. You will need to learn their template language. Having said that it look incredibly impressive and its Free and gathering momentum fast.
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: strebblo on January 21, 2009, 17:52:08 pm
Thanks for that.

1 I have done, but it still doesn't show up everything that is so deeply nested. Useful nonetheless..
2 Not sure I follow this - please explain?
3 Magento looks impressive, not sure what MVC is though, and how do you go about finding out info re coding for it?

Thanks
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: Nirm on January 21, 2009, 19:40:41 pm
The browse templates - browse1.php etc etc. These can be edited to modify the layout of the category pages. The flypage templates - flypage.tpl.php etc can be edited to modify the layout of the product detail pages.

in vm 1.1 you can find these in components/com_virtuemart/themes/default/templates/browse and components/com_virtuemart/themes/default/templates/product_details

MVC - model/view/controller - a method of separating data layer from application logic from the presentation layer. makes for rapid development and customisation.

All good software is coded this way now. vm 1.1.x was rewritten in this way but its not quite there yet. However, it is a million times easier to edit that older versions - that was a real dog for novices and alike.

you could take a look a the user/developer manual which is very good

good luck
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: Nirm on January 21, 2009, 19:42:16 pm
magento - there are lots of screencasts to help you get started and good documentation and a decent forum.
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: klutzon on January 21, 2009, 22:38:15 pm
I have to say one of the more annoying things VM does is the way it switches between MVC & old style html/php coding.
Take the checkout process for instance.
You start off fine with the shop.cart template which loads one of the basket templates.
But the next stage dumps you straight into the admin component stuff which gets updated. That follows through up until the thankyou page which jumps back to the templates.
Things like that, along with the css assigned directly to page elements in the code, are incredibly frustrating. As soon as you change it, you pretty much lose your ability to upgrade.
Meh, enough whinging.

Wow. I never even thought of that...

Well, I hope my client will be happy with VirtueMart 1.1.2, because that's the customized version they're getting, and I guess it'll have to do! I'm planning on rebuilding all the templates from scratch, so I will lose the ability to upgrade cleanly, unless I see what changes were made an incorporate them into my custom templates, but that could take a long time...
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: strebblo on January 23, 2009, 17:22:48 pm
Thanks for the replies so far chaps - progress has been made and most of my hair remains :D

I have another problem with this in IE6 however, that I didn't notice before - it's on a page like this:
http://bm-camping.co.uk/jvmc/index.php?option=com_virtuemart&page=shop.browse&category_id=22&Itemid=1 (http://bm-camping.co.uk/jvmc/index.php?option=com_virtuemart&page=shop.browse&category_id=22&Itemid=1)

If you view it in FF, the problem is non exsistent, but I can't work out what is causing it - I just want the top area of the item list to have the correct amount of space and not overlap.
Any ideas?

Thanks again - Fred.
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: strebblo on January 23, 2009, 23:38:15 pm
Actually no problem now, just IE6 playing with me :(
After refreshing the page or clicking one the 'Bubba keg' link, it gets into position. Stupid IE...

If anyone else finds it is actually broken on their version of IE6, please tell me here though. Thankyou!
Title: Re: *V Urgent* Browse styling problem *** PLEASE HELP!***
Post by: strebblo on January 26, 2009, 21:59:22 pm
I guess this is fixed now...  ;D
Thanks everyone for the help.

If anyone can shed any light on the checkout styling process, please do in my other thread here: http://forum.virtuemart.net/index.php?topic=50801.0 (http://forum.virtuemart.net/index.php?topic=50801.0)

Thanks again....