How do I get my header not to be weird?

Hi, Karen:

Wow, you’ve made quite a bit of progress from when I last saw your site. Did you mean to take the site title out?

How do I get a border like the one you used in Sandbox?

OK, if I didn’t tell you about Firebug or Chrome Developer Tools, I apologize, but I’m going to give you a quick lesson, now, because it will be a big help when you are trying to figure out the CSS of a particular web element, either on your site or on someone else’s.

Firebug is a free extension for Firefox, while Chrome Developer Tools (AKA Chrome DevTools) comes built-in with Chrome. Hopefully you are using one of those two browsers. I prefer Chrome DevTools, but both work very well for what you need.

I’m going to give you a little tutorial on how to use Chrome DevTools to figure out the answer to your question, then you can use this technique for other CSS questions that will arise.

First, open up the sandbox site in Chrome. Right-click somewhere on the header image and select Inspect Element from the pop-up menu.

The DevTools console will open up in the bottom half of your browser window. The left pane shows the source code, with the code for the element that you are inspecting highlighted. As you move your mouse over each line of code in the left pane, you’ll see the corresponding element in the top pane highlighted. The img element should currently be highlighted. What’s important to note for now is that the element has an ID of headerImage.

The right-pane shows all of the CSS rules which affect that particular element in descending order of specificity. That is, the properties in the rules at the top will override any identical properties in the rules below it. If you scroll down the right pane, you’ll see some rules where the properties are in a strike-through font, signifying that the property was overriden by another rule above it.

At the top of that pane, you’ll see a rule for the selector #headerImage. The pound sign (#) signifies that the selector is for an ID. So what I do, and what you should do, is give every element that you will be targeting with some sort of unique CSS an ID, because using a CSS selector with an ID gives you one of the highest specificity values. The one property for #headerImage is the border property:

#headerImage {
   border: solid 5px #339;
}

So what I would do is:
1) add an ID for your image element.
2) add a CSS rule to style it. You should add it to the various.css virtual CSS file, since that file will be loaded after all of the other virtual CSS files, which is important if you are trying to override a rule with an identical specificity – the rule which appears last wins.

How do I get the logo over the white text box?

Are you referring to the search field that is just above the Recent Posts in the side bar?

How do I change the menu lettering to be darker?

Look at the menus_menu1.css virtual file. If you do a search on the word color, you’ll see the three rules which affect the menu color.

As far as seeing what the original code for header.php looks like, the way I would do it is to copy & paste the contents of your current header.php file to somewhere safe, then click on the shallow button that’s labeled subtemplate-header. That will revert the code back to the default. Copy & paste that code somewhere that you can refer to later on, then copy & paste back your modified code and click the SAVE Changes button.

Hi CrouchingBruin,
This is exciting ~~~ HUGE increase in things I can learn from you.

LOL ~ no, I did not want to lose the words, I just could not work out how you got them there. I found a mention in your code of “transparent” but I didn’t really understand how it worked.

I use Chrome. I right click on the body of a site and choose “View page source” ~~~ Is that what you mean?

I have to go switch to a different backup battery, and check on dinner.

I’ll study what you wrote before I reply again.

Thank You So SO much!!!!

Karen

I right click on the body of a site and choose “View page source” ~~~ Is that what you mean?

No, you right-click on the element that you want to look at and select Inspect element. For example, since you want to see how the blue border is created, you right-click on the header image from my sandbox site, select Inspect element, and the CSS for the image element will show up in the right pane of the DevTools console.

Hi CrouchingBruin,
Ah ha! That’s pretty nifty. Very specific information.

Tomorrow I’m going to try changing my header approach to Image… from Logo, which I’m using now.

First I have to make my image shorter, top to bottom, instead of scaling the whole image to get it shorter.

I’m no longer sure I want it across the entire top. There sure are a lot of options in creating a visual affect.

Question ~ the colors I use in Sitebuilder all have 6 letters or numbers or a combination of both… Is WordPress simply sleeker to use 3???

VERY EXCITED ~~ to have found ~~ been shown ~~ where the menu padding is… VERY KEEN to work with that tomorrow.

I’m WAY happy with all the work before me… the options!!!

Thank you So VERY much!!!!

Hi CrouchingBruin…

Well, I got the border: https://health-boundaries.com/

Unfortunately it’s a little more Picasso than I had in mind.

I switched the image in my css from the Logo area to the Banner area, but that doesn’t appear to have affected how it looks. I thought it would go across the whole top, but… not so much.

I want the banner to be even less high than the picture that’s inside the border… I’m trying to get enough room for the drop down menus to be rather long and yet still be entirely visible on a laptop screen, that’s small like mine…

Since I can’t find any dimensions that you put in, besides 100% I’m unclear what to do…

Maybe the 100% attached to the border… that might explain it…

What do you think???

Ah ha. When I changed the image from logo to banner in the sub template for header, it switched,

Oh Dear, CroughingBruin…

I just this minute got it centered using
left-margin: 100px;

but that put a margin top and bottom, too… which I don’t want.

And, how do I get the border to be on the edges of the image?????

/* The header area full width background */
#banner-bg 	{
  	img src="https://health-boundaries.com/wp-content/uploads/2013/09/NowLessTallandScaled.jpg";
	max-width: 90%;
  	margin: 100px;
    border: solid 50px #339;

}

/* The header area */
#banner {
  	position: 				"width=device-width";
  	background-color:		#ffff99;
}

#logo-area {
  	<a href="<?php echo get_option('home'); ?>/"></a>
}

@media only screen and (max-width: "width=device-width") {
	#banner > div, #banner > nav {
		float: none;
		width: 100%;
	}
}

/* The main row, with the #content

Monday ~
Hi CrouchingBruin ~

I’ve got my image about right. For a moment the border was right, so I was really excited. But when I adjusted my image, the border went Picasso on e again.

Also, I tried adding the code I found in other ShowingOff sites for centering the image… but that didn’t work. The only way so far that I’ve gotten it toward the middle was to pad it there… but that doesn’t seem like an appropriate method.

Please will you help?

Oh, and how do I get the words on top of the image, AND in sync with it when the page responds????

I’m going to look for a widget that I can put in the header, I saw that you had a widget…

Hope you are having a truly lovely day!

As an aside, Do you like Carrots????

Karen

Question ~ the colors I use in Sitebuilder all have 6 letters or numbers or a combination of both… Is WordPress simply sleeker to use 3???

No, you can either use 6 or 3 characters. The three characters are just a shorthand in case you don’t need a palette with so many different shades of color. If you use three characters, it’s the same as if each character were doubled for six characters. That is, #fff is the same as #ffffff, and #234 is the same as #223344. With three characters, you can create 4,096 distinct colors (16 x 16 x 16). With six characters, you can get 16,777,216 distinct colors, although, the difference between two closely related colors, like #aabbcc and #aabbcd is so slight that you probably wouldn’t notice the difference. For most designers, a three character color is good enough, but you may have a very specific color that can only be expressed in six characters.

OK, first things first, give this a try. In the rule for #banner-bg:

1. Take out max-width: 70%;.
2. Take out the position=”center”; line; not only is the syntax incorrect (you use colons and not equal signs), but center isn’t a valid value for the position property.
3. Change the values for margin from 0px to 0 10%

So change this:

#banner-bg 	{
	img src="https://health-boundaries.com/wp-content/uploads/2013/10/NowBetter.jpg";
	max-width: 70%;
	position="center";
	padding: 0px 0px 0px 0px;
	margin: 0px;
	border: solid 5px #339;
	border-radius:	0px;
}

to this:

#banner-bg 	{
	img src="https://health-boundaries.com/wp-content/uploads/2013/10/NowBetter.jpg";
	padding: 0px 0px 0px 0px;
	margin: 0 10%;
	border: solid 5px #339;
	border-radius:	0px;
}

The 0 10% value for margin means use 0 margin for the top and bottom, but a 10% margin on the left and right. Adjust the value to suit the aesthetics you’re looking for.

Now, when your site is viewed on a smaller device, like a smart phone, you probably want to get rid of the side margin so the image goes all the way across. You may have noticed that when you make your browser window narrower, at some point the menu turns into a drop-down list, specifically, when the browser width is less than 767 pixels. Take a look at the menus_menu1_mobile.css virtual CSS file. This file has sections called media queries, which activate at certain screen widths. That’s what helps to make sites responsive.

About a dozen lines down, you’ll see this section:

@media only screen and (max-width: 767px) {
	/* Hide default menu */
	ul#menu1,
	a.rsslink,
	img.avatar,
	.post-categories i	{
		display: 	none;
	}

	.menu1-mobile {
		display:	block;
	}

What this does is hide the regular menu (#menu1), along with some other elements, when the width goes down below 767px, and displays the drop-down menu (.menu1-mobile) instead.

So to remove the margin from #banner-bg, go down to the bottom of menus_menu1_mobile.css, and change this:

#content {
		padding:	0 20px 20px 20px;
	}
}

to this:

#content {
		padding:	0 20px 20px 20px;
	}
#banner-bg {
		margin:		0;
	}
}

You want to make sure you put the #banner-bg section in just before that closing brace for the media query, which is the very last line. Then the margins on the image should disappear at the same point when the menu turns into a drop-down list.

I do like carrots, I like dipping them in an edamame hummus that I get at the local supermarket.

Hi CrouchingBruin,
Happiness! I’ll go try that in a moment, but first: I’m SO SO happy about the carrots. I’ve been a bit worried.

Years ago when I wasn’t housebound and used to drive, I used to stop, park and go talk to kids if I saw a group of them smoking. I’d tell them that eating carrots reduces the incidence of lung cancer by about 67%, and that lots of people had told me about aged relative, in their 80s and 90s who had smoked all their lives, loved and eaten a lot of carrots, and were alive and well. The kids would then add more stories to my mental file of why eating carrots is a really good thing if you smoke.

Now I can look at your avatar without worrying. ??

??

Hi Again CrouchingBruin,
It didn’t quite work… I changed the margin thing, centering and border. The centering is GREAT. But the border still goes around the tag line and menu. I want it around the picture, only.

So now I’m not sure I’m still supposed to change the code for the menu.

On third reading, I think I am… so will do.

But please will you help me get the border around the picture, and only the picture?

OH!!! I misunderstood. I wasn’t reading properly and didn’t see that I had to go to a different css file. Once I saw that I changed it and tried making my screen smaller. SO COOL!

Thank you.

!!!!!

I forgot to ask you how to get words over the header image… Please will you tell me when you get time?

Karen

But the border still goes around the tag line and menu. I want it around the picture, only.

In your header.php file, add an ID to the img tag to make it easier to select with a CSS rule. In this example, I added the ID headerImage:

<img id="headerImage" src="https://health-boundaries.com/wp-content/uploads/2013/10/NowBetter.jpg" />

Go back to the rule for #banner-bg and remove the line that says img (I forgot to have you do that with my previous message; that line doesn’t do anything). Cut the line for the border property, that’s the line that creates blue border around the border area; we’re going to paste it into a new rule.
So change this:

#banner-bg 	{
	img src="https://health-boundaries.com/wp-content/uploads/2013/10/NowBetter.jpg"
	padding: 0px 0px 0px 0px;
	margin: 0 10%;
	border: solid 5px #339;
	border-radius:	0px;
}

to this:

#banner-bg 	{
	padding: 0px 0px 0px 0px;
	margin: 0 10%;
	border-radius:	0px;
}

Then create a new rule for the image:

#headerImage {
	border: solid 5px #339;
}

Go back into header.php. Just after the img element, and before the logo-area div, add another div that contains the text you want. Be sure to give it a unique ID:

<div id="imageText">This is some random text</div>

If you then look at the site, the text should appear below the image, but before the tag line (“What you don’t know…”). To move the text up over the image, you can then add this CSS rule (various.css would be a good place to put it):

#imageText {
   margin-top:  -50px;
   margin-left: 50px;
}

The negative value for margin-top will move the div upwards by 50px (if it were a positive value, it would move downwards), and the margin-left value will move the div to the right by 50px. Adjust the values as needed. You can also add properties for styling the text within the div, like color, font-size, etc.

By the way, I don’t inhale my cigar smoke. Most cigar smokers don’t inhale, which gives them a greatly decreased risk for lung cancer compared to cigarette smokers. But thank you for caring about my health.

Hi,
It’s wonderful to know that the line in #banner-bg wasn’t doing anything, because it didn’t seem to change things. But I was never sure I’d gotten the coding right. Whew. Wonderful to just take it out. Thank you.

The next bit of what I’m supposed to do is a little harder for me to grasp.

**** Got it!

Totally AMAZING to see the border go around the picture. How COOL!

It took me awhile to figure out how those little marks on the left hand edge separate things, but now I think I’ve got the structure. NEAT!

Okay… now going to the Words…

I’ve just, for the first time, seen the difference in the code at the left hand side on the header sub template and the layout.css. I don’t know how long it would have taken me, without your help, to appreciate that there’s so much difference.

OOPS ***** all the words went up into the picture ***** the tag line is up there, too.

I now see that the header.php contains the =
while the css contains :

When I added the css to the header.php it made the image text stay in the image and it moved the tag line below the image, but, I don’t think this is what I’m supposed to have in terms of code. It looks like the imageText and Tagline are joined as if they were one set of words…

I’m happy to know about the cigar thing, I didn’t know that. Thank you!!!!

OK, the first thing is to the CSS lines out of header.php, they only go in the CSS files.

Now, the next part is going to be a bit trickier. You’ll be putting the tagline and menu into a separate row div so it’s separate from the current banner div that contains the image and the text which floats over it.
Right now you have something that looks like this in your header.php file:

<div id="banner-bg" class="cf">
	<div id="banner" class="row">
  		<img id="headerImage" src="https://health-boundaries.com/wp-content/uploads/2013/10/NowBetter.jpg">
  		<div id="imageText">Health Boundaries</div>
		<div id="logo-area" class="col12">
			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
		</div>
		<?php wp_nav_menu( array(
			'container' => 'nav',
			'container_class' => 'menu-wrapper',
			'container_id' => 'menu1-wrapper',
			'menu_id' => 'menu1',
			'menu_class' => 'cf menu',
			'theme_location' => 'menu1',
			'fallback_cb' => 'bfa_page_menu'
		) ); ?>
	</div>
</div>

We’re going to change it to look like this:

<div id="banner-bg" class="cf">
	<div id="bannerImage" class="row">
  		<img id="headerImage" src="https://health-boundaries.com/wp-content/uploads/2013/10/NowBetter.jpg">
  		<div id="imageText">Health Boundaries</div>
	</div>
	<div id="banner" class="row">
		<div id="logo-area" class="col12">
			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
		</div>
		<?php wp_nav_menu( array(
			'container' => 'nav',
			'container_class' => 'menu-wrapper',
			'container_id' => 'menu1-wrapper',
			'menu_id' => 'menu1',
			'menu_class' => 'cf menu',
			'theme_location' => 'menu1',
			'fallback_cb' => 'bfa_page_menu'
		) ); ?>
	</div>
</div>

The first thing you’ll notice is that I’ve changed the name of the banner div to bannerImage in the second line.
Then right after the imageText div, I added a closing /div tag to close out the bannerImage div.
Finally, I added an opening div with an ID of banner that encloses the logo-area and menu.
You can take a look at the sandbox site to see how I implemented it. The CSS I used for #imageText is:

#imageText {
bottom: 50px;
left: 20px;
font-size: 24px;
font-weight: bold;
color: #ff9;
}

I also removed the margin: 0 10%; property from #headerImage; it seemed to center better that way.