Change style based on organization

[KillianMills]

Hey there, I am trying to edit the HTML of the main page to include a small piece of javascript to change the colour of the top banner based on the company name. e.g blue for Company 1, red for Company 2. For the moment I am just changing top-bar in custom.main.css to give the top a trim of the colour I want but I may place a company logo up there as well.

Here is some pseudo code of how I would like to do it:

// change top-bar from transparent to red or blue based on company, transparent in all other cases

var changeStyle=function(){

var StyleCol = document.getElementById

if(Organization == Company 1){
    styleCol = rgba (33, 36, 235, 0.60);
}

else if(Organization == Company 2){
    styleCol = rgba (231, 76, 60, 0.60);
}

else styleCol = transparent;

}

So my question is where exactly do I put this code?

I have been looking at my custom.main.css in itop/css and have been able to change the colour manually but I am unsure as to where the main HTML doc is.

I have UI.php in itop/pages which does not have matching code and an Index.php in itop/ which also does not have any matching code. Perhaps the main HTML doc is built up from these PHP files? If so where would I put this piece of javascript or would it be better to place it in one of those files as a php command?

I have attached a picture of the already existing blue trim I have placed in manually.

[KillianMills]

After a little bit of my own research it seems I have to make this as a javascript file and place it in the js folder.

Then use the UI.php in /pages to implement the javascript with the onchange event of the dropdown menu changing to the selected organization.

I am still new to PHP but have learned that it generates the HTML which page source I was viewing on iTop which caused the confusion, UI.php is the main page it seems.

Any other info/tips you guys could provide would be greatly appreciated as I still do not know which files to modify even though I feel like I know exactly how it will work.

[KillianMills]

after using inspect element again and focusing on the select section I believe I may have found a simpler solution, use the already existing change event which loads all of the new data based on organization to also change the style in custom.menu.css.

I have attached a picture of the inspect element which has led to this idea, any information would again be greatly appreciated as I feel I may hit another wall with this soon.

[KillianMills]

so I've been trying to add my own javascript into jquery-1.7.1.min.js, specifically into function (a){
return typeof f!="undefined"&&(!a||f.event.triggered!=a.type)? f.event.dispatch.apply(i.elem, arguements):b

}

which i believe to be the onchange function which runs when the organization is changed. I attempted to place in the following code:

var changeStyle = function(){

//HTML
var selectedValue = document.getElementById("org_id").value;

//CSS
var trimColor = document.querySelector("#top-bar");


//BT
if(selectedValue=="3"){
    //change banner colour
    trimColor.style.backgroundColor= "#3498db";
}

//Bell Aliant
else if(selectedValue=="27"){
    //change banner colour
    trimColor.style.backgroundColor= "#f1c40f";
}

//Bell Canada
else if(selectedValue=="26"){
    trimColor.style.backgroundColor= "#e74c3c"; 
}

else
    trimColor.style.backgroundColor="#ecf0f1";

}

however it resulted in iTop becoming a blank white screen, any help would be greatly appreciated.

I have also attached a picture of the inspect element which has lead me to that piece of jquery.

[KillianMills]

The Solution !

I have placed the javascript code within jquery-1.7.1.js.

And I have achieved the desired result, the trim now changes with the organization change, this however is not the perfect solution I was looking for and is a bit slow but not in the sense that you'd get annoyed, at least in my opinion. Mission Accomplished for the moment!