3

I have created a new theme in my SXA website (by duplicating the Basic Theme) and I have been able to switch to the new theme in Experience Editor. I've decided to add a background image to the body of my site. So I exported the site using the Agency Drop mode, opened up the ZIP file, and I made the following modifications:

  1. Add a new CSS file that contains my new CSS class.
  2. Added a reference to my new CSS file on line 9.
  3. On line 17 of the index.html file, I found the "add-your-css-classes-here" text for the <body> tag and added my CSS class there.
  4. Added my image to the Media/images folder
  5. Verified my new CSS changes looked as I wanted them to by loading index.html in my browser.
  6. Uploaded the file back to the SXA server and successfully imported the theme.
  7. Tried to preview the changes on my page. I didn't see any differences.
  8. Exported the site again, hoping to see my changes. The only change that I saw was the new image. My new CSS file and modifications to the index.html file did not work.

I'm sure that there is something simple that I'm missing, but I can't figure out how to create my theme. The 3 questions that I have are:

  1. What is the best practice for adding custom CSS to a theme?
  2. How do I use the "Add-your-css-classes-here"?
  3. What css files would I use to modify site-wide settings, such as an image in the body of the page?
Improve this question

2 Answers 2

Reset to default
3

What is the best practice for adding custom CSS to a theme?

It depends on your theme structure but you can either edit existing file or create new one. Changes in existing file should update it in the Sitecore and new file should be imported.

How do I use the "Add-your-css-classes-here"?

You can add your custom css classes after that text (add-your-css-classes-here will be removed by Creative Exchange in the import process) or instead of it.

What css files would I use to modify site-wide settings, such as an image in the body of the page?

That completely depends on your theme structure and it's up to you. I would create one global css file for such classes. And have separate ones for specific pages. But there won't be anything wrong in having one well structured css file.

Regarding your problem - were there any messages/warning/errors in the import status dialog?

Improve this answer
2
  • The first time that I tried to do the import, it yelled at me for trying to overwrite the "basic" theme. So I removed the "basic" folder from the zip file and tried again. That time, I didn't get any messages other than "Import was successful".
    – Keith VanderVeen
    Commented Nov 17, 2016 at 15:24
  • Yep, Wireframe and Basic themes are protected and you cannot modify them. I just tried to reproduce your issue and it seems it's working fine.
    – Dawid Rutkowski
    Commented Nov 18, 2016 at 7:33
2

What is the best practice for adding custom CSS to a theme?

SXA structures CSS files per component. So, if you style is component specific (and majority of your CSS should be) you need to create one file per component. Give this file the same name as your component have with component- preffix.

For global styles you can extend existing main.css.

In both these cases, your CSS files should be located in -\media\Project\SXA-Tenant\SXA-Site\SXA-Theme\styles folder.

Files from this folder are imported back into Sitecore, added as media resources and rendered in MVC Layout using AssetLinksGenerator.GenerateLinks method.

That method internally executes assetService pipeline. You can add your processor into it to implement custom logic.

How do I use the "Add-your-css-classes-here"?

You should add your custom class after add-your-css-classes-here keywords inside class attribute.

That part works out of the box for components. After you Import your design back to Sitecore two things happen:

  1. Your class registered as SXA style for current site. You can find it in /sitecore/content/Sxa Tenant/SXA Site/Presentation/Styles
  2. Style is assigned to Component.

Import for <body> styles does not work with default scaffolding in SXA 1.1. I created separate post describing little tweak that solves that issue - https://sitecore.stackexchange.com/a/2693/633

What css files would I use to modify site-wide settings, such as an image in the body of the page?

As I mentioned above you can extend existing main.css.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.