Change a site design using Creative Exchange

Last updated Tuesday, February 13, 2018 in Sitecore Experience Accelerator for Designer
Keywords: Design, Layouts

When a site is being developed, Creative Exchange enables teams to work together on a site simultaneously. A ZIP file exported using Creative Exchange contains the content, structure, assets, and theme of the site.

You can download this ZIP file and work on the design of the site from your local folder before exporting it back to the team. This lets content authors work on content while the designers make changes to the look and feel of the site.

Picture 1

When you have unzipped the site from Creative Exchange, you can make the following changes:

  • Add and modify images and files within the Media Library folder.
  • Add classes on nodes that have: <!—- add your css classes here -->">
  • Change images in renderings.

Note

Changes to the HTML structure, deleting existing classes, changing text content, and changing base theme folders will not be imported back to the system and can damage your site.

This topic describes how to:

Change an image

You can change the images used in Image and Image Variant renderings by linking to a new image.

To change the image of an Image rendering:

  • In the index.html file, change the asset in the <img> tag. For example:
    <div class="component image logo">
        <div class="component-content">
            <a href="index.html"><img src="-/media/Themes/SXA/Images/coglogo.png" alt="coglogo" width="206" height="81" /></a>
        </div>
    </div>

Make sure that the image either exists in the CMS or provide it in the ZIP file (in the Media Library folder) that is imported back into the system. For rendering variants, images are listed as data attributes data-ceitem and data-cefield. For example:

<img src="-/media/showcase-group/wireframe-mvc/int/003.png" alt="my third image" data-ceitem="{590D99E0-9098-47FF-8CBB-6F7FCFD5CB12}" data-cefield="SummaryIcon">

If the image that you want to change is used on multiple pages, you must change all of them in the code. Otherwise the engine will not import the image. You can also add #important to the URL to force the change for the image on all pages:

<img src="-/media/showcase-group/wireframe-mvc/int/003.png#important" alt="my third image" data-ceitem="{590D99E0-9098-47FF-8CBB-6F7FCFD5CB12}" data-cefield="SummaryIcon">

Change the layout

You can assign classes to style the layout or a rendering in the JS or CSS file under /media/themes/.

To style a rendering:

  • Find the rendering that you want to change and add your class:
    <div class="component component-name  {source-item-guid} {unique-rendering-instance-guid} {Styles} add-your-css-classes-here <!—- ADD YOUR CSS CLASSES HERE -->">
      <div class="component-content">
          <!-- component specific mark-up -->
      </div>
    </div>

Note

For clean CSS class structure, use lowercase, and a dash to join multiple words. Additional classes for renderings should start with the name of the rendering followed by a name that describes the functionality. For example:

<div class="component carousel {guid} {guid} {Styles} carousel-homepage">

or:

<div class="component navigation {guid} {guid} {Styles} navigation-main-horizontal">.

SXA pages are divided into rows and columns with splitters. Splitters can have their own list of classes.

To style the layout:

  • Find the row splitter and add your class.
    <div class="row {guid} {guid} {Styles1} <!—- ADD YOUR CSS CLASSES HERE -->">
        <!-- components mark-up -->
    </div>
    <div class="row {guid} {guid} {Styles2} <!—- ADD YOUR CSS CLASSES HERE -->">
        <!-- components mark-up -->
    </div>

Note

Additional classes for row and column splitters should start with the column or row prefix, followed by a name that describes the functionality. For example: <div class="row row-logo">

  • Find the column splitter and add your class.
    <div class="alpha grid-3 {guid} {guid} {Styles1} <!—- ADD YOUR CSS CLASSES HERE -->">
        <!-- components mark-up -->
    </div>
    <div class="omega grid-5 {guid} {guid} {Styles2} <!—- ADD YOUR CSS CLASSES HERE -->">
        <!-- components mark-up -->
    </div>

Note

Classes that you added and imported back into SXA are available for use on other instances.

Change the styling of text renderings

You can change the styling of the text renderings by adding a class.

For example, if you want to change the styling of a Rich Text rendering and the Page List rendering:

  1. Open the index.html file and navigate to the instance of the rendering.
  2. Add the class. For example, add the classes highlighted and hero:

    Picture 2

    Picture 6

  3. Add the new CSS class and the styling to the main .css file:

    Picture 4

Open the index.html file to preview your changes on the local instance of the site.

Send feedback about the documentation to docsite@sitecore.net.