# Link style issues in a custom module

**URL:** <https://community.hubspot.com/t/link-style-issues-in-a-custom-module/109860>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [June 21, 2024, 2:23pm UTC](https://community.hubspot.com/t/link-style-issues-in-a-custom-module/109860 "2024-06-21T14:23:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![SlimSr2003](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/slimsr2003/32/73373_2.png) [@SlimSr2003](https://community.hubspot.com/u/SlimSr2003)\
**Post date:** [June 21, 2024, 2:23pm UTC](https://community.hubspot.com/t/link-style-issues-in-a-custom-module/109860/1 "2024-06-21T14:23:21Z")

</div>

I have a custom module on this page: [The Key Elements of a Successful Executive Visibility Program](https://www.jonespr.net/eight-arms-blog/the-key-elements-of-a-successful-executive-visibility-program)

This one here:

 ![SlimSr2003_0-1718979540425.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/2c8fdd61133421dd92fe9b98249b969e46b9c68d.png)

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:

```lia-code-sample
<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:

```lia-code-sample
.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.

---

<div class="post-metadata">

**Author:** ![evaldas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/evaldas/32/69160_2.png) [@evaldas](https://community.hubspot.com/u/evaldas)\
**Post date:** [June 21, 2024, 8:22pm UTC](https://community.hubspot.com/t/link-style-issues-in-a-custom-module/109860/2 "2024-06-21T20:22:35Z")

</div>

Hi @SlimSr2003

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

```lia-code-sample
.blog-insert-text a {
 color: #c54729;
}

```

Hope this helps!

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [June 21, 2024, 8:25pm UTC](https://community.hubspot.com/t/link-style-issues-in-a-custom-module/109860/3 "2024-06-21T20:25:29Z")

</div>

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:

```lia-code-sample
{% 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:

```lia-code-sample
.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