Virtuemart Support :: Topic: Template doesn't seem ready? (1/1)

Welcome, Guest

TOPIC: Template doesn't seem ready?

Template doesn't seem ready? 6 years 2 months ago #15485

London

Hi
Just bought the template and I'm a little disappointed as it doesn't seem polished / ready for a production environment.
I have found a few issues in how the site displays and looking at your own demo, I can see the issue is recreated here too.

In Chrome > www.sysfix.co.uk/store/best-antivirus-software.html
You can see that the Product Details button does not have the same CSS styling applied as your own demo store. As far as I can see, the settings are the same. Also the issue shows in a similar way on the + - buttons for quantity. (see image 1)

Attachment 1.png not found

On entering into a product view, the add to cart button and quantity buttons are also different.

Copy the same URL into Microsoft Edge and you will see that the red buttons are all wrong as are product details and the quantity buttons. Copy your own URL demo.flexiblewebdesign.com/materialmart/ and go into a category and select list view, you will see the same issue on your own website.

Attachment 2.png not found

The topic has been locked.

Template doesn't seem ready? 6 years 2 months ago #15486

Support

Hi,

Some of your joomla template's CSS files include some dominant rules, which re-overrides the MaterialMart.

For instance, this CSS file:
www.sysfix.co.uk/templates/wt_plussone_jom/css-compiled/master-bcea656a7ff64a6455ab51b5f71e61fc.css
has an !important rule and margin rule for the .btn class name, which breaks the layout.

Attachment Pasted_Image_2_5_18__10_21_PM.jpg not found

Since the CSS file is "compiled" version; I can't really tell where does that .btn rule comes from. But check the CSS files within the "/templates/wt_plussone_jom/css/" folder, it should be in one of them.

Look for this CSS rule:

.btn {
    border-radius: 2px;
    color: black !important;
    text-shadow: none;
    margin: 5px 0;
    background-color: #f3f3f3;
    background-image: -moz-linear-gradient(top,#ffffff,#e1e1e1);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e1e1e1));
    background-image: -webkit-linear-gradient(top,#ffffff,#e1e1e1);
    background-image: -o-linear-gradient(top,#ffffff,#e1e1e1);
    background-image: linear-gradient(to bottom,#ffffff,#e1e1e1);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
    border: 1px solid #e1e1e1;
    padding: 7px 12px !important;
    line-height: inherit;
}

and replace it with this:

.btn {
    border-radius: 2px;
    color: black !important;
    text-shadow: none;
    margin: 0;
    background-color: #f3f3f3;
    background-image: -moz-linear-gradient(top,#ffffff,#e1e1e1);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e1e1e1));
    background-image: -webkit-linear-gradient(top,#ffffff,#e1e1e1);
    background-image: -o-linear-gradient(top,#ffffff,#e1e1e1);
    background-image: linear-gradient(to bottom,#ffffff,#e1e1e1);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
    border: 1px solid #e1e1e1;
    padding: 7px 12px;
    line-height: inherit;
}

(remove !important from padding and make margin:0;)

find this CSS rule (probably within the same CSS file):

.btn.btn-large {
    padding: 11px 18px !important;
    line-height: inherit;
}

and completely remove this rule.

Those 2 changes above will fix your 1st issue.

To fix the 2nd issue;

Open this CSS file:
ROOT//templates/wt_plussone_jom/html/com_virtuemart/assets/css/flexible.css

scroll to the very bottom and insert these lines:

.flexibleContainer .flexibleQuantityControls { vertical-align:top;}
.flexibleContainer .addtoCart.btn-large { padding:0 25px;}

The result will be:

Attachment ScreenShot2018-02-05at10.33.13PM.png not found

The 3rd issue you mentioned from our Live Demo, happens only on IE 11 and it is a known problem. Unfortunately; IE refuses to display the Material Icons (which are officially released by Google). More Info: github.com/google/material-design-icons/issues/536

Since i am using a Macbook, i can't test but can you try this patch below?

Open this CSS file:
ROOT//templates/wt_plussone_jom/html/com_virtuemart/assets/css/flexible.css

scroll to the very bottom and insert this CSS rule:
.

flexibleContainer .addtoCart:before {
   /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
 
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
 
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
 
  /* Support for IE. */
  font-feature-settings: 'liga';
}

then try to browse your website again using IE11 and check if it works.

Please let me know whether this patch works or not so I update the MaterialMart as well.

Regards.

Last Edit: 6 years 2 months ago by Support.

The topic has been locked.

CSS Styling issues 6 years 2 months ago #15493

London

Hi, thanks for the pointers to the css. Not sure why the designer of the template added important however removing that fixed the issue. I already use btn.large so have had to rename this class so that's fine.

## Patch Doesn't Work ##
I tried your patch for ie11 and ms Edge and sadly it did not fix the issue so still looks pretty unprofessional on Microsoft browsers.

## Add To Cart / Decision Box - size wrong ##
Also found another flaw on the add to cart popup as shown. No important elements as far as I can see so at a loss as to the sizing of this box.

Attachment 1_2018-02-06.jpg not found

~~## ALSO - I've looked everywhere for this .btn entry in my css and i've removed the btn-large as you mentioned but it still will not show correctly~~.

I've just found .btn-large{text-decoration:none;color:#fff!important in the file assets/flexible.css
I thought it wasn't good practice to use !important on btn elements :)

Attachment 2_2018-02-06.jpg not found

Can't work out the extra padding/whitespace though around the price and cart button www.sysfix.co.uk/Office-365.html

Also if You add to cart and then click continue shopping, it doesn't drop you back at the same page, it sends you to home - not sure is this is related to this software.

## Products Module Not Responsive ##
Products in a view are not flowing vertically in mobile view.

Attachment 3.jpg not found

Last Edit: 6 years 2 months ago by London.

The topic has been locked.

Template doesn't seem ready? 6 years 2 months ago #15507

Support

Hi,

##-- To fix the Material Icon problem on IE Edge, open this css file:

ROOT//templates/wt_plussone_jom/html/com_virtuemart/assets/css/flexible.css

scroll to the very bottom and insert this CSS rule:

.flexibleContainer .addtoCart:before,
.flexibleContainer .slick-prev:before,
.flexibleContainer .slick-next:before,
#fancybox-close:before,
.fancybox2-close:before{
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
}

This icon patch is tested & confirmed working on IE

Attachment ScreenShot2018-02-18at2.29.03AM.png not found

##-- I don't see anything wrong with the popup sizing

Attachment ScreenShot2018-02-18at2.31.45AM.png not found

I suppose you have already fixed, right?

##-- Product Module problem
Product module is responsive. Navigate to this page: demo.flexiblewebdesign.com/materialmart/en-gb/ and see the "Best Selling" module. That's the "product module" (officially called: "VM - Featured Product Module")

In what page you took that screenshot on your website? Provide me a URL from your website where this problem occurs.

Regards.

The topic has been locked.