Link style issues in a custom module

Develop, Build & Integrate CMS Development
1

I have a custom module on this page: The Key Elements of a Successful Executive Visibility Program

This one here:

SlimSr2003_0-1718979540425.png
SlimSr2003_0-1718979540425.png850×170 27.4 KB

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.

2

Hi @SlimSr2003

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

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

Hope this helps!

3

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