CSS Stylesheet linking wrong in Wordpress across entire site - html

Ok, I have a feeling I've really done it this time. I've developed a Wordpress site locally and then transferred it to my remote server. I did a search and replace on the database using the script.
Now, I go into my site on the remote server and the HTML is good, but the CSS stylesheet is not linking properly.
Here is how it appears when I view source:
<link rel="stylesheet" type="text/css" media="all" href="www.fairchildwebsolutions.com/jesusandg/wp-content/themes/Sky/style.css" />
Now when I click on the link in source, I am directed to this:
www.fairchildwebsolutions.com/jesusandg/www.fairchildwebsolutions.com/jesusandg/wp-content/themes/Sky/style.css
Obviously, one too many domain names in there, so the file cannot be found. My question now is, how do I go back and do a search and replace on this to remove the extra domain without messing things up even worse?

<link rel="stylesheet" type="text/css" media="all" href="http://www.fairchildwebsolutions.com/jesusandg/wp-content/themes/Sky/style.css" />
Without the http:// it thinks its a local link not direct.
Wordpress can also link to the stylesheet or theme directory:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Here is some more information on the function to call out the theme directory: http://codex.wordpress.org/Function_Reference/get_template_directory

when you add the stlyesheets in your functions.php try to stay away from using exact links and instead use the get_template_directory_uri (or something like that i can't remember the syntax exactly. it's referenced here Wordpress codex for template directory

Add http:// to the beginning of your style href. Alternatively, since it appears you are on the same domain, simply modify the href to be the following:
href="/jesusandg/wp-content/themes/Sky/style.css"
The former is an absolute path. The latter is an absolute path relative to your domain root.

Your stylesheet call is missing its http:// at the beginning of the href. This means the browser interprets it as a relative path not an absolute one and breaks the link.
What does your stylesheet call say (probably in header.php)? It should be something like:
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" />
The get_stylesheet_directory_uri() call returns the absolute path of the theme directory.
If it's not in header.php it's probably referenced in functions.php using the wp_enqueue_script() function. Same deal - use get_stylesheet_directory_uri() or one of the several template tags that do the same thing and make sure that is used to build the url to the stylesheet rather than defining it explicitly.

Related

The external style sheet is not working on my site

So i have like triple checked the code cant see the error. I even tried inspecting the page and it doesn't find the files. If you visit zoeaa.com you will see just html no styling. What am I doing wrong?
<head>
<meta name="descri
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/web/assets/mobirise-
icons/mobirise-icons.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/tether/tether.min.css">
<link rel="stylesheet"
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/bootstrap/css/bootstrap-
grid.min.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/bootstrap/css/bootstrap-
reboot.min.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/dropdown/css/style.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/theme/css/style.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/mobirise/css/mbr-
additional.css" type="text/css">
</head>
The path has to start from where this html page is, so for instance if this let's call it index.html is inside let's say "mainFolder", in order to work the "application" folder also has to be inside "mainFolder".
If it's not check via ftp the whole path from the css file to where the "index.html" is and that is the correct path (no need of the full url with the domain as mentioned above, that's not the issue).
You need to use absolute paths when referencing files.
Include the site name e.g. https://www.example.org/app/css/styles.css.
This is because if you go to a sub directory and you have your src setup like /app/css/styles.css the server will try to find your file on https://www.example.org/my-sub-dir/app/css/styles.css
Also a side note. bring all your files in together as your just causing more requests. HTTP works faster with larger files and less files to download.
Is it typo mistake or something? But I cant see closing tag > in meta. + When I opend the site you provided and checked the developer consoler , I found error.
It looks like your meta name might not be getting closed (missing the ">). That could definitely be interfering with things working properly. If you're sure the paths are correct that's the only thing I could see that might be an issue.
Hope that does it!

Configure Relative path in HTML when inside a folder

Currently i am doing a website admin redesign where i need to include some css and js files into the header, but i am confused how to do this,
admin path is
www.xxx.com/admin/
what i want to include is in the top level
www.xxx.com/css/style.css
I know i can use the full path but i dont want to hard code the full path like this
<link rel="stylesheet" href="http://www.xxx.com/css/colorbox.css" type="text/css" media="screen" />
So i am looking for a URL independent solution to use to include them.
may be ../../ but not sure this works though ? any idea ?
Start your URL with a slash and use the full path:
<link rel="stylesheet" href="/css/colorbox.css" type="text/css" media="screen" />
On Unix systems, "." is the current directory, and ".." is one directory up.
This means that for your problem, the correct path would be:
../css/style.css
or the whole line:
<link rel="stylesheet" href="../css/colorbox.css" type="text/css" media="screen" />
You just gave answear in Your question :)
For relative paths use ../ this will go one folder up. So for excample:
file placed in www.xxx.com/admin/ path used in this location: ../css/style.css in result path will be: www.xxx.com/css/style.css
One thing i'm not sure is if this method is used with full adress of a web will it be working properly.
I know that this (as i can see) is not a solution fo You but while i'm a PHP programmer i like to use full paths based on servers direct paths (using $_SERVER['DOCUMENT_ROOT']). This saves me a lot of time with paths while for example moving web from one server to another and from my experiaece i can tell that it is worth of implement in any project.
Link them like this
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />

Stylesheet link failure HTML/CSS

I've been working on a project with a HTML and an external CSS file. The link worked fine at school when i was doing it on adobe dreamweaver on a mac, but i sent both files home via dropbox, and the css doesnt seem to link with the html file. I believe i've got the file paths and everything right, but just to make sure:
<link rel="stylesheet" type="text/css" href="Desktop/Stylesheet.css" />
i also tried removing the "Desktop/" bit from the file directory, but it still didnt work. My Index file and Css file are both on my desktop. I am using windows. The same code worked at school, so i believe it might be something to do with with file location.
please help
Thanks in advance
This is how linking works,
Let's say your html file is in a folder named "xyz". Now when linking to css, the address is related to your html file's location. So if you mentioned
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
it would assume the css file is in the same folder as your html, while if you linked it as
<link rel="stylesheet" type="text/css" href="Desktop/Stylesheet.css" />
it would assume there is a folder named Desktop inside the folder xyz, and your css file is probably stored in Desktop.
Now im assuming you've simply placed both your html and css on your desktop directly, this is not good practice as you're probably going to move these files back to school as well. Hence I'd recommend you to place both in a folder and then link to your css with
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
and dont forget to pay attention to capitalization, yes html is non case sensitive but when it comes to linking external files, capitalization does matter.
Your directory structure should look as follows:
Root Directory
|
|-page.html
|-Desktop
|-StyleSheet.css
If it does not you need to modify your directory structure or change the href attribute on the link tag
If it is in the same directory simply set the path to href="Stylesheet.css"
The problem is with your file location .
If you are using Dreamweaver or any other code editor, simply browse to the path of the file to insert it in link href attribute, rather than manually entering the path .

base href causing this?

Hi I have a spip website that I need to get working on my localmachine.
I copied everything over and the site seems to be "working" with all the databases.
The problem is I think there is a base href set.
The stylesheet in the header was linked like this:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
and was not working as it was going to the root of the localhost instead of the website folder.
However changing the link to this (without the forward slash) works perfectly.
<link rel="stylesheet" type="text/css" href="css/style.css" />
The problem is I have tons of links on the site that are all acting like this. Is there anywhere I can look to see what is causing this? I can't find a base href set anywhere and the htaccess file seems to have no effect.
Resource URLs and link hrefs that begin with a slash (/) do not use the <base href="xyz"> value. They tell the browser to fetch the resource from the root of the host/domain path.
For example, if you have:
<base href="http://mysite.com/res/">
<!-- style sheet 1 -->
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<!-- style sheet 2 -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
style sheet 1 will attempt to fetch it from http://mysite.com/css/style.css regardless of the base href value, since its URL starts with a / indicating host document root.
style sheet 2 however will use the base href value and attempt to fetch it from http://mysite.com/res/css/style.css
Possible Solutions
Update your HTML/PHP/JSP etc. to remove the / prefix from all your style sheet urls, links, images etc. You should probably be able to find and replace this using a good editor like Notepad ++
Ugly way - Modify those URLs using some JS after your page loads. This has a problems that the user will likely see wrong/incomplete content before the JS completes execution.
URLs that start with / (absolute-path references) are useful only when the document is on an HTTP server or it has its base URL set (via the base tag) to refer to an absolute HTTP URL. If you try to use them in a local HTML document (without a base tag), the base URL used will be a file:// URL, so a URL like /foo/bar gets interpreted as file://foo/bar, which normally won’t work – you would need to have a foo/bar that constitutes the full path name of a resource in your computer’s file system.
So sites that should be downloadable for local use simply must not use URLs that start with /.

node.js express.js routes slash css

when i write localhost/profil the css works.
But when i write localhost/profil/ the css doesn't work.
app.use(express.static(__dirname+'/public'));
app.get('/profil',[checkCo],require('./routes/profil.js'));
Why?
thanks!
edit:
it's because it thinks that profil/ is a folder, so how can i get around this?
You likely need to use absolute paths within your HTML.
For example, instead of
<link rel="stylesheet" href="style.css">
you need to do
<link rel="stylesheet" href="/style.css">
In the first example, the browser tries to access style.css in the current directory the user is navigated to. So if the user is navigated to /profil/, it tries to load the css from /profil/style.css. In the second example, the browser is told to load the css from /style.css no matter what.