How can I change my text link color to solid brown?

Topic summary

Goal: Change a specific rich-text link from a faded green to a solid brown (#593D08) on a Shopify page without affecting footer link colors.

Attempts and results:

  • Global rule in component-rte.css using the .rte a selector successfully changed the target link, but also altered footer links (undesired).
  • A narrower selector intended for the rich-text block (.isolate .rich-text__text rte a) did not work as intended and resulted in both links appearing green.
  • Placement confirmed in component-rte.css; issue persisted due to selector scope/specificity.

Final solution:

  • Added a highly specific selector targeting the exact section ID in base.css for the anchor element, forcing color: #593D08 with !important. This scoped the change to the intended section only and preserved footer link styling.

Outcome: Desired link now displays solid brown; footer links remain green. Resolved.

Notes: The key was CSS specificity and scoping by section ID within the Shopify theme structure. Screenshots were provided but not essential to the fix.

Summarized with AI on January 11. AI used: gpt-5.

This made both of the text links green :sweat_smile: