Announcement

**lesliekirk** · 10-04-25, 01:42 PM

Originally posted by Nstarleather View Post

I've been trying everything in the page templates to change to color anything but that stark white but I'm not finding anywhere to change it. Do I need to access the Readytheme files directly outside the storefront interface?
Tried to go into the coustic css "structure" file and change the background color under main but it didn't change it.

You would just need to add a <style> to the CTGY and PROD pages. First, you have to determine - is it the "main" you want to change?

Code:

main {
background: #fff;
}

or the whole "body" background

Code:

body {background: #f9f9f9;
}

Then all you need to do is add the style in the header of those two templates. Let me know if I haven't expanded upon your idea enough.

**Nstarleather** · 10-04-25, 02:02 PM

So I've put this into the head part of the template like 100 different ways with no effect:
<style>
{background: #f8f5f0 !important;
}
</style>

Here's one of my product pages after adding that to it: Small Leather Bifold Wallet With Window

**Nstarleather** · 10-04-25, 02:23 PM

Originally posted by lesliekirk View Post

You would just need to add a <style> to the CTGY and PROD pages. First, you have to determine - is it the "main" you want to change?

Code:

main {
background: #fff;
}

or the whole "body" background

Code:

body {background: #f9f9f9;
}

Then all you need to do is add the style in the header of those two templates. Let me know if I haven't expanded upon your idea enough.

I've tried that quite a few different ways and it makes no change...

**Leanne** · 10-04-25, 04:40 PM

.header and main are both set to background:#ffffff. Since they overlay the body, changing the body color has no effect on the way the page displays. Instead, you will need to use:

.header,
main
{
background: #fdfaf6;
}

**Nstarleather** · 10-05-25, 06:32 AM

Originally posted by Leanne View Post

.header and main are both set to background:#ffffff. Since they overlay the body, changing the body color has no effect on the way the page displays. Instead, you will need to use:

.header,
main
{
background: #fdfaf6;
}

That's a no go too... I tried it as is a the bottom of the "head" section. And all it did was put ".header, main { background: #fdfaf6; }" in text above the top nav bar.
When I put it in <style> <style/> it actually removed the top navigation categories.

Here's the entire "head" portion of that template:

<mvt:item name="html_profile" />

<head>

<mvt:if expr="NOT ISNULL l.settings:product:page_title">
<title>&mvt:product:page_title;</title>
<mvt:elseif expr="NOT ISNULL l.settings:page:title">
<title>&mvt:page:title;</title>
<mvt:else>
<title>&mvt:product:name;: &mvt:store:name;</title>
</mvt:if>
<mvt:item name="head" param="head_tag" />

<mvt:item name="attributemachine" param="head" />
<mvt:item name="product_display_imagemachine" param="head" />
<mvt:assign name="g.socialURL" value="l.settings:product:link" />
<mvt:assign name="g.socialText" value="'Check out the deal on ' $ l.settings:product:name $ ' at ' $ g.store:name" />
<mvt:do name="l.success" file="g.Module_Library_DB" value="ProductImage_Load_Type(l.settings:product:i d, 1, l.settings:imagetype)" />
<mvt:do name="l.success" file="g.Module_Library_DB" value="Image_Load_ID(l.settings:imagetype:image_id , l.settings:imagedata)" />
<mvt:assign name="g.socialImage" value="g.baseurl $ l.settings:imagedata:image" />
<meta property="og:title" content="&mvte:product:name;" />
<meta property="og:type" content="product" />
<meta property="og:image" content="&mvt:global:socialImage;" />
<meta property="og:url" content="&mvt:global:socialURL;" />
<meta property="og:site_name" content="&mvte:global:store:name;" />
<meta property="og:description" content="&mvte:global:socialText;" />

I've been adding the change to the background here

</head>

And all it did was put ".header, main { background: #fdfaf6; }" in text above the top nav bar.
When I put it in <style> <style/> it actually removed the top navigation categories.

Screenshot 2025-10-05 102938.png

**lesliekirk** · 10-05-25, 07:30 AM

I played with it using the DevTools and changing main to this worked for me:

Code:

main {background: #f8f5f0;
}

You must place this code inside a <style> tag (and make sure you close the tag)

Code:

<style>
main  {background: #f8f5f0;}
<style>

Put it just before the closing </head> tag.

If you need an extra pair of eyes inside the template code, feel free to email me.

**Nstarleather** · 10-05-25, 07:44 AM

Originally posted by lesliekirk View Post

I played with it using the DevTools and changing main to this worked for me:

Code:

main {background: #f8f5f0;
}

You must place this code inside a <style> tag (and make sure you close the tag)

Code:

<style>
main {background: #f8f5f0;}
<style>

Put it just before the closing </head> tag.

If you need an extra pair of eyes inside the template code, feel free to email me.

So that worked but it kills the top nav of the site:
Screenshot 2025-10-05 113758.png Original: with navagation.png

Attached Files

**lesliekirk** · 10-05-25, 08:48 AM

I'm not sure why this would happen without being a little deeper into your store.

**Nstarleather** · 10-05-25, 08:58 AM

Originally posted by lesliekirk View Post

I'm not sure why this would happen without being a little deeper into your store.

My suspicion is that it has to do with the inflexibility of the old Readytheme...that it's just not mean to be messed with...which is why I posted in this section of the forum. There is nothing special or unusual about my store as we do all the work inhouse just simple tweaks here and there, everything was basically just dropped into the Readytheme when we switched over to it.

**lesliekirk** · 10-05-25, 10:04 AM

Originally posted by Nstarleather View Post

My suspicion is that it has to do with the inflexibility of the old Readytheme...that it's just not mean to be messed with...which is why I posted in this section of the forum. There is nothing special or unusual about my store as we do all the work inhouse just simple tweaks here and there, everything was basically just dropped into the Readytheme when we switched over to it.

I've been able to tweak the CSS for every older ReadyTheme without any issues. I suspect something else might be going on. Like I said, I'll be more than happy to take a peek and guide you in the right direction. Drop me a line.

Announcement

Got it in my head to change the background color on PROD and Category pages...but how

Got it in my head to change the background color on PROD and Category pages...but how

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment