Change a site design using Creative Exchange
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.
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.
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.
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:RequestResponse<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:
RequestResponse<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>
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.
RequestResponse<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>
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.
RequestResponse<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>
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:
-
Open the
index.html
file and navigate to the instance of the rendering. -
Add the class. For example, add the classes
highlighted
andhero
: -
Add the new CSS class and the styling to the main
.css
file:
Open the index.html
file to preview your changes on the local instance of the site.