Overriding Default Link Text Color within Custom Template

Question

I have the following custom template within Oracle APEX, it is a near identical copy of the media list report template:

<li class="t-MediaList-item #LIST_CLASS#">
  <a href="#LINK#" style="text-decoration: none; color: inherit;" class="t-MediaList-itemWrap #LINK_CLASS#" #LINK_ATTR#>
    <div class="t-MediaList-iconWrap" aria-hidden="true">
      <span class="t-MediaList-icon u-color #ICON_COLOR_CLASS#"><span class="t-Icon #ICON_CLASS#"></span>       </span>
    </div>
    <div class="t-MediaList-body">
      <h3 class="t-MediaList-title">#LIST_TITLE#</h3>
      <p class="t-MediaList-desc">#LIST_TEXT#</p>
    </div>
    <div class="t-Badge-badgeWrap">
      #LIST_BADGE#
    </div>
  </a>
</li>

I am trying to override the blue color that the link text defaults to and am having no luck so far. I have tried adding !important tags to both text-decoration: none; and color: inherit; and that didn't help me either. Any assistance would be greatly appreciated

Answer 1

If you're on apex 22.1 or higher, this can be solved using css variables, see this related question.

• Step 1: identify the behaviour of the element by inspecting it. (In google chrome) right click the link and look at it's attributes:

• Click on "--ut-medialist-title-text-color" to see how it is defined

• Now that you have the name of the css variable... change it in page attributes > inline css (or in your custom css file)

• result: