Using Cosmic on Your Website

What is Cosmic?

Cosmic is a responsive, UO-branded website theme available to all faculty and staff of the University of Oregon. It currently supports Drupal 7 and a Wordpress version on UO Blogs.

This site is running Cosmic on Drupal.  An example UO Blogs site running Cosmic can be seen on the A&AA blog site

Cosmic is designed to be extendable and modifiable, and is intended to aid developers who need a UO-branded website but lack the design resources or time to develop a custom theme for their project.

Cosmic was developed by the Digital Communications team to aid departments on campus in creating quality websites. Cosmic allows departments with limited designer access or simpler needs to produce visually appealing web content.
 

Who can use Cosmic?

Any department or group on campus may use Cosmic as long as the site it is deployed on is part of the University of Oregon.
 

Installing Cosmic on your Drupal Website

Prerequisites

Installation Procedure

  • Download the UO Cosmic theme.
  • Extract the archive to your sites/all/themes directory in your Drupal install.
  • Log in as administrator on your Drupal site and go to admin/appearance in your Drupal install. Select enable and set default under the UO Cosmic theme to start using the theme.
     

Installing the UO Banner and Footer module

If you currently do NOT have the UO Banner and Footer module installed on your server (centrally hosted websites in the UO vanilla platform already have it installed), you can install it by doing the following:

  • Download the UO Banner Module.
  • Extract the archive to your sites/all/modules directory in your Drupal install.
  • Login as administrator and go to admin/modules, select the checkbox next to "UO Banner and Footer" and click save.
     

Using and Modifying Cosmic on Drupal

As with using other Drupal themes, it's very likely that you might want to tweak or modify Cosmic to better fit the needs of your individual site. Cosmic provides a number of techniques to allow you to adjust it for your site's needs.

Add site specific css

Cosmic searches for a file called cosmic_overrides/style_overrides.css in the main site directory. You can use this file to create site specific overrides without modifying or using a non standard version of the cosmic theme.

Subtheme Cosmic

Cosmic can be subthemed, allowing you to make your own theme that uses Cosmic as a base while still maintaining control over full theming capabilities and allowing for easy upgrades.

  1. Setup the location for your new sub-theme.

    Copy the STARTERKIT folder out of the cosmic/ folder and rename it to be your new sub-theme. IMPORTANT: The name of your sub-theme must start with an alphabetic character and can only contain lowercase letters, numbers and underscores.

    For example, copy the sites/all/themes/cosmic/STARTERKIT folder and rename it as sites/all/themes/foo.
     
  2. Setup the basic information for your sub-theme.

    In your new sub-theme folder, rename the STARTERKIT.info.txt file to include the name of your new sub-theme and remove the ".txt" extension. Then edit the .info file by editing the name and description field.

    For example, rename the foo/STARTERKIT.info file to foo/foo.info. Edit the foo.info file and change "name = Cosmic Sub-theme Starter Kit" to "name = Foo" and "description = Read..." to "description = A Cosmic sub-theme".

    Then, visit your site's Appearance page at admin/appearance to refresh Drupal 7's cache of .info file data.
     
  3. Edit your sub-theme to use the proper function names.

    Edit the template.php and theme-settings.php files in your sub-theme's folder; replace ALL occurrences of "STARTERKIT" with the name of your sub-theme.

    For example, edit foo/template.php and foo/theme-settings.php and replace every occurrence of "STARTERKIT" with "foo".

    It is recommended to use a text editing application with search and "replace all" functionality.
     
  4. Set your website's default theme.

    Log in as an administrator on your Drupal site, go to the Appearance page at admin/appearance and click the "Enable and set default" link next to your new sub-theme.

Known Issues

ISSUE: Black background in WYSIWYG editors (ckeditor etc) -
SOLUTION: Edit the WYSIWYG profile. Define CSS Path: %t/css/editor.css if using UOBanner Module addtionally add: /sites/all/modules/uobanner/css/uobanner-styles-responsive.css
 

Installing Cosmic on your UO Blogs site

Prerequisites

Cosmic Theme Installation Procedure

  • From your site's Dashboard, navigate to Appearance > Themes.
     UO Blogs Dashboard, Appearance, Themes screen shot
  • On the Themes page, search for "cosmic" in the search box.
    UO Blogs Theme search box screen shot
  • Then click the "Live Preview" button to check to ensure that the Cosmic theme is compatible with your site.
    Note: If your existing theme has custom menus, widgets, or front page options, your site may look differently in the preview and you might need to reassign the custom options in the theme customization sections in order for your Cosmic site to have the same setup as your previous theme. 
  • If compatible, click the "Activate" button to make the Cosmic theme live on your UO Blogs site.
    UO Blogs Cosmic Theme view screen shot
     

Customizing the UO Blogs Cosmic Theme

The UO Blogs Cosmic theme offers two sidebar areas and a customizable header logo image that can replace the default site title text.

To use a custom header image instead of the default site title text

  • From your site's Dashboard, navigate to Appearances > Customize.
    UO Blogs Dashboard, Appearance, customize screen shot
  • Click the "Header Image" option, then select the "Add New Image" option.
    UO Blogs custom header image screen shot
  • Select an image from your media library, or upload a new image, and then click the "Select and Crop" button. 
  • The option to crop your image will automatically display next.  The default crop size will generally create a header image that will display at 290 px X 60 px. However, the Cosmic theme can display a header image up to 860 px X 60 px.
  • If you have used the crop function, click "Crop Image" or you can click "Skip cropping" to use the entire image uncropped. Choosing the "Skip cropping" option will allow you to use the original image aspect ratio, although the image will still be scaled down to fit into the header image space. 
    UO Blogs custom header image cropping options screen shot
  • Preview your changes and if they look good, click the "Save & Publish" button at the top of the customizer options.
    UO Blogs theme customize publish button screen shot
  • Note: The custom header image has a maximum display size of 860 px x 60 px.  Any image over 60 px tall will be scaled down in a fixed ratio to fit into the 60 px.  The same is true for the width, any image over 860 px wide will also be scaled down in a fixed ratio to fit the 860 px.  This means that the height or width could vary, depending on the actual aspect ratio of your image.  
    Tall, narrow example:
    Screenshot of a tall, narrow alternate header image
    Short, wide example:
    Screenshot of a short, wide alternate header image

To add sidebar widgets

  • From your site's Dashboard, navigate to Appearances > Customize.
    UO Blogs Dashboard, Appearance, customize screen shot
  • From the customize menu options, click the "Widgets" option
    UO Blogs theme customize widgets screen shot
  • You will see two Sidebar options.  Click on one of them to open a submenu and click on "+ Add A Widget" to add items to the sidebar.
    Screenshot of the add widget button
  • Sidebar 1 will display on the left and Sidebar 2 on the right.  Any widget added to a sidebar will display on all content, such as pages and posts.  For more information on how to use widget items and what each one can do, see the Edublogs Widget Overview page.
  • Note:  While the Cosmic theme will allow you to have both Sidebars active at the same time, the Sidebars are too wide to have them active simultaneously.  
     

Installing the UO Banner and Footer plugin

Installation Procedure

  • From your site's Dashboard, click the "Plugins" link on the left sidebar.  
    UO Blogs Dashboard, plugins screen shot
  • Search for "UO Banner and Footer"on the Plugins page.
    UO Blogs Dashboard, UO search box screen shot
  • Click either of the "Activate" links to activate the UO Banner and Footer plugin on your UO Blogs site.
    UO Blogs Dashboard, activate UO header and footer plugin screen shot
  • Once activated, navigate back to UO Banner and Footer on the Plugins page, click the "Settings" link, and follow the instructions below.

Settings

  • Click the "Enable Mobile Menu" checkbox.
  • Enter 1200 into the "Custom Page Width" field (this is Cosmic's default width).
  • Additionally, as an optional feature in the Footer you can choose to populate the remaining fields with information pertaining to your site/organization.
  • Click the "Save changes" button at the bottom of the page.
    Example UO Banner and Footer Plugin footer customized with basic information:
    Screenshot of the UO Footer

 

Bug Reports and Assistance

This theme is provided AS-IS and does not come with any warranty or technical support. If you encounter any bugs, missing functionality, or other issues with the theme, please email Digital Communications.  Likewise, if you make a patch to the theme that could benefit other users of the theme, please create a branch on the git repository and submit a pull request.
 

Git Repositories

Drupal

Wordpress