How to replace IBM logo with custom in Self Service portal

Usage and Config SWD
1

I tried the steps from this document and doesn’t seem to work.
https://www.ibm.com/developerworks/community/wikis/home?lang=en#!/wiki/90553c0b-42eb-4df0-9556-d3c2e0ac4c52/page/Customizing%20the%20Self-Service%20Portal

Please help me out.

Thanks in advance.

2

Bump, any help please?

3

Hi,

It appears that the CSS in that document is a little outdated, but the process remains the same.

Instead of the suggested code snippet, try the one below instead, with your own image and height/width properties of course:

#header .logo .logoimg {
   content: url("/images/DetroitPistonsOld.png");
   display: block;
   width: 130px;
   height: 130px;
}

pistons.PNG1070×365 24.5 KB

1 Like
4

Tony thanks for your help, Fixed it :smile:

5

Tony, Custom logo is not working in IE and Firefox? i see the alt=“ibmlogo” getting executed.
But, It is working in chrome. anyways to overcome it?

6

Ahh okay. It appears IE and FF interpret the “content” property differently than Chrome.

Here’s another method that should work, albeit more hack-y. The “background-size” property is width first, height second.

#header .logo {
   background: url("images/DetroitPistonsOld.png") no-repeat;
   background-size: 130px 130px;
   width: 130px;
   height: 130px;
}

#header .logo .logoimg {
   display: none;
}
2 Likes
7

Perfect, this css worked like a charm.
Thank you Tony.

1 Like