Custom Logo

MorningstarZero

So, I was wanting to add our company logo to the top of our Portal, and I found this thread:

https://community.cireson.com/discussion/comment/6727#Comment_6727

I followed the directions from the link (replaced \inetpub\CiresonPortal\CustomSpace\login.png), cycled the Cache Builder and did an IISReset.... and.... nothing.

Are there requirements as to what the file can and cannot be? (Size or dimension restrictions, etc..)

David_Allen

What you need to do there is base64 encode your image, and then add it to the custom.css file in the CustomSpace directory.

.headerContent {

    background-image: url ('data:image/jpeg;base64,#base64 encoded image here#');

james_kleinschnitz

Here is an example of the css we have used in to add custom logos to the header:

.headerContent { 
 background-image: url(data:image/png;base64,{base64Image});
 background-repeat: no-repeat;
 background-size: 30px;
 padding-left: 35px; 
 background-position: 0px 8px; 
}

Replace {base64Image} with the output from a tool like this one: 
http://b64.io/

David_Allen

That image is the image displayed at the login page when using forms based authentication.  Are you looking at using an image in the top left of the portal page where the portal name normally is?

MorningstarZero

Oh, well that explains that.

Yes, I'm trying to add the logo to the top left of the portal pages where the portal name is

David_Allen

What you need to do there is base64 encode your image, and then add it to the custom.css file in the CustomSpace directory.

.headerContent {

    background-image: url ('data:image/jpeg;base64,#base64 encoded image here#');

james_kleinschnitz

Here is an example of the css we have used in to add custom logos to the header:

.headerContent { 
 background-image: url(data:image/png;base64,{base64Image});
 background-repeat: no-repeat;
 background-size: 30px;
 padding-left: 35px; 
 background-position: 0px 8px; 
}

Replace {base64Image} with the output from a tool like this one: 
http://b64.io/

MorningstarZero

Awesome!  Thank you so much!   Is there a way to get rid of the title all together and have just the image?

james_kleinschnitz

Add the below to your custom.css as well:

.navbar-header.headerContent h4 {
display:none;
}

MorningstarZero

james_kleinschnitz said:

Add the below to your custom.css as well:

.navbar-header.headerContent h4 {
display:none;
}

<br>That unfortunately hides the Image as well as the text.

David_Allen

Rather than hiding it using CSS, you could clear your Application Title.

Admin Settings -> Setting Items -> Application Title

Just delete the value you have for Application Title.

Conner_Wood

MorningstarZero said:

I'm trying to add the logo to the top left of the portal pages where the portal name is

https://community.cireson.com/discussion/1716/custom-logo-on-portal-header