Theme Update Broke Various Pages

Hello,

I’ve noticed since the update has caused a number of problems on our website. I’ve reviewed the release notes and changelog and have troubleshot as suggested. Unfortunately, the issues still persist.

I will provide screenshots site access via a private note.

Your assistance is greatly appreciated.

Hello Scott,

Thanks for writing to us.

We are not able to access your site’s dashboard since your given credentials are not working please recheck and send us again.

Thanks

Hi @prakash_s,

I was able to resolve issues #1 and 2 on my own. It appears that many of the classic elements are no longer functional and needed to be replaced. This of course was not ideal but is workable. Now, the only issue remaining is point number one.

I’ve updated the username and password in the secure note and it is functional. Thank you!

Hi @rbradmin,

Thanks for letting us know. Could you try updating to the latest version that was released yesterday? It fixed some known issues with classic elements but I don’t know for sure if it’s the same problem you’re describing.

I did notice that the Download Datasheet button still exists, but the Classic Button element has a class of hide datasheet. The hide class will keep it from appearing. Perhaps you did this on purpose to mitigate a previous issue, but you should just be able to remove that now.

I did update the to the latest version however that did not resolve the issue. The white circular button is meant to be red with the text “Download Datasheet”.

Why did the update remove the styling? The pop-up was meant to be hidden so that when people click on the button the pop up appears. I’m not sure why the update would have affected this.

Hello @rbradmin,

It might be the issue of cache because of that the button styling is not rendering. It is always a good practice to purge all the cache when you update the theme or plugin or WordPress version so that the latest code renders properly.

I checked your given page URL, it seems that you are using “Content area model” with a graphic icon I would suggest you use text in place of graphic and style it as per your design by the help of element settings.

In case if you haven’t seen our doc for Content area model please have a look at it https://theme.co/docs/content-area-modal

Hope it helps
Thanks

I have purged the cache and it had no effect on the issue. I’m not sure why the update would have affected the styling but I would like to resolve this issue.

Do you have a live chat where I can receive real-time support? This custom pop-up was done by another team and unfortunately, I am not able to replicate it. TIA.

Hello Scott,

Is the previous styling look like this?

If this is the case, please update your custom CSS blocks and use these respectively:

#subscriBeModal-anchor-toggle,
.x-anchor.x-anchor-toggle[aria-controls="subscriBeModal-modal"] {
    color: #ffffff;
    border-color: #ba0c2f;
    background-color: #ba0c2f;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    border-radius: 0.25em;
    width:auto !important;
    display: inline-block;
    position: relative;
    border: 1px solid #ac1100;
    padding: 0.563em 1.125em 0.813em;
    cursor: pointer;
    font-size: 16px;
    font-weight: inherit;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    transition: all 0.15s linear;
}
#subscriBeModal-anchor-toggle,
.x-anchor.x-anchor-toggle[aria-controls="subscriBeModal-modal"] {
    width: 75% !important;
    display: block !important;
    margin: 10px auto 30px auto !important;
  
}

Kindly let us know how it goes.

I had the same issue. Tried reverting back to the latest Stability build & that didn’t work either. In the end I had to restore from a backup. I would recommend that to anyone else experiencing this with the newest version. Just restore to a backup.

Hey @Heath,

Thanks for the feedback.

Regards.

Hi @ruenel,

I tried adding the custom CSS to the content area modal however that solution didn’t work. Instead it pushed the button below “Request a Quote”. Please note that I’d also want it to read “Download Datatsheet”, and when clicked would prompt the datasheet download. That is what the datasheet button is for.

Can you please help me find a resolution for this? I’d really rather not restore a backup considering I’ve already resolved all of the other problems with the latest update.

Hi @rbradmin,

In order to achieve that button style, you can add this code to your specific pages.
Just navigate your page code editor CSS. the screenshot shown below.

#subscriBeModal-anchor-toggle, .x-anchor.x-anchor-toggle[aria-controls="subscriBeModal-modal"] {
    background: #ba0c2f;
    padding: 0px;
    top: 2px;
    height: 2.5em;
    border-radius: 5px;
}

#subscriBeModal-anchor-toggle, .x-anchor.x-anchor-toggle[aria-controls="subscriBeModal-modal"] span.x-toggle.x-toggle-burger.x-graphic-child.x-graphic-toggle {
    color: white;
}

Hope this will help.

Thanks.

Hello, unfortunately, this is still not functioning as it should. The styling should be the same as the request a quote button, however, it should read Download Datasheet. How do I edit this text?

In addition, I need the datasheet to download automatically when a person clicks on this button. You can see the button hidden below. Your assistance in resolving this issue is greatly appreciated.

Thanks.

Hey @rbradmin,

You’ve set toggle text up using custom code when there is a Toggle Text option available. You didn’t enable the Advanced Mode so it wasn’t available on your site.

image

Please note that we do not provide support for custom codes. We can’t help you fix your codes. Please kindly use the available options of the builder.

Add text to the Content Area Modal Toggle using the Text Setup option.

Thanks.

Hello,
I’ve done some playing around with the advanced settings and it appears that a main cause of the problem is the default graphic. If I remove the default graphic the styling remains as it once was. The only issue is that I do not have the hover functionality. How could I make this have the same hover functionality as the request a quote button? Thanks in advance.

Hello @rbradmin,

You are using this custom CSS for your Request Quote button:

.requestQuoteBtn  .x-graphic{
    font-size: 16px !important;
    background-color: #ba0c2f !important;
    margin:unset !important;
    color: #ffffff !important;
    border-color: #ba0c2f !important;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5) !important;
    border-radius: 0.25em !important;
    padding: 10px 10px 13px 10px !important;
    box-shadow: 0em 0.15em 0.65em 0em;
    display: inline-block !important;
    position: relative !important;
    border: 1px solid #ac1100 !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: inherit !important;
    line-height: 1.3 !important;
    text-align: center !important;
    vertical-align: middle !important; 
    transition: all 0.15s linear !important;
  
}

.requestQuoteBtn  .x-graphic:hover {
    color: #ffffff !important;
    border-color: rgb(153,8,39) !important;
    background-color: rgb(153,8,39) !important;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5) !important;
}

To include the “Download Datasheet” button kowing that is has the button ID, subscriBeModal-anchor-toggle . You can update your custom CSS and use this code:

.requestQuoteBtn  .x-graphic,
#subscriBeModal-anchor-toggle{
    font-size: 16px !important;
    background-color: #ba0c2f !important;
    margin:unset !important;
    color: #ffffff !important;
    border-color: #ba0c2f !important;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5) !important;
    border-radius: 0.25em !important;
    padding: 10px 10px 13px 10px !important;
    box-shadow: 0em 0.15em 0.65em 0em;
    display: inline-block !important;
    position: relative !important;
    border: 1px solid #ac1100 !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: inherit !important;
    line-height: 1.3 !important;
    text-align: center !important;
    vertical-align: middle !important; 
    transition: all 0.15s linear !important;
  
}

.requestQuoteBtn  .x-graphic:hover,
#subscriBeModal-anchor-toggle:hover {
    color: #ffffff !important;
    border-color: rgb(153,8,39) !important;
    background-color: rgb(153,8,39) !important;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5) !important;
}

Note: Be advised that since this is a custom code, you will be the one to maintain the code whenever there are theme and plugin updates to make sure that your custom CSS keeps on working alongside the theme.

Best Regards.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.