[NSFW] Changing the color and content of header. Theme: Store

Thank you for your prompt and detailed response @alan105 . Much appreciated.

However, I am unsure if the Store theme has the plain Wix Editor:

I know that in many themes there is an Editor under Appearance .

I also looked elsewhere but was unable to locate the Wix Editor

Thanks again in advance for any help!

Unfortunately that theme does not appear to be very well supported. Typically the theme’s support forum is the best place to get the answers you seek. I’m only able to answer in general terms. Some themes have their header content built from widgets. Check the widget area editor for possibilities. Other themes have a dedicated page in theme settings for this. Others manage content though the customizer. However, if you wish to alter menu content, there’s a separate menu editor for that. If all else fails, you ought to be able to alter header content by editing the theme’s header.php template. It’s not as the theme author intended, but it will get the job done.

The colors are easier to alter if you know a little CSS coding. The current colors come from a theme defined color scheme. You could choose a different scheme through theme settings. Or you could override the existing CSS with custom CSS added to the Additional CSS customizer section. For example:

#top-bar, #masthead {
    background: darkgreen;
    color: palegreen;
}

Use your browser’s element inspector tool to help you determine other CSS you might want, as well as the ideal color specifications.

I was able to accomplish out much of what I was looking for, however I still haven’t figured how to manipulate a few more things on the header:

I am unsure how to switch from the site name to an image using CSS code.

I would also like to manipulate the shopping cart and search bar’s color as shown below:

Any help will be much appreciated!

Thanks in advance!

To make the site name an image with CSS, try this:

#masthead h1.site-title a {
    color: transparent;
    background-image: url("https://example.com/path/to/image.jpg");
}

This is the current CSS for the search box:

#top-search input[type=search] {
    background: #b4ecbd;
    color: #666;
    border: solid 2px #2fb543;
    border-right: none;
    padding: 10px 10px;
    outline: none;
    width: 100%;
}

Place the same in the Additional CSS section of the customizer, then change the colors and other specifications as desired. You’ll possibly need to flush your browser’s cache before you can see the result of any changes. You may remove any styles you don’t wish to change.

The above does not affect the magnifying glass box. This is its CSS:

#top-search button {
    background: #2aa03b;
    box-shadow: none;
    border: solid 2px #2fb543;
    text-shadow: none;
    padding: 10px 13px;
    border-left: none;
    margin-left: -7px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    outline: none;
}

Same deal, copy to Additional CSS and change as desired. The magnifying glass icon itself is managed separately, I assume the icon’s shape is OK as-is. The color is managed with this:

#top-bar, #masthead {
    color: palegreen;
}

Place in Additional CSS as well. Any change to this will also affect the shopping cart icon.

@bcworkz Thanks for all of the extremely useful code!

I am however, having an issue getting the actual image to appear in the header.

The transparency allows for the text to be hidden, but the URL’s image doesn’t appear:

In addition, is there a way to us an image that I’ve uploaded to my site’s library? I would like to have the site’s logo in place of the text, linking the logo image to the home page.

Thanks in advance!

I think using a background image URL from ibb.co could be problematic, you should use an URL from your own site. Upload the desired image to the media library. In the library’s list table screen and select the list view icon in the top tool bar (the one below the title). Hover over the image you just uploaded and select “Copy URL”. Paste the URL in place of the ibb.co URL you currently have in CSS.

@bcworkz Thanks again for the helpful response.

However, when I enter the proper URL, the image still does not show. I went to the Media Library and copied the URL:

I then replaced the erroneous URL with the proper one: https://maxcbdrelief.com/wp-content/uploads/2024/07/fake-logo-nb.png in the CSS code:

Im not sure if i need to add or subtract anything from my code, thanks again in advance for any help!

Your change has not taken effect, the applicable CSS still has the ibb.co link. I’m not sure how you’re adding custom CSS, but my inspector tool reports its URL as https://maxcbdrelief.com/?custom-css=3e1784c6f9. Whatever the source of that is is what needs to be altered. If you did that, then there’s some sort of caching active that’s preventing your change from becoming effective. That cache where ever it is needs to be cleared.