1

I am building styles for my component using SXA Creative Exchange. For that steps below were executed:

  1. Export page with component using Agency drop (preview mode, importable) mode
  2. Add my-test-style class to promo component - <div class="component promo ... add-your-css-classes-here my-test-style">...</div>
  3. Add that class to webedit.css .my-test-style {background: green}

Checked style in offline design. It looks good.

After that package imported back to Sitecore.

In Sitecore I see my style available for Promo component and it is selected in component properties, but my CSS changes are not imported.

Am I doing something wrong or Creative Exchange does not import CSS changes into Sitecore?

Update:

After reading the answers, I see where my mistake is coming from. Initially I assumed that CSSs in Theme folder belong to Base scheme and all modifications should go into webedit.css.

But in reality CSS files in Theme folder belong to actual theme and modifications should be made right there.

Everything works as expected after I added my styles to the bottom of -\media\Project\Sxa-Demo-Tenant\SXA-Demo-Site\SXA-Demo-Theme\styles\component-promo.css file.

 .promo.my-test-style {
    background: green
 }
Improve this question
4
  • Have you read the documents here on importing styles? doc.sitecore.net/sitecore_experience_accelerator/11/designing/…
    – Michael West
    Nov 10, 2016 at 3:29
  • Try to remove optimize-min file which should be present in your theme (under Styles item). If this will solve your problem then we have to take a look at that logic and solve that issue.
    – Dawid Rutkowski
    Nov 10, 2016 at 7:04
  • 1
    It does. @jen-rasmussen is right. You edited webedit.css file which is located in Sitecore website root directory and will not be update while importing. Assets are imported to the database only. You should alter some theme items like @jen-rasmussen pointed or add new one (those should be pulled into Sitecore). Worth mentioning is fact that you are not able to alter Wireframe and Basic. Those themes are protected. You should use CE with your own theme.
    – Alan Płócieniak
    Nov 10, 2016 at 23:08
  • Thanks Alan! I was going crazy trying to add something to "Basic"! The docs need to be updated to call out that point . And a warning during upload would also be very, very helpful: "Note: You are uploading changes with a protected style, which cannot be modified. Please make a copy of this style to allow modifications." (I will follow up on user voice and docs feedback on these two points.)
    – Dan Solovay
    Feb 6, 2017 at 4:56

1 Answer 1

Reset to default
2

enter image description hereThe new styles need to go in either main.css or the related component css. i dont believe the web-edit.css should be edited at all. see the tree above and the styles directory - this is where css changes need to go.

if you exported with a site theme, you should have a project directory within the media directory. if you exported with just the wireframe theme, then I am not sure best way to create a theme. I believe you are supposed to duplicate the wireframe theme, rename and customize there and that new theme will get added on import. However, I have not yet tested this - the documentation is very sparse in this regard.

Can someone please confirm whether this is correct?

Improve this answer
1
  • I added my comment under question. You can update your answer with additional details to make your it complete if you want.
    – Alan Płócieniak
    Nov 10, 2016 at 23:11

Your Answer

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

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