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:
- Add a new CSS file that contains my new CSS class.
- Added a reference to my new CSS file on line 9.
- 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.
- Added my image to the Media/images folder
- Verified my new CSS changes looked as I wanted them to by loading
index.htmlin my browser.
- Uploaded the file back to the SXA server and successfully imported the theme.
- Tried to preview the changes on my page. I didn't see any differences.
- 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:
- What is the best practice for adding custom CSS to a theme?
- How do I use the "Add-your-css-classes-here"?
- What css files would I use to modify site-wide settings, such as an image in the body of the page?