Any way to edit the color of a divider in Rich Content CMS?

Ask the community
,
1

Title pretty much sums it up. I can’t find any color options for dividers when using CMS Rich Content. It defaults to black, which doesn’t work when your page background is a dark color.

2

Also wondering the same, did you figure it out? I’m guessing it is controlled by some site style setting.

3

Hi, @Thomas_Durham !!

I gave it a try, but as expected, I couldn’t find any option to change the color of the divider. It seems like a feature that would be useful, but at the moment only a simple gray line is available. Perhaps Wix has decided not to provide additional design variations for each element, since it can be difficult to determine how far to go with those. For now, their approach may be to let users handle such customizations themselves using HTML code. In any case, if you just want to display a divider in rich content, you can easily do so by adding a simple HTML snippet. Implementing a divider is not difficult, and tasks like creating templates are something AI is particularly good at. You could even ask AI to generate a few design patterns and make use of them. :innocent:

(Line)

<div class="rule"></div>

<style>
  .rule {
    width: 100%;
    margin: 0.5rem 0;
    border-top: 5px solid red;
  }
</style>

(Double line)

<div class="rule-double"></div>

<style>
  .rule-double {
    width: 100%;
    margin: 0.5rem 0;
    border-top: 5px double red;
  }
</style>

(Dashed line)

<div class="rule-dashed"></div>

<style>
  .rule-dashed {
    width: 100%;
    margin: 0.5rem 0;
    border-top: 5px dashed red;
  }
</style>

(Dotted line)

<div class="rule-dotted"></div>

<style>
  .rule-dotted {
    width: 100%;
    margin: 0.5rem 0;
    border-top: 5px dotted red;
  }
</style>

(Gradation line)

<div class="rule-grad"></div>

<style>
.rule-grad {
  width: 100%;
  margin: 0.5rem 0;
  height: 5px;
  background: linear-gradient(to right, red, orange, yellow);
}
</style>

(Gradation double line)

<div class="grad-double-wrapper">
  <div class="grad-double-top"></div>
  <div class="grad-double-bottom"></div>
</div>

<style>
.grad-double-wrapper {
  width: 100%;
  margin: 0.5rem 0;
  height: 8px;
  position: relative;
}

.grad-double-top,
.grad-double-bottom {
  height: 3px;
  width: 100%;
  background: linear-gradient(to right, red, orange, yellow);
  position: absolute;
}

.grad-double-top { top: 0; }
.grad-double-bottom { top: 5px; }
</style>

You can insert an “HTML Code” element (</>) in the rich content area and then simply copy and paste the code above into it. This should render the line. After that, you just need to adjust the width of the entire HTML code block to your preference. Give it a try. :raising_hands: