Header

Designing a Header (aka Banner, Logo, Flag) 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!

Designing Your Header with FLEX Pro

If your website has been converted to FLEX Pro, the number of design elements and options available to you when customizing your header area will significantly increase. 

To start taking advantage of these new tools, go to your SNO Design Options page under the Appearance tab on the left navigation bar in the WordPress dashboard. Click on the Site Designer section of the SNO Design Options page and direct your attention to the Header Design portion of the page. 

Once you’re here, you will see the current structure of your header, broken down into content blocks. At this point, you can either make adjustments to those pre-existing blocks, or delete them and start from scratch.

Here are some tips and pointers to get started:

• Your header is made up of two different types of spaces: Horizontal areas (rows) and vertical areas (columns). Rows can be added by clicking “Add Row.” Columns can be created by clicking on the gear icon to the right of a row, and then clicking “Add column.”
• To increase the height of a row or the width of a column, simply place your cursor on the side of that space and drag to resize the area in real time.
• If you see a “Legacy” label attached to a content block, that means there is a newer element available that encapsulates the functionality of that older element. You’ll want to swap those out for their updated replacements.
• If you would like consistent design styles applied to multiple content blocks within the same row, set the background color of each element to “Transparent,” click the gear icon on the right of the row, and click “Edit Row Settings.” 
• Use the purple toggle bar above the header designer to create different versions of your header that are optimized for tablet or mobile devices.

Designing Your Header without Using FLEX Pro

Under the Header 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

1. Create the new header in PhotoShop or any image-editing software (Gimp is a great free program www.gimp.org and there are others online).  The maximum width for your new header is 1400 pixels, and the height should be set to 150px (you can use a larger height up to 250 pixels).
2. Your header will look best if you create it with a transparent background and save it as a .PNG file. 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 Header 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. Either upload your image directly into the new dialog window that pops up or toggle to your media library to choose a previously uploaded image. Click the blue "Use this image" button at the bottom right.
8. 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

* Note that you really only need to upload one image to the main desktop section. The other areas will use that image automatically. Height isn't as strict as width, so feel free to use an image with a larger height than what's listed above. Anything taller than 250px will require custom css, which we can add for you. Just ask!

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 15mb. Need help designing a header?  Consider the Logo Design and Web Header Add-On.

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.