Phone number in header

any advice on adding text to the center of the header? And in larger font than contact info? (I want to add the company name and slogan in large font)
I installed the header and footer plugin but am clueless with coding.

https://www.amillionmeals.org

@emonttinen, did you add the contact information under the social media buttons through Header and Footer, or did you add it through Coller’s Custom CSS field?

Nevermind, I see that you used Header & Footer. OK, give me a few minutes to work something up.

OK, the first thing you want to do is move your code to a different field in the Header and Footer plugin. You might have noticed that if you go to a different page on the site, the contact information doesn’t show up. That’s because you put the code into the field labeled Code to be added on HEAD section of the home. That means the code will only execute on the home page. Move the code to one of the other two fields instead, although my preference is for the bottom field, Code to be added before the end of the page, because it will help (in a very small way) decrease your load time.

Once you’ve done that, modify the code so it looks like this:

<script>

jQuery(document).ready(function($){

$("#social_icons").append('<div id="ContactInfo">888-555-1212<br />640 Main Street<br />El Segundo, CA 90245<br /><a href="mailto:[email protected]">[email protected]</a>');
$('<div id="banner"><div id="banner-title">Childhood Food Solutions</div><div id="banner-tag">Helping fill the Hunger Gap</div>').insertAfter($(".site-branding"));

});
</script>

The only difference between this code and the one way up above is that I added one more line to the code, just after the line which adds the contact info after the social icons. This line creates a DIV (a container) with the ID of banner. Inside this DIV are two other DIV containers, one with an ID of banner-title and the other with an ID of banner-tag. Inside each of these DIVs are the text for the site title and the site tagline.

Once you save the changes, you can take a look, and you’ll see that the basic information is there, but it just needs to be styled. That’s where some CSS will come into play. Try starting off by copying this into the theme’s Custom CSS field (Appearance > Coller Settings > Basic Settings > Custom CSS):

.site-branding {
   width: 25%;
}
#banner {
   display: inline-block;
   float: left;
   padding: 45px 0;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}
#banner-title {
   font-size: 36px;
}
#banner-tag {
   font-size: 25px;
}

The first rule adjust the spacing between the logo on the left and the new titles. Increase or decrease this value to adjust the spacing.

The second rule, for the #banner DIV, sets up some general properties. padding is how much empty space there is inside the edges of the container. 45px 0 means 45px of space at the top & bottom, no extra space on the sides. Adjust the first value to adjust how high or low you want the text to be positioned.

The last two rules set the font size of the title and tag line. Adjust the values as you see fit. You can also add other properties like font color or font weight.

@crouchingbruin
THANK YOU!!!!
I really appreciate you taking the time to help me out. I couldn’t find anyone I knew who could write code and you saved me! (I’m more a print gal venturing into the digital design world, finally)
Now, the rest of your message about how to change size and weight is a bit over my head. And I want to figure out how to change the font, too.
Any advice on where to learn coding on the fly or websites to check out to educate myself?
Thanks again!!

Now, the rest of your message about how to change size and weight is a bit over my head.

In these rules:

#banner-title {
   font-size: 36px;
}
#banner-tag {
   font-size: 25px;
}

The font-size property specifies how large the font is. px is short for “pixels,” which is the size of the really small dots on the screen that make up an image. So right now the banner title is set to 36 pixels (36px) and the tag line is set to 25px. If you want to make the tag line bigger, you can bump it up to 30px, for example.

The font-weight property refers to the “thickness” of the font. If you add font-weight: bold as one of the properties, the font will be thicker. You can also use a number in the format n00, where n is a number from 1 to 9 (so 100, 200, … 900). A value of 400 is normal thickness, 700 would be bolder, 200 would be thinner.

And I want to figure out how to change the font, too.

It looks like you figured that one out, congratulations! The only thing to worry about is to make sure you use a web safe font. That is, I’ve had questions about why, when a font is picked that they can see on their Mac, that it doesn’t look the same when the site is viewed on a friend’s PC. The reason is that not all fonts are available to every system, especially the fancier ones. The “web safe” fonts are those which are very basic, and should be available on all systems.

However, there is a way of using “fancier” fonts that are downloaded from a web site. Google Fonts is a very popular way to use fancier fonts in a way that can be viewed on all browsers. For example, if you wanted to use the Sniglet font for your site title, then all you would have to do is paste a line like this:

<link href='https://fonts.googleapis.com/css?family=Sniglet' rel='stylesheet' type='text/css'>

Into the Header & Footerplugin (in the Code to be added on HEAD section of every page field), then you could add something like this to your CSS:

#banner-title {
   font-family: 'Sniglet', cursive;
}

Any advice on where to learn coding on the fly or websites to check out to educate myself?

The W3 Schools site has some excellent tutorials. I would first start with:

1. HTML Tutorial. HTML forms the basis of the web page. It defines the content of what you see. You may not be writing HTML when you create your WordPress pages, but you should have a basic understanding of what the different tags mean so you can style them with CSS.
2. CSS Tutorial. CSS allows you to change the appearance of the content that’s produced by the HTML. That is, it affects how you see things on a web page. For most users, 90% of what they want done can be accomplished by making changes to the CSS, so this is a very important skill to learn. As you’ve already learned, you can change things like the font size, weight, and family. You can also change the font color, the background color, use a background image for an element, make rounded corners on rectangular elements, etc. You can also add sections of CSS called media queries that makes changes to the appearance based on the screen size. For example, if someone is viewing your site on a smartphone, maybe you want to make the font size of the site title smaller.

While learning JavaScript and jQuery can be useful (the code that I had you add to the Header & Footer plugin is jQuery, for example), it is very seldom used, it would more of an advanced topic. The PHP tutorial would also be a more advanced topic, if you wanted to take the step into becoming a “real” web developer and learn how to modify the theme you’re using by creating a child theme.