I would like to center site description in header

[hogsty]

I have a graphic logo so I don’t need to display the site name. However I would like to center the site description text vertically. I increased the area that the logo displays, but the site description appears at the top of the header. Is there an easy way to do this?

If you would like to see what I’m talking about the forum address is http://www.hogsty.com/forums

Any help is appreciated

[hogsty]

I think I figured it out.

I changed the .site-description div to display: flex and added align-items: center; Then I removed the margins from the <p> and added a little padding. It looks good now, just hope that doesn't screw up anything else.

Is there a better way to accomplish the same thing?

[hogsty]

It's like peeling an onion! Fix one thing break another. found out that without the site name in the config there is no header at all at the smaller screen breakpoints!

So, to fix that I had to set the site name in the board settings, then in the css set the site-description h1 to display:none until the 700px breakpoint, then back to block.

Now to find what I broke doing that. .....

[warmweer]

DISCLAIMER: the option I'm describing is experimental and minimally tested. Use it or not and if you do it's at your own risk.

The solution I can think of is to experiment using the browser's Inspector to see what determines the spacing so I messed around with Inspector using your board for reference.

prosilver 338
in overall_header.html see line 86

Code: Select all

			<div id="site-description" class="site-description">
		<a id="logo" class="logo" href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ L_SITE_HOME }}{% else %}{{ L_INDEX }}{% endif %}">
					<span class="site_logo"></span>
				</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

Site description is on line 91 and it's in a <p></p

p {
line-height: 1.3em;
font-size: 1.1em;
margin-bottom: 1.5em;
}

In inspector adding under margin-bottom margin-top: 4.5em; magically does the trick

However, that's not a permanent solution.
So you need to create a new p class specifically for the site description only (in common.css)
something like
p.topspace {
line-height: 1.3em;
font-size: 1.1em;
margin-bottom: 1.5em;
margin-top: 4.5 em;
}

and use that in overall header.html (line 91)
<p class ="topspace">{SITE_DESCRIPTION}</p>

You'll probably have to experiment a bit with the "em" to get it perfect. (and clear board and browser cache to see the edits in action).
And when updating: remember to repeat your edits.

if it messes up your board : I didn't do it (make sure you keep a backup of the original overall_header.html and of common.css).

Added: Before editing any files, you might want to use your browser's inspector to experiment until you get the result wanted and possibly find another way to get a similar result, and only then start editing the files.