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_Wood
Customer Advanced 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
If you have no problem for your problem portal, is it still a Problem Portal?
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?
4
Comments
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!
app.events.subscribe("drawerCreated", function () {<br> $(".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> display: inline-block;<br> width: 36px;height: 36px;<br> vertical-align: middle;<br> margin-right: 15px;content: "";<br> background: url("/CustomSpace/HTML/IBM.png") no-repeat 0 0;<br> background-size:100%;<br>}//adds organisation logo to page along with end users first name and company for personalisation<br> $(document).ready(function(){<br> if (document.URL.indexOf("/View/02efdc70-55c7-4ba8-9804-ca01631c1a54") === -1) {<br> //Ignore all other pages except for the Team Requests page.<br> return; <br> }<br> //set whether it's morning, afternoon or evening<br> var hours = new Date().getHours();<br> if (hours>=12 && hours <17){var time = "Afternoon"}<br> else if (hours<12){var time = "Morning"}<br> else {var time = "Evening"};<br> //console.log(time);<br> var mainPageNode = document.getElementById('main_wrapper');<br> // create an observer instance that runs whenever the page changes. Wait for our page title to exist.<br> var observer = new MutationObserver(function(mutations) {<br> //The page changed. See if the page title exists yet.<br> var elementToWatchFor = $(".page_title");<br> if (elementToWatchFor.length > 0) {<br> //An element with class of page_title exists.<br> var titleElement = $("h1.page_title:contains('Home')");<br> titleElement.html("Good " + time + " " + session.user.FirstName + "<br />" + "Welcome to the " + session.user.Company + " Service Desk Portal " );<br> //change logo based on company. if company not listed use BMA logo<br> if(session.user.Company === "A"){<br> titleElement.parent().append("<img src='/CustomSpace/A.jpg' alt='home_img' height='50'>");<br> } else {<br> titleElement.parent().append("<img src='/CustomSpace/B.jpg' alt='home_img' height='50'>")};<br> observer.disconnect();<br> }<br> });<br> <br> // Configure the observer.<br> var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };<br> <br> // pass in the node, and our mutationobserver options.<br> 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> });