Site CSS/JS not working remotely

Viewing 15 replies - 1 through 15 (of 33 total)
1 2 3
  • bobnwp

    (@bobnwp)

    9 years, 10 months ago

    Why are using using Frames?

    bobnwp

    (@bobnwp)

    9 years, 10 months ago

    Digging just a big keeper —

    If you use the browser contextual menu (most people call it the right click menu) to display the source of “this frame” and look at references to CSS or JS files, for instance:

    http://broadtune.com.au/wordpress/wp-content/themes/twentysixteen/genericons/genericons.css?ver=3.4.1

    Find that reverence in the source of the frame and click on it. You’ll see what the browser sees – not CSS but HTML for a frameset.

    Again – Why Are You Using Frames?

    I don’t see any formatting that you are achieving with frames, so why are using using them?

    If you want the browser to read and use a css or js file, it must have a reference to that file, not to a page with a with a frameset where the css or js file is defined as the source of a frame.

    Here’s what the browser sees when it retreives what it expects to be the css file I referenced above:

    <html><frameset rows="100%,*" border="0"><frame name="__main" src="http://180.181.153.86/wordpress/wp-content/themes/twentysixteen/genericons/genericons.css?ver=3.4.1" noresize="" frameborder="0"><noframes><h2>This page requires frames.</h2><p>Click <a href="http://180.181.153.86/wordpress/wp-content/themes/twentysixteen/genericons/genericons.css?ver=3.4.1">here</a> to visit the destination.</p></noframes></frameset></html>

    It does not see a CSS file containing CSS rules, it sees an HTML file which defines a frameset and a frame.

    Click here to go to http://broadtune.com.au/wordpress/wp-content/themes/twentysixteen/genericons/genericons.css?ver=3.4.1

    Yes, you will see the CSS code BUT it is the source of the frame and the browser sees it as an HTML page not a css file containing rules.

    No wonder no formatting is occuring.

    Again – why are using using frames? What are you trying to accomplish?

    Bob

    bobnwp

    (@bobnwp)

    9 years, 10 months ago

    Looking more closely:

    You have the actual js and css files at http://180.181.153.86 and files – with the same paths and file names – at http://broadtune.com.au which are framesets with a frame whose source is the actual css or js file at http://180.181.153.86

    Is this a change you made while working on this problem when it first occurred? Is this an attempt to get the js and css to work?

    There is no way it is going to work like that.

    Ditch the frames and have the css and js file references pointed to the actual js and css files.

    Bob

    Thread Starter jasonbroadhurst

    (@jasonbroadhurst)

    9 years, 10 months ago

    Thanks for the help!

    Frames are not my decision, it’s just a stock template 2016 or a downloaded one.

    180.181.153.86 is my IP, broadtune.com.au is a masked forward to it.

    How do I ditch the frames?

    Thread Starter jasonbroadhurst

    (@jasonbroadhurst)

    9 years, 10 months ago

    FWIW, it is quite literally a wp-latest, unpacked to html/wordpress and setup as per some guides on the internet. No where did I select frames for formatting.

    It is potentially something I have done during the install, but unlikely because I have tried a bunch of different times from fresh versions and even fresh VM builds.

    Thanks again for the help.

    Thread Starter jasonbroadhurst

    (@jasonbroadhurst)

    9 years, 10 months ago

    Interestingly, it works OK when I have my server internal IP 192.168.1.50 specified in hosts file in windows!

    bobnwp

    (@bobnwp)

    9 years, 10 months ago

    Jason,

    I just downloaded the newest version of WP, 4.5.2, unzipped it and did a global search for the word frameset.

    Only three instances were found, in the files:

    \wp-includes\class-simplepie.php
    \wp-includes\SimplePie\Sanitize.php
    \wp-includes\ID3\readme.txt

    The first two are in code which is sanitizing user input by removing forbidden tags – frameset is one that is being removed.

    The last one is a reference in the readme file to a file (http://developer.apple.com/techpubs/quicktime/qtdevdocs/RM/frameset.htm) that does not exist.

    You said that the frameset and frame tags were in the theme in the copy of WP you downloaded??

    From where did you download it and what is the name of the the theme? You said it was 2016, is that it or was it twentysixteen.

    Not being able to look at your local system I can’t tell you if it is set up the same or why it might be working if it does use the same frameset/frame structure.

    I can only tell you that no browser is going to process your css and js when the file the browser is “pointed to” is does not contain the css or js code but is, instead, a file with HTML creating a frameset and a frame whose source is the css or js – it just won’t work.

    I’ve installed many blogs with WP and have never encountered any frames “out of the box”

    Are you sure that the frames aren’t coming from MAMP, somehow?

    I’ve got to run some errands – it is 1700 here (USA, CDT) I’ll post another comment when I get back with ways to get rid of the frames.

    In the mean time, it would help if you could isolate a copy of the blog so that changes we make will only affect that copy and no others you have installed.

    Bob

    Moderator bcworkz

    (@bcworkz)

    9 years, 9 months ago

    Your site uses the twentysixteen theme, which does not use frames. LAMP on Ubuntu desktop definitely does not use frames, I doubt Ubuntu server would be different. That leaves either VirtualBox or the Win10 host wrapping output in frames. I’m guessing VirtualBox, but I have no direct experience on which to base this.

    You will always have performance issues running a VM. I’d suggest you drop the VM and Ubuntu and install WAMPP directly on the Win10 box. That will definitely result in no frames with WordPress.

    Note that LAMP and WAMPP are not meant to be production servers, they are intended for local development. For a production site you should go with a commercial host.

    bobnwp

    (@bobnwp)

    9 years, 9 months ago

    Okay, bcworkz, what should he do to resolve the problem?

    I mean, what are the detailed steps he should take to resolve the issue?

    Thread Starter jasonbroadhurst

    (@jasonbroadhurst)

    9 years, 9 months ago

    Thanks for the help guys! Very thorough.

    Could it be the router?

    Moderator bcworkz

    (@bcworkz)

    9 years, 9 months ago

    I suppose the router could be the culprit, but I’m skeptical. I’m still thinking VirtualBox, despite the lack of hard evidence either way.

    It wouldn’t be too hard rule out VirtualBox. Installing WAMPP on the Win10 box is quite straight forward. Download WAMPP (aka XAMPP for Windows) from apachefriends.org and run the installer. You don’t need to copy the existing site over, you don’t even need WordPress, though as you know, installing WP is super easy. Then the comparison will be even more valid.

    Request something, perhaps the hello-world post, on the new server from another machine. Check the page’s source. If it’s frame HTML, then the router is the likely culprit (or the Win10 box, which is unlikely IMO). VirtualBox is off the hook. If the request yields the page’s HTML without a frame, then VirtualBox is the likely culprit, though more testing is required to definitely implicate it.

    Poke around the new WP’s backend remotely. I think you’ll notice a real speed improvement. You can then decide if you want to move the actual site to WAMPP or uninstall WAMPP.

    Thread Starter jasonbroadhurst

    (@jasonbroadhurst)

    9 years, 9 months ago

    OK so it is hosted on my windows 10 machine with XAMPP like mentioned. Vanilla wordpress installed also.

    Port is forwarded to my machine now too.

    It is behaving the same from what I can see. I had already done this test with another windows 8.1 machine previously with the same result.

    phpinfo() and stock apache pages work fine on all servers FWIW.

    Router is a mikrotik, which are i guess a prosumer level device. Certainly above a standard dlink or belkin.

    Thanks again for looking so deep in to this for me!

    bobnwp

    (@bobnwp)

    9 years, 9 months ago

    Jason,

    I dug a bit more into the page as it is now delivered and it looks like the issue has change a bit, not sure but:

    I see the theme’s css file being referenced as http://192.168.1.100/wp-content/themes/xylus/style.css?ver=1.5

    Was that like that earlier?

    Regardless, it is not accessible – I get connection timeouts regardless of how I go after it – clicking the entry in the page source (the source of the frame content) or copying the URL from the source and pasting it into the address bar of a new tab.

    Why is that referencing a file at that IP, 192.168.1.100, when it should be references to files at http://broadtune.com.au/

    I loaded http://180.181.153.86/ directly into my browser – that is the URL of the source of the frame on the page at http://broadtune.com.au/ – and looked at all of the links (hovered my cursor over them) and, except the one to wordpress.org, all of URLs contain the IP address: 192.168.1.100

    Things are really screwed up.
    ————————————-
    I think you need to backup and punt.

    Install Duplicator on your local WP – the one that works.

    Use it to create a Package and “download” the package files to somewhere on your computer.

    Save the entire contents of your “online” WP installation and empty the directory.

    Put the Package files in the directory where you want WP to run on the “online” site and then got to installer.php

    If you don’t fully understand the input it requests, ask me before you proceed, it can be a tad confusing the first time you use it.

    [ Really, really discouraged and redacted ]

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    9 years, 9 months ago

    Side note:

    Hi @bobnwp How are you? Do me a favor and do not ask people to contact you away from these forums. Really, don’t. That’s something that is very much discouraged here.

    Doubly so: don’t ask for a backup of someone’s site like that again.

    @jasonbroadhurst Please don’t email anyone your backup that way, it is not safe to do that.

    *Looks*

    There is a lot of badness going on at http://broadtune.com.au/wordpress and I’ll make a list. It may be redundant but I’m trying to be complete.

    1. Your site is in an iframe. The real site is over here.
      http://180.181.153.86/wordpress

      Which isn’t the end of the world but it does complicate things.

    2. As Bob indicated your SiteURL and WordPress Address are set to http://192.168.1.100 and that won’t work. More on that later.
    3. The iframe URL and your site are not on the same directory base. Messy, it would be more consistent and easier if your site were http://192.168.1.100/wordpress to keep it straight forward.

    The 192.168.1.100 will work but only for you at your local home network. Try these two steps.

    Make a copy of wp-config.php first, in fact make a backup copy of the whole works and store that somewhere safe.

    In your wp-config.php file add these two lines. 

    define('WP_HOME','http://180.181.153.86/wordpress');
define('WP_SITEURL','http://180.181.153.86/wordpress');

    And on your real server where your WordPress installation is in that directory create a new /wordpress directory. Them move the whole kit and kaboodle into that new /wordpress directory. This is on your 192.168.1.100 server.

    Let’s see how that goes before you do anything else. That’s a temporary step but if it works then you’re on the way to fixing it.

    bobnwp

    (@bobnwp)

    9 years, 9 months ago

    Jason – you skip my remakrs to Jan and scroll down towards the bottom and look for a long dashed line – my comments to you start there. Or read the everything, your choice.

    [unnecessarily long-winded personal remarks removed]

    Jason

    If you are still there and reading my replies ————

    Go to your theme’s directory and search for frameset and see if you can find any instances in any of the files in any of the directories.

    A good Windows program for such searching is Agent RanSack – don’t let the name scare you, it is cute playoff on the idea of someone search a house for something and “ransacking” it. Agent Ransack does nothing but search for files by name or partial name and it also can look in side files for strings you specify (and you can use regular expressions in the searching).

    Go to https://www.mythicsoft.com/agentransack/download and click the big blue download button.

    Save it to a directory (I have a Download directory under my Windows User and I make sub directories in it for things I download. For Ransack I would make the subdirectory: Agent Ransack

    Run a virus scan on the downloaded file with whatever virus scanners you have installed (you do have at least one – right? and you keep them up-to-date – right) just to be on the safe side.

    Then install it.

    Start it up and then click the button that looks like a single file folder near the end of the line, on the right, that begins with “Look in” and navigate to your theme’s directory – the directory itself, not any file in it.

    Then type:
    frameset
    in the box on the line that begins with “Containing text:” that is right above the “Look in:” line.

    Press enter and it will look in all files in the theme’s directory and subdirectories for the text: frames.

    Any files containing the “frameset” will be listed. You can right click and chose a program, say NotePad, to open them with and look at the contents.

    Let me know if you find anything. If you want, search the entire WP directory – all of the files and directories in the WP director to see if there is anything at all there.

    BUT I suggest you go buy a hosting plan and use Duplicator to move the WP site to a hosting company’s server.

    Bob

Viewing 15 replies - 1 through 15 (of 33 total)
1 2 3

The topic ‘Site CSS/JS not working remotely’ is closed to new replies.