I Want To Change Logo List Colour On Website Want Black Background & White Text
Topic summary
A user wants to change their logo list to have a black background with white text on their Shopify store.
Initial Response:
- One contributor notes the logo is an image file that would need direct editing.
CSS Solution Provided:
- Add CSS code to the
styles.cssfile usingfilter: invert(1)to invert logo colors. - Apply
clip-path: circleandbackground-color: blackfor the black background effect. - Target the
.logo-area.container.container--no-max .logo imgselector.
Important Consideration:
- Before implementing changes, verify brand logo usage guidelines, as some brands strictly prohibit logo modifications.
Implementation Steps:
- Navigate to Shopify admin → Online Store → Themes → Actions → Edit Code
- Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
- Add the provided CSS code at the bottom of the file
Status: Solution provided with working code example and visual result shared.
1 Like
Hi @Emiway
You cant change it, its an image. You need to edit the image it self.
Add this code in your styles.css file:
.logo-area.container.container--no-max .logo img {
filter: invert(1);
background-color: black;
clip-path: circle(24.8% at 50% 50%);
}
Result:
If you can envision it, you can code it.
Oh yes. Definitely forgot the filter css. Anyways, @Emiway before you proceed, make sure you are allowed to make changes to the brand logos. Some brands are very strict about changing the look of their logo.
You can follow the instructions below.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.logo-list__logo .rimage-wrapper > img {
filter: grayscale(1);
}
Result here:
1 Like