Styling Blog Post Cards – Removing Black Highlight and Changing Date Color - Shopify Dawn

Solved

Styling Blog Post Cards – Removing Black Highlight and Changing Date Color - Shopify Dawn

michaeltt
Tourist
7 0 1

Hi everyone,

I’m looking for some help with the styling of my blog post cards on my Shopify store. Specifically, I need to make the following changes:

  1. Remove the black highlight around the date.
  2. Change the date color from white to black to match the rest of the card’s design.

Here’s an image of what the current blog post cards look like for reference:
Screenshot 2024-09-09 at 1.38.33 PM.png

Thank you in advance for your help!

Accepted Solution (1)

AnneLuo
Shopify Partner
933 173 199

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

 

<style>
.focus-none span.circle-divider {
    background: unset !important;
    color: #000 !important;
}
</style>

 


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

Replies 2 (2)

BSSCommerce-B2B
Shopify Partner
1705 511 571

@michaeltt,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code before </body>

<style>
.article-card__info time {
    background: #f3f3f3;
    color: black;
}
</style>

Result

BSSCommerceB2B_0-1725853597001.png

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

AnneLuo
Shopify Partner
933 173 199

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

 

<style>
.focus-none span.circle-divider {
    background: unset !important;
    color: #000 !important;
}
</style>

 


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee