Qlik Community

QlikView App Development

Discussion Board for collaboration related to QlikView App Development.

Highlighted
cbaqirdhds
Valued Contributor

Replacing logo on AccessPoint

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

1 Solution

Accepted Solutions
MVP
MVP

Re: Replacing logo on AccessPoint

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...

4 Replies
MVP
MVP

Re: Replacing logo on AccessPoint

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.

MVP
MVP

Re: Replacing logo on AccessPoint

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

cbaqirdhds
Valued Contributor

Re: Replacing logo on AccessPoint

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 id="frame">

   <div id="nav_utility">

   </div>

   <div id="header">

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

     <span class="lastUpdated"></span>

change to

<body>

  <div id="frame">

   <div id="nav_utility">

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

   </div>

   <div id="header">

       <span class="lastUpdated"></span>

Thanks. My CSS skills are clearly lacking.

Cassandra

MVP
MVP

Re: Replacing logo on AccessPoint

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...