When you visit our website, we will collect data and information that helps us improve our website, products and advertising campaigns. After making this information anonymous, we may send it on to third party service providers.

Updating themes to Ceres 3.0

Updating themes to Ceres 3.0

The major release of Ceres 3.0 in mid-January includes a number of changes to the code that are of particular importance for theme developers, since they necessitate adjustments to the themes. This manual page explains which components and directives have been removed from Ceres and which adjustments are necessary for your theme to work properly after the update.
This page serves to highlight the biggest sources of potential errors. Please take a look at the current version comparison on GitHub for a complete overview of the changes.

1. Removed directives

The following directives have been globally removed in Ceres 3.0:

v-render-category

v-is-loading-watcher

v-update-sidenav-selection

Furthermore, the directive v-hover-mega-menu has been renamed and is now called v-navigation-touch-handler.

2. Added components

The component Ceres::ItemList.Components.CategoryItem refers to the item tile and is no longer used by Ceres 3.0. The item tile had formerly been included by the now obsolete component Ceres::ItemList.Components.ItemList.

3. Removed and changed components

The following components have been removed or are now included via Twig:

The following code examples demonstrate which lines in your code might have to be removed, so that removed components are not accidentally called upon, and which command now serves to implement the function in Ceres 3.0. The adjustments refer to the two files /resources/views/ItemList/ItemListView.twig and /resources/views/Category/Item/CategoryItem.twig. The three periods […​] are to be understood as omissions, since the relevant lines of code do not necessarily have to directly follow in sequence. The parameters used in the code snippets can, of course, deviate from the ones used in your theme.

5. Bootstrap 4.2.1 adjustments

With the release of Ceres 3.0 in mid-January, the Bootstrap framework is updated from version 4.0.0-alpha.3 to version 4.2.1. Due to the update, theme developers will have to make the following adjustments regarding the names of CSS classes and variables.

Tabelle 1. Adjustments to class names

Previously

Now

.pos-f-t

.fixed-top

.hidden-xs-up

.d-none

.hidden-sm-up

.d-sm-none

.hidden-md-up

.d-md-none

.hidden-lg-up

.d-lg-none

.hidden-xl-up

.d-xl-none

.pull-{breakpoint}-{direction}

.float-{breakpoint}-{direction}

.m-{direction}-{spacer}

.m{direction}-{spacer}

.p-{direction}-{spacer}

.p{direction}-{spacer}

.m-x-{spacer}

.mx-{spacer}

.m-y-{spacer}

.my-{spacer}

.offset-xs-{size}

.offset-{size}

.m-x-auto

.mx-auto

.text-xs-{direction}

.text-{direction}

.card-block

.card-body

.bg-faded

.bg-light

Theme developers need to check these classes in connection with different breakpoints (xs, sm, md, lg, xl), direction (left, right, etc.) and spacer. Spacer values have changed, as well, and need to be adapted as follows:

Tabelle 2. Adjustments to spacers

Previously

Now

0

0

5

2

1

3

2

4

3

5

The following CSS variables have been renamed and have to ba adjusted:

Tabelle 3. Adjustments to variables

Previously

Now

$text-color

$body-color

$font-size-h1

$h1-font-size

$font-size-h2

$h2-font-size

$font-size-h3

$h3-font-size

$font-size-h4

$h4-font-size

$font-size-h5

$h5-font-size

$font-size-h6

$h6-font-size

If you considered all of the changes specified on this manual page and checked the version comparison on GitHub, your theme will be ready for Ceres 3.0.