Link style issues in a custom module

[SlimSr2003]

I have a custom module on this page: https://www.jonespr.net/eight-arms-blog/the-key-elements-of-a-successful-executive-visibility-progra...

This one here: 

that when I color green the text in the rich text filed it is over writing the anchor CSS and turning it from red to green. I have worked around this issue for now by only coloring the text outside of the link but I think there should be a real fix for this but it is beyond me. 

Here is the HTML of the custom module:

<div class="blog-insert-containter">
  <div class="blog-insert-horiz-rule">
  <hr style="height:1px;border-width:0;color:#2392a2;background-color:#2392a2">
  </div>
  <div class="blog-insert-icon-text-container">
    <div class="blog-insert-icon-container">
      <div class="blog-insert-icon">
        {% if module.insert_image.src %}
          {% set sizeAttrs = 'width="{{ module.insert_image.width }}" height="{{ module.insert_image.height }}"' %}
          {% if module.insert_image.size_type == 'auto' %}
            {% set sizeAttrs = 'width="{{ module.insert_image.width }}" height="{{ module.insert_image.height }}" style="max-width: 100%; height: auto;"' %}
          {% elif module.insert_image.size_type == 'auto_custom_max' %}
            {% set sizeAttrs = 'width="{{ module.insert_image.max_width }}" height="{{ module.insert_image.max_height }}" style="max-width: 100%; height: auto;"' %}
          {% endif %}
           {% set loadingAttr = module.insert_image.loading != 'disabled' ? 'loading="{{ module.insert_image.loading }}"' : '' %}
            {% set href = module.graphic_link.url.href %}
            {% if module.graphic_link.url.type is equalto "EMAIL_ADDRESS" %}
            {% set href = "mailto:" + href %}
            {% endif %}
            <a href="{{ href|escape_url }}"
           {% if module.graphic_link.open_in_new_tab %}target="_blank"{% endif %}
           {% if module.graphic_link.rel %}rel="{{ module.graphic_link.rel|escape_attr }}"{% endif %}
           >
          <img src="{{ module.insert_image.src }}" alt="{{ module.insert_image.alt }}" {{ loadingAttr }}></a>
        {% endif %}
          </div>
    </div>
    <div class="blog-insert-text-container">
      <div class="blog-insert-text">
         {% inline_rich_text field="insert_text" value="{{ module.insert_text }}" %}
      </div>
    </div>
  </div>
  <div class="blog-insert-horiz-rule">
  <hr style="height:1px;border-width:0;color:#2392a2;background-color:#2392a2">
  </div>
</div>

 and Here is the CSS:

.blog-insert-containter {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.blog-insert-horiz-rule {
  margin-bottom: 15px;
  margin-top: 15px;

}

.blog-insert-icon-text-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: auto;
}

.blog-insert-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
}
.blog-insert-icon {
  display: flex;
  width: 92px;
  height: auto;
  object-fit: cover;
  
  
}
.blog-insert-text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
}

.blog-insert-text {

}

@media screen and (max-width: 450px) {
.blog-insert-containter {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.blog-insert-horiz-rule {
  margin-bottom: 15px;
  margin-top: 15px;

}

.blog-insert-icon-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

.blog-insert-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.blog-insert-icon {
  display: flex;
  width: 92px;
  height: auto;
  object-fit: cover;
  
  
}
.blog-insert-text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
}

There is probably a simple fix but it is alluding me at the moment so any help that can by given would be appreciated. 

[Anton · Accepted solution]

Hi @SlimSr2003, 

so if I get you right:
If you're working with the rich-text and color the text green via the "text color" option it's a normal behaviour of the rich-text that it will wrap the selected text in <span>-tags with the selected color as inline-styling. So if you also select the link as well, it will overwrite the color which is defined in the CSS. This is related to how a browser renders the page(from top to bottom) and since inline-styling is located below the css(CSS is in the head-tag; inline around the element in the body-tag) inline-styling will almost always overwrite CSS... 

What you could do:
Add styling fields to your module and do it like this:

{% set color_class = module.styles.content_color %}

<div class="blog-insert-containter">
  <div class="blog-insert-horiz-rule">
  <hr style="height:1px;border-width:0;color:#2392a2;background-color:#2392a2">
  </div>
  <div class="blog-insert-icon-text-container">
    <div class="blog-insert-icon-container">
      <div class="blog-insert-icon">
        {% if module.insert_image.src %}
          {% set sizeAttrs = 'width="{{ module.insert_image.width }}" height="{{ module.insert_image.height }}"' %}
          {% if module.insert_image.size_type == 'auto' %}
            {% set sizeAttrs = 'width="{{ module.insert_image.width }}" height="{{ module.insert_image.height }}" style="max-width: 100%; height: auto;"' %}
          {% elif module.insert_image.size_type == 'auto_custom_max' %}
            {% set sizeAttrs = 'width="{{ module.insert_image.max_width }}" height="{{ module.insert_image.max_height }}" style="max-width: 100%; height: auto;"' %}
          {% endif %}
           {% set loadingAttr = module.insert_image.loading != 'disabled' ? 'loading="{{ module.insert_image.loading }}"' : '' %}
            {% set href = module.graphic_link.url.href %}
            {% if module.graphic_link.url.type is equalto "EMAIL_ADDRESS" %}
            {% set href = "mailto:" + href %}
            {% endif %}
            <a href="{{ href|escape_url }}"
           {% if module.graphic_link.open_in_new_tab %}target="_blank"{% endif %}
           {% if module.graphic_link.rel %}rel="{{ module.graphic_link.rel|escape_attr }}"{% endif %}
           >
          <img src="{{ module.insert_image.src }}" alt="{{ module.insert_image.alt }}" {{ loadingAttr }}></a>
        {% endif %}
          </div>
    </div>
    <div class="blog-insert-text-container">
      <div class="blog-insert-text {{ color_class }}-text">
         {% inline_rich_text field="insert_text" value="{{ module.insert_text }}" %}
      </div>
    </div>
  </div>
  <div class="blog-insert-horiz-rule">
  <hr style="height:1px;border-width:0;color:#2392a2;background-color:#2392a2">
  </div>
</div>

(I use a choice field with "blue" and "red" as values in this example)

and your CSS would look like this:

.blog-insert-text .blue-text{
color: #2392a2;
}
.blog-insert-text .blue-text a{
color: #c54729;
}

.blog-insert-text .red-text{
color: #c54729;
}
.blog-insert-text .red-text a{
color: #2392a2;
}

With this you wouldn't rely on the color option inside the rich-text and would simply need to select the desired color from a dropdown.

best, 

Anton

[evaldas]

Hi @SlimSr2003 

You should be able to resolve this by adding this CSS rule:

.blog-insert-text a {
  color: #c54729;
}

Hope this helps!