Author Topic: Overriding default CSS  (Read 16311 times)

ScorpionDS

  • Beginner
  • *
  • Posts: 8
Overriding default CSS
« on: September 15, 2011, 16:45:50 pm »
Tell me how to override (or specify a different path) standard styles in "components\com_virtuemart\assets\*"?

In the setting of a parameter of "General Assets Path" but he did not like acting.

Ver. 2.0.0-RC-2G

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10400
  • VirtueMart Version: 3+
Re: Overriding default CSS
« Reply #1 on: September 15, 2011, 17:08:25 pm »
components/com_virtuemart/virtuemart.php


   /* Loading jQuery and VM scripts. */
   vmJsApi::cssSite();

^^^^ that loads the css scripts.

J3.9+ VM 3.4.2
Slowest Page Speed Score (88) (Category)
Fastest Page Speed Score (94-96) (productdetails)

ScorpionDS

  • Beginner
  • *
  • Posts: 8
Re: Overriding default CSS
« Reply #2 on: September 15, 2011, 17:14:07 pm »
Thank you, that I found so, but I expect that the parameter is not in vain and can be provided through a zimenyat way.

mark001

  • Beginner
  • *
  • Posts: 9
Re: Overriding default CSS
« Reply #3 on: September 21, 2011, 12:03:48 pm »
Hi,

this is very interesting topic.

Is there any chance to make it work? So, the path to the assets would be get from the VM configuration instead a mentioned file (components/com_virtuemart/virtuemart.php)?
Or maybe is there any other solution to use my own assets stored in (for example) JOOMLA!/templates/TEMPLATE_NAME/ directory.

Any way, it would be great to could to change the path using VM conf as this would allow to turn off the default files from the HEAD.

Thanks,
Mark.

Milbo

  • Virtuemart Projectleader
  • Administrator
  • Super Hero
  • *
  • Posts: 10018
  • VM3.2 Cached and Optimized
    • VM3 Extensions
  • VirtueMart Version: VirtueMart 3 on joomla 3
Re: Overriding default CSS
« Reply #4 on: September 22, 2011, 14:15:51 pm »
You can disable the vm js completly and use your own file (look in the config).

I dont know if you can overrde the assets with joomla native methods.
I should fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

grtrustme

  • Beginner
  • *
  • Posts: 32
  • Perfection in your hands
Re: Overriding default CSS
« Reply #5 on: September 22, 2011, 14:45:15 pm »
You can override the css.

  • In your template, create your new css for virtuemart. Don't use the name vmsite-ltr.css or vmsite-rtl.css.
  • Declare a link meta to this css in the head of your template.
  • Use the same classes and ids as they are in vmsite-ltr.css and vmsite-rtl.css to override them or to clear them.

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10400
  • VirtueMart Version: 3+
Re: Overriding default CSS
« Reply #6 on: September 22, 2011, 15:03:51 pm »
grtrustme, loading both is not good for performance.

We do need the ability to load all scripts manually in case users want to combine, gzip, etc.

J3.9+ VM 3.4.2
Slowest Page Speed Score (88) (Category)
Fastest Page Speed Score (94-96) (productdetails)

grtrustme

  • Beginner
  • *
  • Posts: 32
  • Perfection in your hands
Re: Overriding default CSS
« Reply #7 on: September 22, 2011, 15:14:27 pm »
I agree with you but still how are we going to use our css files, javascripts files etc without editing virtuemart code and ofcourse by not touching the default assets folder of virtuemart?

Milbo

  • Virtuemart Projectleader
  • Administrator
  • Super Hero
  • *
  • Posts: 10018
  • VM3.2 Cached and Optimized
    • VM3 Extensions
  • VirtueMart Version: VirtueMart 3 on joomla 3
Re: Overriding default CSS
« Reply #8 on: September 22, 2011, 15:58:25 pm »
You do not load then both of them. Of course php does. But just opening the admin area loads 80 files. Slowing down is, when the user has to load more than one css. The normal themes in joomla load around 3 css files
I should fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

grtrustme

  • Beginner
  • *
  • Posts: 32
  • Perfection in your hands
Re: Overriding default CSS
« Reply #9 on: September 22, 2011, 17:12:18 pm »
Keep in mind that even if we comment the cssSite line in virtuemart.php

there are some modules like mod_virtuemart_cart, mod_virtuemart_category, mod_virtuemart_product that also contain these lines.

vmJsApi::jQuery();

vmJsApi::jPrice();

vmJsApi::cssSite();

As a result, the default assets of virtuemart will again be loaded.

mark001

  • Beginner
  • *
  • Posts: 9
Re: Overriding default CSS
« Reply #10 on: September 23, 2011, 11:18:43 am »
Keep in mind that even if we comment the cssSite line in virtuemart.php

there are some modules like mod_virtuemart_cart, mod_virtuemart_category, mod_virtuemart_product that also contain these lines.

vmJsApi::jQuery();
vmJsApi::jPrice();
vmJsApi::cssSite();

As a result, the default assets of virtuemart will again be loaded.


Hi,

unfortunatelly, this is true. Even if I commented these lines in virtuemart.php file I'm still getting some. About CSS code it can be easy overrided by putting my own CSS file just below < jdoc:include type="head" / > - just like grtrustme mentioned in his other post. Web browser will use my classes instead the default VM2 css classes - I can also use my own css classes in HTML overrides so, the default css won't be used. But this solution works for CSS only. What if I will try to add my own JS (lets say for more images in product details)?

I guess there is no good solution at the moment to do that.
Also, I'm sure that a number of developers (including me) wants to use MooTools js framework only to make the stores works faster. Now, my template loads both JQuery and mootools. In this case old VM is better.

You can disable the vm js completly and use your own file (look in the config).
I dont know if you can overrde the assets with joomla native methods.

Please, belive me I tried that and the only one thing I'm getting is JQuery loaded from my server instead google apis plus below lines still appears on my html source code:
Code: [Select]
  <script src="/joomla170vm2rc2/components/com_virtuemart/assets/js/vmsite.js" type="text/javascript"></script>
  <script src="/joomla170vm2rc2/components/com_virtuemart/assets/js/facebox.js" type="text/javascript"></script>
  <script src="/joomla170vm2rc2/components/com_virtuemart/assets/js/vmprices.js" type="text/javascript"></script>

In general VM2 is great but the themes solutions were better developed in VM 1.x. So, the question is: Is there any chance to fix that till VM2 stable will be released?

Thank you

grtrustme

  • Beginner
  • *
  • Posts: 32
  • Perfection in your hands
Re: Overriding default CSS
« Reply #11 on: September 24, 2011, 00:53:32 am »
I have exactly the same issue with mootools and jquery that they load together, although i prefer JQuery better than mootools. (but this is just my opinion).

I m using the latest svn revision 4175

About CSS
If you go to configuration and uncheck 'Using the Virtuemart CSS' then vmsite-ltr.css and vmsite.rtl.css are not getting loaded in your page.
This is good because you can use your own css files for virtuemart.

About Virtuemart2 Views
You can override nicely virtuemart default views.

For example, if you want to create your own product detail page then you create this folder
<web site root>/templates/<your template>/html/com_virtuemart/productdetails
and in there you can put your default.php and your default.xml file

About Javascript Framework
I still have no solution for that because i tried to deactive Virtuemart2 JQuery and everything got non-functional in the administration. But i guess this will be fixed by the time of the official release (i have open a topic about that).

About Virtuemart2 Assets Folder
In the configuration there is an option to change the assets folder, but i haven't tried to change that and create mine. I m waiting for the system to go more stable, and then try something like that.

mark001

  • Beginner
  • *
  • Posts: 9
Re: Overriding default CSS
« Reply #12 on: September 24, 2011, 10:19:08 am »
I have exactly the same issue with mootools and jquery that they load together, although i prefer JQuery better than mootools. (but this is just my opinion).

I m using the latest svn revision 4175

About CSS
If you go to configuration and uncheck 'Using the Virtuemart CSS' then vmsite-ltr.css and vmsite.rtl.css are not getting loaded in your page.
This is good because you can use your own css files for virtuemart.

About Virtuemart2 Views
You can override nicely virtuemart default views.

For example, if you want to create your own product detail page then you create this folder
<web site root>/templates/<your template>/html/com_virtuemart/productdetails
and in there you can put your default.php and your default.xml file

About Javascript Framework
I still have no solution for that because i tried to deactive Virtuemart2 JQuery and everything got non-functional in the administration. But i guess this will be fixed by the time of the official release (i have open a topic about that).

About Virtuemart2 Assets Folder
In the configuration there is an option to change the assets folder, but i haven't tried to change that and create mine. I m waiting for the system to go more stable, and then try something like that.

Hi grtrustme,

about css can you please let me know where can I find this option ('Using the Virtuemart CSS')? At the moment I'm using VM2 2.0.0-RC-2G.

About the assets I was trying to change that but it seems that this is still no working properly - I mean saved configuration seems to be not used by VM2. I checked my DB and I see that my paths has been saved but there is no changes in the code.

Also, about the JQuery solution I will try to write some "quick" fix in  /templates/template_name/index.php and let you know if this will solve the problem. I just would like to turn off the JQ on front-end.
I can use JQuery but J! is using MT1.3 by default and I in my opinion there is no sense to use both JQ and MT. But again this is only my opinion.

About the VM2 views I already used overrides for all comps views/mods views and this works great but thanks.

Have a great day!

Thanks

grtrustme

  • Beginner
  • *
  • Posts: 32
  • Perfection in your hands
Re: Overriding default CSS
« Reply #13 on: September 24, 2011, 20:49:20 pm »
I don't know if you are using the latest svn version of virtuemart 2. But this is how Virtuemart2 configuration looks at the latest svn version.

(I m using only netbeans to always have the updated version of Virtuemart and test Virtuemart which i think is EXTREMELY easy. If you need any instructions on that feel free to ask)

I will also try to replace assets folder with another assets folder in my template in the latest version to see if it's working now.

Have a great day too!!

[attachment cleanup by admin]

mark001

  • Beginner
  • *
  • Posts: 9
Re: Overriding default CSS
« Reply #14 on: September 26, 2011, 09:50:55 am »
Dear grtrustme,

 :) LOL ... now I got it. I'm using RC2G and I can't see as many options as you have in your SVN version.
Would it be possible to describe in few steps how to get the SVN version? Where can I find it?

Thank you!!!  :)