blog documentation FAQ followers forum marketplace services youtube

completed Changing the height of the header

The Jamroom Network » Forum » Ning To Jamroom » Page » Changing the height of the header
Clay Gordon
Clay Gordon
@claygordon
11 years ago
744 posts
I want to increase the height of the header as can be seen in the attached image. I don't see where this is done.

There is a header height (75px) in header.css, but increasing the height (say to 100px) doesn't push down the rest of items in the DOM - the header rectangle just starts covering the admin tabs and site content.

I want to be able to create some sort of top level site branding that is different from (and bigger than) the Jamroom logo.
updated by @claygordon: 02/05/15 09:50:28AM
SteveX
SteveX
@ultrajam
11 years ago
2,584 posts
Try adjusting the .spacer {padding-top: 75px;} to whatever height you have set your heading to.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
Clay Gordon
Clay Gordon
@claygordon
11 years ago
744 posts
Thanks for the pointer.

This class does not appear to accessible from the style editor in the ACP. So I downloaded all the CSS files and searched to find the .spacer class in header.css. I edited the CSS locally and uploaded.

It's also necessary to set the #header height (also in header.css) to the same value as .spacer, keeping in mind that the ACP UI only allows you to set the #height value in 5px increments.

Next step will be to upload a new logo image to replace the default and get it sized and placed properly.
updated by @claygordon: 12/31/14 09:49:04AM
brian
@brian
11 years ago
10,148 posts
thechocolatelife:
Thanks for the pointer.

This class does not appear to accessible from the style editor in the ACP. So I downloaded all the CSS files and searched to find the .spacer class in header.css.

All class should show in the Style editor - you may have to click on the untagged tab, as not all classes/id's have been "tagged" (with a title and help).

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Clay Gordon
Clay Gordon
@claygordon
11 years ago
744 posts
I did a selector search and nothing came back. It is there in the untagged section now that I look for it,

however ...

when I uploaded the style sheet afresh (by reloading Skins/Styles) it does not show the value I entered by hand into the CSS and the pop-select list only offers values in the range of 0-50px in single pixel increments.

The default value in the style sheet is 75px and my new value is 140x, so that doesn't make a whole lot of sense to me either.
updated by @claygordon: 12/31/14 10:38:32AM
brian
@brian
11 years ago
10,148 posts
thechocolatelife:
when I uploaded the style sheet afresh (by reloading Skins/Styles) it does not show the value I entered by hand into the CSS and the pop-select list only offers values in the range of 0-50px in single pixel increments.

I can check this out - it should always show the value of what it actually IS, and then have other pixel sizes to select.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
brian
@brian
10 years ago
10,148 posts
I am now checking this out and I'm not seeing an issue with incorrect pixel sizes for the #header height value, so I want to double check that I am looking at the same thing you're looking at:

- I'm using the NingJa skin
- I go into ACP -> Skins -> NingJa -> Style
- I select the "header.css" option in the Style Section select element
- the #header element shows a height of 75px, with 5px increments all the way to 600px.

Am I looking at the same element you are?

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
updated by @brian: 01/04/15 07:50:59AM
douglas
@douglas
10 years ago
2,797 posts
brian:
I am now checking this out and I'm not seeing an issue with incorrect pixel sizes for the #header height value, so I want to double check that I am looking at the same thing you're looking at:

- I'm using the NingJa skin
- I go into ACP -> Skins -> NingJa -> Style
- I select the "header.css" option in the Style Section select element
- the #header element shows a height of 75px, with 5px increments all the way to 600px.

Am I looking at the same element you are?

Thanks!

I'm seeing the same as you Brian only if you change the height of the #header div you also have to change the height of the spacer class so the page content isn't behind the header, however the .spacer height only goes to 50px in the skins > styles section... shouldn't that go higher than 50?


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
brian
@brian
10 years ago
10,148 posts
Yeah I have to go through this with a fine tooth comb tomorrow, so I will get anything not working fixed up.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
brian
@brian
10 years ago
10,148 posts
I've just pushed a beta release of the Jamroom 5 Core that should fix this up. You won't see the update in your Marketplace if you're not subscribed to the Beta channel - if you aren't, go into your Marketplace -> Tools -> Release Channels and click the "Make Active" button for the BETA channel. Now click on the System Updates tab and you'll be able to update to 5.2.20b1.

It should fix the header pixel height issue, as well as the issue where the "centering" was not being preserved, as well as some other tweaks and fixes in the style editor.

Let me know if you see any issues.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
@Brian -

I ended up downloading all the CSS files locally, edited what I needed to, and FTPd them back up to the host. This way I was able to make all the changes I needed to get the header into a better - still not yet perfect - state.

How beta is beta? Production-ready to run a live site?

Thanks.
:: Clay

Tags