3

Background

I have a situation that's been driving me up the wall. After many hours (more than I'd like to admit), I've been unable to solve it. So I am thinking there must be a better way to go about it. There's obviously something I am overlooking.

I have replicated a WordPress website from a live domain to a staging domain.

A previous developer made a lot of significant customisations to to the site, and hacked them into the theme files. It's a professional theme, with regular updates (which he disabled), so I have no idea why that was the approach taken. But that's an aside. The owner wants to be able to update the theme. My proposed solution was to to identify and migrate all the custom code and files over to a child theme.

The Issue

For some reason the home page of the site loads differently on the live site from the staging copy. It's a styling issue. There is a form that seems to be utilising different CSS on each site. I don't understand why, and have been unable to figure it out. It also affects the main menu/header.

What I have tried

I've been using Firebug and Chrome developer tools to go through the rendered HTML and the CSS in great detail. I have been using BBEDIT to do a full site searches (with an offline copy of the all the files) for relevant CSS selectors, etc., in order to try and pinpoint where the problematic CSS properties are coming from on the live and staging site. I've also run searches in a dump of the database.

Despite all my efforts, I've been unable to figure out how and from where the faulty CSS is coming from.

As a workaround solution, I started adding new CSS definitions, with !important, to simply force the staging site to have the correct property attributes. But then I discovered that on the live site the form is responsive, and on the staging site it is not. So, rather than going down the road of attempting to figure out why it's not responsive, and fixing the, I am back to trying to figure out how and why they are rendering completely differently on each domain.

Questions

1) How would you recommend going about identifying the source of CSS being applied to a rendered page? (taking into account I've already looked through it with Firebug and Chrome Developer Tools)

2) Is there someone here that would be willing to take a look at the sites for me, and show me what I am overlooking? I realise it would be more useful to future viewers if I posted specific code here, but WordPress being how it is that's not really an option. I can't replicate the overall issue in a fiddle, or on here.

3) (New question) Is there a list, or would someone tell me, the order of priority WordPress gives to style declaration sources?

I know that style.css in child theme gets priority over style.css in parent theme. But what about styles declared in the functions.php file, and other style sheets that JS or functions.php call in? It seems that even with the !important attribute (child theme) style.css doesn't take priority over declarations in functions.php.

Is it advisable to move style declarations in the (child theme) functions.php over to the style.css file? (for the sake of organisation and ease of future modifications). Or is this considered a bad move as it will mean there are many more style declarations being parsed from style.css unnecessarily (i.e. they will be parsed even when not required, if the relevant function is not being called)?

Snapshots of the issue

The header and a form on the live site: snapshot of form and header on live site

The same header and form on staging site: staging site

In case someone is willing to assist by taking a look at the site directly, the live site is at:

~REMOVED (for privacy)~

and the staging site is at:

~REMOVED (for privacy)~

I would like to actually know how to go about solving this issue, so if you take a look at the site and respond with an answer, please let me know how you figured it out; or how I could go about figuring it out. Thanks.

  • 4
    +1 for a well written, informative question. This is an excellent question. The only problem though is it's not technically WordPress related, which makes it off-topic here... it's about CSS. Still, I'm not inclined to flag it as such because it's much better written and explained than many on-topic questions! – Tim Malone Jun 29 '16 at 0:30
  • I had the same problem in a migrated site, try to activate another theme and then back to the original and try again, this works for me in this exactly case. – Mariano Montañez Ureta Jun 29 '16 at 4:23
  • @TimMalone: Thanks Tim. It's been tricky knowing where to post such a question. Technically, and strictly speaking, it is CSS related. And yet, the way I see it, it's specifically CSS within the context of WordPress. It's not really possible to formulate it as a purely CSS question, as I can't simply extract some CSS and reproduce the issue outside of the context of the WP site in which the issue occurs. The CSS issue being faced is arising specifically in the framework of WP... WP theme handling, functions.php handling, child theme handling, etc. So, hopefully it passes as WP related. :-) – omega33 Jun 29 '16 at 12:37
1

There are many differences in css files of both websites. For example, have a look at the div having class et-top-navigation by inspecting it in browser.

You will find that in staging website, there is top padding and left padding applied while it is not in case of live website.

Similarly check for other css changes in staging website or simply take backup of all css files in staging website and place those files from live website.

I hope this will resolve your problem.

  • Hi Mohit. Thanks for the input. I agree that there are significant differences in the CSS on each version of the site. What has me perplexed is how it ends up that way? The source CSS files (there are quite a few) are in theory all the same, since one site is a full copy of the other site. My guess, is that in moving the theme customisations over to a child theme, something has changed with the order in which CSS is being loaded, and/or the priority that is given to the CSS from various files. And that this might be resulting in different final CSS on the browser. But I am not sure. Any ideas? – omega33 Jun 29 '16 at 14:59
  • Also, I had disabled the search "slider" on the dev site (...lukadian...) before you looked at the site. It's enabled again. If you care to look again and let me know any other significant discoveries, please do. Although, as mentioned, it's more a questions of HOW the css differs between sites, than WHAT css differs. Cheers. – omega33 Jun 29 '16 at 15:01
0

I can't look at the sites now that the links are removed and don't know how you've gone about moving things to the child theme but if you think that it's a problem with the order in which stylesheets are loaded, I would have a look at any add_action() calls that invoke wp_enqueue_style(). A sometimes used 3rd argument can be passed to add_action() that designates a priority for the callback, it's possible that some add_action() from the parent theme is coming after your child theme's add_action().

WP add_action() docs

Stylesheets that need to override others should be enqueued last.

0

I don't know if my experience could be helpful but in my case the custom template has its own setting page in Wordpress Theme admin area (not the wordpress built in theme setting page, I'm referring to the setting page of that template).

My staging version is "css different" until I import (or manually insert) the settings of that template. I can't understand why DB and FTP cloning (with obviously full domain replacements) aren't enough ;) But I can manually fix the missing settings this way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.