Docs

[Ony]

Hey there,

I had customized the CSS to have transparent and semi-transparent backgrounds for the contact form, tabs, and accordion, and it all was working at one point.

However, there was some data corruption and I had to restart the website from scratch and now unfortunately the CSS is somehow messed up and is no longer transparent.

Please look at the CSS and screenshot provided in the next private reply.

Thanks so much,
Ony

[Ony]

This reply has been marked as private.

[Ony]

This reply has been marked as private.

[Ony]

Even after deleting everything and inputting the following CSS, the tabs are not properly transparent. They appear as white, instead of allowing me to see the image behind.

.x-accordion-group,
.x-accordion-heading .x-accordion-toggle,
.x-accordion-heading .x-accordion-toggle.collapsed {
    background-color: transparent;
}

.x-accordion-inner {
    background-color: #ff0000;
}

.x-container.main:before {
  background-color: transparent;
}

[Lely]

Hello Ony,

From your CSS above, I can see a CSS syntax error. Please check every background image declaration like this:

background: url(\"http://127.0.0.1/zoo/zoodirectory/uploads/2016/07/Bar-Dark-PC-Cards.jpg\") no-repeat top center;

Update to this:
background: url("http://127.0.0.1/zoo/zoodirectory/uploads/2016/07/Bar-Dark-PC-Cards.jpg") no-repeat top center;
We don’t need the backslash. Please remove backslash from every line.

Hope this helps.

[Ony]

Hey Lely,

Sorry but that wasn’t unable to fix the issue :/. That’s related to another entity, however even though I’ve made the change it doesn’t fix the error.

The tab and accordion transparency still are not working :(.

[Nabeel A]

Hi there,

Please add the following code in your Customizer:

.x-accordion-heading .x-accordion-toggle.collapsed, .x-accordion-heading .x-accordion-toggle, .x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover, .x-nav-tabs>li>a {
    background-color: transparent !important;
}

Let us know how this goes!

[Ony]

This reply has been marked as private.

[Nabeel A]

Hi again,

Can you please setup the Child Theme and add the above code in your Child Theme’s style.css file. There could be syntax error in your CSS.

Let us know how this goes!

[Ony]

I’ve done as requested however the transparency still doesn’t work 🙁

[Friech]

Hi There,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

If you’re working on a local machine, please provide us your whole child theme folder, your customizer settings, and the page that has the Tab and Accordion. You can export customizer settings under Addons > Customizer Manager. You can export cornerstone page as template (.csl file).

Zip it and upload it to a file sharing site (e.g. https://www.dropbox.com/) and provide us the URL. This way we can replicate the issue and can take a closer look.

Thanks.

[Ony]

This reply has been marked as private.

[Ony]

This reply has been marked as private.

[Rue Nel]

Hey Ony,

That will not work because all the settings, contents and Cornerstone data is saved in your database. We cannot use just the file. What you want us to do to check your site is a complete migration. To better assist you, maybe you can setup a staging area somewhere else for us to check your site.

I am guessing that maybe there are several errors in your css and that is why it is no longer working for you. Please do a thorough checking in your custom css. Please make sure that all the curly braces were properly closed. And also, it is a good practice that all @media block were properly closed and it should be placed at the bottom of all other css to prevent from being overridden.

Could please post the complete css code that you have. In your previous reply you posted a partial code I guess.
Please let us know.

[Ony]

This reply has been marked as private.

[Author]

Posts