Edit your CSS as a Miva Merchant Page

Edit your CSS files without modules or downloading.

Most people edit their Miva Merchant CSS files by downloading them or using a module. There is an alternative that makes editing CSS as easy as editing a store page.

by Scot Ranney

Disclaimer: this works for me and for clients that I have set it up for. This is not guaranteed to work for anyone else, although if you follow the instructions below, you will have a very good chance of success.

How to Edit Your CSS Files in Miva Merchant, The Easy Way

Setup time: less than 10 minutes

Notes: I used the Chrome browser on Windows 10 when I took screenshots of setting this up on Scot's Scripts.

Step 1

Copy the contents of the CSS file you want to edit. You can do this by downloading it or using your browser's inspector (right click should give you an option) to view the CSS file. Take note of the location (path) of the file because you'll need to use it later.

Step 2

Create a new page in your Miva Merchant administration: MENU > USER INTERFACE > +

For this example I'm going to name the page My Custom CSS and give it the code CUSTOM_CSS.

Step 3

Paste the CSS file contents from Step 1 into the template area and save it.

Step 4

Create another new page. This is the "loader" page and will contain the code below that is used to write the new CSS file.

For this example, I gave it the name Custom CSS Loader and the code CUSTOM_LOADER

Step 5

Add the template code below to your loader page and then make the following edits:

Change the CSS filename in the first line after the comment to match the filename you are going to work on. If the file doesn't exist, it will be created.
Change 'my_secure_code' in the second line to something only you know. Leave the single quotes in.
Change the 'CUSTOM_CSS' in the third line to the page code of your custom CSS page.

Security: Think of the my_secure_code like a password. If it doesn't match what is on the URL when you bring up the loader page, the CSS file is not written.

Template Code for the CSS Loader Page

<mvt:comment>
| CSS Edit Template Code: The CSS file is updated when you load this page in the browser.
| IMPORTANT: Edit the next three lines.
</mvt:comment>
<mvt:assign name="l.filename" value="'/mm5/css/' $ padl(g.store:id,8,'0') $ '/custom.css'" />
<mvt:assign name="l.secure_code" value="'my_secure_code'" />
<mvt:do name="l.ok" file="g.Module_Feature_TUI_DB " value="Page_Load_Code( 'CUSTOM_CSS',l.page )" />
<mvt:comment>
| Exit if security doesn't check out or page information was not loaded.
</mvt:comment>
<mvt:if expr="g.secure_load_code NE l.secure_code AND l.page">
<mvt:exit>
</mvt:if>
<mvt:comment>
| load template information using l.page:templ_id
</mvt:comment>
<mvt:do name="l.ok" file="g.Module_Feature_TUI_DB " value="ManagedTemplateVersion_Load_Template_Current( l.page:templ_id,l.template)" />
<mvt:comment>
| see if the css file exists and if it does, delete it before writing the new one
</mvt:comment>
<mvt:if expr="sexists(l.filename)">
<mvt:assign name="l.ok" value="sdelete(l.filename)" />
</mvt:if>
<mvt:comment>
| if we have something to write we write it, if the page was blank, write an empty css file
</mvt:comment>
<mvt:if expr="l.template:source">
<mvt:if expr="file_create(l.filename,'script',l.template:source)">
<p>Looks like everything went OK!</p>
<p>The <mvt:eval expr="l.filename" /> css file should be live and well now.</p>
<mvt:else>
<p>Oops, there was a problem writing the CSS file: </p>
</mvt:if>
</mvt:if>

Editing your CSS

Open your new custom CSS page in the Miva Merchant admin, make some edits, and save.

To write the new CSS file and make the changes live, bring up the CSS loader page in Miva Merchant and add &secure_load_code=my_password to the end of the URL. You would change my_password and store1 and screen to the secure code and other settings in the CSS loader page (previous step.)

The URL would look something like this:

somedomain.com/mm5/merchant.mvc?screen=CUSTOM_LOADER&store_code=store1&secure_load_code=my_password

Notes

You can use this method to edit javascript and other files as well. Some files, like HTML files that are going to be viewed in the browser, might need permission changes. In this case, you would add the following code directly after the file_create(..) line in your CSS loader page.

<mvt:assign name="l.ok" expr="schmod(l.filename,'0755')" />

My CSS changes are not taking effect!

Can't see your changes in the browser but you know they are in the CSS file?

Sometimes a browser doesn't know the CSS file is new. You can force a browser to reload external resources, like CSS files, by holding the SHIFT key and tapping F5(in Windows.)

Another issue is that you're not loading the CSS file. If you decided to create a new CSS file this way, editing a file that doesn't yet exist, you also need to add a CSS call in your USER INTERFACE > SETTINGS > HEAD TAG CONTENT section. In my store, I added this line right above the closing </head> tag:

<link type="text/css" rel="stylesheet" href="css/00000001/custom.css" media="all">

Head Tag Content Miva Merchant

In Conclusion

I'm using this method now to make CSS changes on Scot's Scripts. I'll experiment using the Chrome Browser inspector and when I find something I like, I'll make them live by editing my CUSTOM_CSS page and refreshing my CUSTOM_LOADER page.

Need Help?

Let us know if you want to make this happen in your store but don't want to do it on your own. We can get this running for you at very little cost.

These articles might be interesting for you as well: