Home Community Uploads
image

Cireson Partners, Customers and Community members share your customizations and examples here to help benefit the community as a whole to earn Kudos and badges.

DISCLAIMER

All files and projects located here are provided and come "as-is" and without any warranty or support. Use at your own risk. Your use of Community Uploads is subject to our Terms of Use.

Cireson does not and will not support or maintain these enhancements, extensions, and scripts.

For Team Cireson uploads click here.

Custom Logo on Portal Header

Conner_WoodConner_Wood Customer Ninja IT Monkey ✭✭✭✭
Maybe you want a pretty logo by your Portal Name on the NavBar.

Let's say you have that pretty logo image saved as logo.png somewhere in the CiresonPortal, let's say "/CustomSpace/HTML/"'

Add the following code inside your "custom.css" file

.headerContent h4:before {
  display: inline-block;
  width: 36px;height: 36px;
  vertical-align: middle;
  margin-right: 15px;content: "";
  background: url("/CustomSpace/HTML/logo.png") no-repeat 0 0;
  background-size:100%;
}

If you have no problem for your problem portal, is it still a Problem Portal?



Comments

  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    I can't seem to get this to work. The CSS is crossed out when using the dev tools in IE
  • Conner_WoodConner_Wood Customer Ninja IT Monkey ✭✭✭✭
    I know it works on our Portal V6.3 for IE11 and Chrome when that code is added into the "C:\inetpub\CiresonPortal\CustomSpace\custom.css" file.
  • Filip_TheyssensFilip_Theyssens Partner IT Monkey ✭
    edited September 2017

    Hi,

    I tried your suggestion on putting a logo and it does indeed show up bit is getting downsized (shrunk) a lot so not usable like this.

    Do you have any idea how I can make it so that the original format is kept of the .png?

    thanks!

  • Matt_MedleyMatt_Medley Member Advanced IT Monkey ✭✭✭

    Hi,

    I tried your suggestion on putting a logo and it does indeed show up bit is getting downsized (shrunk) a lot so not usable like this.

    Do you have any idea how I can make it so that the original format is kept of the .png?

    thanks!

    Hey Filip, were you able to get your logo straightened out? The default code has the logo as 36x36, you can adjust the parameters to change the default logo size, but if you adjust the sizing too much, it'll throw the template off. Change these: width: 36px;height: 36px; to match your logo.
  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    Hmmmm is there a way to set this dynamically using js? Quite like the idea of having a different logo depending on what part of the organisation you're in
  • Matt_MedleyMatt_Medley Member Advanced IT Monkey ✭✭✭
    Hmmmm is there a way to set this dynamically using js? Quite like the idea of having a different logo depending on what part of the organisation you're in
    I'm sure there is a way to determine "location = this image". The issue is determining what that identifier would be.
  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    Well the session captures company information (session.user.Company) so it would just be a case of a js command which overwrites the image based upon the user, however I can't seem to get it to work on the element referenced here, no issues appending elsewhere!
  • Matt_MedleyMatt_Medley Member Advanced IT Monkey ✭✭✭
    Well the session captures company information (session.user.Company) so it would just be a case of a js command which overwrites the image based upon the user, however I can't seem to get it to work on the element referenced here, no issues appending elsewhere!
    Hey Alex, were you able to get this working? I am curious as to what method you used etc.. if you did get it working.
  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    @Alex_Marsh You could put this code in the custom.js
    app.events.subscribe("drawerCreated", function () {<br>&nbsp;&nbsp;&nbsp; $(".headerContent").addClass(session.user.Company);<br>});
    This adds a class with the name of the company to the headerContent.

    In the custom.css, you would define logos for each company:
    .headerContent.IBM h4:before {<br>&nbsp; display: inline-block;<br>&nbsp; width: 36px;height: 36px;<br>&nbsp; vertical-align: middle;<br>&nbsp; margin-right: 15px;content: "";<br>&nbsp; background: url("/CustomSpace/HTML/IBM.png") no-repeat 0 0;<br>&nbsp; background-size:100%;<br>}




  • Matt_MedleyMatt_Medley Member Advanced IT Monkey ✭✭✭
    @Alex_Marsh You could put this code in the custom.js
    app.events.subscribe("drawerCreated", function () {<br>&nbsp;&nbsp;&nbsp; $(".headerContent").addClass(session.user.Company);<br>});
    This adds a class with the name of the company to the headerContent.

    In the custom.css, you would define logos for each company:
    .headerContent.IBM h4:before {<br>&nbsp; display: inline-block;<br>&nbsp; width: 36px;height: 36px;<br>&nbsp; vertical-align: middle;<br>&nbsp; margin-right: 15px;content: "";<br>&nbsp; background: url("/CustomSpace/HTML/IBM.png") no-repeat 0 0;<br>&nbsp; background-size:100%;<br>}




    @john_doyle He'd just create another .HeaderContent.IBM segment for each company?
  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    @Matt_Medley , that is the idea.
  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    You would not need to keep repeating the code of course. The css would look like this:
    .headerContent.IBM h4:before {<br>&nbsp; background: url("/CustomSpace/HTML/IBM.png") no-repeat 0 0;<br><span>}<br></span><code>.headerContent.Disney h4:before {<br>&nbsp; background: url("/CustomSpace/HTML/Disney.png") no-repeat 0 0;<br><span>}</span>.headerContent h4:before {<br>&nbsp; display: inline-block;<br>&nbsp; width: 36px;height: 36px;<br>&nbsp; vertical-align: middle;<br>&nbsp; margin-right: 15px;content: "";<br>&nbsp; background-size:100%;<br><span>}<br></span>



  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    Yeah I got this working via a different method though. I've attached the code I used.

    //adds organisation logo to page along with end users first name and company for personalisation<br> $(document).ready(function(){<br> &nbsp;&nbsp;&nbsp; if (document.URL.indexOf("/View/02efdc70-55c7-4ba8-9804-ca01631c1a54") === -1) {<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //Ignore all other pages except for the Team Requests page.<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return; <br> &nbsp;&nbsp;&nbsp; }<br> &nbsp;//set whether it's morning, afternoon or evening<br> &nbsp;&nbsp;&nbsp; var hours = new Date().getHours();<br> &nbsp;if (hours>=12 && hours <17){var time = "Afternoon"}<br> &nbsp;else if (hours<12){var time = "Morning"}<br> &nbsp;else {var time = "Evening"};<br> &nbsp;//console.log(time);<br> &nbsp;&nbsp;&nbsp; var mainPageNode = document.getElementById('main_wrapper');<br> &nbsp;&nbsp;&nbsp; // create an observer instance that runs whenever the page changes. Wait for our page title to exist.<br> &nbsp;&nbsp;&nbsp; var observer = new MutationObserver(function(mutations) {<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //The page changed. See if the page title exists yet.<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var elementToWatchFor = $(".page_title");<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (elementToWatchFor.length > 0) {<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //An element with class of page_title exists.<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var titleElement = $("h1.page_title:contains('Home')");<br> &nbsp;&nbsp; titleElement.html("Good " + time + " " + session.user.FirstName + "<br />" + "Welcome to the " + session.user.Company + " Service Desk Portal " );<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //change logo based on company. if company not listed use BMA logo<br> &nbsp;&nbsp; if(session.user.Company === "A"){<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; titleElement.parent().append("<img src='/CustomSpace/A.jpg' alt='home_img' height='50'>");<br> &nbsp;&nbsp; } else {<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; titleElement.parent().append("<img src='/CustomSpace/B.jpg' alt='home_img' height='50'>")};<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; observer.disconnect();<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br> &nbsp;&nbsp;&nbsp; });<br> &nbsp;&nbsp;&nbsp;&nbsp; <br> &nbsp;&nbsp;&nbsp; // Configure the observer.<br> &nbsp;&nbsp;&nbsp; var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };<br> &nbsp;&nbsp;&nbsp;&nbsp; <br> &nbsp;&nbsp;&nbsp; // pass in the node, and our mutationobserver options.<br> &nbsp;&nbsp;&nbsp; observer.observe(mainPageNode, observerConfig);<br> });<br> //appends the users company to the portal title<br> $(document).ready(function(){<br> var company = (session.user.Company);<br> $(".navbar h4").html(company + " Service Desk Portal");<br> });

Sign In or Register to comment.