Sometimes you might need to clone your production site to TEST site. After cloning, they look identical except the URL.

Please advise your recommended practice to distinguish front-end and back-end of your TEST site quickly and effectively so PROD and TEST cannot be accidentally confused.


  • prevent users to enter production data into TEST site by mistake
  • prevent developers (, testers etc.) to perform testing on production site by mistake

4 Answers 4


This is a rather very tech solution as it requires some experience in configuring Apache. The advantage is that you don't have to hack any files in the Joomla! installation itself.

Basically what I want to do is to append some HTML to any page (almost any page) being generated.

For this I will use Apache Module mod_substitute. The module itself needs to be activated (it generally just needs the # comment removed) inside httpd.conf.

LoadModule substitute_module modules/mod_substitute.so

Next in the virtual hosts file (httpd-vhosts.conf):

<VirtualHost *>
DocumentRoot "C:\...."
ServerName joomla-development

AddOutputFilterByType SUBSTITUTE text/html
Substitute "s|</body>|<div style='position:fixed; left:100px; top:50px; background-color:red'><h1>DEV WEBSITE</h1></div></body>|i"

<Directory "C:\....">
    AllowOverride All
    Require all granted
    Order allow,deny
    Allow from all


Basically with Substitute I am replacing the </body> tag with some HTML. This way I try to stay out of any Ajax request.

Final result:

enter image description here


The practice we follow is -

  1. Change website-title in global configuration to [TEST] original title.
  2. Change email configuration to point to mailtrap.io
  3. If test site is on same server, change database details.
  4. Change all third party integrations to testing account (services beyond joomla) e.g.
    • Memcache or redis
    • external database/storage
    • payment gateway,
    • newsletter system (mailchimp)
    • CDN account and domain
    • Analytics service account (google analytics, new-relic)
  • Thanks for adding these practices. Especially point #2 could be as important as visual distiction. I would also add "do not forget to change all other site integrations" (for example to 3rd party database or to payment system).
    – miroxlav
    May 5, 2014 at 16:31
  • Thanks for the tip on mailtrap.io! Looking into that now. May 6, 2014 at 12:12

I have the same problem with clients sometimes creating content on the development version not production. I use the following to deal with this:

  • Change all database and password names
  • Modify the admin template with
    • A different background for login screen
    • A different colour for the top bar
  • Use a module in a prominent position on the front end which clearly shows this is the production site
  • On some sites I also force login to see the development site

enter image description here


Another approach is to let your browser to add CSS styles to your site.

Stylish browser plugin (for Firefox and for Chrome) is designed for this task. It applies additional custom CSS to every page at given URL. You actually define rules [URL]=>[CSS].

enter image description here

Above example: distinction can be made by adding solid or dotted line to the left
Red = production, Yellow = pre-prod., Green = TEST, Blue = Training, Grey = DEV etc.


  • Can be applied to production site which is normally kept clean of visual aids.
  • Can be temporarily switched off by user if needed (for example for taking screenshots).
  • Universal solution – can be applied to any site or its part (based on URL path).
  • Can be used without administrator access to given website.
  • Setup once, no maintenance if site changes.


  • Currently limited to Firefox and Chrome. (Still no problem for DEV/TEST/Support teams internally agreed on their primary browser.)
  • Private sharing your style settings with other users takes a bit more work. For publicly known websites, this is not a problem – at userstyles.org (plugin's home) thousands styles already exist. Want to see StackOverflow in black or with less space between page sections?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.