Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

CSS based on server's hostname

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

8 years 7 months ago
I'm putting together a small site for my wife's business. I'm happy to get Joomla up and running for them but I am not a web design guy and don't want to go there.

So I'll be pushing them to learn Joomla themselves.

One thing I want to do is give them a staging environment where they can go wild.
So on one server I have 2 Joomla installs with separate source dirs and separate databases. Apache virtual host config decides if they get the staging site or prod. It works well.

What I'd like to do is have identical content on both sites. But on the staging site either replace the default logo with one that has "Staging" in the graphic or perhaps a CSS override based on what the hostname is. It's easy to do this with location.hostname in Javascript but my last requirement/preference is to not alter template content.

So my question is... Is there an automatic javascript include for T3 or New Lifestyle that I might be able to get some code in to change the colours or alter a div on the staging site, or is there some other way I can make that distinction? I want to be able to sync the whole stage dir to the prod site but still have each site have it's own style based on the hostname in the request.

Am I asking too much?
  • Dan Carroll's Avatar
  • Dan Carroll
  • LIfetime Developer - Big Bamboo
  • 6 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
8 years 7 months ago
Hi Dan,

You would definitely need to edit the template to do this and I would use php to add a class to the html perhaps.

php.net/manual/en/function.gethostname.php

So check if the hostname equals a certain value then add the clas staging to the html tag in the template.

Then you can discern between the two. I think you still need to edit the template to go this route.

I would look at the server level perhaps. I know Siteground have a staging option and it's pretty common now.

Also there are a number of multi-site type things that will do this on the extensions.joomla.org site.
Hope that helps.
Anthony
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
8 years 6 months ago
Thanks Anthony.

I'll look into it.
  • Dan Carroll's Avatar
  • Dan Carroll
  • LIfetime Developer - Big Bamboo
  • 6 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
8 years 6 months ago
Good luck with it

If possible could you post back with how you get on :)

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
8 years 6 months ago
Well I had a chance to play around some more this morning and I found a nice solution. It might depend on how your objects are classed and their position but it works good enough for my liking.

Under the "Custom Code" tab in the "After "</body>" section I added the following javascript code (within a script tag):
var site = "" + window.location;
if (site.indexOf("stage.") >= 0) {
  var stageban = document.createElement('span');
  stageban.id = "staging-banner";
  stageban.setAttribute("style", "font-size: 28pt; font-weight: Bold; font-family: Courier New; color: red; position: relative; top: -150px; left: 10px");
  stageban.innerHTML = "Staging Site!";

  var es = document.getElementsByClassName("logo-image");
  var logo = es[0].getElementsByTagName("img");
  logo[0].setAttribute("style","-webkit-filter:grayscale(100%); filter: grayscale(100%);");
  es[0].appendChild(stageban);
}

For any url that has "stage." in the location, it will grey out any images which are children of objects that have the class 'logo-image' (the div);
It also adds a SPAN to the div and positions it over the image with the red text 'Staging Site!'.

Works quite well...
  • Dan Carroll's Avatar
  • Dan Carroll
  • LIfetime Developer - Big Bamboo
  • 6 posts
  • 1 Thanks
  • Karma: 1
Last Edit: 8 years 6 months ago by Dan Carroll.
The administrator has disabled public write access.
The following user(s) said Thank You: manh
8 years 6 months ago
Clever - thanks for sharing :)

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers

Close