Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+6 votes
468 views
in Q2A Core by

Hi,

I'm trying to change the logo for my organization's Q2A instance. Unfortunately it's not working appropriately. I can see the new logo, but I can't modify the height and width from the administration section. Below is the screenshot of the configuration.

As you can see, I set the height to 10 pixels in the configuration, but the logo itself doesn't change size. I took a peek of the rendered elements. It turns out that the CSS was overriding the settings in the configuration. See below.

I believe the source of the problem is the height property in img and the max-height property in .qa-logo img. I tried turning them off and voila, I got the size of the logo exactly like the size I set in the configuration.

I'm not really familiar with Q2A Core so is my assumption correct? Are the height and max-height really preventing the size that I set in the configuration to take effect? If yes, what is the proper way to fix this?

Q2A version: 1.8.6
by
i think so , you should fix a width and height

1 Answer

+2 votes
by
selected by
 
Best answer

I'd say the max-height makes some sense. It makes sure the top bar doesn't grow too much. On the other hand, it's true that it is an arbitrary value.

The height: auto !important is the one to blame, along with width: auto. These two are telling the image to take as much as space as possible, while keeping the ratio.

I wouldn't just remove the !important from the height because the selector applies to all images so the impact will exceed the logo and apply that change to all images.

The options I'd recommend are:

 A) Changing the CSS of the file. This is a pretty clean approach as long as you take note of the changes. In fact, this means appending (to the end of the file) the following code to the qa-theme/SnowFlat/qa-styles.css file:

.qa-logo img {
   height: 10px !important;
   width: 50px;
}

Note making changes to the CSS will force you to apply/merge those changes whenever a new Q2A release is published. Also, changing the width, might be optional, of course.

 B) Applying a similar code to the one above to the Custom HTML in <head> section of every page setting in admin/layout section. This approach will not force you to have to add the code again after a Q2A upgrade. However, you will have to check after te upgrade if things still look good or if the code is not compatible with the upgrade.

Following the previous example, the code to add in the textarea would be:

<style>
.qa-logo img {
   height: 10px !important;
   width: 50px;
}
</style>
by
Thanks for the explanation. I think I'll go with option B for now.

Just 1 thing I need to clarify. The fix you suggested above means the "Logo width" and "Logo height" options (Admin - Layout) will still not work, right?
by
Not really. If you want them to work you would have to remove all the CSS that is being applied on them. That means going for approach A but rather than appending stuff to a file, you would have to remove all the lines from it. If you didn't like A much, you would like that approach even less
by
Noted.

I was actually wondering why put a configuration for logo width and height if in the end it will be overridden by the CSS. I just realized that the CSS comes from the theme so I guess the logo configuration should work with another theme.

In any case, thanks again for the quick respond. I think I'll go and limit the height of any new logo to 49px to comply with the theme. I won't rely on the configuration for now. :)
...