CampusPress Flex for UCI Theme

  1. Home
  2.  → 
  3. Help Center
  4.  → CampusPress Flex for UCI Theme

We have configured the CampusPress Flex theme to reflect the current UCI branding. This is the new default theme and configuration. This theme is accessibility-ready with many customizations available. This guide will help you edit the pages so you can quickly get a website up and running!

Here are some tips to get the most out of this new theme.

Customize Your Website

All of these changes are done through the Customizer. You will need to be logged in as an Administrator on the website to be able to make these changes.

How to Open the Customizer

From the black Admin Menu at the top, click on Customize, or from the Dashboard go to Appearance > Customize

Customize menu

Header Settings

Site Identity Settings

The header includes the Site Title. It is usually your name or the name of your website or blog. You can change this at any time.

  1. From the Customizer, select General > Site Identity
  2. Use the Site Title field to change the text displayed in your header.
  3. Optionally, you can upload a logo that will replace the visibility of the text. (Click Select logo above Site Title to upload a logo image instead of using text.)
  4. Click Publish to publish the changes.
Site Identity settings

Main Header Settings

Logo Position

We have set up the sites to have the Logo or Site Title on the top left. However, you can change this to be centered with the menu underneath or on the left in a dropbox. To change the logo position go to the Main Header section of the Customizer.

  1. From the Customizer, select Main Header.
  2. For Logo Position, decide where you want the Logo or Site Title to appear. You can preview what it will look like.
  3. You can also decide if you want to show a Search button, stick the menu to the top so it is always visible, and more.
  4. If you change this to “On The Left in Drop Box” you will need to adjust the colors so you can see the title.
Settings > Main Header

Main Menu

You can change the menu items that appear on the main header. We created some basic pages and linked them from the menu. However, you can add, remove, or reorder these at any time.

  1. From the Customizer, select Menus > Primary Menu
  2. You can add, remove items, or reorder items.
  3. To add items, click the Add Items button at the bottom of the menu.
  4. To remove items, open the menu item by clicking on the title. Click the Remove link at the bottom of the Menu Item. You can also change the Navigation Label here. That is what gets displayed. (Note, this only removes the menu item to navigate to the page, it does not remove the page itself. See below for information on removing pages you don’t need.)
  5. To reorder, either drag and drop the menu item or click the Reorder link to use arrows to move the items up, down, or to the right to make a sub-menu item.
  6. Click Publish to publish any changes.

Learn more about Custom Menus

Primary menu settings

Secondary Header

We have used the secondary header section to include a menu to link to UCI. This is the menu with a dark blue background at the top of each page. This is a common user experience method to help visitors know they are on a site that is part of a larger organization. This shows your visitors that you are part of UCI and gives them an easy way to navigate to the UCI website.

Menu showing link to UCI site

Page Templates

We have created some sample pages for you. We have two types of websites: a website with a static homepage and a blog with a list of your recent Posts. You can use these to help you get started quickly or delete them and create your own.

Home Page

The home page for the static website includes the following elements. Feel free to add or remove any elements to customize it for your needs.

To edit the page, click Edit Page on the top administrative menu or look for the page in Pages > All Pages

Cover Image

We have included a sample cover image.

  1. Click on the image. Make sure you are on the cover block.
  2. Click the Replace button and select an image from your media library or upload an image. A landscape-oriented image will work better
  3. You can add a title that will appear over the photo. If you add text make sure there is enough contrast with the background photo to make it legible. This is important for web accessibility.

    Replace image

Quick Tip: At the top of the page, you will see a button for List View. This will give you a handy way of isolating each block to make changes.
List View button
List view example

Calls to Action (CTA)

Below the photo are three columns with Calls to Action (CTA). A call to action (CTA) in web design is a prompt that encourages visitors to take a specific action. It is typically a button or link that is prominently placed on a web page and designed to grab the person’s attention. We have 3 examples set up for you. Use them to guide your viewers to important places on your website. Delete them if you don’t need them.

You can click on each block to make changes. If you want to remove a content block, click the three dots and click Remove block.

News Section

The next section has a Posts block. This will display the latest Posts on your website. You can decide how many posts you want to show, what categories, what order, etc. If you do not use Posts on your website, you can remove this block. Currently, it will show the latest two Posts.

Save Changes

  1. Click the Update button in the top right to save and publish your changes.

News Page

The News page simply displays your latest Posts. You do not edit the content by editing this page. It acts as a container to display your Posts. To make changes to how these Posts are displayed, use the Customizer.

  1. Go to Customizer > Content > Posts List
  2. Sidebars: Change if you want sidebars visible. By default, we have turned these off on this view.
  3. Meta: Select the elements of the Post you want visible. These include Author, Publication Date, Categories, Tags, etc.
  4. Posts in a Row: Select how many posts you want to see in each row.
  5. Boxed Design: Decide if you want to use a background color for a boxed design.
  6. Content Type: Decide if you want to display an excerpt of the post, the full content, or no content and just the title.
  7. Hide Continue Reading: A button to read more of the article is on by default. You can toggle this off.
  8. Featured Image Style: Choose where and if you want to show a featured image.
  9. Show Breadcrumb: Turn off or on the breadcrumb above the title.

If you have made any changes, make sure to click the Publish button at the top.

What are Posts?

Posts are a separate content type. Posts are used for things like news, articles, or other timely content. They are generally displayed in reverse chronological order. You can use Categories and Tags to organize the content. Learn more about Posts and Pages.

Creating Posts is similar to pages. To create a new Post, simply choose Post from the New > Post menu at the top or from Posts > Add New in the Dashboard.

As you create and publish new Posts, they will appear on your News page.

How to remove the News page

If you don’t want to have a News section or use Posts, you can remove the page and the menu item.

  1. First, change the Homepage Settings to deselect the Posts page.
    1. From the Customizer, select Homepage Settings.
    2. From the Posts page setting, change it to simply “Select to” choose – Select –
      Posts page > Select none”></li>



<li>Click <strong>Publish</strong></li>
</ol>
</li>



<li>Second, remove the <strong>News</strong> item from the menu.
<ol>
<li>From the Customizer, select <strong>Menus > Main Menu</strong></li>



<li>Click the<strong> News</strong> item to expand the options and click<strong> Remove</strong></li>
</ol>
</li>



<li>Third, unpublish the News page.
<ol>
<li>Go to <strong>Pages > All Pages</strong></li>



<li>Click <strong>Edit</strong></li>



<li>Click <strong>Switch to draft</strong> at the top of the edit page and click Update. This will unpublish the News page.<br><img decoding=

About Us

This is a simple page with basic contact information. This is a good place to share with your viewers more about yourself or your website.

How to Remove Pages

We have included sample pages, but if you don’t want to use these, it is simple to unpublish them or delete them.

  1. Go to Pages > All Pages
  2. To Delete the page, hover over the title and click Trash.
    1. This will move the page to the Trash. It will stay there for 30 days before being removed permanently.
    2. If you did this accidentally, click Undo. You can also select the Trash filter at the top and Restore the page.
  3. If you want to keep the page, but not have it published, you can change it to a Draft.
    1. In Edit mode, click Switch to Draft at the top. This will unpublish the page but you will not lose the content.

If you have removed pages, remember to also remove them from your Menu.

Blog Format

If you chose the Blog format when creating your website, it will be very similar to the website format. The main difference is that your homepage will be a display of your recent Posts.

How to change how the Posts are displayed on the homepage

Follow the same steps for customizing the News page above.


Learn more about the CampusPress Flex Theme

CampusPress has an extensive guide that will help you with the many options available with this theme.