Frontend issues after updating X

Support
#1

Dear Themeco Support Team

After setting up a Staging Site and running all updates, including updating X-Theme and Revolution Slider, we are experiencing some frontend design issues:

1.) White background on “News” page

After the updates, the content area of the sub-category pages suddenly has a white background.

Looks like this (Staging Site)

Should look like this (Live Site)

2.) Recipes Start Page

The size and alignment of the recipe-category teasers in the content area is wrong (below each other instead of inline next to each other).

Looks like this (Staging)
https://www.morga.ch/staging/?page_id=11333 (Recipe Category Teasers)

Shoud look like this (Live)

3.) Alignment – horizontal space/padding missing on start page

After the updates, the indent/vertical spacing left and right of the content is missing:

Looks like this (Staging)
https://www.morga.ch/staging/

Should look like this (Live)


4.) Start Page Header built with Revolution Slider

The alignment of the text and the alignment and colors of the button are wrong.

Looks like this (Staging)
https://www.morga.ch/staging/

Should look like this (Live)


Pls also see post https://theme.co/apex/forum/t/revolution-slider-design-different-after-updates/67789?u=lypa for this last topic.

Would you mind taking a look at this? Thank you very much.

Kind Regards,
lypa

#2

Hi Lypa,

You have a custom CSS that is added on Visual Composer editor that is missing. Please see this: https://screencast-o-matic.com/watch/cqlhQ7U7Xo
Add it back:

.entry-wrap {
    display: block;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

I am a bit confuse because you shared the wrong URL. I found the issue here: https://www.morga.ch/staging/?page_id=6650 compare to live.
This custom CSS is missing too:

@media (min-width: 767px){
.vc1-5 {
    width: 16.8%;
   width: 16.8%;
    position: relative;
    z-index: 1;
    float: left;
    margin-right: 4%;
}
}

Like the first 2 issue, it is on visual composer. The content band is missing. It goes direct to row. See this comparison: https://screencast-o-matic.com/watch/cqlh6UU72c. Please compare the structure and adjust.

There’s difference in structure now. You need to update your custom CSS. I can see from comparison that CSS is not working. I found it in the source code. It is there. It’s not working because it is not exact because of difference in structure. My advice is to visit all custom CSS codes and adjust accordingly.

Hope this helps.

#3

Dear Lely

Thank you for helping. I will have to to take a closer look tomorrow, but beforehand I have one more question. You wrote:

My advice is to visit all custom CSS codes

Is the right place for doing that here?

Sorry, it’s been a while since I have worked on this site and with X-Theme, and everything looks a bit different in the backend. And the bug fixes after latest updates are keeping me quite busy ;).

Best,
lypa

#4

Hello Lypa,

Since a few previous releases, you can now customize the X theme via X > Theme Options. You no longer have to go to Appearance > Customize. If you have custom CSS, please put it in X > Theme Options > Custom CSS instead.

Hope this helps.

#5

Hi Lely

Thank you for helping. I tried to apply your advice to the issues, here is the outcome:

1.) White background on “News” page

I could fix this with your code, thank you.

2.) Recipes Start Page

I am a bit confuse because you shared the wrong URL. I found the issue here: https://www.morga.ch/staging/?page_id=6650 compare to live.
This custom CSS is missing too:

Sorry, for giving the wrong URL. The correct URL is https://www.morga.ch/staging/?page_id=6650 for the staging site. And https://www.morga.ch/rezepte/ for the live site.

I applied your code, but it shows no effect. The staging site still looks different to the live site, please take a look:

On the staging site I still see the following issues:

  • recipe category teaser images are too big and below each other (instead of next to each other)
  • some teaser images are missing (Desserts, Baking, Drinks)
  • White background for content area is missing.
    If you compare the staging to live site:

    This is what it should look like. Would you mind taking another look at this? Thank you.

3.) Alignment – horizontal space/padding missing on start page

Here I can not find the issues in the code. In the backend both pages look the same. I have even tried to copy the content structure from the live site and pasted it to the staging site. But it won’t look the same in the frontend. Please compare:
Staging

vs. Live Site

So in the live site there is no content band as well, but it looks ok in the frontend?!?

Would you mind taking another look at that? Thank you.

4.) Start Page Header built with Revolution Slider

I am working on re-building that and have a separate post for this issue. So for here, it’s ok :slight_smile:

Dear Lely, would you mind taking a look at issues 2 & 3 again? Thank you.

Kind Regards, lypa

#6

Hello @lypa,

For 2 and 3:
You are using vanilla version of WPBakery Page Builder plugin. The live site is using the Legacy X Integration enabled version of the plugin. To resolve your staging, please go to WPBakery Page Builder > Settings > Legacy X Integration and enable it.

For the missing images, please make sure that you have upload the images in your staging server. You can check it in Media > Library.

Hope this helps.

#7

Hi RueNel

Thank you for your response.

For 2 and 3:
… To resolve your staging, please go to WPBakery Page Builder > Settings > Legacy X Integration and enable it.

Enabling the Legacy X Integration helped for Issue 3, but only partly for issue 2. The images are in the right order now, but the white background is still missing:
https://www.morga.ch/staging/?page_id=6650

Please compare to our live site here, which has the white backgorund: https://www.morga.ch/rezepte/

For the missing images, please make sure that you have upload the images in your staging server. You can check it in Media > Library.

I checked this and the images were in the staging library. But the link to the image that was embedded in the page code did not work anymore in the frontend, though it was the same URL. So I copied and pasted the URLs of the missing images into the page code again. And then they were suddenly showing again. Strange. They were the exact same URLs.

So most issues are solved after activating the Legacy X, but the white background is missing. And two new issues occured after enabling the Legacy X Integration: The News teaser boxes (https://www.morga.ch/staging/?page_id=3037) and all Recipe teaser boxes (Example: https://www.morga.ch/staging/?recipe-categories=vorspeisen) are missing the white background in their lower half. Would you mind taking a look at that, please?

Here is how it looks now:

Here is how it should look like (Live Site): https://www.morga.ch/aktuell/, https://www.morga.ch/rezeptkategorie/vorspeisen/

I just checked the pages of our staging site and found that all pages which used to have a white background in the content area do not have this white background anymore since the updates. Some example pages: https://www.morga.ch/staging/?page_id=2 (compare to Live Site: https://www.morga.ch/ueber-uns/), https://www.morga.ch/staging/?page_id=7294 (compare to live site: https://www.morga.ch/ueber-uns/marken/). Also in “Tipps” page: https://www.morga.ch/staging/?page_id=6648. And “Tipps” Detail Page: https://www.morga.ch/staging/?x-portfolio=sommerzeit-ist-beerenzeit-fruchtaufstrich. Would you mind taking a look at this? I am really afraid of updating our live site now.

Is this normal that there are so many things need to be fixed after updates or what did I do wrong? What can I do or pay attention to in order to not have as many issues/bug fixes when updating our live site? When setting up the site I thought by using a child theme we should be on the safe side concerning future updates etc. But there are always so many things to fix. Is this normal? Or maybe we set up something incorrectly.?

Thank you.

Kind Regards,
lypa

#8

Hi Lypa,

Regarding this page https://www.morga.ch/staging/?page_id=6650

Sorry, Lely mentioned above to add back this custom CSS code.

.entry-wrap {
    display: block;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

But I think what she really means is to remove it. That is actually the code that removes the white background on the content wrapper. All that white background missing issue is connected to that CSS code You do not have that custom CSS on the live site, please remove that. I hope you only put that CSS code in one area (like in Theme Options > CSS) and not on each page CSS area, or else you need to go through each page and remove that CSS code.

It’s not normal, but this usually happens if your version gets behind and then you did major updates, should have update regularly (not only with Theme but with Wordpress and Plugins as well).

Yup, child theme saves your customizations, if you don’t have a child theme all those custom files you have in there have been lost when you update the theme. But child theme needs to follow the parent theme so if something has been moved to a different directory or has been refactored/rewrote on the parent theme and broke something on the child theme in the process, the customization on the child theme needs to be updated to adhere to those changes.

I would advise moving forward, to avoid customization even custom CSS as possible as you can. Unless you have an in-house developer. The Wordpress, the Theme, and the Plugins are flexible it should achieve all the standard things that you need.

Hope this shed some lights,
Cheers!

#9

Hi Friech

Thank you for helping.

Ok, removing this code made the white background appear again on the pages “Recipes” (https://www.morga.ch/staging/?page_id=6650) and “News” (https://www.morga.ch/staging/?page_id=3037). Which is how it should be :).

But this also made the white background appear on two pages that should NOT have a white entry box, and those are “Morga Products” (https://www.morga.ch/staging/?page_id=11336), and “Morga Activities” (https://www.morga.ch/staging/?page_id=11333). So how can we remove the white background just for these two pages? I tried to do this by selecting the page ID for Morga Products" (https://www.morga.ch/staging/?page_id=11336), like this:

#post-11336 > div.entry-wrap {
    display: block;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

Is this the correct way to do it? Would be great if you could give me feedback on this. Thank you.

And where do we know from that something has changed on the parent theme and what needs to be changed? Would be great if you could give me a quick statement on that. Thanks a lot.

Kind Regards,
lypa

#10

Hey lypa,

Your Morga Products page does not have a white background so your code is correct.

Apply the same to the Morga Activities page.

-----------------------------------------------------------------------------------

Regarding the changes in the parent theme, if you don’t have Git integrated in your site, it’s hard to know or see the changes. Often, you’ll only know when something breaks. You or a hired developer will then need to fix the template responsible for outputting the broken page.

What I said does not only apply to our themes. It applies to all functions in WordPress including popular plugins like WooCommerce. For example, if a theme uses a WordPress hook and at a certain point in time, WordPress developers decides to deprecate the hook, the theme developer needs to fix the theme. This process is the same for website owners who customize a theme or a plugin. Theme developers fix the theme and website owners fix the customizations.

-----------------------------------------------------------------------------------

I just want to add here that in the future, when the planned Layout Builder comes out, lesser customizations/custom coding would be needed as you can build your own single and archive layouts designs.

Hope that helps.

#11

Hi there Christian,

Thank you for your feedback regarding my code. I will apply it to the live site then as soon as we update that during the Christmas holidays (I use the staging site for testing the updates and the bug fixes related to these updates). We do not use the Pro Version of WP Staging yet for uploading the changes to the live site. I am not sure how flawless it works and am afraid of losing our WPML translations, for example. Do you have experience with WP Staging Pro and can you recommend sending the changes from staging to live site?

Also thank you for your descriptions about the WordPress Development Workflow, this helps me understanding things a little bit better and minimizes my frustration with bug fixing after updates a little bit :thumbsup:. And it also gives me some reasoning for my clients why updating the WordPress Site takes time and effort.

Would you mind recommending a resource on how to integrate Git into the site? I am interested in improving my coding/technical skills for WordPress (I’m coming more from the visual design and marketing side of things).

Can you already say something about how much effort it will be to re-design existing pages with this Layout Builder? And can it be used side by side with “classic” HTML/Shortcode-built WordPress Pages within the same website?

Thanks again for your valuable help and Kind Regards,
lypa

#12

Hi Lypa,

Please contact the WP Staging Pro support as we are not familiar with their migration process.

Please see the following tutorials:

How To Use Git for Web Development - Intro Git Tutorial
Git Tutorial for Beginners: Command-Line Fundamentals

Sorry, we can’t give concrete ideas about the planned Layout Builder yet, but for sure it is more efficient and more compatible than customization.

Regarding your custom CSS above, please update that to this, so it will be applied to “Morga Activities” page as well.

#post-11336 > div.entry-wrap,
#post-11333 > div.entry-wrap {
    display: block;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

Contact the developer who created the child theme and made the customization on your site, he/she should know which files have actual customization.

If you cant contact the developer, then do not copy any of the files in child theme’s framework > views folder, unless you’re sure that file had been modified like the _nav-primary.php on our other topic.

Cheers!

#14

Hi there Friech,

Thank you for your answers and help.

Cheers,
lypa

#15

You’re welcome!
We’re glad we were able to help you out.

#16

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