slam32 Posted December 20, 2023 Share Posted December 20, 2023 I'm trying to add a gradient to the background of my website and I want it to appear over the whole site on all the pages. I used the following code below but it's only affecting the 1st four pages of my website and no others. On the other pages, the background remains a solid colour and the content sections of the pages have the gradient. Can someone help me please? I've been going round in circles over this and it's pretty important I get this website up in the next couple of days! Thanks! I'm using 7.0 with Pacific family template. PS: I've attached images of what I mean. The first image is how I want every page to work. The second image is what's happening on the other pages other than the first 4.  .main-content {   background: linear-gradient(170deg, #aec8ce, #44626a, #758990, #44626a, #213236, #9aadac, #819f9f, #213236, #476870, #44626a, #213236) !important; } page-section, .section-background {   background: transparent !important; } Link to comment
tuanphan Posted December 22, 2023 Share Posted December 22, 2023 Can you share link to your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
slam32 Posted December 26, 2023 Author Share Posted December 26, 2023 Hi, thanks. Sorry, I thought I had put the website link in the topic 🤔 It's https://www.herauts.com/ Thanks in advance for your help! Link to comment
creedon Posted December 26, 2023 Share Posted December 26, 2023 Quote I thought I had put the website link in the topic 🤔 You probably did but the field provided by the forum software doesn't display it as part of the post others see. You have to manually include it in the post. slam32 and tuanphan 2 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
tuanphan Posted December 28, 2023 Share Posted December 28, 2023 On 12/27/2023 at 4:38 AM, slam32 said: Hi, thanks. Sorry, I thought I had put the website link in the topic 🤔 It's https://www.herauts.com/ Thanks in advance for your help! Use this new code div#siteWrapper, .main-content { background: linear-gradient(170deg, #aec8ce, #44626a, #758990, #44626a, #213236, #9aadac, #819f9f, #213236, #476870, #44626a, #213236) !important; }  Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
slam32 Posted December 28, 2023 Author Share Posted December 28, 2023 This is great! Thank you so much! It's given me the site wide background gradient I was looking for, so that's brilliant. However, I the content section on the other pages (text boxes, etc.) are also showing the gradient when I don't want this to be the case. I would like the text to sit over the background with no background to the text itself. Is it a transparency issue? In the pictures shown in my original post, you can see what I mean. The "NOUS AIDER" text box content has a gradient background whereas the text in the 1st image sits on top of the background. Also, as a site note, was the div# the reason I couldn't get the effect I was wanting? I'm trying to learn as effectively as possible as I go along 🤷. Thanks again! Link to comment
tuanphan Posted December 30, 2023 Share Posted December 30, 2023 On 12/28/2023 at 6:19 PM, slam32 said: This is great! Thank you so much! It's given me the site wide background gradient I was looking for, so that's brilliant. However, I the content section on the other pages (text boxes, etc.) are also showing the gradient when I don't want this to be the case. I would like the text to sit over the background with no background to the text itself. Is it a transparency issue? In the pictures shown in my original post, you can see what I mean. The "NOUS AIDER" text box content has a gradient background whereas the text in the 1st image sits on top of the background. Also, as a site note, was the div# the reason I couldn't get the effect I was wanting? I'm trying to learn as effectively as possible as I go along 🤷. Thanks again! Where is this section? I can't find it on homepage and welcome page Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
slam32 Posted December 30, 2023 Author Share Posted December 30, 2023 This page is under the menu tab "soutenir", but the problem is appearing on all other pages than the home page and all the pages connected to it in the first index. For example, on the following page (infos pratiques) https://www.herauts.com/information. Link to comment
Solution tuanphan Posted January 1 Solution Share Posted January 1 On 12/31/2023 at 5:02 AM, slam32 said: This page is under the menu tab "soutenir", but the problem is appearing on all other pages than the home page and all the pages connected to it in the first index. For example, on the following page (infos pratiques) https://www.herauts.com/information. Try this new code div#siteWrapper, .index-page .main-content { background: linear-gradient(170deg,#aec8ce,#44626a,#758990,#44626a,#213236,#9aadac,#819f9f,#213236,#476870,#44626a,#213236) !important; }  Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
slam32 Posted January 1 Author Share Posted January 1 Yes! It works!  Thank you!!! What did the designation of .index-page change in the code? Thanks again. I really appreciate your time and help. 🙂 Link to comment
tuanphan Posted January 1 Share Posted January 1 4 hours ago, slam32 said: Yes! It works!  Thank you!!! What did the designation of .index-page change in the code? Thanks again. I really appreciate your time and help. 🙂 .index-page targets Index Page only  slam32 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment