Search code examples
xmltwitter-bootstrapvqmod

Can you directly modify bootstrap.min.css with VQMOD?


I am trying to change bootstrap.min.css using VQMOD in following way and it does not work.

Is there any way to fix this other than building a duplicate bootstrap.min.css file?

 <?xml version="1.0" encoding="UTF-8"?>
  <modification>
   <id>Adds custom color link in bootstrap</id>
   <version>1.0</version>
   <vqmver>2.5.1</vqmver>
   <author>Bubba</author>
    <file name="catalog/view/javascript/bootstrap/css/bootstrap.min.css">
     <operation info="Replace link colors">
       <search position="replace"><![CDATA[
       a{color:#428bca;text-decoration:none}a:hover,a:focus{color:#2a6496;text-decoration:underline}
       ]]></search>
       <add><![CDATA[
       a{color:#855e42;text-decoration:none}a:hover,a:focus{color:#000000;text-decoration:underline}
       ]]></add>
   </operation>
  </file>
</modification>

Solution

  • According to this article vQmod has a limitation which files can be modified.

    You can't edit everything - CSS, JS and standalone files. Stylesheets and JavaScripts are handled by the browser, so you cannot edit them via a vQmod by default.

    Unfortunately that leaves us with two choices:

    1. modify the original file
    2. adjust CSS/JS with inline code blocks
      • <style type="text/css">
      • <script type="text/javascript">
    3. as @BubbaYakoza pointed out another way is to use vQmod to modify <head> tag to replacing reference to modified file
      • as long as your <head> is defined outside of index.php that is