Modifying main.css in Cloneamental
Permalink
Hello,
I have a really simple problem that's giving me a bit of a headache. I'm trying to use a background image on my website, but the "Main" block background-color is in the way. How do I remove this? The color is #ebebeb and I found it in the main.css file, but removing that line doesn't work as it keeps being restored anytime I modify it. How can I remove the background color from the main block in the Cloneamental theme?
Attached is a screenshot of using Firefox Inspector to get the desired result. I pulled the main.css file from the cache directory, but obviously this isn't the correct way to go about modifying that block. What should I be editing to remove the background-color from the Main block?
Thanks!
Edit: so I found content.less in packages/cloneamental/themes/cloneamental/css/build and there's this part
I'm sure I could remove the @page-background-color; and get the desired result. But I must be missing an easier way to go about this.
I have a really simple problem that's giving me a bit of a headache. I'm trying to use a background image on my website, but the "Main" block background-color is in the way. How do I remove this? The color is #ebebeb and I found it in the main.css file, but removing that line doesn't work as it keeps being restored anytime I modify it. How can I remove the background color from the main block in the Cloneamental theme?
Attached is a screenshot of using Firefox Inspector to get the desired result. I pulled the main.css file from the cache directory, but obviously this isn't the correct way to go about modifying that block. What should I be editing to remove the background-color from the Main block?
Thanks!
Edit: so I found content.less in packages/cloneamental/themes/cloneamental/css/build and there's this part
main { background-color: @page-background-color; padding-bottom: 80px;
I'm sure I could remove the @page-background-color; and get the desired result. But I must be missing an easier way to go about this.
I thought so to, I poked around and just went through and changed every color I could find there with no luck. All the other backgrounds can be adjusted there, but not the Main block background. Perhaps an oversight?
Edit: spoke too soon, there is a "Page Background", it's the first one, however changing this to "transparent" doesn't make it transparent. I can change it to any color, but I can't remove it it through the CMS.It gives it a value of #FFFFFF instead of actually being transparent.
I just removed the code from the content.less document and got my desired result. I think that's the only way around this as you can't set it the color to no color going through the Design panel.
Edit: spoke too soon, there is a "Page Background", it's the first one, however changing this to "transparent" doesn't make it transparent. I can change it to any color, but I can't remove it it through the CMS.It gives it a value of #FFFFFF instead of actually being transparent.
I just removed the code from the content.less document and got my desired result. I think that's the only way around this as you can't set it the color to no color going through the Design panel.
the problem with your approach is if you ever update the theme you'll lose your modification and your background color.
In the color picker, if you click the cross in the top right corner to remove the color and then click on "choose" at the bottom you are not setting it to transparent, you are removing the color. The problem with this approach is there is no color at all so it reverts back to the default color, in your case it's white.
The picker is limited in that it doesn't allow the keyword "transparent"
What you can do is select any color and then use the transparency slider and set it on 0. You will end up with an RGBA color that will effectively be transparent.
If you type the word "transparent" in the color code box in the picker it will be accepted but will be converted to rgba(0,0,0,0) which is transparent black.
In the color picker, if you click the cross in the top right corner to remove the color and then click on "choose" at the bottom you are not setting it to transparent, you are removing the color. The problem with this approach is there is no color at all so it reverts back to the default color, in your case it's white.
The picker is limited in that it doesn't allow the keyword "transparent"
What you can do is select any color and then use the transparency slider and set it on 0. You will end up with an RGBA color that will effectively be transparent.
If you type the word "transparent" in the color code box in the picker it will be accepted but will be converted to rgba(0,0,0,0) which is transparent black.
Thanks for your help! I reverted my change because I completely overlooked that transparency slider. Thanks a lot!
Go to any page then click on the toolbar button with the little cog icon at the top left.
In the sidebar that opens, click the top choice "Design"
From the new choices that appear, under "Theme" your current theme will be selected. Click on the "Customize" link.
You will then have access to everything you can customize, mostly colors, font sizes, background images.
That background color should be there