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 9 and a WordPress version on UO Blogs.
This site is running Cosmic on Drupal 9. An example UO Blogs site running Cosmic can be seen on the College of Design Technology Services.
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 Marketing 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 on any official University of Oregon Drupal or WordPress website.
Installing Cosmic on your Drupal Website
Prerequisites
- Drupal 7 or 9 (Drupal 9 recommended)
- UO Cosmic Theme: NOTE: You must be on the campus network or using UO VPN to access the download.
- UO Core Module: Same version number as your version of Cosmic. NOTE: You must be on the campus network or using UO VPN to access the download.
- UO Banner Module: Same version number as your version of Cosmic (If not installed, check the section below called "Installing the UO Banner and Footer module"). NOTE: You must be on the campus network or using UO VPN to access the download.
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. NOTE: You must be on the campus network or using UO VPN to access the download.
- Extract the archive to your sites/all/modules directory in your Drupal install.
- Log in 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 nonstandard 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.
- 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.
- 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.
- 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.
- 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 additionally add: /sites/all/modules/uobanner/css/uobanner-styles-responsive.css
Installing Cosmic on your UO Blogs site
Prerequisites
- UO Banner and Footer plugin (If it is not already installed, see the section below called "Installing the UO Banner and Footer plugin")
Cosmic Theme Installation Procedure
-
From your site's Dashboard, navigate to Appearance > Themes.
-
On the Themes page, search for "cosmic" in the search box.
-
Then click the "Live Preview" button to make sure 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 different in the preview. 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.
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.
-
Click the "Header Image" option, then select the "Add New Image" option.
-
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.
-
Preview your changes and if they look good, click the "Save & Publish" button at the top of the customizer options.
-
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:
Short, wide example:
To add sidebar widgets
-
From your site's Dashboard, navigate to Appearance > Customize.
-
From the Customize menu options, click the "Widgets" option.
-
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.
-
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.
-
Search for "UO Banner and Footer"on the Plugins page.
-
Click either of the "Activate" links to activate the UO Banner and Footer plugin on your UO Blogs site.
-
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:
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 Marketing 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
You must be on the campus network or using UO VPN to access these downloads.