Customize your Cobalt Site

Appearance

When you’re working with the Cobalt theme, you’ll have a series of panels that are configurable to customize certain features on your site. These can be found through Appearance > Customize. After making changes in these panels, be sure to Save & Publish


Active Theme

This panel displays which theme is currently active on your WordPress site. It should say Cobalt 500. If your Expressions Pro site is not currently running Cobalt 500, but you would like it added to your theme directory, please email express@syr.edu.


Site Identity

You can choose a unique Site Title and Tagline for your website. The site title appears to the right of Syracuse University in your site’s header. Typically, the site title is the name of your group/organization/department and the tagline is your slogan or message. If your group doesn’t have a slogan, we recommend using “Welcome to (Group/Department).” By default, your site’s tagline is “Just another WordPress site.” Please be sure to change this because the tagline appears on the web browser tab along with the title of your site.

Optionally, you can add a Site Icon, or favicon, which will be used as a browser and an app icon for your site. Icons must be square, and at least 512px wide and tall. You can upload a file or choose one from the media library.


Header Image

Cobalt recommends a header image size of 3000 x 1120 pixels, though you can crop images to your liking after uploading. To add a header image, click Add New Image in the Header Image panel. You can upload a file or choose one from the media library. Your header image should go hand-in-hand with your Header Content, meaning it should add additional context to your site, rather than decoration. The header image is responsive, so there may be slight changes to its appearance depending on screen size. Ideally, you should test your header image on multiple screen sizes, including mobile, to ensure it communicates the same message across all platforms.


Header Content

The Header Content appears as a text overlay on your header image. Header content is not required, but it can help to communicate your group or department’s mission, goals, or current project. This will be the first text the user sees on your site, so it should call attention to your most important information. 


Menus

Cobalt supports the use of one custom menu as the top navigation. You can select which, if any, of your custom menus you would like to use as your Primary Menu by choosing Menu Locations > Primary Menu. The menu content and structure can be edited through Appearance > Menus. If you choose to not have a custom menu, all top-level pages will automatically be added to your top navigation in alphabetical order. A Primary Menu overrides this function.


Static Front Page

You can choose to have your home page display either Your Latest Posts or a Static Page. If you choose to have a static front page, you must pick one of your existing pages to assign as the Front Page. Optionally, you can also choose to assign one of your pages as the designated Posts PageWhen using a static front page, the most recent posts (sticky first) can still appear if you check Show News and Events on Front Page. When this option is checked, the three most recently published posts will display below your static content.


Footer

You can set your own footer content. By default, all Cobalt sites contain “© 2015 – Syracuse University. All Rights Reserved.  Accessibility | Privacy | Status | syr.edu” in the footer. This text is required and cannot be changed. However, you can add your department’s NameAddress, and Phone Number. It is beneficial to include this because it allows users to easily find your contact information. 


Social Icons

You have the option of adding social media icons in the footer. Social links are available for Map, Facebook, Twitter, YouTube, and Google+


Custom CSS

This is a panel specifically meant for adding Custom CSS coding to your website. This should be used sparingly and by someone who is comfortable writing CSS code.