Header or Masthead

Designing a Header Image, Banner, or Masthead is something you can do yourself, or you can hire us to do it for you. To do it yourself, you'll need to create an image and upload it to your site. Check out this page for a little inspiration!

Under the Custom Header Graphic section of the SNO Design Options page, you can choose whether you want to keep the text header that came with your site or upload an image header. See below for more details and instructions for each:

Image Header

IMPORTANT: Because SNO provides your site with a responsive design, you will want to upload your header image in a variety of  different sizes to fit each header area as your site is viewed on different platforms and smaller screens.

1. Create the new header in PhotoShop or any image-editing software (Gimp is a great free program www.gimp.org).  The maximum width for your new header is 1400 pixels, and the height should be set to 150px (you can use a larger height).
2. Your header will look best if you create it with a transparent background.  That way the the gradient/color in the background of the header will show through.  Save your header image as a .png file in order to ensure transparency.  You can also build your background in PhotoShop and save the file as a .jpg (.png and .gif work as well).
3. Go to your SNO Design Options page under the Appearance tab on the left navigation bar in the WordPress dashboard.
4. Click on the Custom Header Graphic section of the SNO Design Options page.
5. Choose Image Header in the first drop down menu.
6. Click the “Click to Upload Header Image” button.
7. After the image has uploaded, make sure the “Full Size” button is highlighted and then click the “Insert into Post” button.
8. If you would like your new header to work with SNO’s responsive design, repeat steps 1-7 following the size instructions as given for each of the next image header sections.
9. Click the Save All Settings button to the right.

Here are the dimensions for each possible header image on your site based on the device you're viewing the website on:

• Desktop: Max - 1400px wide by 150px tall / Min - 980px wide by 150px tall
• Tablet: 780px wide by 100px tall
• Mobile: 480px wide by 100px tall
• Minilogo for Navbar (optional): 150px by 50px tall
• iPhone/iPad Shortcut Icon (optional): 128px wide by 128px tall

* Height isn't as strict as width, so feel free to use an image with a larger height than what's listed above.

All images can be 72 DPI/PPI (dots per inch/pixels per inch) if that's something you care about. File sizes should be under 10mb. Need help designing a header?  Consider the Logo Design and Web Header Add-On.

Alternative Header

When activated, the alternate header mode provides a lower profile header. The header image itself is smaller and placed to the left, and to the right of the header image you can add other features, such as menus, social media icons, and the breaking news ticker. There's also an option for a hidden menu triggered by an icon on the left side of the header area. 

Text Header

Your site comes preloaded with a text header that displays the name of your news publication and the tagline that’s set on the General Options page (under the Settings menu on the left side of the WordPress Dashboard).  If you would like to change the styling of this header the Header section of the SNO Design Options page is where you would do so.  You can show or hide the text’s drop shadow, choose the title and tagline alignment, color, and background.

Header Tagline

By default the tagline of your website reads, “The student news site of Your School.” To change this, just head to the Dashboard and click on Settings and then General. On the screen that appears, you can change the tagline (or name of your website) and click Save when you are done. DO NOT change anything else on this page! Your website will break if you change the URL or other settings on this page.