hyperlinks in dot points are not blue, dawn theme

Shopify Discussion
, ,

Topic summary

Issue: In blog posts, hyperlinks inside bullet lists were not turning blue, unlike regular inline links. The author provided store and post examples plus screenshots to illustrate the mismatch.

Proposed fixes (all use CSS to override link styles):

  • Edit theme code (base.css) and set the list link selector to blue, e.g., .article-template__content li a { color: #1a73e8 !important; }.
  • Alternative in base.css: target the rich text editor area with .rte a { color: #1a73e8 !important; } to enforce the link color.
  • No-code route: Theme > Customize > Theme settings > Custom CSS; add rules for .article-template__content a and its hover state to use #1A73E8 with !important.

Outcome: The change worked for the author, who confirmed success and thanked contributors.

Notes: The resolution hinges on CSS overrides to ensure list-item links inherit the desired link color. Screenshots and code snippets were central to understanding. Status: Resolved.

Summarized with AI on December 12. AI used: gpt-5.
1

hi, when i add a hyperlink to dot points when writing blog posts, they dont change in colour to the blue like they usually do.

Store url: https://evolvedh2o.com/

Example blog post url: https://evolvedh2o.com/blogs/news/hydrogen-water-bottle-silicone-components

Example of the hyperlink changing to blue like it should

marlerjake_1-1733445718451.png
marlerjake_1-1733445718451.png1060×462 56.6 KB

Example of the hyperlink colour remaining unchanged when in a dot point list

marlerjake_0-1733445683702.png
marlerjake_0-1733445683702.png1013×678 77.2 KB

How do I fix this?

Kind Regards,

Jake

2

Hello @marlerjake ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code at the bottom:

.article-template__content li a {
    color: #1a73e8 !important;
}

Problem solved don’t forget to Like it and Mark it as Solution!
If you need help with customization/code part you can contact me for services

You can find the email in the signature below.

Regards
Guleria

3

Hello @marlerjake
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.rte a {
color: #1a73e8 !important;
}

result

45.png
45.png746×686 64.2 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

Hi @marlerjake

You can change it on your store by following this instruction:

  1. Go to Shopify > Theme > Customize

  2. Copy and paste this code on Theme settings > Custom CSS section

.article-template__content a {
    color: #1A73E8  !important;
}
.article-template__content a:hover {
    color: #1A73E8 !important;
}

Here is the result :

LizHoang_0-1733462388746.png
LizHoang_0-1733462388746.png1389×552 200 KB

5

thank you, worked a charm

1 Like
6

thank you for taking the time to respond