IceCubo Documentation

On this page, you will find out how to get started with the IceCubo WordPress theme and how to use it.

Installation

From the wordpress.org repository, download the IceCubo theme and add it to the theme section of the WordPress installation, i.e. “wp-content” → “themes”.

Alternatively and more easily, inside your WordPress admin, go to the Appearance section→Add new. Now, use the search box to type “IceCubo”. You should be presented with the result of the IceCubo theme.

Hovering over the image will give you the button option to install the theme, and eventually to activate it.

Activate IceCubo

Now, when the theme is installed, it will always be available from the Appearance section, inside the WordPress admin area.

If you missed activating the theme during the UI installation prompt, simply navigate to the Appearance and therefrom activate the IceCubo theme.

Site Editor

Once the theme is active you can access the Editor section which represents the design sphere of the site. Access it from Appeareance→Editor.

Note: Site Editor is a WordPress native feature with myriad features and design options. We do not go into detail regarding all the Editor’s options, documentation here is only for the features that the theme relies on. For other aspects of the Site Editor, you should look in WordPress’ official documentation or maybe YouTube.

From the screen’s left side, you can manage:

• Navigation
• Styles
• Pages
• Templates
• Patterns (including Template parts like Header & Footer)

Navigation

Here you can add and remove menu items.

Styles

The styles section allows you to switch among the available skin styles that a theme provides. With the IceCubo theme, there are several predefined color skin schemes to pick from.

The style variations are also accessible from the right sidebar once you’re in the template editing mode:

From the right side, you can access the available styles.

As you can see, the styles section gives you the ability to pick a predefined color schema.

Each skin has its color schema that gets automatically applied to basic elements, e.g. links. Still, skin’s color schema gets available from the most block settings with its colors and background gradients:

Templates

The templates section enables you to add new or edit existing layouts.

Clicking on the bottom link “Manage all templates” leads you to the following screen:

It’s better to add a new template if you wish to customize something for your site than to edit an existing template.

Templates that start with a capital letter are assigned to some post type or archive type, in the following way:

• 404 → Page not found
• Archive → “archive” pages
• Index → Default blog layout
• Page → Default for the single page of the “page” post type
• Single → Default for the single post of the “post” post type, i.e. blog posts
• Single without post header → Available for the “post” post type

Templates that do not start with a capital letter are post type agnostic. You can select these templates while editing any single post/page across your site. IceCubo theme comes with the following site-wide templates:

• blank → empty template which basically means no Header and Footer
• boxed → content is featured in a box
• alike-page → The same as a Page’s default template, just you can apply it to other post types
• notitle-alike-page → Like a Page template, just without a Title
• notitle-noheader-alike-page → Like a Page template, but without the page’s header and title
• sidebar-left → With a sidebar on the left *
• sidebar-right → With a sidebar on the right *

* For the templates with sidebars, you should actually edit their’s sidebar content, if these templates are intended for use over the site.

Editing the template

Accessing any template you’ll be able to add blocks and adjust it to your needs. Also, notice the right sidebar. From there, manage each block’s settings.

Patterns

IceCubo theme comes with design patterns that you can access from the Patterns section inside the Site Editor.

Patterns → Template parts

Template parts are the essential parts of the themes and these sections of the site appear on different pages and most likely constantly over the whole website.

Template parts are accessible from the “Patterns” → “Manage all template parts”.

You can select the template part you wish to edit.

IceCubo theme comes with the following template parts:

• Header
• Footer

In the same way as with Templates, just by clicking the “Manage all template parts”, you can access the following screen and therefrom you can add new Template Parts or reset the edited one.

Once these areas are edited, changes will reflect over the whole site.

Block settings, e.g. Logo

Here we’re talking about editing the blocks inside the Site Editor, which doesn’t differentiate much from editing blocks inside the page editor.

While editing a template or template part, in order to change any aspect you have to actually change the block settings. The obvious example, and something you most likely have to do, is to add the logo.

You’ll find the logo block in the “Header” template part. Simply, access “Patterns” → “Template parts” → “Header” template part, and click on the logo block and you’ll be able to change its settings.

Once you select the desirable block, its settings are accessible from the editor’s right sidebar.

Page editing

While editing each page or post, there are some options which are relying on the theme settings.

Template

While editing a page, you can change the layout of each page by selecting the desired template.

Locate the Template section from the Post or Page settings in the editor’s right sidebar. Chose the one that’s adequate for your current content.

Overall

The following features are present in all site editing aspects, no matter is it post/page or site editing.

Patterns

While the patterns are also reachable from the Site Editor, they most likely will be utilized from the content editing.

IceCubo available pattern sections:

• Boxes
• Footer
• General
• Header
• Hero
• Post header
• Sections
• Query

Block styles

IceCubo theme adds some predefined block styles. These styles are applied from the block settings. With one click you can apply these styles for the following blocks:

• Button
  • Outline → Gives the framed style
  • Accent up → Give a button push-up effect
  • No border → Eliminate default borders
• Cover / Group
  • Rotate left
  • Rotate right
• Details
  • Square – With a details block you can reveal additional content. The square style adds the outline to the static content part
  • Oval – oval style for the static content part
• Heading
  • Accent small → Applies the tiny text-shadow
  • Accent huge → Applies the large text-shadow
  • Underline/Overline → Llines under and above
  • Aside lines → lines besides
  • Mix colors → few styles are available that mix colors
• Image/Media & text
  • Rounded
  • Solid frame
  • Curly frame
  • Spaced frame
  • Spaced and cut frame
• List
  • Checks → Before the items add a checkmark
  • Plus → Before the items add a plus sign
• List item
  • Cancel list → Converts the list sign to the negative value (x or -)
• Navigation
  • Hovers standard → Hovered links will be marked with bottom lines, while submenu items will be underlined
  • Hovers top → Hovered items will be marked with the top line
  • Hovers bottom → Hovered items will be marked with the bottom line
  • Hovers top & bottom → Hovered items will be marked with top and bottom lines
• Navigation Link
  • Outline → Adds a tiny border around the navigation item
• Navigation link with sub-items
  • Multi → Create multi-column submenu. The default is 2 columns, but you can change that up to 5 columns by adding the following classes mm3, mm4, or mm5. The class can be added from the block’s advanced tab
• Paragraph
  • Accent box → In a shadow style makes a paragraph eminent (you have to apply the background color)
  • Tear box → gives the tear style to the box (you have to apply the background color)
  • Mix colors → few styles are available that mix colors
• Post Title
  • Accent small → Applies the tiny text-shadow
  • Accent huge → Applies the large text-shadow
  • Underline/Overline → Llines under and above
  • Aside lines → lines besides
  • Mix colors → few styles are available that mix colors

Note: Some of these blocks, like Navigation or Post Title, are more suitable for editing from the Site Editor, rather than from the post/page Editor.

Examples

Since our site is also using the IceCubo theme, we can live demonstrate a couple of things. Well, that box above is the great live example. It’s a default paragraph with an “Accent box” block style applied. Also you can notice that this paragraph has a “Mix colors” style applied.

To get a style applied, select the paragraph block and from its Styles settings pick one of the available styles:

However, here’s another live example with buttons, each button has a different style applied:

We may add additional block styles with IceCubo updates, still, the intention is to keep the theme lightweight.

Remove underlined links

Underlined links are accessibility requirements since a color differentiation from other text isn’t a reliable option, especially for those links inside the common paragraph content.

IceCubo theme removes the underlined text-decoration from the links that are highlighted in some other way, i.e. heading links from the blog listing or post terms, etc. WordPress itself isn’t applying the underlined text decoration for its native blocks like the navigation block links or button blocks which are obviously emphasized as links in some other way.

We have added the option to remove the underlined text-decoration from the links that you do not want to keep emphasized this way. All you have to do is add a class remove-text-decor to the block where the link is present. This is done from the block options → Advanced tab→Additional CSS classes.

For example, footer links may be placed in paragraphs instead of the navigation block. Just add the aforementioned class to the block and the underlined text decoration for links will be removed.

Alternatively and accessibility friendly, specifically for the footer, you can use a navigation block, since navigation HTML markup is generally accessible. IceCubo theme, by default, comes with footer links inside a paragraph block, but you can easily replace it, there’s even an IceCubo footer pattern with a navigation block as a starting point.