Solved: Replacing logo on AccessPoint - Qlik Community

cbaqir · ‎2015-05-18

Recently we updated the AccessPoint files to replace the Qlik logo with our company logo but the image is not aligned correctly. It spans the white and gray frame instead of being aligned left and valigned top in the header.

We dropped the logo into the images file and made the following replacements:

index.htm before: <a href=""><img src="images/logo_main.png" alt="QlikView" id="logo_main"/></a>

index.htm after: <a href=""><img src="images/DH_IT-PMO.gif" alt="DH_IT_PMO" align="left" valign="top" id="logo_DH"/></a>

global.css before:

#header{text-align:left;padding-top:19px;height:29px;}

#header #logo_main{float:left;}

global.css after:

#header{text-align:left;padding-top:19px;height:29px;}

#header #logo_DH{float:left;}

Any idea what we are missing?

TIA,
Cassandra

petter · ‎2015-05-20

That should do it yes. but it shouldn't really matter to change the header

from

global.css:

#header{text-align:left;padding-top:19px;height:29px;}

to

#header{text-align:left;padding-top:0px;height:48px;}

once you move the img up into the nav_utility area I think...

View solution in original post

petter · ‎2015-05-18

You have inserted align="left" and valign="top" which really shouldn't be used anymore. Anything like that should go into either a style attribute or in a css-file. If you make sure that your logo is 144 x 29 px like the QlikView logo you shouldn't need to do anything else than replacing the logo_main.png with DH_IT-PMO.png.

Anyway you only have room for 29px or the image will spill over into the gray area underneath. The gray area is a background image and will not move down to make room for a larger picture. You have 19px padding above the image so that you be taken away and added to the 29px that you have - making a total of 48px. You could gain another 12px which is the nav_utility area height by moving the <a href><img src....> up there so you get a total of 60px - anyway the image will "spill" down so just make sure that it looks pleasing.

petter · ‎2015-05-20

Did this answer your question? If yes please mark this as answered if not let me know if there is something that is unclear

cbaqir · ‎2015-05-20

Sorry about the delay. Unfortunately, resizing my logo to 144 x29 made the logo illegible.

Can you please confirm that these are the changes you are indicating?

global.css:

#header{text-align:left;padding-top:19px;height:29px;}

change to

#header{text-align:left;padding-top:0px;height:48px;}

and

index.htm:

<body>

</div>

change to

<body>

</div>

Thanks. My CSS skills are clearly lacking.

Cassandra

petter · ‎2015-05-20

That should do it yes. but it shouldn't really matter to change the header

from

global.css:

#header{text-align:left;padding-top:19px;height:29px;}

to

#header{text-align:left;padding-top:0px;height:48px;}

once you move the img up into the nav_utility area I think...