Adding a background color at the top of product details pages

Site URL: https://www.clubmailedit.com/subscriptions/p/threecardsubscription

Hey Everyone! 

I am a total newbie with site design, but learn quickly... I appreciate your patience. Hopefully this is a simple fix.

Website is www.clubmailedit.com and the password is mailedit! 

Question: For Subscriptions and Bundles, these are my two categories for things I sell. I have designed both of those pages to be exactly how I want them -- the actual page has a block at the top with the page name on it and a color background, and the color background runs all the way up to lay behind our logo. Our logo CANNOT lay on white, it has to lay on a color, so we went this route so each page can feature a different color from our logo running up behind it. The issue is, when you are on subscriptions, and click through to one of the products, it won't allow me to add a text block at the top to assign a color background to run all the way up like the other pages, it just keeps the entire page background white and then my logo is stuck on white which isn't an option. Is there a way to add a text block at the top of the specific product page, so that I can give it a color background to run up behind the logo? Does that make sense? Or, is there any way to add a color behind the logo on these few pages, that won't affect my header? I want the header to remain transparent so the different colors on each page run up behind it.

Any suggestions appreciated! I can add CSS if there is anything to add that will help, just need a general overview of what I'm doing and I can figure it out. 

13 hours ago, kendallwatson said:

Site URL: https://www.clubmailedit.com/subscriptions/p/threecardsubscription

Hey Everyone! 

I am a total newbie with site design, but learn quickly... I appreciate your patience. Hopefully this is a simple fix.

Website is www.clubmailedit.com and the password is mailedit! 

Question: For Subscriptions and Bundles, these are my two categories for things I sell. I have designed both of those pages to be exactly how I want them -- the actual page has a block at the top with the page name on it and a color background, and the color background runs all the way up to lay behind our logo. Our logo CANNOT lay on white, it has to lay on a color, so we went this route so each page can feature a different color from our logo running up behind it. The issue is, when you are on subscriptions, and click through to one of the products, it won't allow me to add a text block at the top to assign a color background to run all the way up like the other pages, it just keeps the entire page background white and then my logo is stuck on white which isn't an option. Is there a way to add a text block at the top of the specific product page, so that I can give it a color background to run up behind the logo? Does that make sense? Or, is there any way to add a color behind the logo on these few pages, that won't affect my header? I want the header to remain transparent so the different colors on each page run up behind it.

 

Any suggestions appreciated! I can add CSS if there is anything to add that will help, just need a general overview of what I'm doing and I can figure it out. 

Hi, there's an easy css fix for this!

Just add this code to custom css and replace 'HEX' with the value of your preferred colour. I noted down which code is for which page. Let me know how it goes 🙂 

/** FOR 5 CARD PAGE SUBSCRIPTION PAGE **/
#item-6222e6357809d1472a999fd4 .header-announcement-bar-wrapper {
  background-color:#HEX;
}

/** FOR 5 CARD PAGE SUBSCRIPTION PAGE **/
#item-6222e6357809d1472a999fbc .header-announcement-bar-wrapper {
  background-color:#HEX;
}

Oh my goodness you are so great!!! These both say 5 card subscription page -- can you share which one is 3 card? 🙂 Also -- if I need to duplicate this for my bundles page and my gift card pages, do you know of any tutorials on how to find and change the item numbers? 

8 hours ago, Jia said:

Hi, there's an easy css fix for this!

Just add this code to custom css and replace 'HEX' with the value of your preferred colour. I noted down which code is for which page. Let me know how it goes 🙂 

/** FOR 5 CARD PAGE SUBSCRIPTION PAGE **/
#item-6222e6357809d1472a999fd4 .header-announcement-bar-wrapper {
  background-color:#HEX;
}

/** FOR 5 CARD PAGE SUBSCRIPTION PAGE **/
#item-6222e6357809d1472a999fbc .header-announcement-bar-wrapper {
  background-color:#HEX;
}

 

34 minutes ago, kendallwatson said:

Oh my goodness you are so great!!! These both say 5 card subscription page -- can you share which one is 3 card? 🙂 Also -- if I need to duplicate this for my bundles page and my gift card pages, do you know of any tutorials on how to find and change the item numbers? 

 

Oh, my bad! The first one is for the 3 card page. You can use this Google Chrome extension to identify each page's unique code. 

1 hour ago, Jia said:

Oh, my bad! The first one is for the 3 card page. You can use this Google Chrome extension to identify each page's unique code. 

Life saver! Thank you so much.