Cannot change background color on a few websites [on transparent containers]

Tagged: , , ,

Author Posts

eiretv September 20, 2015 at 12:29 pm

Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.

I tried Microthemer on a few Templates…divi and ultra by themify.

I have found this a few times that I cannot change the background on transparent containers on one.

On this one I cannot change the background of the menu to transparent to show the photo on the container underneathon this website for instance….I tried changing the Z index….no go either.

http://www.rosemount.ie

Is this because of – important! being added do you think??

Sebastian September 21, 2015 at 2:40 pm

Hi there,

1. I cannot change the background on transparent containers on one
I suspect that this might be because when the existing background color is transparent, the color picker defaults to 0 opacity. So even though you set the color, it is visible because it’s totally transparent. There is a slider for increasing the opacity on the picker. I noticed this issue myself recently and was thinking I should add a warning in the notification area when opacity defaults to 0.

2. I cannot change the background of the menu to transparent to show the photo
You’ve created a selector called TopBar-Menu. I see that this applies a background yellow color: rgb(249, 166, 26). If you edit this color in Microthemer, you can drag the opacity slider down from 1 to 0. This will make the background color disappear. The reason that this is necessary is because there is another yellow background style in a stylesheet called themeify-customizer.css.

Please let me know if this solves your issue.

eiretv September 21, 2015 at 11:37 pm

Thanks Sebastian

that was really driving me crazy…going around between 3 different template systems the past week and all of them having great features that if put together would give me what I want…..

Another thing driving me crazy is how to change the links to give me rollover changes….but I will figure it….thanks for this…really appreciate it….

Sebastian September 22, 2015 at 2:04 pm

You’re welcome. With regards to the hover state issue, you need to create a separate selector that targets elements in their hover state. When you double-click links, the selector wizard will present some selectors that end with :hover e.g.

a.my-link:hover

If you want to give elements that aren’t links a hover state, you can manually edit the selectors on the Targeting tab by typing :hover at the end e.g.

tr.my-table-row:hover

I hope that helps. Please let me know if you need further assistance with this.
Cheers,
Sebastian

You must login or register to reply to this topic.