How to add a custom background and an icon in the Footer section I own

[poshpush]

Hello, I purchased this footer section in the Section Store. As I was customizing it, I want to change the background color, but the default setting doesn't have background color settings. So, can I add a custom background color with CSS? Also, I want to add a social media icon that the default setting doesn't provide, Is there any way to customizing adding a social media icon and link its URL with CSS? here's my site: https://www.poshpush.me/
The social media I want to add is xiaohongshu. 

[ProtoMan44]

@poshpush , hey, thanks for posting here.
Please add this style in custom CSS and add the color you need.

.section-sections--24669162963263__ss_footer_7_LYkQW4-settings {
    background: #00000073;
}

[Rahul_dhiman]

-----------------------

[poshpush]

Hello, Thanks for reply, so I added this code, but it only applied to this pink area. I wanted to change the highlighted area which is the white background.

How do I change the highlighted area? 

[Rahul_dhiman]

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

.section-sections--24669162963263__ss_footer_7_LYkQW4-settings {
background: chocolate !important;
}

result

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

[poshpush]

Hello, Thanks for reply, so I added this code, but it only applied to this pink area. I wanted to change the highlighted area which is the white background.

How do I change the highlighted area? 

[tim]

It's a section in your theme.

Of course you can modify its look by using "Custom CSS" setting on the section or in Theme Settings.

You can even edit the liquid code, but I would rather refrain from doing so as it may complicate theme update.

A CSS code for the "Custom CSS" can be like this:

[class*=ss_footer_7][class$=settings] {
  background-color: blue;
}

Note that the color should be opaque, semi-transparent background will have the wrapper background (currently pink) to show through.

Update: unfortunately, to add another link you'd need to modify the liquid code. You can add an icon with CSS, but link needs to be added in HTML (Liquid).

[poshpush]

Hello, Thanks for reply, so I added this code, but it only applied to this pink area. I wanted to change the highlighted area which is the white background.

How do I change the highlighted area? 

[tim]

This?

.shopify-section-group-footer-group {
  background: red;
}

As for additional social link -- this will require editing section Liquid code which I do not have access to.

[MandasaTech]

Hi there,

Yes, you can absolutely customize both the background color and add a new social media icon (like Xiaohongshu) using a bit of custom CSS and HTML!

Change Footer Background Color with CSS

You can target your custom footer section and change its background color like this:

.custom-footer-class {  /* Replace with the actual class or ID of your footer */
  background-color: #f5f5f5 !important;  /* Change to any color you prefer */
}

To apply it:

• Go to Online Store > Themes > Edit Code

• Open your base.css or theme.css file (in the Assets folder)

• Paste the code at the bottom and save

2. Add Xiaohongshu Social Icon + Link

Unfortunately, CSS alone cannot add functional links or new icons. Here's how you can do it:

Step 1: Add HTML for the Icon

Inside your custom footer section code (likely a .liquid file), locate the area where the current social icons are listed. Add this HTML:

<a href="https://www.xiaohongshu.com/user/YOUR_USERNAME" target="_blank" class="social-icon">
  <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Xiaohongshu_logo.png" alt="Xiaohongshu" style="width: 24px; height: 24px;">
</a>Replace YOUR_USERNAME with your actual Xiaohongshu profile link.

Step 2: Optional CSS Styling

To ensure consistent styling:

.social-icon img {
  margin-right: 10px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.social-icon img:hover {
  transform: scale(1.1);
}

Let me know if you have any questions!

[poshpush]

Thanks for your reply! So I tried to add your code, but it didn't work. 
So I added this, but it only changed the pink area, not the highlighted area I wanted to change. 

.custom-footer-class {  /* Replace with the actual class or ID of your footer */
  background-color: #f5f5f5 !important;  /* Change to any color you prefer */
}

 For the second one, I added the step 1 code into sections/footer.liquid and added Step 2 code into base.css but I didn't see it. 
I wanted to add a social media icon on the footer. Can you tell me what was wrong and how I can fix this?