CSS to increase height of logo and header in dektop <> Mobile view

dev
1

From my pc desktop, via the inspector in firefox, the css tag that manipulates logo height is:

.d-header .title {
  --d-logo-height: 4em;
}

However, I notice that when I plug in this css tag in the default theme in the css editor under desktop, it does nothing to the logo height as viwed on my pc desktop nor mobile phone.
However, if I plug in the same css code under mobile it changes the logo height not only on my pc dektop but on mobile phone too. Is this a bug in discourse or am i
missing something.

1 Like
2

Hi,

Just in case, where did you put this CSS?

2 Likes
3

It’s always good practice to try and frame a request for help a bit better. Lot of people here are super eager to help, but there are so many ways things can be done, that a good explanation is crucial to get help asap :slight_smile:

Also, if you’re testing things locally, don’t forget to append ?mobile_view=1 to the url.

1 Like
5

From my pc desktop, via the inspector in firefox, the css tag that manipulates logo height is:

.d-header .title {
  --d-logo-height: 4em;
}

However, I notice that when I plug in this css tag in the default theme in the css editor under desktop, it does nothing to the logo height as viwed on my pc desktop nor mobile phone.
However, if I plug in the same css code under mobile it changes the logo height not only on my pc dektop but on mobile phone too. Is this a bug in discourse or am i
missing something.

7

I tried to recreate what I think you’re doing but I can’t repro this:

It correctly changes mobile, and doesn’t impact desktop.

If I add the this CSS in the editor, it works as expected for desktop:

image
image1630Ă—1000 154 KB

And for mobile, you only need to set the height for the logo, not for the header:

image
image782Ă—852 78.2 KB

Hope that helps.

1 Like
8

Thanks, I jumped on a different machine, one running ubuntu 22.04 (web server) the CSS code in the desktop CSS bucket rendered correctly, so perhaps a Browser issue on my other PC desktop running Windows 7.
I did notice that I appear to be limited in Mobile CSS bucket to:

.d-header #site-logo {
  height: 3em;
}

Any attempt to go beyond 3em doesn’t increase the logo height on my cell phone, GS23 - even after I refresh the cache.

Thoughts?

9

Yup, try unsetting the max-width on the logo, that should free it from any constraints.

1 Like
10

Thanks for the input I couldn’t find that option under settings is that done through CSS or a command line input in rails and if so what does that look like

11

That’d be CSS, like so:

.d-header #site-logo {
  max-width: unset;
}

If that fails, add !important.

3 Likes
14

Thanks for your help:

For those who come after me and would like to increase their logo size both in desktop and mobile view.

  1. Customize → Themes → Default → Edit CSS/HTML

a) Post in the Desktop bucket:

.d-header {
  height: 5em;
}
.d-header #site-logo {
  height: 5em;
}

b) Post in the Mobile bucket:

.d-header #site-logo {
  max-width: unset;
}
.d-header #site-logo {
  height: 4em;
}
2 Likes
15

Those could be one rule:

.d-header #site-logo {
  max-width: unset;
  height: 4em;
}

I think you could compact the first rule set as well, but I don’t remember how off the top of my head.

2 Likes
16

One more thing that would be helpful to add is how to reduce the padding, so as to move logo left in Mobile view - thoughts?

17 
.wrap {
  padding-left: 0;
}

At this point, it might be a good idea to follow an introduction course in CSS because:

More about developing your own themes can be read in the dev category.

2 Likes
19

Thanks Charlie I appreciate it.
I’m familiar with using inspector, e.g. firefox and deriving some solutions.

Any thoughts why logo resizing is not part of the core functionality within discourse. Branding of any website is critical and the lack of granularity in this respect is surprising.

1 Like
20

“Logo manipulation” is perfectly possible, just like all other types of styling, within themes and theme components.
You will just either need to learn the basics of html/css/js and go through the plentitude of documentation on meta to get things done yourself, or you’ll need to look for someone you can hire to make your desired changes.

The latter can be done in the marketplace category.

As your original question has been answered, I think we can end this topic now.

I wish you the best of success with your forum.

3 Likes
21

I personally would not expect a company logo sizing to be a part of a forum platform’s core functionality. Moreover, our software is open source and we do provide such support to help you accomplish this as we did above. We also offer lots of info on learning to develop your own customizations.

3 Likes
24

Hi Charile,

By “Logo Manipulation” I was referring to the ability to change the size of the logo within the UI."

Thanks for your help.

25

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.