I'am new in wordpress theme development. Now i have some problem with ordering some css.
My wordpress generate head tags like this
<head>
...
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/muarif/style.css">
...
<link rel="stylesheet" id="normalize-css" href="http://localhost/wordpress/wp-content/themes/muarif/inc/css/normalize.css?ver=4.1.1" type="text/css" media="all">
<link rel="stylesheet" id="bootstrap-css" href="http://localhost/wordpress/wp-content/themes/muarif/inc/css/bootstrap.css?ver=4.1.1" type="text/css" media="all">
...
</head>
*edit for wp_enqueue_style
function site_script(){
wp_enqueue_style('normalize',get_template_directory_uri().'/inc/css/normalize.css');
wp_enqueue_style('bootstrap',get_template_directory_uri().'/inc/css/bootstrap.css');
//jquery script
wp_register_script('jquery',get_template_directory_uri().'/inc/js/jquery.js');
wp_enqueue_script('jquery');
//angular script
wp_register_script('angular',get_template_directory_uri().'/inc/js/angular.js');
wp_enqueue_script('angular');
//bootstrap script
wp_register_script('bootstrap',get_template_directory_uri().'/inc/js/bootstrap.min.js',array('jquery'));
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts','site_script');
Style.css is load automatically if it exist in theme. Now i want to put style.css below than other css and put normalize.css on top for overriding on each stylesheet. I use wp_enqueue_style and fill $deps parameter. But it dont make anything happen.
Any advice?
Can you try this code instead of yours in the question. Also search and remove any other wp_enqueue_style, I think the default one is being loading somewhere else before. Also check if it's hardcoded in header.php
function site_script(){
wp_enqueue_style('normalize',get_template_directory_uri().'/inc/css/normalize.css');
wp_enqueue_style('bootstrap',get_template_directory_uri().'/inc/css/bootstrap.css');
wp_enqueue_style('theme_name',get_template_directory_uri().'/style.css');
//jquery script
wp_register_script('jquery',get_template_directory_uri().'/inc/js/jquery.js');
wp_enqueue_script('jquery');
//angular script
wp_register_script('angular',get_template_directory_uri().'/inc/js/angular.js');
wp_enqueue_script('angular');
//bootstrap script
wp_register_script('bootstrap',get_template_directory_uri().'/inc/js/bootstrap.min.js',array('jquery'));
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts','site_script');
You might also need to update the jQuery part like this:
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery',get_template_directory_uri().'/inc/js/jquery.js');
wp_enqueue_script('jquery');
}
FYI: http://codex.wordpress.org/Function_Reference/wp_register_script
Related
I need some help here.. I tried different links but it does not load the CSS file..
<link rel="stylesheet" type="text/css"
href="https://github.com/cengizkirazjs.github.io/cengizkiraz.github.io/styles.css">
This is the page and the outcome: https://cengizkirazjs.github.io/cengizkiraz.github.io/
Any advice? Its my first time linking CSS with HTML on Github!
As it was said in the comments, what do you think about changing file path a bit?
In your code we have this line
<link rel="stylesheet" type="text/css" href="cengizkiraz.github.io/styles.css">
It contains an absolute path. If you want to stick to this method, maybe just add a protocol, like this
<link rel="stylesheet" type="text/css" href="https://cengizkiraz.github.io/styles.css">
But it would be better if you use relative paths
In this case, our <link> will look like this
<link rel="stylesheet" type="text/css" href="styles.css">
It means that HTML will search for this file in folder, where .html file is saved. Looks slightly better, doesn't it?
I created the CSS folder and named it. I added this to my header in HTML but the changes aren’t happening.
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css" />
You mentioned you've created a CSS folder. Then include that folder name in the href
<link rel="stylesheet" type="text/css" href="CSS_FOLDER_NAME/haiku-styles-shaun.css" />
Probably your CSS file isn't in the same directory as your HTML file, you provided the wrong name of your CSS file (also check that your CSS file's extension is .css). Solve these and try again.
You have to include each file you need separately.
e.g.:
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myButton.css" />
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myPhoto.css" />
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myFooter.css" />
Most user don't need all their style definition at the same time. To save bandwidth you have to choose.
You said that you created a folder but you didn't write it on the path. Try adding the css folder before the file name like this:
<link ref="stylesheet" type="text/css" href="folder/file.css" />
Furthermore I suggest you to include versioning in your css to avoid browser caching when you refresh. To do that every time you update your css change the number at the end in the link:
<link ref="stylesheet" type="text/css" href="folder/file.css?v=1" />
The <link> tag is used to link to external style sheets. You have to use something like this :
<link rel="stylesheet" type="text/css" href="Folder-Name/Stylesheet-Name.css">
Make sure that your href address is setup properly otherwise it won't load in your HTML page .
Note: The element is an empty element, it contains attributes only.
Note: This element goes only in the head section, but it can appear any number of times.
In HTML the <link> tag has no end tag. In XHTML the tag
must be properly closed.
I'm working on a project using arduino, node.js and socket.io. I am running it in localhost, however my external stylesheet wont load.
The error seems to be saying it cant get my css from this path http://localhost:1337/css/main.css
However if i keep the css in a style tag in the html file it all works fine, is there a way to keep the css external so it doesnt clutter my html file?
Heres how im loading in my css
<link rel="stylesheet" type="text/css" href="css/main.css">
Here is how my file structure looks
Here is my main.css file inside the css folder
my main.css file is within the css folder, i am working off of the interface.html file
Try this instead:
<link rel="stylesheet" type="text/css" href="./css/main.css">
notice the ./ in front of the href
otherwise include full path name:
<link rel="stylesheet" type="text/css" href="http://localhost:1337/css/main.css">
this is what i have tried and it is working for me
<link href="./main.css" rel="stylesheet" type="text/css" />
thanks
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
app.use(express.static(__dirname));
Then you can include like bellow
<html>
<link rel="stylesheet" href="/css/style.css">
</html>
The relative path kicks off from your html path so
<link rel="stylesheet" type="text/css" href="main.css">
should work (as your main.css is outside of the css folder). Alternatively, you could put the main.css file on the css folder and reference it with "css/main.css"
I was facing same problem as you are facing but i tired below code and it works.
body{
background-color: yellow;
}
h1{
color: red;
}
p{
color:green;
}
<html>
<head>
<link href="./external.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is my First page to test CSS</h1>
<p>The main motive to making this html file is to test my CSS skill.....</p>
</body>
</html>
Thanks,
hope it will help you......
I'm also facing this problem... But I found a solution and its working. Try the below code line:-
<link rel="stylesheet" type="text/css" href="css/main.css?v=<?php echo time(); ?>" />
For anyone else that's having this problem, I was having the same problem and found a solution. My localhost was apparently following a path to a cached CSS stylesheet file, even though it had been overwritten countless times.
Solution: Rather than opening the stylesheet directly from the folder to edit, I had to manually open it from my text editor dropdown menu. After hours of frustration, it was that simple. I use Sublime Text, if it makes any difference, but it seems to be a problem with the localhost, and I suspect clearing the cache would have had the same result.
I have linked the w3.css stylesheet in my html (as suggested at w3schools) to utilize their responsive template but it doesn't appear to be working. I have linked it as such within the head tag of my html:
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
Am I missing something?
Make sure your CSS code is in your .css file, and your HTML and CSS files are in the same directory if you are using <link href="File.css" rel="stylesheet"> and not writing the directory.
Also, don't forget to put your link tags between opening and closing head tags.
It should look like the example I posted below.
If it's still not loading then it would to do with the location of your stylesheets(css).
Example - href="path/to/stylesheet"
The path would start from the current directory your HTML is in... so if you had index.html in the root directory and your css files a sub-directory then the example would look like this.
Example - href="css/w3.css"
Example - href="css/w3-theme-brown.css"
//HTML
<head>
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
</head>
I know I can include CSS on my page like this:
<style>
.style{
..
}
</style>
How do I add an external stylesheet file in an HTML page?
In your HEAD, add:
<link rel="stylesheet" type="text/css" href="your_css_file.css">
the css file itself does not contain <style> tags.
The simplest way to do so is to add a stylesheet link to your document HEAD section:
<link rel="stylesheet" href="style.css" type="text/css">
Doing so will reduce the performance on the first load (since the system must request two files instead of one) but improve subsequent performance because the style sheet remains in cache for a while.
From StackOverflow's page:
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5885" type="text/css">
I don't think it will improve speed much unless the same CSS file is shared across multiple webpages in your website (so the browser can cache it). Otherwise there's the penalty of creating an extra HTTP connection to retrieve the CSS.
Add the following line in the head of your html file
<link rel="stylesheet" type="text/css" href="path/to/your/style.css">
Then you can add styles in style.css like,
.classname{
...
}
And there is also inline style sheet, you can add it in the html line itself, for example
<a style="color:red;" href="#"></a>
You need to add this tag in the header section of your html file
<HEAD>
<link rel="stylesheet" type="text/css" href="giveThePathToYourStyle.css">
</HEAD>